What built-in interactions do useAnimations icons support?

Updated

useAnimations ships every icon with one of six built-in interactions, and you can swap the default for another with a single interaction prop. The six options are loop, click-toggle, click-replay, hover, hover-loop, and hover-replay. Pick based on what should trigger the motion and whether the icon needs to hold a state or just give feedback.

The six interactions

interaction value Trigger Behavior Typical use
loop None (automatic) Plays continuously Loaders, ambient status
click-toggle Click Switches between two states Menu/close, play/pause
click-replay Click Replays from the start on every click Action feedback
hover Pointer enter/leave Plays forward on enter, back on leave Subtle affordance on cards or buttons
hover-loop Pointer enter/leave Loops while hovered, finishes its cycle on leave Drawing attention to an interactive element
hover-replay Pointer enter Plays once from the start on every enter Repeated hover feedback

Each icon "ships with the interaction it was designed for," so the default already fits the icon's purpose — you only change it when your context calls for something different.

How to choose

  • No user action needed? Use loop. It runs on its own, which suits loaders and status indicators.
  • Two visual states? Use click-toggle. The icon flips between them on each click — the natural fit for menu/close or play/pause.
  • One-shot feedback on click? Use click-replay. It restarts the animation every time, so the user sees a response to their action.
  • Motion tied to pointing? The three hover variants differ in how they end: hover reverses back on leave, hover-loop completes its current cycle after you move away, and hover-replay restarts on each new enter.

Switching the interaction

Set the interaction prop to any of the six values. For example, to make an icon loop continuously:

<SomeIcon interaction="loop" />

The prop is the single point of control — the icon component, its animation data, and its styling stay the same.

What you get alongside the interactions

  • 300 icons, hand-crafted, with the interaction built in.
  • Zero dependencies, and the player is about 8 kB gzipped.
  • MIT licensed, so you can use and modify them freely.
  • Multiple delivery formats: a React component, shadcn/ui integration, or downloadable SVG and Lottie JSON (plus ZIP). Install via npm i react-useanimations.
  • Customizable: color and size are adjustable, and the icons are described as accessible and yours to style.

If you want to see the motion before committing, the site lets you hover or click icons in the library and open any icon for its code and downloads.