Skip to content

144 icons · interaction="hover-replay"

Hover-to-play animated icons

These icons play once when the pointer enters and finish on their own, which keeps quick passes over a toolbar from turning into jittery motion. Most of the set works this way: arrows, files, devices, weather and brand icons that come alive on hover.

All hover replay icons

How it behaves

Plays once on mouseenter unless reduced motion is preferred. Leaving does not stop it; entering during playback does not restart it.

With reduced motion preferred, hovering does not play the animation. 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

  • Feature lists and pricing tables
  • Arrow links and call-to-action buttons
  • Toolbar buttons in editors and dashboards
  • Cards in a landing page grid
  • Footer and contact links

By category

  • Navigation · 22

    Arrow Down Left, Arrow Down Right, Arrow Left, Arrow Right, Arrow Up Left, Arrow Up Right, Chevron Down, Chevron Up, Chevrons Down, Chevrons Left, Chevrons Right, Chevrons Up, Corner Down Left, Corner Down Right, Corner Left Down, Corner Left Up, Corner Right Down, Corner Right Up, Corner Up Left, Corner Up Right, External Link, Sidebar

  • Action · 6

    Award, Key, Maximize 2, Minimize 2, Shield, Slash

  • Content · 10

    Book, Book Open, Clipboard, File, File Text, Image, Inbox, Paperclip, User, Users

  • Media · 11

    Aperture, Cast, Disc, Fast Forward, Film, Headphones, Music, Radio, Rewind, Speaker, TV

  • Text editing · 2

    Hash, List

  • Communication · 9

    At Sign, Message Circle, Message Square, Phone Forwarded, Phone Incoming, Phone Missed, Phone Outgoing, RSS, Voicemail

  • Devices · 10

    Battery, Battery Charging, Bluetooth, CPU, Hard Drive, Monitor, Smartphone, Tablet, Watch, WiFi

  • Weather · 13

    Cloud Drizzle, Cloud Lightning, Cloud Rain, Cloud Snow, Droplet, Moon, Sun, Sunrise, Sunset, Thermometer, Umbrella, Wind, Zap

  • Maps & location · 8

    Anchor, Crosshair, Life Buoy, Map, Map Pin, Navigation, Navigation 2, Target

  • Commerce · 10

    Box, Briefcase, Credit Card, Dollar Sign, Gift, Package, Percent, Shopping Bag, Tag, Truck

  • Charts · 5

    Bar Chart, Bar Chart 2, Pie Chart, Trending Down, Trending Up

  • Development · 8

    Code, Command, Database, Git Branch, Git Commit, Git Merge, Git Pull Request, Server

  • Design & layout · 7

    Columns, Grid, Layers, Layout, Move, Pen Tool, Table

  • Shapes & math · 8

    Circle, Divide, Divide Circle, Divide Square, Hexagon, Octagon, Square, Triangle

  • Social media · 9

    Chrome, Codesandbox, Figma, Framer, GitLab, Slack, Trello, Twitch, Twitter X

  • Other · 6

    Clock, Coffee, Frown, Meh, Smile, Tool

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

Hover the whole card or link, not just the icon: with the render prop the events go on your element, and keyboard focus plays the animation too.

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

<UseAnimations
  animation={trendingUp}
  render={(eventProps, animationProps) => (
    <a href="/reports" className="card" {...eventProps}>
      <span {...animationProps} /> Weekly growth
    </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 replay interaction?

144 icons: Arrow Down Left, Arrow Down Right, Arrow Left, Arrow Right, Arrow Up Left, Arrow Up Right, Chevron Down, Chevron Up, Chevrons Down, Chevrons Left, Chevrons Right, Chevrons Up, Corner Down Left, Corner Down Right, Corner Left Down and 129 more. Hover-to-play icons typically liven up arrow links, feature lists, toolbar buttons and landing page cards.

What happens when the user prefers reduced motion?

With reduced motion preferred, hovering does not play the animation. 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-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.