How to Install and Use useAnimations Icons in React or shadcn/ui

Install the package with npm i react-useanimations, import the icon component you want, and render it with an interaction prop. That's the whole loop for React. For shadcn/ui, you add the icon the same way — it's a standard React component, so it drops into any shadcn component tree. If you're not on React at all, you can skip the package and download the SVG or Lottie JSON directly from the site.

What you're working with

useAnimations is a library of 300 hand-crafted micro animations for UI. Each icon ships with the interaction it was designed for, so you don't wire up animation logic yourself — you pick an interaction and it works. The library is MIT licensed, has zero dependencies, and the player is about 8 kB gzipped.

The icons are distributed three ways:

• React component — via the react-useanimations package
• shadcn/ui — added as a component in your shadcn setup
• Raw files — SVG and Lottie JSON downloads for any other environment

Install and render in React

Step 1 — Install the package.

npm i react-useanimations

Step 2 — Import the icon you need. Each icon is its own component, so you import by name rather than pulling the whole set.

Step 3 — Render it with an interaction prop. The interaction prop controls the behavior. If you don't pass one, the icon uses the interaction it was designed for.

import { AlertCircle } from 'react-useanimations';

export default function Status() {
  return <AlertCircle interaction="loop" />;
}

Expected result: the icon renders and plays according to the interaction you set. Change the prop to switch behavior — no extra wiring.

The six built-in interactions

Every icon supports these, and you select one with a single prop.

The prop is the only thing you change to move between these — the icon itself stays the same.

Using icons in a shadcn/ui project

Because each icon is a plain React component, it composes into shadcn/ui the same way any other component does. Add it inside your shadcn components (buttons, dropdown items, nav links) and pass the interaction prop where you want motion.

The practical difference from a bare React app is placement, not setup: you're dropping the animated icon into slots that shadcn already styles, so check that the icon's size and color fit the surrounding component. The library supports custom color and size, so you can match it to your theme rather than fighting the defaults.

Using SVG or Lottie outside React

If your project isn't React, you don't need the npm package. Open any icon on the site and you get its code plus downloads:

• SVG — for static or CSS-driven use
• Lottie JSON — for players like lottie-web in any framework
• ZIP — bundled assets

This is the path for Vue, Svelte, plain HTML, or design handoff.

Finding the right icon

The library is browsable by interaction type and by category. Categories include Alerts, Notifications, Navigation, Action, Content, Form, Media, Text editing, Communication, Devices, Weather, Maps & location, Commerce, Charts, Development, Design & layout, Shapes & math, Loading, Social media, and Other.

To narrow down:

1. Filter by interaction if the behavior matters more than the glyph (e.g. everything that loops).
2. Filter by category if you know the semantic slot (e.g. Navigation).
3. Use search for a specific concept.
4. Open an icon to get its code and downloads.

Common snags

• Wrong interaction for the context. A loop icon in a static toolbar reads as a loading state. Match the interaction to intent — hover for affordances, click-toggle for state switches.
• Assuming you must use the package. You don't. SVG and Lottie JSON cover non-React stacks.
• Ignoring size and color. The icons are styleable; set these to fit your UI instead of accepting defaults that clash.
• Forgetting the license is permissive. MIT means you can use and modify them, but keep attribution expectations in mind for your own distribution.