Follows your colors
Icons use currentColor: they pick up text color, hover states and dark mode on their own. Override with a prop, a class or plain CSS.
v3300 icons · zero dependencies · MIT→
Icons that come alive.
Free animated icons for React, shadcn/ui and Lottie
300 hand-crafted micro animations with hover, click and loop micro-interactions built in. Use them as a React component, add them with shadcn, or download SVG and Lottie JSON. MIT licensed.
Move your pointer across the field.
- animated icons
- 300
- animated icons
- built-in interactions
- 6
- built-in interactions
- player, gzipped
- 8 kB
- player, gzipped
- dependencies
- 0
- dependencies
Interactions built in
Every icon knows how to move.
Each icon ships with the interaction it was designed for. Drop it in and it just works — or pick another one with a single prop. Try them:
The library
300 free animated icons
Hover or click to play. Open an icon for its code and downloads — Lottie JSON, SVG and ZIP.
300 icons
Use them your way
Install, import, done.
A React component with no dependencies, a shadcn registry, downloadable files with stable URLs, and a catalog that AI agents can read.
Read the documentation →import UseAnimations from 'react-useanimations';
import menu from 'react-useanimations/lib/menu';
export function MenuButton({ open, onToggle }) {
return (
<UseAnimations
animation={menu}
active={open}
onClick={onToggle}
size={28}
/>
);
}npx shadcn@latest add https://useanimations.com/r/menu.json
# then: <AnimatedMenu size={24} /># Every icon as an SVG, as its animation (Lottie JSON) and as a ZIP of both
https://useanimations.com/icons/menu/menu.svg
https://useanimations.com/icons/menu.json # Lottie JSON
https://useanimations.com/icons/menu.zip # Lottie JSON + static SVGsconst { icons } = await fetch('https://useanimations.com/icons.json').then((r) => r.json());
const icon = icons.find((i) => i.keywords.includes('hamburger'));
icon.react.import; // "import menu from 'react-useanimations/lib/menu';"Small, accessible and yours to style.
Tiny by design
8 kB
A built-in player, zero dependencies. Each icon is its own 2 kB module.
Accessible by default
Respects reduced motion, plays hover animations on keyboard focus and stays out of screen readers unless you label it.
Server-rendering ready
A client component that renders safely in Next.js, Remix and Astro. Icons are plain data you can import anywhere.
Made for agents
A typed catalog with keywords for every icon, icons.json, llms.txt and Markdown docs.
Find the right micro animation.
Questions
What are micro animations and animated icons?
Micro animations are short, single-purpose motions that answer a user action: a menu icon that turns into a close button, a heart that fills when you like a post, a bell that rings for a new notification. Animated icons are the most common kind. They make an interface feel responsive and show state changes without extra text.
What is the difference between the Lottie and SVG files?
The Lottie JSON file holds the whole animation and plays in any Lottie player, including the one built into react-useanimations. The SVG files are still images of the icon at rest, one per state (for example eye and eye-off), for places where nothing should move: emails, documents, design tools or a no-JavaScript fallback.
Does it work with Next.js and server rendering?
Yes. The component is marked 'use client' and draws the animation only in the browser, so it renders from server components and SSR frameworks such as Next.js, Remix and Astro without dynamic imports. Icon modules are plain data that server components can import and pass as props. Next.js and server rendering →
Can I use the icons in commercial projects?
Yes. The icons and the react-useanimations package are MIT licensed: use, modify and redistribute them in personal and commercial work. Attribution is appreciated but not required. Licencing & Terms →
Can I use the icons without React?
Yes. Every icon is a standard Lottie JSON file, so it plays with lottie-web in plain JavaScript, Vue, Svelte, Angular or a CMS, and in Lottie players for iOS, Android and Flutter. The Lottie icons page has the file URLs and ready-made lottie-web snippets for each interaction. Lottie icons →
How much do the icons add to my bundle?
The player in react-useanimations 3.1.1 is about 8 kB gzipped with no dependencies, and each icon is its own module of 1 to 15 kB (2 kB median), so a bundle only includes the icons you import.