Description:
heroicons-animated is a React icon component library that provides 300+ smooth animated icons for your projects. Built on top of the popular Heroicons set with Motion animations.
Features
- 300+ pre-animated icons.
- Works natively inside React applications.
- Supports direct installation via command-line tools.
- Uses standard CSS classes for sizing and styling.
- Renders smooth vector animations.
- Requires zero manual animation configuration.
- Connects directly to the Shadcn ecosystem.
How to Use It
1. Install a specific icon in your project.
Using shadcn CLI
# Using pnpm
pnpm dlx shadcn@latest add @heroicons-animated/ICONNAME
# Using npx
npx shadcn@latest add @heroicons-animated/ICONNAME
# Using bun
bunx --bun shadcn@latest add @heroicons-animated/ICONNAMEUsing npm packages
pnpm add @heroicons-animated/react motion2. After installation, import the icon component and render it in your React component.
// Import a specific animated icon (example: HeartIcon)
import { HeartIcon } from "@heroicons-animated/react";
export default function App() {
return (
<>
{/* Render the icon with Tailwind CSS size classes */}
<HeartIcon className="size-6" />
</>
);
}Related Resources
- Lucide: A collection of customizable static icons for multiple frameworks.
- Motion: The underlying animation engine for building custom SVG transitions from scratch.
FAQs
Q: How do I change the color of the animated heroicons?
A: Pass Tailwind CSS text color classes to the component. The SVG elements inherit the current text color by default.
Q: Can I modify the animation speed or easing?
A: You can edit the animation variants directly if you install the icons via the shadcn CLI.
Q: Why do the animations fail to trigger on mount?
A: You must install the motion package alongside the react package.
Q: Do these icons support server-side rendering?
A: Yes. Framer Motion handles initial server renders gracefully. The animations hydrate and execute once the client loads the JavaScript.
