codeaashu

codeaashu / lucide-motion

Public

Lucide React Motion

lucide-motion.aashuu.tech
11
1
100% credibility
Found May 29, 2026 at 11 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

Lucide Motion is a React component library that provides over 1,700 animated icon variants of the popular Lucide icon set. Users replace their existing lucide-react import with lucide-motion, and icons automatically animate when hovered, clicked, or scrolled into view. The library supports various animation triggers (hover, click, mount, in-view, parent-hover, or manual control), pre-built 'signature' animations for specific icons (like hearts pulsing or bells ringing), and respects users' accessibility preferences for reduced motion. It's published as a npm package and includes comprehensive documentation with a live gallery and playground.

How It Works

1
🔍 You need icons for your app

You're building a website or app and want nice-looking icons that catch attention.

2
✨ You discover animated icons

You find Lucide Motion and learn it gives you all 1,700+ Lucide icons with built-in animations.

3
📦 You install it in one line

Just like adding regular icons, you run a quick install and everything is ready to go.

4
🎨 You drop in an animated icon

Instead of importing 'Heart', you import 'Heart' from lucide-motion and it now draws itself when you hover.

5
You customize how icons move
👆
Keep it simple

Just use hover — icons draw beautifully when someone mouses over them.

🎭
Make icons come alive

Hearts pulse, bells ring, and spinners spin on their own with signature animations.

6
🌐 Your project works for everyone

The icons automatically respect people's preference to reduce motion, keeping your app accessible.

🎉 Your app has beautiful animated icons

Users notice and love the polished, animated icons that feel responsive and alive.

Sign up to see the full architecture

5 more

Sign Up Free

Star Growth

See how this repo grew from 11 to 11 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is lucide-motion?

Lucide Motion is a React icon library that adds animation to every Lucide icon. It works as a drop-in replacement for lucide-react -- same API, same props, but icons now draw themselves on hover, click, or scroll into view. The library is built in TypeScript and powered by Motion, with support for React 18 and 19.

The core feature is a stroke-drawing animation that traces each icon's path. Beyond that, it offers "signature" animations for specific icons -- a heart beats, a bell rings, a loader spins forever. You can control timing, stagger, easing, and what happens when the user stops interacting. It also respects the OS reduced-motion preference out of the box.

Why is it gaining traction?

The hook is simple: you get animated icons without building them yourself. Most icon libraries are static. Lucide Motion makes interfaces feel alive with one prop change. The trigger system is flexible -- hover is the default, but you can also fire animations on click, mount, scroll-into-view, or imperatively via a ref.

The signature animations are where it gets interesting. Instead of every icon doing the same draw effect, icons with character animations (bells, hearts, spinners) play their own motion. This makes UI feedback feel intentional rather than mechanical.

Who should use this?

React developers building landing pages, dashboards, or component libraries who want icon animations without custom SVG work. If you're already using lucide-react, the migration path is trivial -- swap the import and add a trigger prop. Product teams wanting polished micro-interactions without a designer's custom SVG work will find the most value here.

Verdict

Lucide Motion is a well-designed solution to a real problem, with solid documentation and a live playground to test every feature. The API is clean and the defaults are sensible. However, with only 11 stars, the credibility score sits at 1.0% -- this is a young project with minimal community validation. Test it in a side project before committing to a production app. If the maintainer keeps shipping, this could become a standard in the React ecosystem.

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.