# Icons

One source of the inline icons every component uses: `components/icons/icons.hl`.

```
import Icon from '../icons/icons.hl'
…
button { type = "button"  title = "Link (Ctrl+K)"  'aria-label' = "Link (Ctrl+K)"  Icon { name = "link" } }
```

- `Icon { name = "link" }` is an inline `<svg>` (24 x 24 box, `stroke = currentColor`, `aria-hidden`): it takes the text colour of its button. The button carries `title` and `aria-label`, the icon never speaks.
- `size = "1.5em"` changes the size (default `1.25em`).
- Names: `bold italic code link heading ul ol block table undo redo file close play pause skipBack skipForward prevTrack nextTrack shuffle repeat repeatOne volume volumeOff fullscreen`. A new icon is one more path in `shapes`.
- Shipped once per app: a component that needs icons imports the file by path; Hybriel serves an imported file as one module however many components import it (the page names `components/icons/icons.hl` once). An app copies `icons/icons.hl` next to the other components (tools/sync-components.sh).
- Each `Icon` on a page adds about 0.4 KB to the page's seed (its state), 11 per Markdown editor.

The `/icons` demo shows every name and compares the media controls side by side.
`shuffle` draws crossing arrows, `repeat` is the repeat-all loop, and `repeatOne` adds a small 1 to that same loop. The host button owns the active/off state and its accessible label. All three use the shared 24 × 24 box, 2 px stroke and round caps and joins.