# Icons

The kit’s glyphs as one set.

Kit part · With the Kit · https://tactileui.dev/parts/icons

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

The set is data, not sprites.

## Variants

- Sizes
- Beside words
- In a key
- Alone
- In ink · never tinted
- A lamp says on

## States

- Rest
- Hover
- Pressed
- Focus

## Props and options

| Name | Kind | Description |
| - | - | - |
| ICONS · ICON_NAMES | object · array |  |
| data-size | attribute | On a grid: scales every glyph in it. |

## Usage notes

Press a glyph to copy its markup. The size switch scales the whole grid; the line stays a tenth of the box.

## Accessibility

- An icon beside words is decoration.
- An icon never carries state by tint: a lit lamp beside it, or a word, says “on”, “unread” or “failed”.
- The grid’s cells are real buttons with a name (“Copy search”); the glyph in each is hidden.

## Related parts

- [Icon key](https://tactileui.dev/parts/icon-key): A key with an icon and no words, square or round: transport, power, the small tools. Its aria-label names it; a tip shows the name.
- [Key](https://tactileui.dev/parts/key): Every button, and every link that acts like one: a cap on a skirt that drops below the plate when pressed.
- [Lamp](https://tactileui.dev/parts/lamp): The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words.