Icons

Sizing

Five conventional sizes. Match the icon to the text it sits beside, not the surface it sits on.

• xs14px

  Paired with caption / micro text.

• sm16px

  Body text, buttons, inline metadata.

• md20px

  Section labels, heading-sm context.

• lg24px

  Standalone, heading-md, primary CTAs.

• xl32px

  Feature highlights, empty states.

Stroke width

Lucide accepts a strokeWidthprop. Sidelay's default is 2— Lucide's native weight. Switch to 1.5 when you want a quieter, secondary feel; reserve 2.5 for deliberate emphasis.

• Light

  strokeWidth={1.5}
• Default (Sidelay)

  strokeWidth={2}
• Heavy

  strokeWidth={2.5}

Pairing with text

Align icons to the cap height of the adjacent text, not the baseline. The gap is usually --space-2 (8px) for body and below, --space-3 (12px) for headings.

• LAST UPDATED 3M AGO
• Add to your workspace
• Recent sessions
• Drop a pin where the bug lives

Curated set

A starter pack covering the most common SaaS UI needs. Import any icon directly from lucide-react. Browse the full catalogue at lucide.dev/icons.