Iconography
Icon set and how icons are used.
Icon set
Icons come from Lucide, through the lucide-react package. Only the icons in use are included in the site.
Lucide is open source, has one consistent grid and stroke style, and ships as a React package that only loads the icons you use.
Icons in use
These docs use 16px and 20px icons with a stroke width of 1.75.
| Icon | Name | Used for |
|---|---|---|
Menu | Opens the navigation drawer | |
X | Closes the drawer | |
Search | Search | |
ChevronRight | Collapsible sections, breadcrumbs, next page | |
Copy | Copy a token name | |
Check | Shows that a token name was copied |
Accessibility
Decorative icons are hidden from screen readers. A button that shows only an icon needs a text label for screen readers.
Guidance
Icons scale with their control: 12px in checkboxes and the AI label, 14px in small controls, tags and table headers, 16px in medium and large controls, and 20px in large icon buttons and empty states. Stroke is 1.75. The checkbox tick is heavier so it stays visible at 12px. Pair icons with text for main actions. Icon-only buttons always need a label. They show it as a tooltip, except the close and dismiss buttons in dialogs, toasts and popups, and the remove button on tags.