I built <code>@animateicons/react</code>, an open-source package for animated Lucide-style icons in React.
The goal is simple: make it easy to add subtle motion to buttons, menus, dashboards, landing pages, and product UIs without creating custom SVG animations from scratch.
<h2>Install</h2>
<pre><code>pnpm add @animateicons/react
</code></pre>
<h2>Usage</h2>
<pre><code>import { EyeIcon } from &quot;@animateicons/react/lucide&quot;;

export default function Example() {
 return &lt;EyeIcon size={24} color=&quot;#f45b48&quot; /&gt;;
}
</code></pre>
<h2>Why AnimateIcons?</h2>
<ul>
<li>Smooth SVG animations</li>
<li>Lucide-inspired design</li>
<li>TypeScript support</li>
<li>Tree-shakeable imports</li>
<li>Lightweight and customizable</li>
<li>Works with any React project</li>
</ul>
<h2>Great For</h2>
<ul>
<li>React applications</li>
<li>Dashboards</li>
<li>Landing pages</li>
<li>Design systems</li>
<li>Component libraries</li>
<li>SaaS products</li>
</ul>
<h2>Links</h2>
<ul>
<li>Docs: <a href="https://animateicons.in/icons/docs" target="_blank" rel="noopener nofollow">https://animateicons.in/icons/docs</a></li>
<li>Package: <a href="https://www.npmjs.com/package/@animateicons/react" target="_blank" rel="noopener nofollow">https://www.npmjs.com/package/@animateicons/react</a></li>
<li>GitHub: <a href="https://github.com/Avijit07x/animateicons" target="_blank" rel="noopener nofollow">https://github.com/Avijit07x/animateicons</a></li>
</ul>
I’m continuously improving the library and would love feedback on:
<ul>
<li>API design</li>
<li>Import experience</li>
<li>Documentation clarity</li>
<li>Missing icons or animation ideas</li>
</ul>
Contributions, issues, and feature requests are always welcome.

The Missing Piece Between Static Icons and Better UX