heroicons-animated

Overview

heroicons-animated is an MIT-licensed collection of 316 animated Heroicons, the icon set from the makers of Tailwind CSS. Each icon has a hover animation built with Motion. The project was created by Aniket, is backed by the Vercel Open Source Program and takes its approach from lucide-animated.

React icons install as editable source through the shadcn CLI, or as the @heroicons-animated/react npm package. The monorepo also publishes packages for Vue, Svelte, Solid, Angular, React Native, Preact, Astro and Flutter, so the same animated set can be used across stacks.

Features

• 316 animated icons: The Heroicons set with hover animations
• shadcn registry: Install individual icons as editable React components
• npm packages: @heroicons-animated/react and equivalents for other frameworks
• Nine targets: React, Vue, Svelte, Solid, Angular, React Native, Preact, Astro and Flutter
• Built with Motion: Uses motion for React and motion-v for Vue
• MIT licensed: Free for personal and commercial use

Tech stack

• React, Motion
• Heroicons
• Next.js (docs site)

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @heroicons-animated/icon-name