Skip to content

64 icons · interaction="click-replay"

Click animated icons

These icons play once from the start every time they are clicked, a small confirmation that the action went through. They fit one-shot actions that do not leave a state behind: send, save, refresh, download, print or delete.

All click replay icons

How it behaves

Replays once from the start on every click unless reduced motion is preferred.

With reduced motion preferred, clicks still reach your handler but the animation does not play. The React component handles all of this; you only pick the icon.

Where to use it

  • Send buttons in chat and comment forms
  • Save, download and upload buttons
  • Refresh and rotate buttons
  • Add-to-cart buttons
  • Text formatting buttons in editors

By category

  • Alerts · 1

    X Octagon

  • Navigation · 6

    Arrow down circle, Arrow left circle, Arrow right circle, Arrow up circle, Log In, Log Out

  • Action · 30

    Check, Check Circle, Chevron left, Chevron right, Delete, Download, Download Cloud, Download V2, Edit 2, Edit 3, Filter, Heart V2, Link, Link 2, Minus, Minus Circle, Minus Square, Plus Circle, Plus Square, Power, Refresh, Refresh Ccw, Refresh V2, Rotate Ccw, Rotate Cw, Save, Thumbs Down, Upload, Upload Cloud, X Square

  • Content · 5

    File Minus, File Plus, Folder Minus, Folder Plus, User Check

  • Media · 6

    Camera, Repeat, Shuffle, Skip back, Skip forward, Stop Circle

  • Text editing · 8

    Align Center, Align Justify, Align Left, Align Right, Bold, Italic, Type, Underline

  • Communication · 3

    Phone, Phone Call, Send

  • Devices · 1

    Printer

  • Commerce · 1

    Shopping Cart

  • Design & layout · 3

    Crop, Mouse Pointer, Scissors

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

Put the icon in a real button with the render prop, so it can be focused and announced. Your onClick runs first; call event.preventDefault() to skip the animation.

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

<UseAnimations
  animation={download}
  size={24}
  onClick={handleDownload}
  render={(eventProps, animationProps) => (
    <button type="button" aria-label="Download" {...eventProps}>
      <span {...animationProps} />
    </button>
  )}
/>

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 click replay interaction?

64 icons: X Octagon, Arrow down circle, Arrow left circle, Arrow right circle, Arrow up circle, Log In, Log Out, Check, Check Circle, Chevron left, Chevron right, Delete, Download, Download Cloud, Download V2 and 49 more. Click icons typically confirm send, save, refresh, download, add-to-cart and formatting buttons.

What happens when the user prefers reduced motion?

With reduced motion preferred, clicks still reach your handler but the animation does not play. 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="click-replay" 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.