Skip to main content

​
Quick Start

This guide will help you get started with Lucide Animated icons in your React application.

​
Basic Usage

After installing an icon via the shadcn CLI, you can import and use it like any other React component: 
import { HeartIcon } from "@/components/icons/heart";

export default function App() {
  return (
    <div>
      <HeartIcon />
    </div>
  );
}

​
Hover Animation

All Lucide Animated icons come with built-in hover animations. Simply hover over the icon to see it animate: 
import { ZapIcon } from "@/components/icons/zap";

export default function Example() {
  return (
    <div className="p-8">
      <ZapIcon size={48} />
      {/* Hover over the icon to see the animation */}
    </div>
  );
}
The hover animation is automatic and requires no additional configuration.

​
Icon Props

​
Size

Control the size of the icon using the size prop (in pixels): 
import { SparklesIcon } from "@/components/icons/sparkles";

export default function Sizes() {
  return (
    <div className="flex items-center gap-4">
      <SparklesIcon size={16} />
      <SparklesIcon size={24} />
      <SparklesIcon size={32} />
      <SparklesIcon size={48} />
    </div>
  );
}

​
Styling with className

Style the icon using the className prop with Tailwind CSS or custom classes: 
import { HeartIcon } from "@/components/icons/heart";

export default function StyledIcon() {
  return (
    <div>
      <HeartIcon 
        size={32} 
        className="text-red-500 hover:text-red-600" 
      />
    </div>
  );
}
Icons use currentColor for stroke/fill, so you can control color via text color utilities.

​
Imperative Control

For advanced use cases, you can control animations programmatically using refs: 
import { useRef } from "react";
import { ZapIcon } from "@/components/icons/zap";
import type { ZapHandle } from "@/components/icons/zap";

export default function ImperativeExample() {
  const iconRef = useRef<ZapHandle>(null);
  
  return (
    <div>
      <ZapIcon ref={iconRef} size={48} />
      
      <button onClick={() => iconRef.current?.startAnimation()}>
        Start Animation
      </button>
      
      <button onClick={() => iconRef.current?.stopAnimation()}>
        Stop Animation
      </button>
    </div>
  );
}

​
Icon Handle Interface

Each icon exports a handle type with these methods: 
interface IconHandle {
  startAnimation: () => void;
  stopAnimation: () => void;
}
When using refs for imperative control, the automatic hover animation is disabled to prevent conflicts.

​
Real-World Example

Here’s a complete example showing multiple features: 
import { useState } from "react";
import { HeartIcon } from "@/components/icons/heart";
import { SparklesIcon } from "@/components/icons/sparkles";
import { ZapIcon } from "@/components/icons/zap";

export default function IconShowcase() {
  return (
    <div className="flex flex-col gap-8 p-8">
      <div>
        <h2 className="text-lg font-semibold mb-4">Hover Animations</h2>
        <div className="flex gap-6">
          <HeartIcon size={48} className="text-red-500" />
          <SparklesIcon size={48} className="text-yellow-500" />
          <ZapIcon size={48} className="text-blue-500" />
        </div>
      </div>
      
      <div>
        <h2 className="text-lg font-semibold mb-4">Different Sizes</h2>
        <div className="flex items-center gap-4">
          <HeartIcon size={16} />
          <HeartIcon size={24} />
          <HeartIcon size={32} />
          <HeartIcon size={48} />
        </div>
      </div>
    </div>
  );
}

​
Animation Behavior

Each icon has a unique animation that plays on hover:
  • HeartIcon: Scale pulse animation that repeats 2 times
  • ZapIcon: Path drawing animation using pathLength
  • SparklesIcon: Combined sparkle fill with blinking stars
The animations are built with Motion variants for smooth, optimized performance: 
// Example from ZapIcon
const PATH_VARIANTS = {
  normal: {
    opacity: 1,
    pathLength: 1,
    transition: {
      duration: 0.6,
      opacity: { duration: 0.1 },
    },
  },
  animate: {
    opacity: [0, 1],
    pathLength: [0, 1],
    transition: {
      duration: 0.6,
      opacity: { duration: 0.1 },
    },
  },
};

​
Next Steps

Browse All Icons

Explore the complete collection of 379+ animated icons

Imperative Control

Learn how to control animations programmatically