Icons

One drawn set, three surfaces — a theme-colored RN component, hand-tuned Reanimated glyphs, and the 3,072-glyph web set.

The Icon component

npx @lumioui/cli add icon

<Icon name="bell" size="md" />
<Icon name="trash" color="destructive" accessibilityLabel="Delete" />

118 names drawn in the Lumio glyph set — the same drawings as Animated icons, at rest — on a 24px grid, stroke 2, mapped to theme colors — color takes any semantic token (destructive, muted-foreground, …) or a raw value. Without an accessibilityLabel the glyph stays decorative and hidden from screen readers.

Animated icons

npx @lumioui/cli add animated-icons

A curated 44-glyph set where every icon carries a bespoke gesture — draw-ons, springs, morphs — built as Reanimated animatedProps on react-native-svg, so they run on the UI thread. These are the same glyphs the web set animates with SMIL.

The web set

All 3,072 glyphs across 23 categories are served as SVG files — three stroke weights per glyph:

/iconset/static/bell.svg      regular
/iconset/thin/bell.svg        thin
/iconset/bold/bell.svg        bold
/iconset/animated/bell.svg    with SMIL motion

24×24, stroke="currentColor", round caps — drop one into any markup and it inherits text color:

<img src="/iconset/static/bell.svg" width="20" />

Sprite

For many-glyph pages, one file carries the whole static set as <symbol>s:

<svg width="20" height="20">
  <use href="/iconset/sprite.svg#i-bell" />
</svg>

Symbol ids are i-<name>. /iconset/catalog.json maps categories → names, /iconset/use.json lists the glyphs the library itself renders.

The lab

/icons browses the set live — search with Lucide-rename aliases (circle-alert → alert-circle), weight and size ladders, per-glyph copy/PNG, a context strip showing the glyph inside real rows, and a new category that badges the latest drop.

Deep-link a glyph sheet with ?i=<name> — Lucide-canonical names resolve through the same bridge (?i=send-horizontal, ?i=arrow-big-down, ?i=flag all land on the right sheet); ?w=thin|bold pins the weight; ?size=20–64 the grid glyph size.

// ask an llm chatgpt ↗ · claude ↗