Heroicons Animated

316 Heroicons rebuilt as Motion-animated React components

Tier A · StrongIcon SetAnimation LibraryRegistryheroicons-animated.vercel.app

(Visit heroicons-animated.vercel.app ↗)(Docs)(Repository)(Registry)

Preview image from heroicons-animated.vercel.app

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.

Install

npx shadcn@latest add @heroicons-animated/heart

For an agent

Use 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.

Install command, framework, licence and component list.

Facts

License: MIT
Pricing: Free, Open source, Sponsor or ad supported
Framework: React, Next.js
Styling: Tailwind CSS, CSS custom properties
Distribution: shadcn registry, npm package, Copy-paste snippet, GitHub repository
Platform: Web
Content type: Icons, Code
Agent readiness: Machine-readable registry item, CLI installable, Copy-paste ready code, Readable open source
Accessibility: Unknown
Maturity: Actively maintained
GitHub stars: 168
Package: @heroicons-animated/react

Components it ships

316 total

Icon Animation Transition

Notable for

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

Provenance

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

Also in Icons & Logos

heroicons-animated.vercel.appTier A