Skip to main content
Lucide Animated icons are React components that come with built-in hover animations. Each icon is a fully-featured component that animates on mouse hover by default.

​
Importing Icons

Import icons individually by name from the package. Icon names use PascalCase with an “Icon” suffix: 
import { HeartIcon } from "lucide-animated";
import { BellIcon } from "lucide-animated";
import { CheckIcon } from "lucide-animated";

​
Basic Rendering

Render icons as React components. By default, they animate on hover: 
import { HeartIcon } from "lucide-animated";

export default function App() {
  return (
    <div>
      <HeartIcon />
    </div>
  );
}
Hover over the icon to see the animation play automatically.

​
Customizing Size

All icons accept a size prop to control their dimensions. The default size is 28 pixels: 
import { BellIcon } from "lucide-animated";

export default function IconSizes() {
  return (
    <div className="flex items-center gap-4">
      {/* Small */}
      <BellIcon size={20} />
      
      {/* Default */}
      <BellIcon />
      
      {/* Large */}
      <BellIcon size={48} />
      
      {/* Extra large */}
      <BellIcon size={64} />
    </div>
  );
}

​
Common Props

Icons extend standard HTML div attributes, so you can pass any props you’d normally use: 
import { CheckIcon } from "lucide-animated";

export default function ClickableIcon() {
  const handleClick = () => {
    console.log("Icon clicked!");
  };

  return <CheckIcon onClick={handleClick} />;
}

​
Animation on Hover

Each icon has a unique animation that plays on hover. The animation behavior varies by icon:

HeartIcon

Scales up and down with a pulse effect

BellIcon

Rotates back and forth like a ringing bell

CheckIcon

Draws the checkmark path from start to finish

ActivityIcon

Animates the activity line from left to right

​
Complete Example

Here’s a complete example showing multiple icons with different sizes and hover animations: 
import { HeartIcon, BellIcon, CheckIcon, ActivityIcon } from "lucide-animated";

export default function IconShowcase() {
  return (
    <div className="flex items-center gap-6 p-8">
      <div className="text-center">
        <HeartIcon size={32} />
        <p className="mt-2 text-sm">Heart</p>
      </div>
      
      <div className="text-center">
        <BellIcon size={32} />
        <p className="mt-2 text-sm">Bell</p>
      </div>
      
      <div className="text-center">
        <CheckIcon size={32} />
        <p className="mt-2 text-sm">Check</p>
      </div>
      
      <div className="text-center">
        <ActivityIcon size={32} />
        <p className="mt-2 text-sm">Activity</p>
      </div>
    </div>
  );
}
Hover animations are disabled when using imperative control via refs. See the Imperative Control guide for more details.

Build docs developers (and LLMs) love

Get started for freeTalk to us