Components

Icons

Lucide icons only. Always 2px stroke, currentColor, no fill. Use 16px, 20px, or 24px — no other sizes.

Icon grid

All icons rendered at 20px. Click to copy the Lucide name.

Sizes

16px Inline in text, dense UI, table cells
20px Default — nav, buttons, most UI contexts
24px Hero moments, section headers, empty states

Usage guidelines

Import

<script src="https://unpkg.com/lucide@latest"></script>
<script>lucide.createIcons();</script>

Or install: npm install lucide and import named SVGs in your framework.

HTML usage

<i data-lucide="arrow-right"
   style="width:20px;height:20px">
</i>

Always specify width and height. Stroke width is 2 by default — do not override.

Color

Icons inherit color via currentColor on the stroke. To set an icon color, set color on the parent element or directly: style="color: var(--fg-accent)"

Accessibility

Decorative icons (next to visible text): add aria-hidden="true".
Standalone icons (no visible label): add aria-label="Description" to the wrapping button or use a visually-hidden span.