Skip to main content

​
Installation

Lucide Animated icons are distributed via the shadcn/ui registry. Use the shadcn CLI to add individual icons directly to your project.

​
Prerequisites

You need a React project with shadcn/ui configured. Lucide Animated requires Motion (Framer Motion) as a dependency, which will be automatically added when you install an icon.

​
Installing Icons

Use the shadcn CLI to add icons to your project. Each icon is installed as a component in your project’s component directory: 
npx shadcn@latest add https://lucide-animated.com/r/heart
This command:
  1. Downloads the icon component source code
  2. Adds it to your components directory (typically components/ui/)
  3. Installs the motion dependency if not already present

​
Installing Multiple Icons

You can install multiple icons by running the command multiple times: 
npx shadcn@latest add https://lucide-animated.com/r/heart
npx shadcn@latest add https://lucide-animated.com/r/bell
npx shadcn@latest add https://lucide-animated.com/r/check
npx shadcn@latest add https://lucide-animated.com/r/sparkles

​
Using Installed Icons

After installation, import and use the icons in your React components: 
import { HeartIcon } from "@/components/ui/heart";

export default function App() {
  return (
    <div>
      <HeartIcon size={32} />
    </div>
  );
}
The import path depends on your shadcn/ui configuration. By default, components are installed in components/ui/.

​
Dependencies

When you install an icon, the following dependencies are automatically added to your project:
package.json
{
  "dependencies": {
    "motion": "^12.34.0"
  }
}
Motion (Framer Motion) is the only required dependency. The icons work with React 18+ and React 19.

​
Registry Information

The Lucide Animated registry is hosted at: 
https://lucide-animated.com/r/[icon-name].json
Each icon is available as a standalone registry item following the shadcn/ui registry schema.

​
Why shadcn/ui Registry?

The shadcn/ui approach gives you:
  • Full control: Icon source code lives in your project
  • No bundling overhead: Only install the icons you need
  • Easy customization: Modify animations and behavior directly
  • Type safety: Full TypeScript support
  • Version control: Icon code is tracked in your repository

​
Next Steps

Now that you know how to install icons, check out the Quick Start guide to learn how to use them in your project.