Skip to content
Cuelark UI
EffectsAnimated

Animated Icon

Any icon, animated with a motion that fits it: bells ring, arrows nudge, gears turn.

Animated Icon brings any icon to life with GSAP: react-icons, lucide-react, an installed Cuelark icon or a raw SVG. Leave the animation on auto and it reads the icon's name to pick a motion that means something: bells ring, arrows nudge in their direction, gears turn, send icons fly off and return, refresh spins, charts grow, eyes blink, flags wave, pins drop. Or choose from 30 named animations, triggered on hover, click, mount, scroll or loop.

Preview

Hover: each icon picks its own motion

Installation

pnpm dlx shadcn@latest add https://ui.cuelark.com/r/animated-icon.json

The CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/animated-icon.

Builds on: motion

Usage

import { AnimatedIcon } from "@/components/ui/animated-icon";

<AnimatedIcon>
  <BellIcon />
</AnimatedIcon>

<AnimatedIcon animation="spin" trigger="click">
  <RefreshCwIcon />
</AnimatedIcon>

Motion

How it moves

GSAP timelines per animation, scaled by --cl-motion; auto mode maps icon names to motions.

Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.

API reference

AnimatedIcon

PropTypeDefaultDescription
animationstring"auto"auto, pop, ring, nudge-right, turn, fly, spin, twinkle, zoom, blink, wave, grow, drive, drop, draw and more.
trigger"hover" | "click" | "mount" | "inView" | "loop""hover"When it plays.
namestring—Icon name for auto mode; read from the child when omitted.
durationnumber—Override seconds.

Accessibility

  • Decorative motion only; the icon keeps its own label.
  • With reduced motion or --cl-motion: 0 the effect stays still and the content remains fully usable.

FAQ

Also searched as: animated icons react · icon animation · react icons animation · lucide animated icons · hover icon animation · gsap icon animation