# Icon

## Overview

_[Design to fill]_

- **When to use**: _[Design to fill]_
- **When not to use**: _[Design to fill]_

## Anatomy

_[Design to fill]_

## Variants

| Prop    | Effect                                      |
| ------- | ------------------------------------------- |
| `size`  | Sets the icon size.                         |
| `color` | Applies a semantic color token to the icon. |

## Props / API

### `Icon`

| Prop    | Type        | Default   | Description                                   |
| ------- | ----------- | --------- | --------------------------------------------- |
| `name`  | `IconName`  | -         | The icon to render. Required.                 |
| `size`  | `IconSize`  | `medium`  | The icon size.                                |
| `color` | `IconColor` | `default` | The semantic color token applied to the icon. |

`IconSize` is `'extra-small' | 'small' | 'medium' | 'large'`.

`IconColor` is `'inherit' | 'default' | 'default-inverse' | 'emphasis' | 'subdued' | 'info' | 'success' | 'warning' | 'critical' | 'intelligence' | 'brand' | 'on-info' | 'on-success' | 'on-warning' | 'on-critical' | 'on-intelligence' | 'on-brand' | 'disabled'`.

Extends `HTMLAttributes<HTMLSpanElement>`. All standard attributes are forwarded to the wrapping `<span>` via `...rest`. `ICON_SIZE_CLASS_MAP` and `ICON_COLOR_CLASS_MAP` are exported for advanced use.

## Code examples

```tsx
import { Icon } from "@mylighthouse/prism-react";

export default function IconExample(): React.JSX.Element {
  return <Icon name="checkmark" size="medium" color="success" />;
}
```

## A11y intent

_[Design to fill]_

- When the icon is decorative (sits next to a visible text label), add `aria-hidden="true"` so it is skipped by assistive technology.
- When the icon is the only content conveying meaning (e.g. an icon-only button), give it an accessible name: `role="img"` with `aria-label`, or a visually hidden label on the parent control.
- `color` is visual only; never rely on color alone to convey status. Pair it with text or an accessible name.

## Cross-references

- **[Icon brand](./icon-brand.md)**: brand and third-party logos.
- **[Icon flag](./icon-flag.md)**: country and region flags.