Skip to content

13 icons · interaction="hover-loop"

Hover loop animated icons

These icons loop while the pointer stays on them and finish the current cycle after it leaves, so they never stop mid-motion. They work for links that invite a longer look, mostly social and community icons.

All hover loop icons

How it behaves

Loops while hovered, finishes the current cycle after mouseleave and stays static when reduced motion is preferred.

With reduced motion preferred, the icon stays static while hovered. Taps on touch screens do not start hover animations, and keyboard focus does when the icon is inside a focusable element. The React component handles all of this; you only pick the icon.

Where to use it

  • Social media links in headers and footers
  • Community and chat invite buttons
  • Portfolio and profile links
  • Language and region pickers

By category

Use it in React

Icons listed here play this interaction by default. Any other icon can use it too: pass the interaction prop.

import UseAnimations from 'react-useanimations';
import settings from 'react-useanimations/lib/settings';

// Settings normally uses 'hover'
<UseAnimations animation={settings} interaction="hover-loop" size={32} />

Use the render prop so the whole link triggers the loop, including keyboard focus. Change the pace with speed:

import github from 'react-useanimations/lib/github';

<UseAnimations
  animation={github}
  speed={1.5}
  render={(eventProps, animationProps) => (
    <a href="https://github.com/useAnimations" aria-label="GitHub" {...eventProps}>
      <span {...animationProps} />
    </a>
  )}
/>

Every prop is in the documentation. Outside React, the icons are Lottie JSON files; Lottie icons shows how to recreate the interactions with lottie-web.

FAQ

Which icons use the hover loop interaction?

13 icons: Flag, Cloud, Globe, Behance, Codepen, Discord, Dribbble, Facebook, Github, Linkedin, Pocket, Telegram and Twitter. Hover loop icons typically mark social links, community invites, portfolio links and language pickers.

What happens when the user prefers reduced motion?

With reduced motion preferred, the icon stays static while hovered. The React component reads prefers-reduced-motion and updates when the setting changes, so you don't need any code for it.

How do I change an icon's interaction?

Every icon plays the interaction it was designed for. Pass interaction="hover-loop" to give any other icon this behaviour, or another value ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') to change it. The autoplay, loop and speed props adjust playback.