What it does
useAnimations supplies animated interface icons with built-in hover, click and loop interactions. React and shadcn routes provide configurable components, while SVG and Lottie downloads support other integrations. Both artwork and code are available under MIT terms.
Choose motion around the control’s behavior. Click-toggle switches between states, click-replay restarts feedback, and hover-loop runs while the pointer remains over the control. Install react-useanimations and supply an animation to its component, or add a prepared component through the shadcn registry. Size, colour, speed and interaction props adjust the result.
For an icon-only action, use a real labelled button around the animation; the documented default wrapper is a span. The component respects reduced-motion preferences. Downloads also provide static SVGs and Lottie JSON for other players, where the interaction must be wired separately. Some expression-based icons require the full web player and do not translate those expressions to native Lottie players.
Icons and code use MIT terms. Personal, commercial and redistributed uses are allowed; preserve the licence notice when passing on the files.
Strengths
- Several interaction modes are defined for different UI behaviors.
- Component and downloadable-file routes are available.
Watch out for
- Outside React, interaction behavior must be connected separately.
- Some expression-based animations require the full web player and are unsupported by native Lottie players.
Best for
- Interfaces using purposeful micro-interactions
- React teams handing off animated control states
Sources
- useAnimations animated icon library (Oct 27, 2026)
- useAnimations documentation (Oct 27, 2026)
- useAnimations licensing and terms (Oct 27, 2026)