Iconography
The icon set and how to use it.
Simple icons drawn on a 24px grid with a 1.5px line and round ends, in the style of Lucide. They take the text color of whatever holds them.
All icons
Click one to copy it.
62 of 62
The set
AIEditIcon
AIEnhanceIcon
AISuggestIcon
AISummarizeIcon
AlertIcon
ApproveIcon
ArrowRightIcon
BookmarkIcon
BranchIcon
CameraIcon
CheckIcon
CheckpointIcon
ChevronIcon
CitationIcon
ContextIcon
CopyIcon
DownloadIcon
EditIcon
EyeIcon
FileIcon
GlobeIcon
HistoryIcon
ImageIcon
InfoIcon
LayersIcon
LockIcon
LoopIcon
MemoryIcon
MicIcon
MicOffIcon
MoonIcon
MoreIcon
NeedsReviewIcon
NotebookIcon
PaletteIcon
PaperclipIcon
PinIcon
PlanIcon
PlusIcon
RedoIcon
RefreshIcon
RegenerateIcon
RetryIcon
RevertAIIcon
SearchIcon
SendIcon
SettingsIcon
ShareIcon
ShieldIcon
SourceIcon
SparkleIcon
StopIcon
SunIcon
SyncIcon
TagIcon
ThoughtIcon
ThumbDownIcon
ThumbUpIcon
ToolIcon
UndoIcon
UsersIcon
XIcon
Usage
import { SendIcon } from "./lib/icons";
<IconButton label="Send message" variant="lime"><SendIcon /></IconButton>- Icons are decoration by default (
aria-hidden). The button that holds an icon gives it a name. - Use 14px next to 13px text, 16px in buttons and 20px to stand out. Never go past 24px.
- Add new icons to
src/lib/icons.tsxwith the same grid, line and round ends.