Getting Started

Installation

bun add lucide-motion

Peer dependencies: react, react-dom, motion.

Your first icon

import { Heart } from "lucide-motion";

export default function Page() {
  return <Heart size={32} />;
}

Hover it. The icon draws itself on. That's the default behavior — no configuration required.

Migrating from lucide-react

If your project already uses lucide-react, the change is one line:

- import { Heart, Search, ArrowRight } from "lucide-react";
+ import { Heart, Search, ArrowRight } from "lucide-motion";

Every lucide-react prop works identically:

• size, color, strokeWidth, absoluteStrokeWidth
• className, style, onClick, all standard SVG attributes
• ref — exposes a MotionIconHandle (play, reset, node); see trigger="manual"

Each icon is also exported with an Icon suffix alias (Heart / HeartIcon), so either convention works.

What's different

Beyond lucide-react's API, this library adds motion props (reference):

• trigger — when/how the animation fires (hover, click, mount, in-view, parent-hover, manual)
• duration, delay, stagger, easing, repeat — timing controls
• onLeave — what happens when hover ends (complete, snap, redraw)
• reducedMotion — respect / force / disable the OS accessibility preference
• variants — escape hatch to replace the draw motion entirely

All optional. The defaults are sensible — installing the package and using icons unchanged gives you good motion out of the box.

Next steps

• Usage — sizing, color, stroke width
• Animation — timing controls
• Triggers — six ways to fire the animation