# Animated Icons

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.

> Composed · Pro · Signature — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/animated-icons
```

## Import

```tsx
import { animatedIconMap, AnimatedIcon } from "@/components/ui/animated-icons/animated-icons";
```

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `name` | `AnimatedIconName` | Glyph name — e.g. "bell", "play-pause", "lumio-mark". |
| `size?` | `keyof typeof px | number` | Size preset or an explicit pixel size. |
| `color?` | `keyof ColorTokens | ColorValue` | Color: a theme token ("foreground", "primary", …) or hex. |
| `strokeWidth?` | `number` | Stroke width in the 24px grid — default 1.9. |
| `animate?` | `"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"`. |
| `active?` | `boolean` | Toggle-glyph state (heart/star filled, lock open, play→pause, menu→x). |
| `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. |
| `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` | — |

Source: https://lumioui.com/components/animated-icons