# Icons (Foundation)

Icons are a foundation token in Arrow: a fixed-size, color-inheriting SVG system. The package ships 670 React components from `arrow-react-bootstrap/icons`, all sharing the `IconProps` API.

## Specs

| Spec | Value |
|------|-------|
| Default size | **24×24** (24 logical units; some payment/credit-card icons use `0 0 38 24`) |
| Fill | `fill="currentColor"` — inherits surrounding text color |
| Format | Tree-shakable React components (one file per icon) |
| Categories | **14** |
| Total icons | **670** |

## Categories

`basic`, `miscellaneous`, `devices`, `syncup-kids`, `syncup-drive`, `payment`, `high-speed-internet`, `navigation`, `language`, `validation`, `billing`, `security-threats`, `social`, `logo`.

See `icon-discovery.md` for per-category counts, naming conventions, and dynamic lookup helpers (`ICON_CATEGORIES`, `ICON_INDEX`).

## Color

Set color via CSS `color` on a parent — icons inherit `currentColor`. Use Arrow utility classes:

```tsx
<span className="tdds:color-brand-primary-400">
  <IconArrowRightOutlined />
</span>
```

Never hardcode `fill="#hex"` on the icon — it breaks inverse mode and brand switching.

## Sizing

The `size` prop sets both width and height. Default is 24.

```tsx
<IconCheckCircleFilled />               {/* default 24 */}
<IconCheckCircleFilled size={16} />     {/* small */}
<IconCheckCircleFilled size={32} />     {/* large */}
<IconCheckCircleFilled size="1.5em" />  {/* relative units welcome */}
```

For inline-with-text alignment, prefer relative sizes (`em`) so the icon scales with the surrounding font-size.

## Passing icons to components

Any prop typed `ReactNode` and named `icon`, `leadingIcon`, `trailingIcon`, `closeIcon`, etc. accepts an icon component directly:

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

<Button trailingIcon={<IconArrowRightOutlined />}>Continue</Button>
<IconButton ariaLabel="Close" icon={<IconCloseOutlined />} />
```

The host component handles spacing and sizing slot conventions (you don't need to wrap in `<span>`).

## How this relates to other docs

| Doc | Scope |
|-----|-------|
| `foundations/icons.md` (this file) | The icon **token system**: size, color, format. |
| `icon-discovery.md` | Catalog of all 670 icons, naming, lookup helpers. |
| `components/icons.md` | The shipped React icon components and `IconProps` API. |
