# 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               |
| **Embed**          | `bi-person-bounding-box` | Embed functionality              |
| **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: 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:

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

The question should be specific, self-contained, and written in natural language.
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.