281 animated SVG icons for React. Hover and imperative triggers, configurable size, color, and duration. Built on motion/react.
Browse icons → · Docs → · Sponsor →
pnpm add @animateicons/reactimport { BellRingIcon } from "@animateicons/react/lucide";
export function Notifications() {
return <BellRingIcon size={24} color="#f45b48" />;
}Icons animate on hover by default, and motion is bundled. Don't want a dependency? Copy the source instead with npx animateicons add bell-ring, browse them interactively with npx animateicons browse, the shadcn CLI, or an AI agent via the MCP server.
Full documentation lives on the site · Install, CLI, styling & API · MCP server · Browse the gallery
animateicons/
├── icons/
│ ├── lucide/ 248 Lucide-style icons
│ └── huge/ 33 Huge-style icons
├── npm/ @animateicons/react published package
├── core/ shared catalog/search/write logic (bundled into cli + mcp)
├── cli/ animateicons CLI (npx animateicons add / browse)
├── mcp/ @animateicons/mcp server for AI agents
├── app/
│ ├── icons/[library]/ gallery routes
│ └── icons/docs/ install + MCP guides (MDX)
├── components/ shared UI (Hero, Section, etc.)
├── hooks/ useIconFilter, useIconAnimation
├── tests/ Vitest + React Testing Library
└── scripts/ registry + catalog codegen, codemods
git clone https://github.com/Avijit07x/animateicons.git
cd animateicons
pnpm install
pnpm devCommon scripts:
pnpm dev # gallery dev server (Turbopack)
pnpm build # production build
pnpm test # vitest run
pnpm typecheck # tsc --noEmit
pnpm --filter @animateicons/react build # build the npm package
pnpm --filter @animateicons/react test:smoke # smoke-test the built distPRs adding icons are welcome. Each icon is a single React component file - copy any existing one as a template.
- Create
icons/<library>/<name>-icon.tsxfrom an existing icon - Register it in
data/<library>-icons.json - Run
pnpm gen:iconsto regenerate the registry + catalog - Open a PR against
dev
Full workflow in CONTRIBUTING.md.
MIT.
If AnimateIcons saves you time, consider sponsoring the project.
Built with Next.js, motion/react, and shadcn/ui.
