---
name: "@hugeicons-animated"
slug: "hugeicons-animated"
description: "An open-source collection of animated Hugeicons for React."
category: "Animated components"
tags: ["ai", "animation", "audio", "auth", "cards", "dashboard", "forms", "hooks", "icons", "loaders", "maps", "media", "navigation", "overlays"]
framework: "react"
license: null
author: "enesgules"
website: "https://hugeicons-animated.com"
github: "https://github.com/enesgules/hugeicons-animated"
registry: "https://hugeicons-animated.com/r/registry.json"
pro: false
pro_url: null
github_stars: 2
component_count: 160
generated_at: "2026-07-28T08:59:05.895Z"
---

# @hugeicons-animated

An open-source collection of animated Hugeicons for React.

## Links

- Website: https://hugeicons-animated.com
- GitHub: https://github.com/enesgules/hugeicons-animated
- Registry JSON: https://hugeicons-animated.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/hugeicons-animated
- This file: https://sh4dcn.vercel.app/md/hugeicons-animated.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://hugeicons-animated.com/r/registry.json
pnpm dlx shadcn@latest add https://hugeicons-animated.com/r/registry.json
bunx shadcn@latest add https://hugeicons-animated.com/r/registry.json
# clone the source repo
git clone https://github.com/enesgules/hugeicons-animated.git
# fetch the raw registry index
curl -s https://hugeicons-animated.com/r/registry.json
```

## Components (160)

| name | type | description | install |
| --- | --- | --- | --- |
| add-circle | registry:ui | Animated add circle icon | `npx shadcn@latest add https://hugeicons-animated.com/r/add-circle.json` |
| airplane-take-off-01 | registry:ui | Animated airplane take off icon | `npx shadcn@latest add https://hugeicons-animated.com/r/airplane-take-off-01.json` |
| alarm-clock | registry:ui | Animated alarm clock icon | `npx shadcn@latest add https://hugeicons-animated.com/r/alarm-clock.json` |
| alert-circle | registry:ui | Animated alert circle icon | `npx shadcn@latest add https://hugeicons-animated.com/r/alert-circle.json` |
| archive-02 | registry:ui | Animated archive icon | `npx shadcn@latest add https://hugeicons-animated.com/r/archive-02.json` |
| arrow-down-02 | registry:ui | Animated arrow down icon | `npx shadcn@latest add https://hugeicons-animated.com/r/arrow-down-02.json` |
| arrow-left-02 | registry:ui | Animated arrow left icon | `npx shadcn@latest add https://hugeicons-animated.com/r/arrow-left-02.json` |
| arrow-right-02 | registry:ui | Animated arrow right icon | `npx shadcn@latest add https://hugeicons-animated.com/r/arrow-right-02.json` |
| arrow-up-02 | registry:ui | Animated arrow up icon | `npx shadcn@latest add https://hugeicons-animated.com/r/arrow-up-02.json` |
| arrow-up-right-01 | registry:ui | Animated arrow up right icon | `npx shadcn@latest add https://hugeicons-animated.com/r/arrow-up-right-01.json` |
| attachment | registry:ui | Animated attachment icon | `npx shadcn@latest add https://hugeicons-animated.com/r/attachment.json` |
| battery-charging-01 | registry:ui | Animated battery charging icon | `npx shadcn@latest add https://hugeicons-animated.com/r/battery-charging-01.json` |
| bluetooth | registry:ui | Animated bluetooth icon | `npx shadcn@latest add https://hugeicons-animated.com/r/bluetooth.json` |
| bookmark-01 | registry:ui | Animated bookmark icon | `npx shadcn@latest add https://hugeicons-animated.com/r/bookmark-01.json` |
| bug-01 | registry:ui | Animated bug icon | `npx shadcn@latest add https://hugeicons-animated.com/r/bug-01.json` |
| bulb | registry:ui | Animated bulb icon | `npx shadcn@latest add https://hugeicons-animated.com/r/bulb.json` |
| calendar-03 | registry:ui | Animated calendar icon | `npx shadcn@latest add https://hugeicons-animated.com/r/calendar-03.json` |
| calendar-add-01 | registry:ui | Animated calendar add icon | `npx shadcn@latest add https://hugeicons-animated.com/r/calendar-add-01.json` |
| call-02 | registry:ui | Animated call icon | `npx shadcn@latest add https://hugeicons-animated.com/r/call-02.json` |
| call-incoming-01 | registry:ui | Animated call incoming icon | `npx shadcn@latest add https://hugeicons-animated.com/r/call-incoming-01.json` |
| call-outgoing-01 | registry:ui | Animated call outgoing icon | `npx shadcn@latest add https://hugeicons-animated.com/r/call-outgoing-01.json` |
| camera-01 | registry:ui | Animated camera icon | `npx shadcn@latest add https://hugeicons-animated.com/r/camera-01.json` |
| cancel-01 | registry:ui | Animated cancel icon | `npx shadcn@latest add https://hugeicons-animated.com/r/cancel-01.json` |
| chevron-down | registry:ui | Animated chevron down icon | `npx shadcn@latest add https://hugeicons-animated.com/r/chevron-down.json` |
| chevron-left | registry:ui | Animated chevron left icon | `npx shadcn@latest add https://hugeicons-animated.com/r/chevron-left.json` |
| chevron-right | registry:ui | Animated chevron right icon | `npx shadcn@latest add https://hugeicons-animated.com/r/chevron-right.json` |
| chevron-up | registry:ui | Animated chevron up icon | `npx shadcn@latest add https://hugeicons-animated.com/r/chevron-up.json` |
| circle-check | registry:ui | Animated circle check icon | `npx shadcn@latest add https://hugeicons-animated.com/r/circle-check.json` |
| circle-x | registry:ui | Animated circle x icon | `npx shadcn@latest add https://hugeicons-animated.com/r/circle-x.json` |
| clipboard-paste | registry:ui | Animated clipboard paste icon | `npx shadcn@latest add https://hugeicons-animated.com/r/clipboard-paste.json` |
| clipboard | registry:ui | Animated clipboard icon | `npx shadcn@latest add https://hugeicons-animated.com/r/clipboard.json` |
| clock-01 | registry:ui | Animated clock icon | `npx shadcn@latest add https://hugeicons-animated.com/r/clock-01.json` |
| cloud-download | registry:ui | Animated cloud download icon | `npx shadcn@latest add https://hugeicons-animated.com/r/cloud-download.json` |
| cloud-lightning | registry:ui | Animated cloud lightning icon | `npx shadcn@latest add https://hugeicons-animated.com/r/cloud-lightning.json` |
| cloud-rain | registry:ui | Animated cloud rain icon | `npx shadcn@latest add https://hugeicons-animated.com/r/cloud-rain.json` |
| cloud-upload | registry:ui | Animated cloud upload icon | `npx shadcn@latest add https://hugeicons-animated.com/r/cloud-upload.json` |
| cloud | registry:ui | Animated cloud icon | `npx shadcn@latest add https://hugeicons-animated.com/r/cloud.json` |
| code-xml | registry:ui | Animated code xml icon | `npx shadcn@latest add https://hugeicons-animated.com/r/code-xml.json` |
| coffee-02 | registry:ui | Animated coffee icon | `npx shadcn@latest add https://hugeicons-animated.com/r/coffee-02.json` |
| compass | registry:ui | Animated compass icon | `npx shadcn@latest add https://hugeicons-animated.com/r/compass.json` |
| copy-01 | registry:ui | Animated copy icon | `npx shadcn@latest add https://hugeicons-animated.com/r/copy-01.json` |
| credit-card | registry:ui | Animated credit card icon | `npx shadcn@latest add https://hugeicons-animated.com/r/credit-card.json` |
| crown | registry:ui | Animated crown icon | `npx shadcn@latest add https://hugeicons-animated.com/r/crown.json` |
| cursor-pointer-01 | registry:ui | Animated cursor pointer icon | `npx shadcn@latest add https://hugeicons-animated.com/r/cursor-pointer-01.json` |
| dashboard-square-01 | registry:ui | Animated dashboard square icon | `npx shadcn@latest add https://hugeicons-animated.com/r/dashboard-square-01.json` |
| database | registry:ui | Animated database icon | `npx shadcn@latest add https://hugeicons-animated.com/r/database.json` |
| delete-02 | registry:ui | Animated delete icon | `npx shadcn@latest add https://hugeicons-animated.com/r/delete-02.json` |
| diamond-02 | registry:ui | Animated diamond icon | `npx shadcn@latest add https://hugeicons-animated.com/r/diamond-02.json` |
| document-attachment | registry:ui | Animated document attachment icon | `npx shadcn@latest add https://hugeicons-animated.com/r/document-attachment.json` |
| download-01 | registry:ui | Animated download icon | `npx shadcn@latest add https://hugeicons-animated.com/r/download-01.json` |
| earth | registry:ui | Animated earth icon | `npx shadcn@latest add https://hugeicons-animated.com/r/earth.json` |
| edit-02 | registry:ui | Animated edit icon | `npx shadcn@latest add https://hugeicons-animated.com/r/edit-02.json` |
| external-link | registry:ui | Animated external link icon | `npx shadcn@latest add https://hugeicons-animated.com/r/external-link.json` |
| eye-off | registry:ui | Animated eye off icon | `npx shadcn@latest add https://hugeicons-animated.com/r/eye-off.json` |
| eye | registry:ui | Animated eye icon | `npx shadcn@latest add https://hugeicons-animated.com/r/eye.json` |
| favourite | registry:ui | Animated favourite icon | `npx shadcn@latest add https://hugeicons-animated.com/r/favourite.json` |
| file-01 | registry:ui | Animated file icon | `npx shadcn@latest add https://hugeicons-animated.com/r/file-01.json` |
| file-add | registry:ui | Animated file add icon | `npx shadcn@latest add https://hugeicons-animated.com/r/file-add.json` |
| file-download | registry:ui | Animated file download icon | `npx shadcn@latest add https://hugeicons-animated.com/r/file-download.json` |
| file-upload | registry:ui | Animated file upload icon | `npx shadcn@latest add https://hugeicons-animated.com/r/file-upload.json` |
| filter | registry:ui | Animated filter icon | `npx shadcn@latest add https://hugeicons-animated.com/r/filter.json` |
| fire | registry:ui | Animated fire icon | `npx shadcn@latest add https://hugeicons-animated.com/r/fire.json` |
| flash | registry:ui | Animated flash icon | `npx shadcn@latest add https://hugeicons-animated.com/r/flash.json` |
| flower | registry:ui | Animated flower icon | `npx shadcn@latest add https://hugeicons-animated.com/r/flower.json` |
| folder-01 | registry:ui | Animated folder icon | `npx shadcn@latest add https://hugeicons-animated.com/r/folder-01.json` |
| folder-add | registry:ui | Animated folder add icon | `npx shadcn@latest add https://hugeicons-animated.com/r/folder-add.json` |
| folder-open | registry:ui | Animated folder open icon | `npx shadcn@latest add https://hugeicons-animated.com/r/folder-open.json` |
| full-screen | registry:ui | Animated full screen icon | `npx shadcn@latest add https://hugeicons-animated.com/r/full-screen.json` |
| ghost | registry:ui | Animated ghost icon | `npx shadcn@latest add https://hugeicons-animated.com/r/ghost.json` |
| gift | registry:ui | Animated gift icon | `npx shadcn@latest add https://hugeicons-animated.com/r/gift.json` |
| github | registry:ui | Animated github icon | `npx shadcn@latest add https://hugeicons-animated.com/r/github.json` |
| grid-view | registry:ui | Animated grid view icon | `npx shadcn@latest add https://hugeicons-animated.com/r/grid-view.json` |
| headphones | registry:ui | Animated headphones icon | `npx shadcn@latest add https://hugeicons-animated.com/r/headphones.json` |
| help-circle | registry:ui | Animated help circle icon | `npx shadcn@latest add https://hugeicons-animated.com/r/help-circle.json` |
| history | registry:ui | Animated history icon | `npx shadcn@latest add https://hugeicons-animated.com/r/history.json` |
| home-01 | registry:ui | Animated home icon | `npx shadcn@latest add https://hugeicons-animated.com/r/home-01.json` |
| image-01 | registry:ui | Animated image icon | `npx shadcn@latest add https://hugeicons-animated.com/r/image-01.json` |
| inbox | registry:ui | Animated inbox icon | `npx shadcn@latest add https://hugeicons-animated.com/r/inbox.json` |
| information-circle | registry:ui | Animated information circle icon | `npx shadcn@latest add https://hugeicons-animated.com/r/information-circle.json` |
| key-01 | registry:ui | Animated key icon | `npx shadcn@latest add https://hugeicons-animated.com/r/key-01.json` |
| leaf-01 | registry:ui | Animated leaf icon | `npx shadcn@latest add https://hugeicons-animated.com/r/leaf-01.json` |
| link-01 | registry:ui | Animated link icon | `npx shadcn@latest add https://hugeicons-animated.com/r/link-01.json` |
| link-square-02 | registry:ui | Animated link square icon | `npx shadcn@latest add https://hugeicons-animated.com/r/link-square-02.json` |
| list-view | registry:ui | Animated list view icon | `npx shadcn@latest add https://hugeicons-animated.com/r/list-view.json` |
| loading-03 | registry:ui | Animated loading icon | `npx shadcn@latest add https://hugeicons-animated.com/r/loading-03.json` |
| location-01 | registry:ui | Animated location icon | `npx shadcn@latest add https://hugeicons-animated.com/r/location-01.json` |
| location-add-01 | registry:ui | Animated location add icon | `npx shadcn@latest add https://hugeicons-animated.com/r/location-add-01.json` |
| lock | registry:ui | Animated lock icon | `npx shadcn@latest add https://hugeicons-animated.com/r/lock.json` |
| login-01 | registry:ui | Animated login icon | `npx shadcn@latest add https://hugeicons-animated.com/r/login-01.json` |
| logout-01 | registry:ui | Animated logout icon | `npx shadcn@latest add https://hugeicons-animated.com/r/logout-01.json` |
| magic-wand-01 | registry:ui | Animated magic wand icon | `npx shadcn@latest add https://hugeicons-animated.com/r/magic-wand-01.json` |
| mail-01 | registry:ui | Animated mail icon | `npx shadcn@latest add https://hugeicons-animated.com/r/mail-01.json` |
| mail-open | registry:ui | Animated mail open icon | `npx shadcn@latest add https://hugeicons-animated.com/r/mail-open.json` |
| maximize-screen | registry:ui | Animated maximize screen icon | `npx shadcn@latest add https://hugeicons-animated.com/r/maximize-screen.json` |
| menu-01 | registry:ui | Animated menu icon | `npx shadcn@latest add https://hugeicons-animated.com/r/menu-01.json` |
| message-01 | registry:ui | Animated message icon | `npx shadcn@latest add https://hugeicons-animated.com/r/message-01.json` |
| message-add-01 | registry:ui | Animated message add icon | `npx shadcn@latest add https://hugeicons-animated.com/r/message-add-01.json` |
| mic-01 | registry:ui | Animated mic icon | `npx shadcn@latest add https://hugeicons-animated.com/r/mic-01.json` |
| minimize-screen | registry:ui | Animated minimize screen icon | `npx shadcn@latest add https://hugeicons-animated.com/r/minimize-screen.json` |
| minus-sign-circle | registry:ui | Animated minus sign circle icon | `npx shadcn@latest add https://hugeicons-animated.com/r/minus-sign-circle.json` |
| minus-sign | registry:ui | Animated minus sign icon | `npx shadcn@latest add https://hugeicons-animated.com/r/minus-sign.json` |
| moon-02 | registry:ui | Animated moon icon | `npx shadcn@latest add https://hugeicons-animated.com/r/moon-02.json` |
| more-horizontal | registry:ui | Animated more horizontal icon | `npx shadcn@latest add https://hugeicons-animated.com/r/more-horizontal.json` |
| more-vertical | registry:ui | Animated more vertical icon | `npx shadcn@latest add https://hugeicons-animated.com/r/more-vertical.json` |
| mouse-left-click-01 | registry:ui | Animated mouse left click icon | `npx shadcn@latest add https://hugeicons-animated.com/r/mouse-left-click-01.json` |
| music-note-01 | registry:ui | Animated music note icon | `npx shadcn@latest add https://hugeicons-animated.com/r/music-note-01.json` |
| notification-03 | registry:ui | Animated notification icon | `npx shadcn@latest add https://hugeicons-animated.com/r/notification-03.json` |
| notification-off-01 | registry:ui | Animated notification off icon | `npx shadcn@latest add https://hugeicons-animated.com/r/notification-off-01.json` |
| paint-brush-02 | registry:ui | Animated paint brush icon | `npx shadcn@latest add https://hugeicons-animated.com/r/paint-brush-02.json` |
| panel-left | registry:ui | Animated panel left icon | `npx shadcn@latest add https://hugeicons-animated.com/r/panel-left.json` |
| party | registry:ui | Animated party icon | `npx shadcn@latest add https://hugeicons-animated.com/r/party.json` |
| pause | registry:ui | Animated pause icon | `npx shadcn@latest add https://hugeicons-animated.com/r/pause.json` |
| pin | registry:ui | Animated pin icon | `npx shadcn@latest add https://hugeicons-animated.com/r/pin.json` |
| play | registry:ui | Animated play icon | `npx shadcn@latest add https://hugeicons-animated.com/r/play.json` |
| plus-sign | registry:ui | Animated plus sign icon | `npx shadcn@latest add https://hugeicons-animated.com/r/plus-sign.json` |
| printer | registry:ui | Animated printer icon | `npx shadcn@latest add https://hugeicons-animated.com/r/printer.json` |
| puzzle | registry:ui | Animated puzzle icon | `npx shadcn@latest add https://hugeicons-animated.com/r/puzzle.json` |
| qr-code-01 | registry:ui | Animated qr code icon | `npx shadcn@latest add https://hugeicons-animated.com/r/qr-code-01.json` |
| redo | registry:ui | Animated redo icon | `npx shadcn@latest add https://hugeicons-animated.com/r/redo.json` |
| refresh | registry:ui | Animated refresh icon | `npx shadcn@latest add https://hugeicons-animated.com/r/refresh.json` |
| robot-01 | registry:ui | Animated robot icon | `npx shadcn@latest add https://hugeicons-animated.com/r/robot-01.json` |
| rocket-01 | registry:ui | Animated rocket icon | `npx shadcn@latest add https://hugeicons-animated.com/r/rocket-01.json` |
| save | registry:ui | Animated save icon | `npx shadcn@latest add https://hugeicons-animated.com/r/save.json` |
| scissor-01 | registry:ui | Animated scissor icon | `npx shadcn@latest add https://hugeicons-animated.com/r/scissor-01.json` |
| search-01 | registry:ui | Animated search icon | `npx shadcn@latest add https://hugeicons-animated.com/r/search-01.json` |
| sent | registry:ui | Animated sent icon | `npx shadcn@latest add https://hugeicons-animated.com/r/sent.json` |
| settings-01 | registry:ui | Animated settings icon | `npx shadcn@latest add https://hugeicons-animated.com/r/settings-01.json` |
| share-08 | registry:ui | Animated share icon | `npx shadcn@latest add https://hugeicons-animated.com/r/share-08.json` |
| shield-02 | registry:ui | Animated shield icon | `npx shadcn@latest add https://hugeicons-animated.com/r/shield-02.json` |
| shopping-cart-01 | registry:ui | Animated shopping cart icon | `npx shadcn@latest add https://hugeicons-animated.com/r/shopping-cart-01.json` |
| shopping-cart-add-01 | registry:ui | Animated shopping cart add icon | `npx shadcn@latest add https://hugeicons-animated.com/r/shopping-cart-add-01.json` |
| sleeping | registry:ui | Animated sleeping icon | `npx shadcn@latest add https://hugeicons-animated.com/r/sleeping.json` |
| sliders-horizontal | registry:ui | Animated sliders horizontal icon | `npx shadcn@latest add https://hugeicons-animated.com/r/sliders-horizontal.json` |
| smile | registry:ui | Animated smile icon | `npx shadcn@latest add https://hugeicons-animated.com/r/smile.json` |
| snow | registry:ui | Animated snow icon | `npx shadcn@latest add https://hugeicons-animated.com/r/snow.json` |
| sort-by-down-01 | registry:ui | Animated sort by down icon | `npx shadcn@latest add https://hugeicons-animated.com/r/sort-by-down-01.json` |
| sort-by-up-01 | registry:ui | Animated sort by up icon | `npx shadcn@latest add https://hugeicons-animated.com/r/sort-by-up-01.json` |
| sparkles | registry:ui | Animated sparkles icon | `npx shadcn@latest add https://hugeicons-animated.com/r/sparkles.json` |
| square-lock-01 | registry:ui | Animated square lock icon | `npx shadcn@latest add https://hugeicons-animated.com/r/square-lock-01.json` |
| star | registry:ui | Animated star icon | `npx shadcn@latest add https://hugeicons-animated.com/r/star.json` |
| sun-03 | registry:ui | Animated sun icon | `npx shadcn@latest add https://hugeicons-animated.com/r/sun-03.json` |
| target-01 | registry:ui | Animated target icon | `npx shadcn@latest add https://hugeicons-animated.com/r/target-01.json` |
| thumbs-up | registry:ui | Animated thumbs up icon | `npx shadcn@latest add https://hugeicons-animated.com/r/thumbs-up.json` |
| tick-02 | registry:ui | Animated tick icon | `npx shadcn@latest add https://hugeicons-animated.com/r/tick-02.json` |
| umbrella | registry:ui | Animated umbrella icon | `npx shadcn@latest add https://hugeicons-animated.com/r/umbrella.json` |
| undo | registry:ui | Animated undo icon | `npx shadcn@latest add https://hugeicons-animated.com/r/undo.json` |
| upload-01 | registry:ui | Animated upload icon | `npx shadcn@latest add https://hugeicons-animated.com/r/upload-01.json` |
| user-add-01 | registry:ui | Animated user add icon | `npx shadcn@latest add https://hugeicons-animated.com/r/user-add-01.json` |
| user-check-01 | registry:ui | Animated user check icon | `npx shadcn@latest add https://hugeicons-animated.com/r/user-check-01.json` |
| user-group | registry:ui | Animated user group icon | `npx shadcn@latest add https://hugeicons-animated.com/r/user-group.json` |
| user-multiple-02 | registry:ui | Animated user multiple icon | `npx shadcn@latest add https://hugeicons-animated.com/r/user-multiple-02.json` |
| user-remove-01 | registry:ui | Animated user remove icon | `npx shadcn@latest add https://hugeicons-animated.com/r/user-remove-01.json` |
| user | registry:ui | Animated user icon | `npx shadcn@latest add https://hugeicons-animated.com/r/user.json` |
| video-01 | registry:ui | Animated video icon | `npx shadcn@latest add https://hugeicons-animated.com/r/video-01.json` |
| volume-high | registry:ui | Animated volume high icon | `npx shadcn@latest add https://hugeicons-animated.com/r/volume-high.json` |
| volume-mute-01 | registry:ui | Animated volume mute icon | `npx shadcn@latest add https://hugeicons-animated.com/r/volume-mute-01.json` |
| wallet-01 | registry:ui | Animated wallet icon | `npx shadcn@latest add https://hugeicons-animated.com/r/wallet-01.json` |
| wifi-01 | registry:ui | Animated wifi icon | `npx shadcn@latest add https://hugeicons-animated.com/r/wifi-01.json` |
| zoom-in-area | registry:ui | Animated zoom in area icon | `npx shadcn@latest add https://hugeicons-animated.com/r/zoom-in-area.json` |
| zoom-out-area | registry:ui | Animated zoom out area icon | `npx shadcn@latest add https://hugeicons-animated.com/r/zoom-out-area.json` |

## For AI agents

```text
You are adding components from @hugeicons-animated to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/hugeicons-animated.md) for the component list.
2. Fetch the machine-readable index: https://hugeicons-animated.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: hugeicons-animated).
```