Heroicons Animated
316 Heroicons rebuilt as Motion-animated React components
Aniket Kudale's MIT-licensed port of the full Heroicons outline set into React components whose strokes and shapes animate on hover or on demand, built with Motion (motion.dev). Every icon is a separate shadcn registry item, so you install exactly the icons you use rather than pulling a whole package, and the source lands in your repo as editable TSX. A published npm package (@heroicons-animated/react) exists for teams who prefer a dependency. Best for developers already on Heroicons who want motion without hand-writing SVG keyframes.
npx shadcn@latest add @heroicons-animated/heartUse this instead of plain @heroicons/react only where motion earns its place — icon buttons, toggles, nav items, empty states — because each icon arrives as a Motion component and pulls `motion` into the client bundle. The registry index at /r/registry.json lists all 316 slugs in Heroicons naming (arrow-down-tray, chevron-up-down, ellipsis-vertical), so you can resolve an icon name programmatically before installing. Pair it with lucide-animated if you need icons Heroicons does not cover, and gate the animations behind prefers-reduced-motion yourself — that is not verified as built in.
Why it is here. Full 1:1 coverage of the Heroicons outline set is rare in animated-icon projects, which usually ship 40 to 80 hand-picked icons; here you can adopt motion without dropping your existing icon vocabulary.
- complete 316-icon Heroicons parity
- per-icon shadcn registry install
- built on Motion (motion.dev)
- MIT, backed by the Vercel OSS program
- npm package alternative to copy-paste
Verified 2026-08-15. HTTP 200. https://heroicons-animated.vercel.app (307 -> https://www.heroicons-animated.com/), https://www.heroicons-animated.com/, https://www.heroicons-animated.com/r/registry.json (316 items enumerated), https://github.com/Aniket-508/heroicons-animated, GitHub API repos/Aniket-508/heroicons-animated
