Get Started

InstallationCopy Anchor Link

Add icons one by one from your icon library's page (Lucide Icons or Hugeicons), here Lucide's Bell. Each icon is a file in your project; the core that animates them comes from @animate-ui/react/icons, which the CLI installs with the first icon.

npx shadcn@latest add @animate-ui/icons-lucide-bell

pnpm dlx shadcn@latest add @animate-ui/icons-lucide-bell

yarn dlx shadcn@latest add @animate-ui/icons-lucide-bell

bun x shadcn@latest add @animate-ui/icons-lucide-bell

UsageCopy Anchor Link

An icon animates on its own trigger:

import { Bell } from '@/components/animate-ui/icons/bell';

<Bell animateOnHover />;

Or let a parent decide, so hovering a whole button animates its icon:

import { AnimateIcon } from '@animate-ui/react/icons';

<AnimateIcon animateOnHover asChild>
  <button>
    <Bell /> Notifications
  </button>
</AnimateIcon>;

Icons inside an AnimateIcon inherit its props and can override them individually.

TriggersCopy Anchor Link

• animate: animates while true (or plays the named animation).
• animateOnHover: animates while the pointer is over the icon, and returns to rest when it leaves. A touch doesn't play it (a finger can't leave): add animateOnTap for touch screens.
• animateOnTap: animates while pressed, and returns to rest on release or when the pointer leaves. Add completeOnStop to always finish the animation.
• animateOnView: plays when the icon scrolls into view (animateOnViewMargin, animateOnViewOnce).

AnimationsCopy Anchor Link

Every icon has a default animation, often a few named ones, plus path (draws the strokes) and path-loop. Pick one with animation; the Lucide Icons and Hugeicons pages list each icon's. Icons drawing their strokes add one small CSS rule to the page themselves, so their paths rest solid: no Tailwind setup needed.

<ArrowRight animateOnHover animation="pointing" />

TimingCopy Anchor Link

• speed: playback rate (2 is twice as fast). At 1, the default, icons play exactly as authored. It follows AnimateUIProvider's tempo.
• delay: milliseconds before the animation starts.
• loop, loopDelay: repeat, with a pause between iterations. Off screen, a loop waits after its current lap until the icon is back in view.

PersistenceCopy Anchor Link

• persistOnAnimateEnd: stay in the animated state when it ends.
• initialOnAnimateEnd: jump back to the initial state, without transition, when it ends.
• completeOnStop: finish the current animation before returning to rest.

Under reduced motion, icons don't animate.

API ReferenceCopy Anchor Link

AnimateIcon takes the same props (except size), plus asChild to animate through its child element.