Skip to content

64 icons · MIT licensed

Animated action icons

The verbs of an interface: save, delete, download, refresh, like, bookmark, search and settings. Each one confirms the click or hover it belongs to, so a heart fills when you like a post and a trash can lid lifts before you delete.

Of the 64 icons, 2 loop continuously, 14 toggle between two states on click, 30 replay on every click, 11 play on hover and reverse on mouse leave, 6 play once on hover and 1 loops while hovered. Each one comes as a React component, a shadcn/ui component and a Lottie JSON animation, and 61 of them also as static SVGs, free for commercial use under the MIT license.

All action icons

Where to use them

  • Like, favourite and bookmark buttons on cards
  • Download, upload and save buttons that confirm the action
  • Show and hide password toggle in a login form
  • Refresh and sync buttons in dashboards
  • Delete buttons in tables and file lists
  • Search field that turns into a clear button

By interaction

  • Looping animated icons · 2

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

  • Click-to-toggle animated icons · 14

    Toggles between two states on click, or switches immediately when reduced motion is preferred. Bookmark, Heart, Lock / Unlock, Maxi/Minimize, Maxi/Minimize V2, Plus/X, Search/X, Settings V2, Shield Off, Star, Thumb up, Visibility, Visibility V2, Visibility V3.

  • Click animated icons · 30

    Replays once from the start on every click unless reduced motion is preferred. 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.

  • Hover animated icons · 11

    Plays forward on mouseenter and backward on mouseleave. Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out.

  • Hover-to-play animated icons · 6

    Plays once on mouseenter unless reduced motion is preferred. Leaving does not stop it; entering during playback does not restart it. Award, Key, Maximize 2, Minimize 2, Shield, Slash.

  • Hover loop animated icons · 1

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

Add one to your app

With React, install react-useanimations and import the icon; it plays its click toggle interaction on its own. Every icon in this category works the same way: swap heart for the name on its page.

npm install react-useanimations
import UseAnimations from 'react-useanimations';
import heart from 'react-useanimations/lib/heart';

<UseAnimations animation={heart} size={32} />

With shadcn/ui, the CLI adds a ready-made component:

npx shadcn@latest add https://useanimations.com/r/heart.json
import { AnimatedHeart } from '@/components/animations/heart';

<AnimatedHeart size={24} />

Not using React? Each icon is a Lottie JSON file at /icons/<id>.json; see Lottie icons for web, iOS, Android and Flutter players.

FAQ

Which animated action icons are included?

64 icons: Award, Bookmark, Calendar, Check, Check Circle, Checkmark, Chevron left, Chevron right, Delete, Download, Download Cloud, Download V2 and 52 more. All of them are free for personal and commercial projects under the MIT license, with no attribution required.

How do I use these animated action icons in React?

Install react-useanimations, add import heart from 'react-useanimations/lib/heart' and render <UseAnimations animation={heart} size={32} />. The icon plays its click toggle interaction and follows the text color. With shadcn/ui, run npx shadcn@latest add https://useanimations.com/r/heart.json instead.

Can I use these animated action icons without React?

Yes. Each icon is a Lottie JSON file at https://useanimations.com/icons/<id>.json (for example https://useanimations.com/icons/heart.json), playable with lottie-web, lottie-ios, lottie-android or Flutter's lottie package; static SVGs are on each icon page. None of them use expressions, so lottie-web's light build is enough.