# Icon

Icon component for SVG icons from the registry or emoji characters.

Accessibility:

- Decorative icons (no label): automatically hidden from screen readers
- Informative icons: provide a `label` prop for screen reader announcement

```tsx
import { Icon } from '@tangible/ui';
```

Interactive docs and examples: [Icon in Storybook](https://storybook-tangible-ui.pages.dev/?path=/docs/primitives-icon--docs).

## Icon props

| Prop | Type | Default | Description |
| - | - | - | - |
| `className?` | `string` | | |
| `emoji?` | `string` | | Emoji or unicode character (alternative to name). The same labelling contract as `name` applies: pass `label` when the emoji conveys meaning not available from surrounding text (🔒 for locked, ⚠️ for a warning); omit it only for decoration. |
| `label?` | `string` | | Accessible label for informative icons. Required if icon conveys meaning. |
| `name?` | `IconName` | | Icon name from registry (e.g., "system/check") |
| `size?` | `"lg" \| "md" \| "sm" \| "xl" \| "xs" \| "xxl"` | | Icon size. Defaults to inherit from parent font-size. |

## Examples

- [Emoji](https://storybook-tangible-ui.pages.dev/?path=/story/primitives-icon--emoji): An emoji without a `label` is decorative and hidden from screen readers — correct only when surrounding text carries the meaning. See EmojiWithLabel for informative emoji.

- [Emoji With Label](https://storybook-tangible-ui.pages.dev/?path=/story/primitives-icon--emoji-with-label): An emoji that conveys state or meaning (🔒 locked, ⚠️ warning) needs a `label`, exactly like a registry icon — without one it is invisible to screen reader users.

- [With Label](https://storybook-tangible-ui.pages.dev/?path=/story/primitives-icon--with-label): Icons with a `label` prop are announced by screen readers. Use for informative icons.

- [Decorative](https://storybook-tangible-ui.pages.dev/?path=/story/primitives-icon--decorative): Icons without a `label` are decorative and hidden from screen readers via `aria-hidden`.

- [Inline With Text](https://storybook-tangible-ui.pages.dev/?path=/story/primitives-icon--inline-with-text): Icons inherit font-size from their parent, scaling naturally with text. The icon here is correctly decorative (no `label`) only because the words "settings icon" carry the meaning — a standalone icon that itself conveys the information needs a `label`.

Other stories: Basic, All Sizes ([interactive page](https://storybook-tangible-ui.pages.dev/?path=/docs/primitives-icon--docs)).

## Component API tokens

Read via fallback, never declared. Set one on an ancestor to restyle every instance under it.

- `--tui-icon-size-xs`
- `--tui-icon-size-sm`
- `--tui-icon-size-md`
- `--tui-icon-size-lg`
- `--tui-icon-size-xl`
- `--tui-icon-size-xxl`

---

Interactive version: https://storybook-tangible-ui.pages.dev/?path=/docs/primitives-icon--docs