Animated Icons
Forty-nine hand-animated Lucide icons where each part moves on its own: the bell's clapper swings, the bin lid lifts, the envelope flap opens, the clock hands sweep, the padlock shackle pops.
- Category: Animated React Icons
- Licence: Charcoal UI Pro
- Built with: React 19, Tailwind CSS 4, Motion
- Dependencies: motion, clsx, tailwind-merge
Examples
Animated Icons
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 24 | |
strokeWidth | number | 2 | |
trigger | "hover" | "parent" | "loop" | "none" | "hover" | "parent" plays when the surrounding button is hovered or focused. |
animate | boolean | — | Drive it yourself; overrides the trigger. |
className | string | — |
About Animated Icons
Animated Icons is a pack of 49 Lucide icons animated part by part: the bell's clapper swings, the bin lid lifts, the envelope flap opens, the clock hands sweep, the padlock shackle pops and the sun's rays turn.
Animated Icons 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 Icons
- Navigation and sidebars.
- Buttons and calls to action.
- Settings and preference screens.
- Marketing pages that want polish.
How it works
Each icon is a small SVG component with Motion variants on its parts, triggered by its own hover, its parent's hover or focus, a loop, or a prop. Paths come from Lucide under the ISC licence.
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 Icons
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 loop, size live, and the Code tab updates to match, so the snippet you copy already carries your values.
- size (number, default 24).
- strokeWidth (number, default 2).
- trigger (default "hover"): "parent" plays when the surrounding button is hovered or focused.
- animate (boolean): Drive it yourself; overrides the trigger.
Goes well with Animated Icons
These icons pieces share its tokens and motion language, so they sit together on one page without clashing.
- Animated Icon: Animate any Lucide icon in React with twelve hover and loop presets
Install Animated Icons
npx shadcn@latest add @charcoal/animated-iconsAnimated Icons is part of Charcoal UI Pro. One seat unlocks all 393 Pro components, 112 landing-page sections and 100 full templates, for every personal and client project, with updates included. Add the @charcoal registry once with your access token, then the command above copies animated-icons.tsx into components/ui and installs clsx, tailwind-merge.
You own the file you install: no runtime package, no lock-in, nothing to keep in sync. Change it however your product needs.
See Charcoal UI Pro pricing · Pro setup
Frequently asked questions
- How do I install Animated Icons?
- Animated Icons is part of Charcoal UI Pro. Add the @charcoal registry to components.json with your access token, then run npx shadcn@latest add @charcoal/animated-icons. It copies animated-icons.tsx into components/ui and installs motion, clsx, tailwind-merge.
- Is Animated Icons free for commercial use?
- Animated Icons needs a Charcoal UI Pro seat, monthly or a one-time lifetime price. A seat covers unlimited personal and commercial projects, including client work, and every future Pro component.
- Does Animated Icons 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 Icons?
- Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Animated Icons's props and get_install_command returns the exact command.