Can I animate any Lucide icon?

Yes. Pass any lucide-react icon to Animated Icon with a preset such as wiggle, bounce, spin or draw.

How do I trigger the animation from a button?

Set trigger to parent and the icon plays whenever its parent button is hovered or focused.

Are animated icons free?

Animated Icon, the engine, is free and MIT. The 49-icon hand-animated pack is part of Pro.

Do these animated React icons work with shadcn/ui?

Yes. Charcoal UI is a shadcn registry, so components install with the same CLI, use the same CSS variables and sit next to your existing shadcn components.

Animated React Icons

Animated Lucide icons for React: hover, loop and per-part animations.

About these animated React icons

Animated icons make buttons and navigation feel alive. Animated Icon animates any Lucide icon with twelve presets, from wiggle and bounce to draw and spin, and Animated Icons is a hand-made pack of 49 icons where each part moves on its own.

Both play on hover, on their button's hover or focus, on a loop, or when you tell them to, and both stop for people who prefer reduced motion.

Where they earn their keep

Buttons and calls to action.
Sidebars and toolbars.
Empty states and onboarding.
Success, loading and status moments.

How they are built

The engine wraps any icon and runs keyframes on it, while the pack's icons are small SVG components with motion on their individual paths. Paths come from Lucide under the ISC licence.

Each one is a single file you copy into your project with the shadcn CLI and own outright. They are written for React 19 and Tailwind CSS 4 with Motion, use only your theme's CSS variables, and work in Next.js, Vite, Remix and Astro.

All 2 animated React icons

1 is free and MIT licensed, and 1 is part of Charcoal UI Pro, which covers all 393 Pro components, 112 sections and 100 templates for one price. Open any of them to try it live, tune it and copy the code.

Animated Icon: Animate any Lucide icon in React with twelve hover and loop presets
Animated Icons (Pro): 49 hand-animated React Lucide icons where every part moves on its own

Install one

npx shadcn@latest add https://charcoalui.com/r/animated-icon.json

Every page shows the exact command. The CLI adds the file to components/ui along with any dependency it needs, and AI coding agents can do the same through the Charcoal UI MCP server.

Other categories

Browse the rest of the library by what you are building.

React Input Components: 68 components
React Navigation Components: 27 components
React Dialog, Popover and Tooltip Components: 19 components
React Loading, Progress and Toast Components: 23 components
React Card, Accordion and Display Components: 67 components
React AI Chat and Agent Components: 20 components
React Chart and Data Table Components: 24 components
React UI Sound Effects: 2 components
React Text Animations: 41 components
Animated React Backgrounds: 86 components
React Cursor Effects: 17 components
React Image Effects: 14 components
Interactive React Animations: 27 components
React UI Transitions and Micro-interactions: 23 components

Frequently asked questions

Can I animate any Lucide icon?: Yes. Pass any lucide-react icon to Animated Icon with a preset such as wiggle, bounce, spin or draw.
How do I trigger the animation from a button?: Set trigger to parent and the icon plays whenever its parent button is hovered or focused.
Are animated icons free?: Animated Icon, the engine, is free and MIT. The 49-icon hand-animated pack is part of Pro.
Do these animated React icons work with shadcn/ui?: Yes. Charcoal UI is a shadcn registry, so components install with the same CLI, use the same CSS variables and sit next to your existing shadcn components.