# Icon

> A small symbol sized to sit beside text, in the colour of its words.

- **Level**: atom · **Status**: stable · **Role**: content
- **Import**: `import { Icon } from "@rrios-forge/ui/atoms/icon";`
- **Source**: `packages/ui/src/atoms/icon`

Generic SVG wrapper that gives icons a predictable size, alignment and accessibility contract. Color follows `currentColor`; no icon library is bundled.

## Use it for

- Avatar / badge / separator / icon → `Avatar` / `Badge` / `Separator` / `Icon`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `size` | — | `sm` `md` `lg` | `md` | Ergonomic scale, in three families (control, text, container). |

## Stories

- [Playground](/?path=/story/components-atoms-icon--playground) · frame: `/iframe.html?id=components-atoms-icon--playground&viewMode=story`
- [Sizes](/?path=/story/components-atoms-icon--sizes) · frame: `/iframe.html?id=components-atoms-icon--sizes&viewMode=story`
- [Inherits currentColor](/?path=/story/components-atoms-icon--inherits-current-color) · frame: `/iframe.html?id=components-atoms-icon--inherits-current-color&viewMode=story`
- [Accessibility](/?path=/story/components-atoms-icon--accessibility) · frame: `/iframe.html?id=components-atoms-icon--accessibility&viewMode=story`

## Decisions that name it

- ADR-002 — Component variants live in `variants.ts` and export their option metadata

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).