Animated Icons

Pro

Hand-drawn icon set that rests still until you set it moving with springs, draw-ons and morphs. A short trace of light runs along each icon as it moves. Looping is kept for icons tied to a live state.

Preview

Installation

npx @lumioui/cli add pro/animated-icons

Usage

import { animatedIconMap, AnimatedIcon } from "@/components/ui/animated-icons/animated-icons";
<AnimatedIcons />

Also exported: animatedIconMap, AnimatedIcon.

API reference

Prop Type Default
name* AnimatedIconName

Glyph name — e.g. "bell", "play-pause", "lumio-mark".

 —
size keyof typeof px | number

Size preset or an explicit pixel size.

 "md"
color keyof ColorTokens | ColorValue

Color: a theme token ("foreground", "primary", …) or hex.

 —
strokeWidth number

Stroke width in the 24px grid — default 1.9.

 2
animate
"still" | "mount" +3 "still" | "mount" | "hover" | "press" | "loop"

Motion driver: - "still" (default) renders the settled pose, never moves. - "mount" plays the gesture once when the icon mounts. - "hover" replays on hover (web) or touch (native). - "press" replays while pressed. - "loop" runs continuously for glyphs bound to a live state (mic, refresh, pulse-dot, waveform) — pass it only while that state is live. Other glyphs play once, as with "mount".

 "still"
active boolean

Toggle-glyph state (heart/star filled, lock open, play→pause, menu→x).

 false
trigger number

Bump this number to replay the gesture from a parent (e.g. onPress).

 —
speed number

Tempo multiplier — <1 faster, >1 slower. Default 1.

 1
accessibilityLabel string

Icons are decorative by default (hidden from screen readers). Provide a label for a standalone semantic icon — it is exposed with role "image".

 —
className string —