What is useAnimations?

Updated

useAnimations is a free library of 300 hand-crafted micro-animation icons for React, shadcn/ui, and Lottie. Each icon ships with its interaction already built in — hover, click, and loop behaviors — so you can drop one in and it works without wiring up animation logic yourself. It's MIT licensed, has zero dependencies, and the player is about 8 kB gzipped. If you need animated UI icons for a React project and don't want to author the motion yourself, this is what the library is for.

What you get

  • 300 animated icons across categories like alerts, notifications, navigation, action, content, form, media, text editing, communication, devices, weather, maps & location, commerce, charts, development, design & layout, shapes & math, loading, and social media.
  • 6 built-in interactions, each icon designed around one of them but switchable with a single prop.
  • Multiple delivery formats: a React component, a shadcn/ui addition, or downloadable SVG and Lottie JSON files.
  • MIT license and zero dependencies.

The six built-in interactions

Every icon knows how to move, and the interaction it ships with is the one it was designed for. You can override it with the interaction prop.

Interaction What it does Typical use
loop Plays continuously Loaders, ambient status
click-toggle Switches between two states Menu/close, play/pause
click-replay Replays from the start on every click Action feedback
hover Plays forward on enter, back on leave Nav and toolbar icons
hover-loop Loops while hovered, finishes its cycle on leave Attention cues
hover-replay Plays once from the start on every enter Repeated hover feedback

How to install and use it

The library installs through npm:

npm i react-useanimations

From there the workflow is install, import, done — you import the icon you want and render it as a React component. If you use shadcn/ui, you can add icons through that path instead. If you're not in React at all, you can open any icon on the site and download its Lottie JSON, SVG, or a ZIP.

Finding the right icon

The library page lets you search by name and filter by interaction, custom color, and size, with category filters for browsing. Hovering or clicking a card plays the animation, and opening an icon gives you its code plus the download options. That's the fastest way to confirm an icon's motion matches your intent before you commit to it.

When it fits — and when it doesn't

Choose useAnimations if you want small, accessible, styleable micro-interactions in a React or shadcn/ui codebase and prefer a permissive license with no dependency overhead. Look elsewhere if you need complex illustrated animations, motion beyond icon-scale micro-interactions, or a framework the library doesn't target — in that case the downloadable SVG and Lottie JSON still let you bring the assets into other tooling, but you'd handle the playback yourself.