Skip to content

21 icons · interaction="loop"

Looping animated icons

These icons play continuously for as long as they are on screen, so they suit states that last: something is loading, a warning is active, a terminal is waiting. With reduced motion preferred they stop on their first frame and still read as a normal icon.

All loop icons

How it behaves

Plays continuously; stays on the static first frame when reduced motion is preferred.

With reduced motion preferred, the icon does not autoplay and stays on its static first frame. The React component handles all of this; you only pick the icon.

Where to use it

  • Loading spinners and progress indicators
  • Active warning and error states
  • Live and recording indicators
  • Scroll-down cues in hero sections
  • Attention markers for new notifications

By category

  • Alerts · 4

    Alert circle, Alert octagon, Alert triangle, Error

  • Notifications · 2

    Notification V3, Notification V4

  • Navigation · 2

    More Horizontal, More Vertical

  • Action · 2

    Checkmark, Help

  • Media · 1

    Airplay

  • Development · 1

    Terminal

  • Loading · 5

    Infinity, Loading circular, Loading V2, Loading V3, Loading V4

  • Other · 4

    Activity, Arrow down, Arrow up, Scroll down

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="loop" size={32} />

Loops autoplay and pause while scrolled out of view. Slow one down with speed, play it once with loop={false}, or keep it still with autoplay={false}:

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

<UseAnimations animation={infinity} speed={0.5} />      // half speed
<UseAnimations animation={infinity} loop={false} />     // plays once, then stops
<UseAnimations animation={infinity} autoplay={false} /> // static first frame

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 loop interaction?

21 icons: Alert circle, Alert octagon, Alert triangle, Error, Notification V3, Notification V4, More Horizontal, More Vertical, Checkmark, Help, Airplay, Terminal, Infinity, Loading circular, Loading V2 and 6 more. Looping icons typically show loading spinners, active alerts, a ringing bell or a scroll-down hint.

What happens when the user prefers reduced motion?

With reduced motion preferred, the icon does not autoplay and stays on its static first frame. 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="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.