# Animated action icons

> 64 free animated action icons, including Award, Bookmark and Calendar. For React, shadcn/ui and Lottie JSON, MIT licensed.

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.

## Icons

- [Award](https://useanimations.com/icons/award) (`award`, hover-replay)
- [Bookmark](https://useanimations.com/icons/bookmark) (`bookmark`, click-toggle)
- [Calendar](https://useanimations.com/icons/calendar) (`calendar`, hover)
- [Check](https://useanimations.com/icons/check) (`check`, click-replay)
- [Check Circle](https://useanimations.com/icons/check-circle) (`checkCircle`, click-replay)
- [Checkmark](https://useanimations.com/icons/checkmark) (`checkmark`, loop)
- [Chevron left](https://useanimations.com/icons/chevron-left) (`chevronLeft`, click-replay)
- [Chevron right](https://useanimations.com/icons/chevron-right) (`chevronRight`, click-replay)
- [Delete](https://useanimations.com/icons/delete) (`delete`, click-replay)
- [Download](https://useanimations.com/icons/download) (`download`, click-replay)
- [Download Cloud](https://useanimations.com/icons/download-cloud) (`downloadCloud`, click-replay)
- [Download V2](https://useanimations.com/icons/download-v2) (`download2`, click-replay)
- [Edit](https://useanimations.com/icons/edit) (`edit`, hover)
- [Edit 2](https://useanimations.com/icons/edit-2) (`edit2`, click-replay)
- [Edit 3](https://useanimations.com/icons/edit-3) (`edit3`, click-replay)
- [Explore](https://useanimations.com/icons/explore) (`explore`, hover)
- [Filter](https://useanimations.com/icons/filter) (`filter`, click-replay)
- [Flag](https://useanimations.com/icons/flag) (`flag`, hover-loop)
- [Folder](https://useanimations.com/icons/folder) (`folder`, hover)
- [Heart](https://useanimations.com/icons/heart) (`heart`, click-toggle)
- [Heart V2](https://useanimations.com/icons/heart-v2) (`heart2`, click-replay)
- [Help](https://useanimations.com/icons/help) (`help`, loop)
- [Home](https://useanimations.com/icons/home) (`home`, hover)
- [Info](https://useanimations.com/icons/info) (`info`, hover)
- [Key](https://useanimations.com/icons/key) (`key`, hover-replay)
- [Link](https://useanimations.com/icons/link) (`link`, click-replay)
- [Link 2](https://useanimations.com/icons/link-2) (`link2`, click-replay)
- [Lock / Unlock](https://useanimations.com/icons/lock) (`lock`, click-toggle)
- [Maxi/Minimize](https://useanimations.com/icons/maximize-minimize) (`maximizeMinimize`, click-toggle)
- [Maxi/Minimize V2](https://useanimations.com/icons/maximize-minimize-v2) (`maximizeMinimize2`, click-toggle)
- [Maximize 2](https://useanimations.com/icons/maximize-2) (`maximize2`, hover-replay)
- [Minimize 2](https://useanimations.com/icons/minimize-2) (`minimize2`, hover-replay)
- [Minus](https://useanimations.com/icons/minus) (`minus`, click-replay)
- [Minus Circle](https://useanimations.com/icons/minus-circle) (`minusCircle`, click-replay)
- [Minus Square](https://useanimations.com/icons/minus-square) (`minusSquare`, click-replay)
- [Plus Circle](https://useanimations.com/icons/plus-circle) (`plusCircle`, click-replay)
- [Plus Square](https://useanimations.com/icons/plus-square) (`plusSquare`, click-replay)
- [Plus/X](https://useanimations.com/icons/plus-to-x) (`plusToX`, click-toggle)
- [Power](https://useanimations.com/icons/power) (`power`, click-replay)
- [Refresh](https://useanimations.com/icons/refresh) (`refresh`, click-replay)
- [Refresh Ccw](https://useanimations.com/icons/refresh-ccw) (`refreshCcw`, click-replay)
- [Refresh V2](https://useanimations.com/icons/refresh-v2) (`refresh2`, click-replay)
- [Rotate Ccw](https://useanimations.com/icons/rotate-ccw) (`rotateCcw`, click-replay)
- [Rotate Cw](https://useanimations.com/icons/rotate-cw) (`rotateCw`, click-replay)
- [Save](https://useanimations.com/icons/save) (`save`, click-replay)
- [Search/X](https://useanimations.com/icons/search-to-x) (`searchToX`, click-toggle)
- [Settings](https://useanimations.com/icons/settings) (`settings`, hover)
- [Settings V2](https://useanimations.com/icons/settings-v2) (`settings2`, click-toggle)
- [Shield](https://useanimations.com/icons/shield) (`shield`, hover-replay)
- [Shield Off](https://useanimations.com/icons/shield-off) (`shieldOff`, click-toggle)
- [Slash](https://useanimations.com/icons/slash) (`slash`, hover-replay)
- [Star](https://useanimations.com/icons/star) (`star`, click-toggle)
- [Thumb up](https://useanimations.com/icons/thumb-up) (`thumbUp`, click-toggle)
- [Thumbs Down](https://useanimations.com/icons/thumbs-down) (`thumbsDown`, click-replay)
- [Trash](https://useanimations.com/icons/trash) (`trash`, hover)
- [Trash V2](https://useanimations.com/icons/trash-v2) (`trash2`, hover)
- [Upload](https://useanimations.com/icons/upload) (`upload`, click-replay)
- [Upload Cloud](https://useanimations.com/icons/upload-cloud) (`uploadCloud`, click-replay)
- [Visibility](https://useanimations.com/icons/visibility) (`visibility`, click-toggle)
- [Visibility V2](https://useanimations.com/icons/visibility-v2) (`visibility2`, click-toggle)
- [Visibility V3](https://useanimations.com/icons/visibility-v3) (`visibility3`, click-toggle)
- [X Square](https://useanimations.com/icons/x-square) (`xSquare`, click-replay)
- [Zoom In](https://useanimations.com/icons/zoom-in) (`zoomIn`, hover)
- [Zoom Out](https://useanimations.com/icons/zoom-out) (`zoomOut`, hover)

## 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](https://useanimations.com/interactions/loop) (2): Plays continuously; stays on the static first frame when reduced motion is preferred.
- [Click-to-toggle animated icons](https://useanimations.com/interactions/click-toggle) (14): Toggles between two states on click, or switches immediately when reduced motion is preferred.
- [Click animated icons](https://useanimations.com/interactions/click-replay) (30): Replays once from the start on every click unless reduced motion is preferred.
- [Hover animated icons](https://useanimations.com/interactions/hover) (11): Plays forward on mouseenter and backward on mouseleave.
- [Hover-to-play animated icons](https://useanimations.com/interactions/hover-replay) (6): Plays once on mouseenter unless reduced motion is preferred. Leaving does not stop it; entering during playback does not restart it.
- [Hover loop animated icons](https://useanimations.com/interactions/hover-loop) (1): Loops while hovered, finishes the current cycle after mouseleave and stays static when reduced motion is preferred.

## Code

```jsx
import UseAnimations from 'react-useanimations';
import heart from 'react-useanimations/lib/heart';

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

```bash
npx shadcn@latest add https://useanimations.com/r/heart.json
```

Every icon is also a Lottie JSON file at `https://useanimations.com/icons/<id>.json`: [Lottie icons](https://useanimations.com/lottie-icons).

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

## More categories

- [Animated alert icons](https://useanimations.com/categories/alerts) (5)
- [Animated notification bell icons](https://useanimations.com/categories/notifications) (4)
- [Animated navigation and arrow icons](https://useanimations.com/categories/navigation) (34)
- [Animated file, folder and user icons](https://useanimations.com/categories/content) (22)
- [Animated form control icons](https://useanimations.com/categories/form) (3)
- [Animated media player icons](https://useanimations.com/categories/media) (28)
- [Animated text editing icons](https://useanimations.com/categories/text-editing) (10)
- [Animated communication icons](https://useanimations.com/categories/communication) (13)
- [Animated device icons](https://useanimations.com/categories/devices) (12)
- [Animated weather icons](https://useanimations.com/categories/weather) (16)
- [Animated map and location icons](https://useanimations.com/categories/maps-location) (9)
- [Animated e-commerce icons](https://useanimations.com/categories/commerce) (11)
- [Animated chart icons](https://useanimations.com/categories/charts) (5)
- [Animated developer icons](https://useanimations.com/categories/development) (9)
- [Animated design and layout icons](https://useanimations.com/categories/design-layout) (10)
- [Animated shape and math icons](https://useanimations.com/categories/shapes-math) (8)
- [Animated loading icons](https://useanimations.com/categories/loading) (5)
- [Animated social media icons](https://useanimations.com/categories/social-media) (22)
- [More animated icons](https://useanimations.com/categories/other) (10)

HTML version: https://useanimations.com/categories/action