# useAnimations > Free library of 300 handcrafted animated icons (micro animations) built with Lottie (24/32 px artboards), each with a built-in interaction. Every icon has a direct, CORS-enabled Lottie JSON URL plus static SVGs, a React import and a shadcn registry item, for React projects; no account needed. Author: useAnimations License: MIT — free for personal and commercial use, modification and redistribution, no attribution required. ## For AI agents - [Full context (Markdown)](https://useanimations.com/llms-full.txt): the documentation plus a compact entry for every icon (id, category, synonyms, interaction, states, React import, shadcn command, file URLs), in one file. - [Icon catalog (JSON)](https://useanimations.com/icons.json): every icon with id, title, category, keywords, interaction type (loop, click-toggle, click-replay, hover, hover-replay, hover-loop), direct Lottie JSON URL, SVG URLs, ZIP URL, react-useanimations import, shadcn command, size, duration and a ready-to-use lottie-web snippet. - Icon pages as Markdown: `https://useanimations.com/icons/.md` (e.g. https://useanimations.com/icons/menu.md), with usage, files, interaction and related icons. Pages also answer `Accept: text/markdown` with their Markdown version. - React: `npm install react-useanimations`, then `import checkmark from 'react-useanimations/lib/checkmark'` and ``. Several icons: `import { github, heart } from 'react-useanimations/icons'`. No dependencies; icons follow currentColor and respect reduced motion. - shadcn/ui: `npx shadcn@latest add https://useanimations.com/r/.json` adds `components/animations/.tsx` exporting `Animated` (e.g. ``); registry index: https://useanimations.com/r/registry.json - Direct file URLs: `https://useanimations.com/icons/.json` (Lottie), `https://useanimations.com/icons//.svg` (static SVG), `https://useanimations.com/icons/.zip` (full package), `https://useanimations.com/icons/` (icon page). ## Docs - [Documentation (Markdown)](https://useanimations.com/documentation.md): interactions, props, importing icons, size and color, server rendering, shadcn/ui, your own animations, files and icons.json, performance and accessibility, license and FAQ. HTML version: https://useanimations.com/documentation - [Homepage summary (Markdown)](https://useanimations.com/index.md): every icon by category, with links to each icon's Markdown page. - [Licencing & Terms (Markdown)](https://useanimations.com/licencing-and-terms.md): full usage rights. HTML version: https://useanimations.com/licencing-and-terms ## Collections - [All animated icons](https://useanimations.com/icons) - [Icon categories](https://useanimations.com/categories) - [Icons by interaction](https://useanimations.com/interactions) - [Lottie icons (JSON)](https://useanimations.com/lottie-icons) - [shadcn/ui animated icons](https://useanimations.com/shadcn-animated-icons) ## Categories - [Animated alert icons](https://useanimations.com/categories/alerts) (5 icons, Markdown: https://useanimations.com/categories/alerts.md) - [Animated notification bell icons](https://useanimations.com/categories/notifications) (4 icons, Markdown: https://useanimations.com/categories/notifications.md) - [Animated navigation and arrow icons](https://useanimations.com/categories/navigation) (34 icons, Markdown: https://useanimations.com/categories/navigation.md) - [Animated action icons](https://useanimations.com/categories/action) (64 icons, Markdown: https://useanimations.com/categories/action.md) - [Animated file, folder and user icons](https://useanimations.com/categories/content) (22 icons, Markdown: https://useanimations.com/categories/content.md) - [Animated form control icons](https://useanimations.com/categories/form) (3 icons, Markdown: https://useanimations.com/categories/form.md) - [Animated media player icons](https://useanimations.com/categories/media) (28 icons, Markdown: https://useanimations.com/categories/media.md) - [Animated text editing icons](https://useanimations.com/categories/text-editing) (10 icons, Markdown: https://useanimations.com/categories/text-editing.md) - [Animated communication icons](https://useanimations.com/categories/communication) (13 icons, Markdown: https://useanimations.com/categories/communication.md) - [Animated device icons](https://useanimations.com/categories/devices) (12 icons, Markdown: https://useanimations.com/categories/devices.md) - [Animated weather icons](https://useanimations.com/categories/weather) (16 icons, Markdown: https://useanimations.com/categories/weather.md) - [Animated map and location icons](https://useanimations.com/categories/maps-location) (9 icons, Markdown: https://useanimations.com/categories/maps-location.md) - [Animated e-commerce icons](https://useanimations.com/categories/commerce) (11 icons, Markdown: https://useanimations.com/categories/commerce.md) - [Animated chart icons](https://useanimations.com/categories/charts) (5 icons, Markdown: https://useanimations.com/categories/charts.md) - [Animated developer icons](https://useanimations.com/categories/development) (9 icons, Markdown: https://useanimations.com/categories/development.md) - [Animated design and layout icons](https://useanimations.com/categories/design-layout) (10 icons, Markdown: https://useanimations.com/categories/design-layout.md) - [Animated shape and math icons](https://useanimations.com/categories/shapes-math) (8 icons, Markdown: https://useanimations.com/categories/shapes-math.md) - [Animated loading icons](https://useanimations.com/categories/loading) (5 icons, Markdown: https://useanimations.com/categories/loading.md) - [Animated social media icons](https://useanimations.com/categories/social-media) (22 icons, Markdown: https://useanimations.com/categories/social-media.md) ## Interactions - [Looping animated icons](https://useanimations.com/interactions/loop) (`loop`, 21 icons): Plays continuously; stays on the static first frame when reduced motion is preferred. - [Click-to-toggle animated icons](https://useanimations.com/interactions/click-toggle) (`click-toggle`, 37 icons): Toggles between two states on click, or switches immediately when reduced motion is preferred. - [Click animated icons](https://useanimations.com/interactions/click-replay) (`click-replay`, 64 icons): Replays once from the start on every click unless reduced motion is preferred. - [Hover animated icons](https://useanimations.com/interactions/hover) (`hover`, 21 icons): Plays forward on mouseenter and backward on mouseleave. - [Hover-to-play animated icons](https://useanimations.com/interactions/hover-replay) (`hover-replay`, 144 icons): Plays once on mouseenter unless reduced motion is preferred. Leaving does not stop it; entering during playback does not restart it. - [Hover loop animated icons](https://useanimations.com/interactions/hover-loop) (`hover-loop`, 13 icons): Loops while hovered, finishes the current cycle after mouseleave and stays static when reduced motion is preferred. ## Optional - [react-useanimations on GitHub](https://github.com/useAnimations/react-useanimations): the React package and the source of the icon set. - [react-useanimations on npm](https://www.npmjs.com/package/react-useanimations)