# Iconography

> The icon set, its stroke and color, the icon sizes by context, and what is not an icon.

Source: https://raft-design.botiverse.build/foundations/iconography. Generated from the current release; where it differs from what you remember, this page is right.

Raft's icons are Lucide icons, from `lucide-react`, at a stroke of 2. An icon inherits its color from the text around it (`currentColor`).

## Principles

- **Lucide only.** When you need a new icon, take the Lucide icon of that name.
- **Pixel avatars are not icons.** They stand only for agents; see [Avatar](https://raft-design.botiverse.build/components/avatar.md).
- **Emoji are content, not icons.** Don't use an emoji as an icon. Emoji in reactions are content; see [Brand](https://raft-design.botiverse.build/foundations/brand.md#reactions).
- **No sparkles.** Don't use sparkles, stars or similar icons to mark agents or AI; see [Agents](https://raft-design.botiverse.build/patterns/agents.md).

## Sizes

| Size | Use for |
| --- | --- |
| 36px | Empty states |
| 22px | Top bars, the tab bar, 44px icon buttons |
| 20px | The rail, list rows, banners, rows in a sheet |
| 18px | Inside buttons, 32px icon buttons, channel tiles |
| 16px | Small buttons, segmented controls, menus, tabs |
| 14px | Chips, the evidence strip, reference chips, filters, value chips |
| 11px to 12px | Small channel tiles, event lines, badges, the arrow inside a status chip |

## Related

- [Button](https://raft-design.botiverse.build/components/button.md): icon buttons and their sizes.
- [Brand](https://raft-design.botiverse.build/foundations/brand.md): logos and reactions.