Iconography

Inline sprite, currentColor, stable names. The active set is Lucide — stroke, 24px grid, 2px stroke, symbols, ISC (lucide.dev). To rebrand, regenerate the sprite from another set and keep the i-* names.

Hover a cell for the icon's name and its container box — every glyph ships in the same box, and optical balance happens inside it; never resize an icon to "fix" its visual weight. Click to copy the name.

i-check i-x i-success i-warning i-error i-info i-help-circle i-chevron-down i-chevron-up i-chevron-right i-chevron-left i-chevrons-right i-chevrons-left i-arrow-right i-arrow-left i-arrow-up-down i-shuffle i-refresh-cw i-search i-filter i-eye i-eye-off i-message-square i-phone i-mail i-map-pin i-sparkles i-menu i-panel-left i-ellipsis i-ellipsis-vertical i-plus i-paperclip i-send i-square i-play i-pause i-skip-back i-rewind i-fast-forward i-skip-forward i-volume-2 i-volume-x i-repeat i-closed-caption i-maximize i-minimize i-picture-in-picture i-edit i-copy i-download i-upload i-file i-file-text i-image i-code i-trash i-lock i-key i-shield-check i-external-link i-link i-log-in i-log-out i-user i-settings i-sliders-horizontal i-bell i-calendar i-clock i-history i-thumbs-up i-thumbs-down i-heart i-home i-sun i-moon

Sizes

ExampleTokenValueUsage
size.icon.xsGlyphs inside sm components: sm badges
size.icon.smInline with text, dense UI
size.icon.mdDefault actions, buttons
size.icon.lgFeatures, empty states