# Icons

> Subpath: `arrow-react-bootstrap/icons` · 670 components, 14 categories

Arrow ships every icon as its own tree-shakable React component. All icons share the same `IconProps` API — there is no single `<Icon name="…" />` lookup component; instead, import the named export.

## When to use
- Pass an icon to any `ReactNode` prop on a component (`leadingIcon`, `trailingIcon`, `closeIcon`, `icon` on `IconButton`, leading decoration on list rows).
- Stand-alone visual cues paired with text labels (decorative).
- Stand-alone interactive icons via `IconButton` (always with `ariaLabel`).

## When NOT to use
- As the only meaningful element of an interactive control without an accessible name — wrap in `IconButton` with `ariaLabel`.
- For brand logos other than Arrow/T-Mobile — use real assets, not the icon set.
- For status/feedback that should auto-render an icon (NoticeBar `caution`/`error`/`positive`) — let the component supply its own.

## Importing

```tsx
// Subpath barrel — recommended for tree-shaking
import { IconChevronRightOutlined, IconCheckCircleFilled } from 'arrow-react-bootstrap/icons';

// Per-icon path (also works)
import { IconChevronRightOutlined } from 'arrow-react-bootstrap/icons/IconChevronRightOutlined';
```

Naming: kebab-case slug → `Icon` + PascalCase. `chevron-right-outlined` → `IconChevronRightOutlined`. See `icon-discovery.md` for the full catalog and `ICON_CATEGORIES` / `ICON_INDEX` runtime helpers.

## Props (`IconProps`)

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `size` | `number \| string` | `24` | Sets `width` and `height`. Accepts any CSS length (`16`, `'1.5em'`, `'2rem'`). |
| `title` | `string` | — | Accessible label rendered as `<title>`. When set, icon becomes `role="img"` and is announced. When omitted, icon is `aria-hidden`. |
| `className` | `string` | — | Forwarded to the `<svg>` (use Arrow color utilities like `tdds:color-brand-primary-400`). |
| ...rest | `SVGProps<SVGSVGElement>` | — | All standard SVG props — `style`, `onClick`, etc. `ref` is forwarded to the `<svg>`. |

## Usage examples

```tsx
import { Button, IconButton } from 'arrow-react-bootstrap';
import {
  IconArrowRightOutlined,
  IconCloseOutlined,
  IconCheckCircleFilled,
} from 'arrow-react-bootstrap/icons';

// Decorative — paired with a text label, hidden from AT
<Button trailingIcon={<IconArrowRightOutlined />}>Continue</Button>

// Standalone — IconButton requires its own ariaLabel
<IconButton ariaLabel="Close" icon={<IconCloseOutlined />} />

// Inline with text, scaled to font-size
<p>
  <IconCheckCircleFilled size="1em" title="Verified" /> Account verified
</p>
```

## Composition
- Inside `Button` / `IconButton` / `ListItemNavigation` / `Tabs` / `MenuButton`: pass to the matching `icon`/`leadingIcon`/`trailingIcon` prop.
- Inside text: wrap in `<span className="tdds:color-…">` to drive color via `currentColor`.
- For inverse-aware coloring, rely on `ArrowThemeProvider` — color tokens flip automatically.

## Accessibility
- Decorative by default: when `title` is omitted, the SVG renders `aria-hidden="true"`.
- Meaningful icons: pass `title="…"` for an in-SVG `<title>` or rely on the host component's a11y prop (`IconButton ariaLabel`, `ListItemNavigation leadingDecorationA11yLabel`).
- Never duplicate the label: if the host already labels the icon, leave `title` unset.

## Do / Don't
- Do: import only the icons you use — every other icon tree-shakes away.
- Do: scale with `size` (or CSS) and color via `currentColor`/utility classes.
- Do: provide an accessible name when the icon is the only meaningful content.
- Don't: hand-write SVG paths or use raw `<svg>` — every Arrow icon is exported.
- Don't: hardcode `fill="#hex"` — it breaks inverse mode and brand switching.
- Don't: rename the components — the auto-generated names are the public API.
