Skip to content

21 icons · interaction="hover"

Hover animated icons

These icons play forward when the pointer enters and run backward when it leaves, so the motion follows the cursor and never ends half-way. They suit navigation items and buttons that hint at what they open: a trash lid lifts, a settings cog turns, a folder opens.

All hover icons

How it behaves

Plays forward on mouseenter and backward on mouseleave.

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

  • Sidebar and navigation menu items
  • Delete buttons that lift the lid before the click
  • Settings and profile links
  • Zoom in and zoom out controls
  • Social links in a footer

By category

  • Action · 11

    Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out

  • Content · 7

    Archive, Copy, Mail, Share, User minus, User plus, User X

  • Social media · 3

    Instagram, YouTube, YouTube V2

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 bookmark from 'react-useanimations/lib/bookmark';

// Bookmark normally uses 'click-toggle'
<UseAnimations animation={bookmark} interaction="hover" size={32} />

Put the icon in a link or button with the render prop: the animation then also plays when the element gets keyboard focus, and taps on touch screens do not trigger it.

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

<UseAnimations
  animation={archive}
  render={(eventProps, animationProps) => (
    <a href="/archive" {...eventProps}>
      <span {...animationProps} /> Archive
    </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 interaction?

21 icons: Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out, Archive, Copy, Mail, Share and 6 more. Hover icons typically mark navigation items, delete buttons, settings, zoom controls and social links.

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" 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.