# Icon Discovery

Arrow ships **670 icons across 14 categories** as named React components from `arrow-react-bootstrap/icons`. Each is a small forwardRef'd SVG component with a shared `IconProps` API.

## Categories and counts

| Category | Count |
|----------|------:|
| `basic` | 302 |
| `miscellaneous` | 92 |
| `devices` | 59 |
| `syncup-kids` | 41 |
| `syncup-drive` | 40 |
| `payment` | 34 |
| `high-speed-internet` | 33 |
| `navigation` | 20 |
| `language` | 17 |
| `validation` | 10 |
| `billing` | 8 |
| `security-threats` | 7 |
| `social` | 6 |
| `logo` | 1 |

## Naming convention

Source slug → React component name:
- kebab-case slug + `Icon` prefix → PascalCase
- `ac-plug-filled` → `IconAcPlugFilled`
- `account-group-add-outlined` → `IconAccountGroupAddOutlined`
- `chevron-right-outlined` → `IconChevronRightOutlined`

Most concepts ship `-filled` and `-outlined` variants — match the variant the design uses.

## Importing icons

```tsx
import { IconChevronRightOutlined, IconCheckCircleFilled } from 'arrow-react-bootstrap/icons';
```

Tree-shakable — only imported icons end up in the bundle. Subpath imports also work for explicit per-icon requests:

```tsx
import { IconChevronRightOutlined } from 'arrow-react-bootstrap/icons/IconChevronRightOutlined';
```

## Looking up an icon by slug

For dynamic discovery (filter UIs, code-gen, etc.) use the `ICON_CATEGORIES` and `ICON_INDEX` exports:

```tsx
import { ICON_CATEGORIES, ICON_INDEX } from 'arrow-react-bootstrap/icons';

ICON_CATEGORIES['payment'];           // string[] of payment icon slugs
ICON_INDEX['ac-plug-filled'];         // { component: 'IconAcPlugFilled', category: 'basic' }
```

## How to pass an icon to a component

Components that accept icons (`Button`, `IconButton`, `TextField` trailing decoration, `ListItem` leading decoration, etc.) take a `ReactNode`. Pass the icon component as JSX:

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

<Button variant="primary" trailingIcon={<IconArrowRightOutlined />}>
  Continue
</Button>
```

## Verification checklist before referencing an icon

1. Confirm the slug exists in one of the 14 categories above.
2. Match the design's filled vs outlined variant.
3. Use the React import — do **not** hand-write SVG paths.
4. Color inherits from `currentColor`; size defaults to 24. Override via `size` and CSS `color` (Arrow utility classes like `tdds:color-brand-primary-400`).
5. For decorative icons (paired with text labels), do nothing — they are `aria-hidden` by default. For standalone icons, pass `title="…"` to expose an accessible name.
