Foundations
Iconography
The icon set, its stroke and color, the icon sizes by context, and what is not an icon.
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.
- Emoji are content, not icons. Don't use an emoji as an icon. Emoji in reactions are content; see Brand.
- No sparkles. Don't use sparkles, stars or similar icons to mark agents or AI; see Agents.
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 |