Lucide Motion

lucide-motion is a drop-in animated replacement for lucide-react. Every one of Lucide's 1,711 icons is exported as a React component that draws itself on hover.

Hover any of those. The same imports work in your app:

import { Heart, Settings, Sparkles } from "lucide-motion";

<Heart size={48} />

Why use this

• Drop-in for lucide-react — change the import path, get animation for free
• Full prop parity — size, color, strokeWidth, absoluteStrokeWidth, className, refs all work as you'd expect
• Six trigger modes — hover, click, mount, in-view, parent-hover, manual via ref
• Accessible by default — respects prefers-reduced-motion
• Customizable to the metal — escape hatch lets you replace the draw with any Motion variants
• Tree-shakable — each icon is its own module

Where to go next

• Getting Started — install and render your first icon
• Triggers — animate on hover, click, scroll, mount, or imperatively
• Animation — slow it down, speed it up, stagger strokes, change easing
• Custom motion — replace the draw entirely with your own variants
• API reference — every prop, every type