> For the complete documentation index, see [llms.txt](https://gyrinx.gitbook.io/gyrinx/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gyrinx.gitbook.io/gyrinx/technical-reference/icon-usage.md).

# Icon Usage

This document describes the Bootstrap Icons (v1.x) used throughout the application. Icons are consistently used across the UI to provide visual context and improve usability.

## Nouns (Objects/Concepts)

| Concept                | Icon                      | Usage Context                                         |
| ---------------------- | ------------------------- | ----------------------------------------------------- |
| **User/Owner/Fighter** | `bi-person`               | User profiles, owner attribution, individual fighters |
| **List/Gang**          | `bi-list-ul`              | Lists of gangs, gang counts                           |
| **Campaign**           | `bi-award`                | Campaign associations, active campaigns               |
| **Credits/Cost**       | `bi-coin`                 | Currency values, costs, budgets                       |
| **Public Visibility**  | `bi-eye`                  | Public/visible content                                |
| **Private Visibility** | `bi-eye-slash`            | Private/hidden content                                |
| **Information**        | `bi-info-circle`          | Info messages, help text                              |
| **Warning**            | `bi-exclamation-triangle` | Warnings, alerts                                      |
| **Error**              | `bi-x-circle`             | Error states                                          |
| **Document/Notes**     | `bi-file-text`            | Documents, narrative, notes                           |
| **Battle/Combat**      | `bi-crosshair`            | Combat, targeting                                     |
| **Victory**            | `bi-trophy-fill`          | Winners, victories                                    |
| **Death**              | `bi-heartbreak`           | Dead fighters                                         |
| **Captured**           | `bi-person-lock`          | Captured fighters                                     |
| **Time/History**       | `bi-clock`                | Time-based info                                       |
| **Calendar**           | `bi-calendar`             | Date information                                      |
| **Assets**             | `bi-box-seam`             | Campaign assets                                       |
| **Dice/Random**        | `bi-dice-6`               | Dice rolls, randomization                             |
| **More Options**       | `bi-three-dots-vertical`  | Dropdown menus                                        |

## Actions (Verbs)

| Action             | Icon                   | Usage Context                    |
| ------------------ | ---------------------- | -------------------------------- |
| **Add/Create**     | `bi-plus-circle`       | Primary add actions (buttons)    |
| **Edit/Modify**    | `bi-pencil`            | Edit buttons and actions         |
| **Save**           | `bi-check-circle`      | Save confirmations               |
| **Delete/Remove**  | `bi-trash`             | Delete actions                   |
| **Archive**        | `bi-archive`           | Archive/unarchive actions        |
| **Transfer**       | `bi-arrow-left-right`  | Transfer between entities        |
| **Back**           | `bi-chevron-left`      | Back navigation                  |
| **Forward**        | `bi-chevron-right`     | Forward navigation, detail links |
| **Refresh/Reload** | `bi-arrow-clockwise`   | Refresh, reopen actions          |
| **Search**         | `bi-search`            | Search functionality             |
| **Filter**         | `bi-funnel`            | Filter options                   |
| **Print**          | `bi-printer`           | Print functionality              |
| **Clone/Copy**     | `bi-copy`              | Clone/duplicate actions          |
| **Start**          | `bi-play-circle`       | Start campaign                   |
| **Stop/End**       | `bi-stop-circle`       | End campaign                     |
| **Increment**      | `bi-plus`              | Increase values (inline)         |
| **Decrement**      | `bi-dash`              | Decrease values (inline)         |
| **Return**         | `bi-arrow-return-left` | Return to previous state         |
| **Flag/Mark**      | `bi-flag`              | Mark or flag items               |
| **Add Fighter**    | `bi-person-add`        | Add fighter specifically         |
| **Approve**        | `bi-person-check`      | User approval                    |

## Usage Guidelines

1. **Consistency**: Always use the same icon for the same concept throughout the application
2. **Context**: Icons often appear with text labels for clarity
3. **Size**: Most icons use default size, with `btn-sm` buttons using appropriately sized icons
4. **Color**: Icons inherit text color from their parent element
5. **Tooltips**: Icons without text labels should have tooltips explaining their function
6. **Accessibility**: Icons are decorative; functionality should not depend solely on icon recognition

## Common Patterns

### Action Buttons

* Primary actions: Icon + text label (e.g., `<i class="bi-plus-circle"></i> Add Fighter`)
* Secondary actions: Icon only with tooltip (e.g., `<i class="bi-pencil"></i>`)
* Danger actions: Red colored with appropriate icon (e.g., `<i class="bi-trash"></i>`)

### Status Indicators

* Visibility: `bi-eye` (public) vs `bi-eye-slash` (private)
* State: Badges with icons for captured, dead, archived states

### Navigation

* Back links: `bi-chevron-left` or `bi-arrow-left`
* Detail/forward: `bi-chevron-right`
* Dropdowns: `bi-three-dots-vertical`

### Data Display

* Counts: Icon + number (e.g., `<i class="bi-person"></i> 5 fighters`)
* Currency: `<i class="bi-coin"></i> 100¢`
* Ownership: `<i class="bi-person"></i> username`


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://gyrinx.gitbook.io/gyrinx/technical-reference/icon-usage.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.