Icon

~2,000 single-colour line icons from Lucide, searchable.

v1.0.0·Updated Jul 10, 2026 · 23:00

◇ Open the Figma file ↗✳ Browse all icons on Lucide ↗✳ Start building with Claude ↗

Live Demo — Fully Interactive

The open Lucide set — 1,994 line icons, one colour. Click any icon to copy its name.

1–96 of 1,994

Configuration

Glyph

Size

Weight

Surface

<Icon name="sparkles" size="lg" />

Behavior — The Engineering Contract

Prop	Type	Notes
name	string	Any of the ~2,000 Lucide glyph names
size	xs · sm · md · lg · xl · 2xl	12 · 16 · 20 · 24 · 32 · 40px
weight	light · regular · bold	Stroke 1.5 · 2 · 2.5px; the 24 box is fixed
surface	dark · light	Tile background; the glyph is currentColor either way
title	string	Present ⇒ role=img & labelled; absent ⇒ aria-hidden

The library is Lucide — an open, ISC-licensed set of ~2,000 line icons, drawn on the same 24-box, currentColor, round-cap spec Optimistic already uses. Icons are single colour: no per-icon accent. Because every stroke is currentColor, one glyph serves every theme — no second asset, ever.

Anatomy

1BoxEvery glyph is drawn in the same 24×24 box.

2StrokeOne weight per icon, in currentColor — never filled.

3Round cap & joinSoft ends are what make the family feel drawn, not sharp.

Do's and Don'ts

✓ Do

Draw once with currentColor and let the surface decide. One glyph, both themes.

✕ Don't

Don't fill line icons solid. The family is drawn with strokes, not shapes.

✓ Do

Keep one stroke weight per icon and round the ends, so it reads as a single line.

✕ Don't

Don't recolour parts of a glyph. Icons are one colour — set it on the parent.

In context: Examples

A · In a button

New file

A glyph leading a label, inheriting the button's text colour.

B · Notification

New activity in your project

A tile pairs an icon with its message.

C · On a light surface

The same glyphs, dark strokes — no separate light asset.

Measurements & Tokens

Token	Value	Role
--icon-box	24 × 24	The viewBox every glyph is drawn in
--icon-stroke	2px (regular)	Stroke width; light 1.5px, bold 2.5px
--icon-cap	round	Line-cap and line-join
--icon-size	12·16·20·24·32·40	xs · sm · md · lg · xl · 2xl
--icon-color	currentColor	Single colour — inherits the surface's text colour
--icon-set	Lucide · ISC	~2,000 open-source glyphs
--tile-dark	#1C1C1E	Dark tile surface, glyph #E7E9EE
--tile-light	#F2F2EF	Light tile surface, glyph #1A1A1A
--tile-radius	6 – 14px	Rounds with tile size 24 → 56

Code

<!-- decorative: hidden from AT -->
<span class="o-icon o-icon--lg" aria-hidden="true">
  <svg viewBox="0 0 24 24" width="24" height="24"
       fill="none" stroke="currentColor" stroke-width="2"
       stroke-linecap="round" stroke-linejoin="round">
    <circle cx="11" cy="11" r="8" />
    <path d="m21 21-4.3-4.3" />
  </svg>
</span>

<!-- meaningful: named for AT -->
<span class="o-icon" role="img" aria-label="Search"> … </span>

Related Components

AccordionSections that expand one truth at a time.● documented DividerThe hairline. #1e1e1e, one pixel, everywhere.● documented FilterFaceted narrowing with visible, removable criteria.● documented