# useAnimations: free animated icons for React, shadcn/ui and Lottie

> 300 free micro animations (Lottie) with hover, click and loop interactions built in, for React, shadcn/ui and any Lottie player. MIT licensed.

- React: `npm install react-useanimations`, then `import github from 'react-useanimations/lib/github'` and `<UseAnimations animation={github} size={32} />`.
- shadcn/ui: `npx shadcn@latest add https://useanimations.com/r/<id>.json`.
- Lottie: `https://useanimations.com/icons/<id>.json`, static SVGs at `https://useanimations.com/icons/<id>/<state>.svg`, ZIP at `https://useanimations.com/icons/<id>.zip`.
- Catalog of every icon: [icons.json](https://useanimations.com/icons.json). Documentation: [Markdown](https://useanimations.com/documentation.md), [HTML](https://useanimations.com/documentation). Everything in one file: [llms-full.txt](https://useanimations.com/llms-full.txt).

## Browse

- [All animated icons](https://useanimations.com/icons)
- [Icon categories](https://useanimations.com/categories)
- [Icons by interaction](https://useanimations.com/interactions)
- [Lottie icons (JSON)](https://useanimations.com/lottie-icons)
- [shadcn/ui animated icons](https://useanimations.com/shadcn-animated-icons)
- Categories: [Alerts](https://useanimations.com/categories/alerts), [Notifications](https://useanimations.com/categories/notifications), [Navigation](https://useanimations.com/categories/navigation), [Action](https://useanimations.com/categories/action), [Content](https://useanimations.com/categories/content), [Form](https://useanimations.com/categories/form), [Media](https://useanimations.com/categories/media), [Text editing](https://useanimations.com/categories/text-editing), [Communication](https://useanimations.com/categories/communication), [Devices](https://useanimations.com/categories/devices), [Weather](https://useanimations.com/categories/weather), [Maps & location](https://useanimations.com/categories/maps-location), [Commerce](https://useanimations.com/categories/commerce), [Charts](https://useanimations.com/categories/charts), [Development](https://useanimations.com/categories/development), [Design & layout](https://useanimations.com/categories/design-layout), [Shapes & math](https://useanimations.com/categories/shapes-math), [Loading](https://useanimations.com/categories/loading), [Social media](https://useanimations.com/categories/social-media)
- Interactions: [Loop](https://useanimations.com/interactions/loop), [Click toggle](https://useanimations.com/interactions/click-toggle), [Click replay](https://useanimations.com/interactions/click-replay), [Hover](https://useanimations.com/interactions/hover), [Hover replay](https://useanimations.com/interactions/hover-replay), [Hover loop](https://useanimations.com/interactions/hover-loop)

## Interactions

- `loop`: Plays continuously; stays on the static first frame when reduced motion is preferred.
- `click-toggle`: Toggles between two states on click, or switches immediately when reduced motion is preferred.
- `click-replay`: Replays once from the start on every click unless reduced motion is preferred.
- `hover`: Plays forward on mouseenter and backward on mouseleave.
- `hover-replay`: Plays once on mouseenter unless reduced motion is preferred. Leaving does not stop it; entering during playback does not restart it.
- `hover-loop`: Loops while hovered, finishes the current cycle after mouseleave and stays static when reduced motion is preferred.

## Icons

Each icon links to its page; the Markdown version of a page is at the same URL plus `.md`.

### [Alerts](https://useanimations.com/categories/alerts)

- [Alert circle](https://useanimations.com/icons/alert-circle) ([Markdown](https://useanimations.com/icons/alert-circle.md); `alertCircle`, loop)
- [Alert octagon](https://useanimations.com/icons/alert-octagon) ([Markdown](https://useanimations.com/icons/alert-octagon.md); `alertOctagon`, loop)
- [Alert triangle](https://useanimations.com/icons/alert-triangle) ([Markdown](https://useanimations.com/icons/alert-triangle.md); `alertTriangle`, loop)
- [Error](https://useanimations.com/icons/error) ([Markdown](https://useanimations.com/icons/error.md); `error`, loop)
- [X Octagon](https://useanimations.com/icons/x-octagon) ([Markdown](https://useanimations.com/icons/x-octagon.md); `xOctagon`, click-replay)

### [Notifications](https://useanimations.com/categories/notifications)

- [Notification](https://useanimations.com/icons/notification) ([Markdown](https://useanimations.com/icons/notification.md); `notification`, click-toggle)
- [Notification V2](https://useanimations.com/icons/notification-v2) ([Markdown](https://useanimations.com/icons/notification-v2.md); `notification2`, click-toggle)
- [Notification V3](https://useanimations.com/icons/notification-v3) ([Markdown](https://useanimations.com/icons/notification-v3.md); `notification3`, loop)
- [Notification V4](https://useanimations.com/icons/notification-v4) ([Markdown](https://useanimations.com/icons/notification-v4.md); `notification4`, loop)

### [Navigation](https://useanimations.com/categories/navigation)

- [Arrow down circle](https://useanimations.com/icons/arrow-down-circle) ([Markdown](https://useanimations.com/icons/arrow-down-circle.md); `arrowDownCircle`, click-replay)
- [Arrow Down Left](https://useanimations.com/icons/arrow-down-left) ([Markdown](https://useanimations.com/icons/arrow-down-left.md); `arrowDownLeft`, hover-replay)
- [Arrow Down Right](https://useanimations.com/icons/arrow-down-right) ([Markdown](https://useanimations.com/icons/arrow-down-right.md); `arrowDownRight`, hover-replay)
- [Arrow Left](https://useanimations.com/icons/arrow-left) ([Markdown](https://useanimations.com/icons/arrow-left.md); `arrowLeft`, hover-replay)
- [Arrow left circle](https://useanimations.com/icons/arrow-left-circle) ([Markdown](https://useanimations.com/icons/arrow-left-circle.md); `arrowLeftCircle`, click-replay)
- [Arrow Right](https://useanimations.com/icons/arrow-right) ([Markdown](https://useanimations.com/icons/arrow-right.md); `arrowRight`, hover-replay)
- [Arrow right circle](https://useanimations.com/icons/arrow-right-circle) ([Markdown](https://useanimations.com/icons/arrow-right-circle.md); `arrowRightCircle`, click-replay)
- [Arrow up circle](https://useanimations.com/icons/arrow-up-circle) ([Markdown](https://useanimations.com/icons/arrow-up-circle.md); `arrowUpCircle`, click-replay)
- [Arrow Up Left](https://useanimations.com/icons/arrow-up-left) ([Markdown](https://useanimations.com/icons/arrow-up-left.md); `arrowUpLeft`, hover-replay)
- [Arrow Up Right](https://useanimations.com/icons/arrow-up-right) ([Markdown](https://useanimations.com/icons/arrow-up-right.md); `arrowUpRight`, hover-replay)
- [Burger Menu](https://useanimations.com/icons/menu) ([Markdown](https://useanimations.com/icons/menu.md); `menu`, click-toggle)
- [Chevron Down](https://useanimations.com/icons/chevron-down) ([Markdown](https://useanimations.com/icons/chevron-down.md); `chevronDown`, hover-replay)
- [Chevron Up](https://useanimations.com/icons/chevron-up) ([Markdown](https://useanimations.com/icons/chevron-up.md); `chevronUp`, hover-replay)
- [Chevrons Down](https://useanimations.com/icons/chevrons-down) ([Markdown](https://useanimations.com/icons/chevrons-down.md); `chevronsDown`, hover-replay)
- [Chevrons Left](https://useanimations.com/icons/chevrons-left) ([Markdown](https://useanimations.com/icons/chevrons-left.md); `chevronsLeft`, hover-replay)
- [Chevrons Right](https://useanimations.com/icons/chevrons-right) ([Markdown](https://useanimations.com/icons/chevrons-right.md); `chevronsRight`, hover-replay)
- [Chevrons Up](https://useanimations.com/icons/chevrons-up) ([Markdown](https://useanimations.com/icons/chevrons-up.md); `chevronsUp`, hover-replay)
- [Corner Down Left](https://useanimations.com/icons/corner-down-left) ([Markdown](https://useanimations.com/icons/corner-down-left.md); `cornerDownLeft`, hover-replay)
- [Corner Down Right](https://useanimations.com/icons/corner-down-right) ([Markdown](https://useanimations.com/icons/corner-down-right.md); `cornerDownRight`, hover-replay)
- [Corner Left Down](https://useanimations.com/icons/corner-left-down) ([Markdown](https://useanimations.com/icons/corner-left-down.md); `cornerLeftDown`, hover-replay)
- [Corner Left Up](https://useanimations.com/icons/corner-left-up) ([Markdown](https://useanimations.com/icons/corner-left-up.md); `cornerLeftUp`, hover-replay)
- [Corner Right Down](https://useanimations.com/icons/corner-right-down) ([Markdown](https://useanimations.com/icons/corner-right-down.md); `cornerRightDown`, hover-replay)
- [Corner Right Up](https://useanimations.com/icons/corner-right-up) ([Markdown](https://useanimations.com/icons/corner-right-up.md); `cornerRightUp`, hover-replay)
- [Corner Up Left](https://useanimations.com/icons/corner-up-left) ([Markdown](https://useanimations.com/icons/corner-up-left.md); `cornerUpLeft`, hover-replay)
- [Corner Up Right](https://useanimations.com/icons/corner-up-right) ([Markdown](https://useanimations.com/icons/corner-up-right.md); `cornerUpRight`, hover-replay)
- [External Link](https://useanimations.com/icons/external-link) ([Markdown](https://useanimations.com/icons/external-link.md); `externalLink`, hover-replay)
- [Log In](https://useanimations.com/icons/log-in) ([Markdown](https://useanimations.com/icons/log-in.md); `logIn`, click-replay)
- [Log Out](https://useanimations.com/icons/log-out) ([Markdown](https://useanimations.com/icons/log-out.md); `logOut`, click-replay)
- [Menu V2](https://useanimations.com/icons/menu-v2) ([Markdown](https://useanimations.com/icons/menu-v2.md); `menu2`, click-toggle)
- [Menu V3](https://useanimations.com/icons/menu-v3) ([Markdown](https://useanimations.com/icons/menu-v3.md); `menu3`, click-toggle)
- [Menu V4](https://useanimations.com/icons/menu-v4) ([Markdown](https://useanimations.com/icons/menu-v4.md); `menu4`, click-toggle)
- [More Horizontal](https://useanimations.com/icons/more-horizontal) ([Markdown](https://useanimations.com/icons/more-horizontal.md); `moreHorizontal`, loop)
- [More Vertical](https://useanimations.com/icons/more-vertical) ([Markdown](https://useanimations.com/icons/more-vertical.md); `moreVertical`, loop)
- [Sidebar](https://useanimations.com/icons/sidebar) ([Markdown](https://useanimations.com/icons/sidebar.md); `sidebar`, hover-replay)

### [Action](https://useanimations.com/categories/action)

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

### [Content](https://useanimations.com/categories/content)

- [Archive](https://useanimations.com/icons/archive) ([Markdown](https://useanimations.com/icons/archive.md); `archive`, hover)
- [Book](https://useanimations.com/icons/book) ([Markdown](https://useanimations.com/icons/book.md); `book`, hover-replay)
- [Book Open](https://useanimations.com/icons/book-open) ([Markdown](https://useanimations.com/icons/book-open.md); `bookOpen`, hover-replay)
- [Clipboard](https://useanimations.com/icons/clipboard) ([Markdown](https://useanimations.com/icons/clipboard.md); `clipboard`, hover-replay)
- [Copy](https://useanimations.com/icons/copy) ([Markdown](https://useanimations.com/icons/copy.md); `copy`, hover)
- [File](https://useanimations.com/icons/file) ([Markdown](https://useanimations.com/icons/file.md); `file`, hover-replay)
- [File Minus](https://useanimations.com/icons/file-minus) ([Markdown](https://useanimations.com/icons/file-minus.md); `fileMinus`, click-replay)
- [File Plus](https://useanimations.com/icons/file-plus) ([Markdown](https://useanimations.com/icons/file-plus.md); `filePlus`, click-replay)
- [File Text](https://useanimations.com/icons/file-text) ([Markdown](https://useanimations.com/icons/file-text.md); `fileText`, hover-replay)
- [Folder Minus](https://useanimations.com/icons/folder-minus) ([Markdown](https://useanimations.com/icons/folder-minus.md); `folderMinus`, click-replay)
- [Folder Plus](https://useanimations.com/icons/folder-plus) ([Markdown](https://useanimations.com/icons/folder-plus.md); `folderPlus`, click-replay)
- [Image](https://useanimations.com/icons/image) ([Markdown](https://useanimations.com/icons/image.md); `image`, hover-replay)
- [Inbox](https://useanimations.com/icons/inbox) ([Markdown](https://useanimations.com/icons/inbox.md); `inbox`, hover-replay)
- [Mail](https://useanimations.com/icons/mail) ([Markdown](https://useanimations.com/icons/mail.md); `mail`, hover)
- [Paperclip](https://useanimations.com/icons/paperclip) ([Markdown](https://useanimations.com/icons/paperclip.md); `paperclip`, hover-replay)
- [Share](https://useanimations.com/icons/share) ([Markdown](https://useanimations.com/icons/share.md); `share`, hover)
- [User](https://useanimations.com/icons/user) ([Markdown](https://useanimations.com/icons/user.md); `user`, hover-replay)
- [User Check](https://useanimations.com/icons/user-check) ([Markdown](https://useanimations.com/icons/user-check.md); `userCheck`, click-replay)
- [User minus](https://useanimations.com/icons/user-minus) ([Markdown](https://useanimations.com/icons/user-minus.md); `userMinus`, hover)
- [User plus](https://useanimations.com/icons/user-plus) ([Markdown](https://useanimations.com/icons/user-plus.md); `userPlus`, hover)
- [User X](https://useanimations.com/icons/user-x) ([Markdown](https://useanimations.com/icons/user-x.md); `userX`, hover)
- [Users](https://useanimations.com/icons/users) ([Markdown](https://useanimations.com/icons/users.md); `users`, hover-replay)

### [Form](https://useanimations.com/categories/form)

- [Checkbox](https://useanimations.com/icons/check-box) ([Markdown](https://useanimations.com/icons/check-box.md); `checkBox`, click-toggle)
- [Radio button](https://useanimations.com/icons/radio-button) ([Markdown](https://useanimations.com/icons/radio-button.md); `radioButton`, click-toggle)
- [Toggle](https://useanimations.com/icons/toggle) ([Markdown](https://useanimations.com/icons/toggle.md); `toggle`, click-toggle)

### [Media](https://useanimations.com/categories/media)

- [Airplay](https://useanimations.com/icons/airplay) ([Markdown](https://useanimations.com/icons/airplay.md); `airplay`, loop)
- [Aperture](https://useanimations.com/icons/aperture) ([Markdown](https://useanimations.com/icons/aperture.md); `aperture`, hover-replay)
- [Camera](https://useanimations.com/icons/camera) ([Markdown](https://useanimations.com/icons/camera.md); `camera`, click-replay)
- [Camera Off](https://useanimations.com/icons/camera-off) ([Markdown](https://useanimations.com/icons/camera-off.md); `cameraOff`, click-toggle)
- [Cast](https://useanimations.com/icons/cast) ([Markdown](https://useanimations.com/icons/cast.md); `cast`, hover-replay)
- [Disc](https://useanimations.com/icons/disc) ([Markdown](https://useanimations.com/icons/disc.md); `disc`, hover-replay)
- [Fast Forward](https://useanimations.com/icons/fast-forward) ([Markdown](https://useanimations.com/icons/fast-forward.md); `fastForward`, hover-replay)
- [Film](https://useanimations.com/icons/film) ([Markdown](https://useanimations.com/icons/film.md); `film`, hover-replay)
- [Headphones](https://useanimations.com/icons/headphones) ([Markdown](https://useanimations.com/icons/headphones.md); `headphones`, hover-replay)
- [Mic Off](https://useanimations.com/icons/mic-off) ([Markdown](https://useanimations.com/icons/mic-off.md); `micOff`, click-toggle)
- [Microphone](https://useanimations.com/icons/microphone) ([Markdown](https://useanimations.com/icons/microphone.md); `microphone`, click-toggle)
- [Microphone V2](https://useanimations.com/icons/microphone-v2) ([Markdown](https://useanimations.com/icons/microphone-v2.md); `microphone2`, click-toggle)
- [Music](https://useanimations.com/icons/music) ([Markdown](https://useanimations.com/icons/music.md); `music`, hover-replay)
- [Play/Pause](https://useanimations.com/icons/play-pause) ([Markdown](https://useanimations.com/icons/play-pause.md); `playPause`, click-toggle)
- [Play/Pause circle](https://useanimations.com/icons/play-pause-circle) ([Markdown](https://useanimations.com/icons/play-pause-circle.md); `playPauseCircle`, click-toggle)
- [Radio](https://useanimations.com/icons/radio) ([Markdown](https://useanimations.com/icons/radio.md); `radio`, hover-replay)
- [Repeat](https://useanimations.com/icons/repeat) ([Markdown](https://useanimations.com/icons/repeat.md); `repeat`, click-replay)
- [Rewind](https://useanimations.com/icons/rewind) ([Markdown](https://useanimations.com/icons/rewind.md); `rewind`, hover-replay)
- [Shuffle](https://useanimations.com/icons/shuffle) ([Markdown](https://useanimations.com/icons/shuffle.md); `shuffle`, click-replay)
- [Skip back](https://useanimations.com/icons/skip-back) ([Markdown](https://useanimations.com/icons/skip-back.md); `skipBack`, click-replay)
- [Skip forward](https://useanimations.com/icons/skip-forward) ([Markdown](https://useanimations.com/icons/skip-forward.md); `skipForward`, click-replay)
- [Speaker](https://useanimations.com/icons/speaker) ([Markdown](https://useanimations.com/icons/speaker.md); `speaker`, hover-replay)
- [Stop Circle](https://useanimations.com/icons/stop-circle) ([Markdown](https://useanimations.com/icons/stop-circle.md); `stopCircle`, click-replay)
- [TV](https://useanimations.com/icons/tv) ([Markdown](https://useanimations.com/icons/tv.md); `tv`, hover-replay)
- [Video](https://useanimations.com/icons/video) ([Markdown](https://useanimations.com/icons/video.md); `video`, click-toggle)
- [Video Off](https://useanimations.com/icons/video-off) ([Markdown](https://useanimations.com/icons/video-off.md); `videoOff`, click-toggle)
- [Video V2](https://useanimations.com/icons/video-v2) ([Markdown](https://useanimations.com/icons/video-v2.md); `video2`, click-toggle)
- [Volume](https://useanimations.com/icons/volume) ([Markdown](https://useanimations.com/icons/volume.md); `volume`, click-toggle)

### [Text editing](https://useanimations.com/categories/text-editing)

- [Align Center](https://useanimations.com/icons/align-center) ([Markdown](https://useanimations.com/icons/align-center.md); `alignCenter`, click-replay)
- [Align Justify](https://useanimations.com/icons/align-justify) ([Markdown](https://useanimations.com/icons/align-justify.md); `alignJustify`, click-replay)
- [Align Left](https://useanimations.com/icons/align-left) ([Markdown](https://useanimations.com/icons/align-left.md); `alignLeft`, click-replay)
- [Align Right](https://useanimations.com/icons/align-right) ([Markdown](https://useanimations.com/icons/align-right.md); `alignRight`, click-replay)
- [Bold](https://useanimations.com/icons/bold) ([Markdown](https://useanimations.com/icons/bold.md); `bold`, click-replay)
- [Hash](https://useanimations.com/icons/hash) ([Markdown](https://useanimations.com/icons/hash.md); `hash`, hover-replay)
- [Italic](https://useanimations.com/icons/italic) ([Markdown](https://useanimations.com/icons/italic.md); `italic`, click-replay)
- [List](https://useanimations.com/icons/list) ([Markdown](https://useanimations.com/icons/list.md); `list`, hover-replay)
- [Type](https://useanimations.com/icons/type) ([Markdown](https://useanimations.com/icons/type.md); `type`, click-replay)
- [Underline](https://useanimations.com/icons/underline) ([Markdown](https://useanimations.com/icons/underline.md); `underline`, click-replay)

### [Communication](https://useanimations.com/categories/communication)

- [At Sign](https://useanimations.com/icons/at-sign) ([Markdown](https://useanimations.com/icons/at-sign.md); `atSign`, hover-replay)
- [Message Circle](https://useanimations.com/icons/message-circle) ([Markdown](https://useanimations.com/icons/message-circle.md); `messageCircle`, hover-replay)
- [Message Square](https://useanimations.com/icons/message-square) ([Markdown](https://useanimations.com/icons/message-square.md); `messageSquare`, hover-replay)
- [Phone](https://useanimations.com/icons/phone) ([Markdown](https://useanimations.com/icons/phone.md); `phone`, click-replay)
- [Phone Call](https://useanimations.com/icons/phone-call) ([Markdown](https://useanimations.com/icons/phone-call.md); `phoneCall`, click-replay)
- [Phone Forwarded](https://useanimations.com/icons/phone-forwarded) ([Markdown](https://useanimations.com/icons/phone-forwarded.md); `phoneForwarded`, hover-replay)
- [Phone Incoming](https://useanimations.com/icons/phone-incoming) ([Markdown](https://useanimations.com/icons/phone-incoming.md); `phoneIncoming`, hover-replay)
- [Phone Missed](https://useanimations.com/icons/phone-missed) ([Markdown](https://useanimations.com/icons/phone-missed.md); `phoneMissed`, hover-replay)
- [Phone Off](https://useanimations.com/icons/phone-off) ([Markdown](https://useanimations.com/icons/phone-off.md); `phoneOff`, click-toggle)
- [Phone Outgoing](https://useanimations.com/icons/phone-outgoing) ([Markdown](https://useanimations.com/icons/phone-outgoing.md); `phoneOutgoing`, hover-replay)
- [RSS](https://useanimations.com/icons/rss) ([Markdown](https://useanimations.com/icons/rss.md); `rss`, hover-replay)
- [Send](https://useanimations.com/icons/send) ([Markdown](https://useanimations.com/icons/send.md); `send`, click-replay)
- [Voicemail](https://useanimations.com/icons/voicemail) ([Markdown](https://useanimations.com/icons/voicemail.md); `voicemail`, hover-replay)

### [Devices](https://useanimations.com/categories/devices)

- [Battery](https://useanimations.com/icons/battery) ([Markdown](https://useanimations.com/icons/battery.md); `battery`, hover-replay)
- [Battery Charging](https://useanimations.com/icons/battery-charging) ([Markdown](https://useanimations.com/icons/battery-charging.md); `batteryCharging`, hover-replay)
- [Bluetooth](https://useanimations.com/icons/bluetooth) ([Markdown](https://useanimations.com/icons/bluetooth.md); `bluetooth`, hover-replay)
- [CPU](https://useanimations.com/icons/cpu) ([Markdown](https://useanimations.com/icons/cpu.md); `cpu`, hover-replay)
- [Hard Drive](https://useanimations.com/icons/hard-drive) ([Markdown](https://useanimations.com/icons/hard-drive.md); `hardDrive`, hover-replay)
- [Monitor](https://useanimations.com/icons/monitor) ([Markdown](https://useanimations.com/icons/monitor.md); `monitor`, hover-replay)
- [Printer](https://useanimations.com/icons/printer) ([Markdown](https://useanimations.com/icons/printer.md); `printer`, click-replay)
- [Smartphone](https://useanimations.com/icons/smartphone) ([Markdown](https://useanimations.com/icons/smartphone.md); `smartphone`, hover-replay)
- [Tablet](https://useanimations.com/icons/tablet) ([Markdown](https://useanimations.com/icons/tablet.md); `tablet`, hover-replay)
- [Watch](https://useanimations.com/icons/watch) ([Markdown](https://useanimations.com/icons/watch.md); `watch`, hover-replay)
- [WiFi](https://useanimations.com/icons/wifi) ([Markdown](https://useanimations.com/icons/wifi.md); `wifi`, hover-replay)
- [Wifi Off](https://useanimations.com/icons/wifi-off) ([Markdown](https://useanimations.com/icons/wifi-off.md); `wifiOff`, click-toggle)

### [Weather](https://useanimations.com/categories/weather)

- [Cloud](https://useanimations.com/icons/cloud) ([Markdown](https://useanimations.com/icons/cloud.md); `cloud`, hover-loop)
- [Cloud Drizzle](https://useanimations.com/icons/cloud-drizzle) ([Markdown](https://useanimations.com/icons/cloud-drizzle.md); `cloudDrizzle`, hover-replay)
- [Cloud Lightning](https://useanimations.com/icons/cloud-lightning) ([Markdown](https://useanimations.com/icons/cloud-lightning.md); `cloudLightning`, hover-replay)
- [Cloud Off](https://useanimations.com/icons/cloud-off) ([Markdown](https://useanimations.com/icons/cloud-off.md); `cloudOff`, click-toggle)
- [Cloud Rain](https://useanimations.com/icons/cloud-rain) ([Markdown](https://useanimations.com/icons/cloud-rain.md); `cloudRain`, hover-replay)
- [Cloud Snow](https://useanimations.com/icons/cloud-snow) ([Markdown](https://useanimations.com/icons/cloud-snow.md); `cloudSnow`, hover-replay)
- [Droplet](https://useanimations.com/icons/droplet) ([Markdown](https://useanimations.com/icons/droplet.md); `droplet`, hover-replay)
- [Moon](https://useanimations.com/icons/moon) ([Markdown](https://useanimations.com/icons/moon.md); `moon`, hover-replay)
- [Sun](https://useanimations.com/icons/sun) ([Markdown](https://useanimations.com/icons/sun.md); `sun`, hover-replay)
- [Sunrise](https://useanimations.com/icons/sunrise) ([Markdown](https://useanimations.com/icons/sunrise.md); `sunrise`, hover-replay)
- [Sunset](https://useanimations.com/icons/sunset) ([Markdown](https://useanimations.com/icons/sunset.md); `sunset`, hover-replay)
- [Thermometer](https://useanimations.com/icons/thermometer) ([Markdown](https://useanimations.com/icons/thermometer.md); `thermometer`, hover-replay)
- [Umbrella](https://useanimations.com/icons/umbrella) ([Markdown](https://useanimations.com/icons/umbrella.md); `umbrella`, hover-replay)
- [Wind](https://useanimations.com/icons/wind) ([Markdown](https://useanimations.com/icons/wind.md); `wind`, hover-replay)
- [Zap](https://useanimations.com/icons/zap) ([Markdown](https://useanimations.com/icons/zap.md); `zap`, hover-replay)
- [Zap Off](https://useanimations.com/icons/zap-off) ([Markdown](https://useanimations.com/icons/zap-off.md); `zapOff`, click-toggle)

### [Maps & location](https://useanimations.com/categories/maps-location)

- [Anchor](https://useanimations.com/icons/anchor) ([Markdown](https://useanimations.com/icons/anchor.md); `anchor`, hover-replay)
- [Crosshair](https://useanimations.com/icons/crosshair) ([Markdown](https://useanimations.com/icons/crosshair.md); `crosshair`, hover-replay)
- [Globe](https://useanimations.com/icons/globe) ([Markdown](https://useanimations.com/icons/globe.md); `globe`, hover-loop)
- [Life Buoy](https://useanimations.com/icons/life-buoy) ([Markdown](https://useanimations.com/icons/life-buoy.md); `lifeBuoy`, hover-replay)
- [Map](https://useanimations.com/icons/map) ([Markdown](https://useanimations.com/icons/map.md); `map`, hover-replay)
- [Map Pin](https://useanimations.com/icons/map-pin) ([Markdown](https://useanimations.com/icons/map-pin.md); `mapPin`, hover-replay)
- [Navigation](https://useanimations.com/icons/navigation) ([Markdown](https://useanimations.com/icons/navigation.md); `navigation`, hover-replay)
- [Navigation 2](https://useanimations.com/icons/navigation-2) ([Markdown](https://useanimations.com/icons/navigation-2.md); `navigation2`, hover-replay)
- [Target](https://useanimations.com/icons/target) ([Markdown](https://useanimations.com/icons/target.md); `target`, hover-replay)

### [Commerce](https://useanimations.com/categories/commerce)

- [Box](https://useanimations.com/icons/box) ([Markdown](https://useanimations.com/icons/box.md); `box`, hover-replay)
- [Briefcase](https://useanimations.com/icons/briefcase) ([Markdown](https://useanimations.com/icons/briefcase.md); `briefcase`, hover-replay)
- [Credit Card](https://useanimations.com/icons/credit-card) ([Markdown](https://useanimations.com/icons/credit-card.md); `creditCard`, hover-replay)
- [Dollar Sign](https://useanimations.com/icons/dollar-sign) ([Markdown](https://useanimations.com/icons/dollar-sign.md); `dollarSign`, hover-replay)
- [Gift](https://useanimations.com/icons/gift) ([Markdown](https://useanimations.com/icons/gift.md); `gift`, hover-replay)
- [Package](https://useanimations.com/icons/package) ([Markdown](https://useanimations.com/icons/package.md); `package`, hover-replay)
- [Percent](https://useanimations.com/icons/percent) ([Markdown](https://useanimations.com/icons/percent.md); `percent`, hover-replay)
- [Shopping Bag](https://useanimations.com/icons/shopping-bag) ([Markdown](https://useanimations.com/icons/shopping-bag.md); `shoppingBag`, hover-replay)
- [Shopping Cart](https://useanimations.com/icons/shopping-cart) ([Markdown](https://useanimations.com/icons/shopping-cart.md); `shoppingCart`, click-replay)
- [Tag](https://useanimations.com/icons/tag) ([Markdown](https://useanimations.com/icons/tag.md); `tag`, hover-replay)
- [Truck](https://useanimations.com/icons/truck) ([Markdown](https://useanimations.com/icons/truck.md); `truck`, hover-replay)

### [Charts](https://useanimations.com/categories/charts)

- [Bar Chart](https://useanimations.com/icons/bar-chart) ([Markdown](https://useanimations.com/icons/bar-chart.md); `barChart`, hover-replay)
- [Bar Chart 2](https://useanimations.com/icons/bar-chart-2) ([Markdown](https://useanimations.com/icons/bar-chart-2.md); `barChart2`, hover-replay)
- [Pie Chart](https://useanimations.com/icons/pie-chart) ([Markdown](https://useanimations.com/icons/pie-chart.md); `pieChart`, hover-replay)
- [Trending Down](https://useanimations.com/icons/trending-down) ([Markdown](https://useanimations.com/icons/trending-down.md); `trendingDown`, hover-replay)
- [Trending Up](https://useanimations.com/icons/trending-up) ([Markdown](https://useanimations.com/icons/trending-up.md); `trendingUp`, hover-replay)

### [Development](https://useanimations.com/categories/development)

- [Code](https://useanimations.com/icons/code) ([Markdown](https://useanimations.com/icons/code.md); `code`, hover-replay)
- [Command](https://useanimations.com/icons/command) ([Markdown](https://useanimations.com/icons/command.md); `command`, hover-replay)
- [Database](https://useanimations.com/icons/database) ([Markdown](https://useanimations.com/icons/database.md); `database`, hover-replay)
- [Git Branch](https://useanimations.com/icons/git-branch) ([Markdown](https://useanimations.com/icons/git-branch.md); `gitBranch`, hover-replay)
- [Git Commit](https://useanimations.com/icons/git-commit) ([Markdown](https://useanimations.com/icons/git-commit.md); `gitCommit`, hover-replay)
- [Git Merge](https://useanimations.com/icons/git-merge) ([Markdown](https://useanimations.com/icons/git-merge.md); `gitMerge`, hover-replay)
- [Git Pull Request](https://useanimations.com/icons/git-pull-request) ([Markdown](https://useanimations.com/icons/git-pull-request.md); `gitPullRequest`, hover-replay)
- [Server](https://useanimations.com/icons/server) ([Markdown](https://useanimations.com/icons/server.md); `server`, hover-replay)
- [Terminal](https://useanimations.com/icons/terminal) ([Markdown](https://useanimations.com/icons/terminal.md); `terminal`, loop)

### [Design & layout](https://useanimations.com/categories/design-layout)

- [Columns](https://useanimations.com/icons/columns) ([Markdown](https://useanimations.com/icons/columns.md); `columns`, hover-replay)
- [Crop](https://useanimations.com/icons/crop) ([Markdown](https://useanimations.com/icons/crop.md); `crop`, click-replay)
- [Grid](https://useanimations.com/icons/grid) ([Markdown](https://useanimations.com/icons/grid.md); `grid`, hover-replay)
- [Layers](https://useanimations.com/icons/layers) ([Markdown](https://useanimations.com/icons/layers.md); `layers`, hover-replay)
- [Layout](https://useanimations.com/icons/layout) ([Markdown](https://useanimations.com/icons/layout.md); `layout`, hover-replay)
- [Mouse Pointer](https://useanimations.com/icons/mouse-pointer) ([Markdown](https://useanimations.com/icons/mouse-pointer.md); `mousePointer`, click-replay)
- [Move](https://useanimations.com/icons/move) ([Markdown](https://useanimations.com/icons/move.md); `move`, hover-replay)
- [Pen Tool](https://useanimations.com/icons/pen-tool) ([Markdown](https://useanimations.com/icons/pen-tool.md); `penTool`, hover-replay)
- [Scissors](https://useanimations.com/icons/scissors) ([Markdown](https://useanimations.com/icons/scissors.md); `scissors`, click-replay)
- [Table](https://useanimations.com/icons/table) ([Markdown](https://useanimations.com/icons/table.md); `table`, hover-replay)

### [Shapes & math](https://useanimations.com/categories/shapes-math)

- [Circle](https://useanimations.com/icons/circle) ([Markdown](https://useanimations.com/icons/circle.md); `circle`, hover-replay)
- [Divide](https://useanimations.com/icons/divide) ([Markdown](https://useanimations.com/icons/divide.md); `divide`, hover-replay)
- [Divide Circle](https://useanimations.com/icons/divide-circle) ([Markdown](https://useanimations.com/icons/divide-circle.md); `divideCircle`, hover-replay)
- [Divide Square](https://useanimations.com/icons/divide-square) ([Markdown](https://useanimations.com/icons/divide-square.md); `divideSquare`, hover-replay)
- [Hexagon](https://useanimations.com/icons/hexagon) ([Markdown](https://useanimations.com/icons/hexagon.md); `hexagon`, hover-replay)
- [Octagon](https://useanimations.com/icons/octagon) ([Markdown](https://useanimations.com/icons/octagon.md); `octagon`, hover-replay)
- [Square](https://useanimations.com/icons/square) ([Markdown](https://useanimations.com/icons/square.md); `square`, hover-replay)
- [Triangle](https://useanimations.com/icons/triangle) ([Markdown](https://useanimations.com/icons/triangle.md); `triangle`, hover-replay)

### [Loading](https://useanimations.com/categories/loading)

- [Infinity](https://useanimations.com/icons/infinity) ([Markdown](https://useanimations.com/icons/infinity.md); `infinity`, loop)
- [Loading circular](https://useanimations.com/icons/loading) ([Markdown](https://useanimations.com/icons/loading.md); `loading`, loop)
- [Loading V2](https://useanimations.com/icons/loading-v2) ([Markdown](https://useanimations.com/icons/loading-v2.md); `loading2`, loop)
- [Loading V3](https://useanimations.com/icons/loading-v3) ([Markdown](https://useanimations.com/icons/loading-v3.md); `loading3`, loop)
- [Loading V4](https://useanimations.com/icons/loading-v4) ([Markdown](https://useanimations.com/icons/loading-v4.md); `loading4`, loop)

### [Social media](https://useanimations.com/categories/social-media)

- [Behance](https://useanimations.com/icons/behance) ([Markdown](https://useanimations.com/icons/behance.md); `behance`, hover-loop)
- [Chrome](https://useanimations.com/icons/chrome) ([Markdown](https://useanimations.com/icons/chrome.md); `chrome`, hover-replay)
- [Codepen](https://useanimations.com/icons/codepen) ([Markdown](https://useanimations.com/icons/codepen.md); `codepen`, hover-loop)
- [Codesandbox](https://useanimations.com/icons/codesandbox) ([Markdown](https://useanimations.com/icons/codesandbox.md); `codesandbox`, hover-replay)
- [Discord](https://useanimations.com/icons/discord) ([Markdown](https://useanimations.com/icons/discord.md); `discord`, hover-loop)
- [Dribbble](https://useanimations.com/icons/dribbble) ([Markdown](https://useanimations.com/icons/dribbble.md); `dribbble`, hover-loop)
- [Facebook](https://useanimations.com/icons/facebook) ([Markdown](https://useanimations.com/icons/facebook.md); `facebook`, hover-loop)
- [Figma](https://useanimations.com/icons/figma) ([Markdown](https://useanimations.com/icons/figma.md); `figma`, hover-replay)
- [Framer](https://useanimations.com/icons/framer) ([Markdown](https://useanimations.com/icons/framer.md); `framer`, hover-replay)
- [Github](https://useanimations.com/icons/github) ([Markdown](https://useanimations.com/icons/github.md); `github`, hover-loop)
- [GitLab](https://useanimations.com/icons/gitlab) ([Markdown](https://useanimations.com/icons/gitlab.md); `gitlab`, hover-replay)
- [Instagram](https://useanimations.com/icons/instagram) ([Markdown](https://useanimations.com/icons/instagram.md); `instagram`, hover)
- [Linkedin](https://useanimations.com/icons/linkedin) ([Markdown](https://useanimations.com/icons/linkedin.md); `linkedin`, hover-loop)
- [Pocket](https://useanimations.com/icons/pocket) ([Markdown](https://useanimations.com/icons/pocket.md); `pocket`, hover-loop)
- [Slack](https://useanimations.com/icons/slack) ([Markdown](https://useanimations.com/icons/slack.md); `slack`, hover-replay)
- [Telegram](https://useanimations.com/icons/telegram) ([Markdown](https://useanimations.com/icons/telegram.md); `telegram`, hover-loop)
- [Trello](https://useanimations.com/icons/trello) ([Markdown](https://useanimations.com/icons/trello.md); `trello`, hover-replay)
- [Twitch](https://useanimations.com/icons/twitch) ([Markdown](https://useanimations.com/icons/twitch.md); `twitch`, hover-replay)
- [Twitter](https://useanimations.com/icons/twitter) ([Markdown](https://useanimations.com/icons/twitter.md); `twitter`, hover-loop)
- [Twitter X](https://useanimations.com/icons/twitter-x) ([Markdown](https://useanimations.com/icons/twitter-x.md); `twitterX`, hover-replay)
- [YouTube](https://useanimations.com/icons/youtube) ([Markdown](https://useanimations.com/icons/youtube.md); `youtube`, hover)
- [YouTube V2](https://useanimations.com/icons/youtube-v2) ([Markdown](https://useanimations.com/icons/youtube-v2.md); `youtube2`, hover)

### Other

- [Activity](https://useanimations.com/icons/activity) ([Markdown](https://useanimations.com/icons/activity.md); `activity`, loop)
- [Arrow down](https://useanimations.com/icons/arrow-down) ([Markdown](https://useanimations.com/icons/arrow-down.md); `arrowDown`, loop)
- [Arrow up](https://useanimations.com/icons/arrow-up) ([Markdown](https://useanimations.com/icons/arrow-up.md); `arrowUp`, loop)
- [Clock](https://useanimations.com/icons/clock) ([Markdown](https://useanimations.com/icons/clock.md); `clock`, hover-replay)
- [Coffee](https://useanimations.com/icons/coffee) ([Markdown](https://useanimations.com/icons/coffee.md); `coffee`, hover-replay)
- [Frown](https://useanimations.com/icons/frown) ([Markdown](https://useanimations.com/icons/frown.md); `frown`, hover-replay)
- [Meh](https://useanimations.com/icons/meh) ([Markdown](https://useanimations.com/icons/meh.md); `meh`, hover-replay)
- [Scroll down](https://useanimations.com/icons/scroll-down) ([Markdown](https://useanimations.com/icons/scroll-down.md); `scrollDown`, loop)
- [Smile](https://useanimations.com/icons/smile) ([Markdown](https://useanimations.com/icons/smile.md); `smile`, hover-replay)
- [Tool](https://useanimations.com/icons/tool) ([Markdown](https://useanimations.com/icons/tool.md); `tool`, hover-replay)

## FAQ

### What are micro animations and animated icons?

Micro animations are short, single-purpose motions that answer a user action: a menu icon that turns into a close button, a heart that fills when you like a post, a bell that rings for a new notification. Animated icons are the most common kind. They make an interface feel responsive and show state changes without extra text.

### What is the difference between the Lottie and SVG files?

The Lottie JSON file holds the whole animation and plays in any Lottie player, including the one built into react-useanimations. The SVG files are still images of the icon at rest, one per state (for example eye and eye-off), for places where nothing should move: emails, documents, design tools or a no-JavaScript fallback.

### Does it work with Next.js and server rendering?

Yes. The component is marked 'use client' and draws the animation only in the browser, so it renders from server components and SSR frameworks such as Next.js, Remix and Astro without dynamic imports. Icon modules are plain data that server components can import and pass as props. See [Next.js and server rendering](https://useanimations.com/documentation#nextjs-and-server-rendering).

### Can I use the icons in commercial projects?

Yes. The icons and the react-useanimations package are MIT licensed: use, modify and redistribute them in personal and commercial work. Attribution is appreciated but not required. See [Licencing & Terms](https://useanimations.com/licencing-and-terms).

### Can I use the icons without React?

Yes. Every icon is a standard Lottie JSON file, so it plays with lottie-web in plain JavaScript, Vue, Svelte, Angular or a CMS, and in Lottie players for iOS, Android and Flutter. The Lottie icons page has the file URLs and ready-made lottie-web snippets for each interaction. See [Lottie icons](https://useanimations.com/lottie-icons).

### How much do the icons add to my bundle?

The player in react-useanimations 3.1.1 is about 8 kB gzipped with no dependencies, and each icon is its own module of 1 to 15 kB (2 kB median), so a bundle only includes the icons you import.

## License

MIT. Attribution is optional: [Licencing & Terms](https://useanimations.com/licencing-and-terms).