Skip to system
03 / Iconography

Symbols behave like commands

The complete Lucide inventory, the Smart Search exception and the size, stroke, state and accessibility rules behind every glyph.

43 Lucide · 27 product · 1 custom
productionlucide-react + src/components--command-icon-size--command-content-gap

Live icon library

Search the actual imported set, filter product and documentation usage, then tune the shared optical contract.

Size
Stroke
Tone
Project-authored1 custom glyph beside 43 Lucide symbols
catalog-explorer.tsx
SmartSearchProduct · composed search + task signal
16 / 20px · 2.4 stroke

Selected symbol contract

The glyph inherits currentColor; the interactive target owns semantics, hit area and state.

Name
ArrowRight
Category
navigation
Scope
product
Owner
catalog-pet-card.tsx
Geometry
16px / 2.4px
Icon-only target
44 × 44px
exceptioncatalog-explorer.tsx

Smart Search exception

The product keeps one project-authored composed glyph because Search plus Sparkles as two sibling icons creates noise and weaker optical balance.

One composed mark

It follows the same currentColor, 16/20px and focus contracts as Lucide, but its path remains owned by the matcher component.

stroke 2.4 · fill currentColor

Icon rules

ContextGlyphStrokeTargetAccessible name
Compact metadata14px2–2.4Non-interactivearia-hidden
Default command16px2.4–2.836–44pxLabel owns name
Primary / shell18–20px2.844pxVisible or aria-label
Icon-only16–20px2.4–2.844 × 44pxRequired
DecorativeAny approved sizeRole-basedNonearia-hidden