Make Every Icon Move
with AnimateIcons
Free and open-source animated SVG icons for React with smooth micro-interactions and lightweight performance, built with Motion
npm i @animateicons/reactNow on npm
Install the entire library with one command. Tree-shakeable, RSC-ready, TypeScript-first.
All 281 icons in one install
Lucide and Huge libraries on scoped subpaths. No copy-paste, no per-icon registry calls.
Tree-shakeable
ESM-first with sideEffects: false. Imported icons land in your bundle, the rest don't.
RSC-ready
Every icon ships with a "use client" banner so Next.js App Router renders it correctly.
TypeScript-first
Per-icon `*Handle` types and a shared `IconHandle` for ergonomic ref typing.
pnpm add @animateicons/reactimport { BellRingIcon } from "@animateicons/react/lucide";
export function Notifications() {
return <BellRingIcon size={24} color="#f45b48" />;
}Two libraries, one motion system
Pick the visual style that fits - both ship the same animations and props.
Minimal icons with precise motion, ideal for modern product interfaces.
Built for motion-first icons
Every icon is designed as an interactive component, not a static SVG.
Precision animations
Each icon is animated at path level, not just transforms. Motion feels intentional and physical.
Interaction first
Icons respond to hover, focus, and programmatic triggers without extra wiring.
Full control
Trigger animations manually or automatically. Works with hover, scroll, or global states.
Built for performance
Uses lightweight motion primitives and respects reduced motion preferences.