Animated Icon
Animate any Lucide icon with one of twelve presets (wiggle, bounce, spin, pulse, draw, shake, pop, float, tada, flip, swing, nudge), played on hover, on its button's hover, on click, on load or on a loop.
- Category: Animated React Icons
- Licence: Free, MIT
- Built with: React 19, Tailwind CSS 4, Motion
- Dependencies: motion, clsx, tailwind-merge
Examples
Animated Icon
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
icon | ComponentType | — | Any Lucide icon, e.g. Bell. |
animation | "wiggle" | "bounce" | "spin" | "pulse" | "draw" | "shake" | "pop" | "float" | "tada" | "flip" | "swing" | "nudge" | "wiggle" | |
trigger | "hover" | "parent" | "click" | "loop" | "mount" | "none" | "hover" | |
animate | boolean | — | Play when this turns true. |
size | number | 24 | |
strokeWidth | number | 2 | |
speed | number | 1 | |
className | string | — |
About Animated Icon
Animated Icon takes any Lucide icon and animates it with one of twelve presets: wiggle, bounce, spin, pulse, draw, shake, pop, float, tada, flip, swing and nudge. Play it on hover, on its button's hover, on click, on load or on a loop.
Animated Icon is an animated icon set for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.
When to use Animated Icon
- Buttons that react to hover.
- Navigation and toolbar icons.
- Empty states and onboarding.
- Status and success indicators.
How it works
Presets are keyframes run with Motion on a wrapper, so any icon works without changes. The draw preset normalises every stroke with pathLength, so it can draw any shape, and reduced motion turns animation off.
Icons are decorative by default and hidden from assistive tech; give them a label when they stand alone as a button, and the animation stops under reduced motion. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.
Customizing Animated Icon
Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.
The Customize panel next to the preview lets you change speed, loop live, and the Code tab updates to match, so the snippet you copy already carries your values.
- icon (ComponentType): Any Lucide icon, e.g. Bell.
- animation (default "wiggle").
- trigger (default "hover").
- animate (boolean): Play when this turns true.
- size (number, default 24).
- strokeWidth (number, default 2).
Goes well with Animated Icon
These icons pieces share its tokens and motion language, so they sit together on one page without clashing.
- Animated Icons: 49 hand-animated React Lucide icons where every part moves on its own
Install Animated Icon
npx shadcn@latest add https://charcoalui.com/r/animated-icon.jsonAnimated Icon is free and MIT licensed. The command copies animated-icon.tsx into components/ui and installs clsx, tailwind-merge; you can also copy the source from the Code tab by hand.
Charcoal UI Pro adds 393 more showpiece components, 112 sections and 100 templates built the same way.
Frequently asked questions
- How do I install Animated Icon?
- Run npx shadcn@latest add https://charcoalui.com/r/animated-icon.json. The shadcn CLI copies animated-icon.tsx into components/ui and installs motion, clsx, tailwind-merge. You can also copy the source from this page by hand.
- Is Animated Icon free for commercial use?
- Yes. Animated Icon is MIT licensed: use it in any personal or commercial project and change it however you like.
- Does Animated Icon work with Next.js?
- Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
- Can an AI coding agent install Animated Icon?
- Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Animated Icon's props and source and get_install_command returns the exact command.