AnimateIcons

281 animated SVG icons for React. Hover & imperative triggers, configurable size, color, and duration. Built on motion/react.

Browse icons  ·  Docs  ·  MCP  ·  Sponsor

---

Quick start

pnpm add @animateicons/react

import { 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

---

Repository layout

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

---

Local development

git clone https://github.com/Avijit07x/animateicons.git
cd animateicons
pnpm install
pnpm dev

Common 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 dist

---

Contributing

PRs adding icons are welcome. Each icon is a single React component file - copy any existing one as a template.

1. Create icons/<library>/<name>-icon.tsx from an existing icon
2. Register it in data/<library>-icons.json
3. Run pnpm gen:icons to regenerate the registry + catalog
4. Open a PR against dev

Full workflow in CONTRIBUTING.md.

---

License

MIT.

If AnimateIcons saves you time, consider sponsoring the project.

---

Built with Next.js, motion/react, and shadcn/ui.

animateicons.in  ·  GitHub  ·  @animateicons/react on npm