6 interactions · 300 icons
Animated icon interactions
Every icon ships with the micro interaction it was designed for: it loops, toggles or replays on click, or plays on hover. The React component wires it up and respects reduced motion, and the interaction prop switches any icon to another one.
- interaction="loop"Looping animated icons21 iconsPlays continuously; stays on the static first frame when reduced motion is preferred.Looping icons typically show loading spinners, active alerts, a ringing bell or a scroll-down hint.
- interaction="click-toggle"Click-to-toggle animated icons37 iconsToggles between two states on click, or switches immediately when reduced motion is preferred.Click-to-toggle icons typically drive mute/unmute, show/hide password, menu/close, play/pause and like buttons.
- interaction="click-replay"Click animated icons64 iconsReplays once from the start on every click unless reduced motion is preferred.Click icons typically confirm send, save, refresh, download, add-to-cart and formatting buttons.
- interaction="hover"Hover animated icons21 iconsPlays forward on mouseenter and backward on mouseleave.Hover icons typically mark navigation items, delete buttons, settings, zoom controls and social links.
- interaction="hover-replay"Hover-to-play animated icons144 iconsPlays once on mouseenter unless reduced motion is preferred. Leaving does not stop it; entering during playback does not restart it.Hover-to-play icons typically liven up arrow links, feature lists, toolbar buttons and landing page cards.
- interaction="hover-loop"Hover loop animated icons13 iconsLoops while hovered, finishes the current cycle after mouseleave and stays static when reduced motion is preferred.Hover loop icons typically mark social links, community invites, portfolio links and language pickers.
Choosing an interaction
- State that lasts, such as loading or an active alert: loop.
- An on/off control, such as mute, menu or show password: click toggle, with
activefor controlled state. - A one-shot action, such as send, save or refresh: click replay.
- A hint of what a link opens: hover, which reverses when the pointer leaves.
- Toolbars and lists people sweep across: hover replay, which finishes on its own.
- Links that invite a longer look, such as social icons: hover loop.
Reduced motion
The React component follows prefers-reduced-motion and updates when the setting changes. Taps on touch screens never start hover animations.
loop: the icon does not autoplay and stays on its static first frame.click-toggle: a click switches to the other state immediately, without the animation in between.click-replay: clicks still reach your handler but the animation does not play.hover: hovering does not play the animation.hover-replay: hovering does not play the animation.hover-loop: the icon stays static while hovered.