---
name: "@heroicons-animated"
slug: "heroicons-animated"
description: "An open-source library of 316 animated Heroicons for React, built with Motion (Framer Motion) and distributed as a shadcn-compatible registry. Each icon has smooth SVG animations triggered on hover or programmatically, and all are copy-paste installable via the shadcn CLI. MIT-licensed, fully customizable, free. TypeScript/React, works with Next.js and Vite. Use for: replacing static Heroicons with animated equivalents in React apps where subtle icon motion improves perceived interactivity without adding a large animation library."
category: "Icons/logos"
tags: ["aesthetic", "animation", "blocks", "buttons", "cards", "charts", "e-commerce", "icons", "marketing"]
framework: "react"
license: "MIT"
author: "Aniket-508"
website: "https://www.heroicons-animated.com/"
github: "https://github.com/Aniket-508/heroicons-animated"
registry: "https://www.heroicons-animated.com/r/registry.json"
pro: false
pro_url: null
github_stars: 141
component_count: 250
generated_at: "2026-07-28T08:59:05.895Z"
---

# @heroicons-animated

An open-source library of 316 animated Heroicons for React, built with Motion (Framer Motion) and distributed as a shadcn-compatible registry. Each icon has smooth SVG animations triggered on hover or programmatically, and all are copy-paste installable via the shadcn CLI. MIT-licensed, fully customizable, free. TypeScript/React, works with Next.js and Vite. Use for: replacing static Heroicons with animated equivalents in React apps where subtle icon motion improves perceived interactivity without adding a large animation library.

## Links

- Website: https://www.heroicons-animated.com/
- GitHub: https://github.com/Aniket-508/heroicons-animated
- Registry JSON: https://www.heroicons-animated.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/heroicons-animated
- This file: https://sh4dcn.vercel.app/md/heroicons-animated.md

## Install

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

## Components (250)

| name | type | description | install |
| --- | --- | --- | --- |
| academic-cap | registry:ui | Animated academic-cap icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/academic-cap.json` |
| adjustments-horizontal | registry:ui | Animated adjustments-horizontal icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/adjustments-horizontal.json` |
| adjustments-vertical | registry:ui | Animated adjustments-vertical icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/adjustments-vertical.json` |
| archive-box-arrow-down | registry:ui | Animated archive-box-arrow-down icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/archive-box-arrow-down.json` |
| archive-box-x-mark | registry:ui | Animated archive-box-x-mark icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/archive-box-x-mark.json` |
| archive-box | registry:ui | Animated archive-box icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/archive-box.json` |
| arrow-down-circle | registry:ui | Animated arrow-down-circle icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-down-circle.json` |
| arrow-down-left | registry:ui | Animated arrow-down-left icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-down-left.json` |
| arrow-down-on-square-stack | registry:ui | Animated arrow-down-on-square-stack icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-down-on-square-stack.json` |
| arrow-down-on-square | registry:ui | Animated arrow-down-on-square icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-down-on-square.json` |
| arrow-down-right | registry:ui | Animated arrow-down-right icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-down-right.json` |
| arrow-down-tray | registry:ui | Animated arrow-down-tray icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-down-tray.json` |
| arrow-down | registry:ui | Animated arrow-down icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-down.json` |
| arrow-left-circle | registry:ui | Animated arrow-left-circle icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-left-circle.json` |
| arrow-left-end-on-rectangle | registry:ui | Animated arrow-left-end-on-rectangle icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-left-end-on-rectangle.json` |
| arrow-left-start-on-rectangle | registry:ui | Animated arrow-left-start-on-rectangle icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-left-start-on-rectangle.json` |
| arrow-left | registry:ui | Animated arrow-left icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-left.json` |
| arrow-long-down | registry:ui | Animated arrow-long-down icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-long-down.json` |
| arrow-long-left | registry:ui | Animated arrow-long-left icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-long-left.json` |
| arrow-long-right | registry:ui | Animated arrow-long-right icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-long-right.json` |
| arrow-long-up | registry:ui | Animated arrow-long-up icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-long-up.json` |
| arrow-path-rounded-square | registry:ui | Animated arrow-path-rounded-square icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-path-rounded-square.json` |
| arrow-path | registry:ui | Animated arrow-path icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-path.json` |
| arrow-right-circle | registry:ui | Animated arrow-right-circle icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-right-circle.json` |
| arrow-right-end-on-rectangle | registry:ui | Animated arrow-right-end-on-rectangle icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-right-end-on-rectangle.json` |
| arrow-right-start-on-rectangle | registry:ui | Animated arrow-right-start-on-rectangle icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-right-start-on-rectangle.json` |
| arrow-right | registry:ui | Animated arrow-right icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-right.json` |
| arrow-top-right-on-square | registry:ui | Animated arrow-top-right-on-square icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-top-right-on-square.json` |
| arrow-trending-down | registry:ui | Animated arrow-trending-down icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-trending-down.json` |
| arrow-trending-up | registry:ui | Animated arrow-trending-up icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-trending-up.json` |
| arrow-turn-down-left | registry:ui | Animated arrow-turn-down-left icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-turn-down-left.json` |
| arrow-turn-down-right | registry:ui | Animated arrow-turn-down-right icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-turn-down-right.json` |
| arrow-turn-left-down | registry:ui | Animated arrow-turn-left-down icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-turn-left-down.json` |
| arrow-turn-left-up | registry:ui | Animated arrow-turn-left-up icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-turn-left-up.json` |
| arrow-turn-right-down | registry:ui | Animated arrow-turn-right-down icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-turn-right-down.json` |
| arrow-turn-right-up | registry:ui | Animated arrow-turn-right-up icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-turn-right-up.json` |
| arrow-turn-up-left | registry:ui | Animated arrow-turn-up-left icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-turn-up-left.json` |
| arrow-turn-up-right | registry:ui | Animated arrow-turn-up-right icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-turn-up-right.json` |
| arrow-up-circle | registry:ui | Animated arrow-up-circle icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-up-circle.json` |
| arrow-up-left | registry:ui | Animated arrow-up-left icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-up-left.json` |
| arrow-up-on-square-stack | registry:ui | Animated arrow-up-on-square-stack icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-up-on-square-stack.json` |
| arrow-up-on-square | registry:ui | Animated arrow-up-on-square icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-up-on-square.json` |
| arrow-up-right | registry:ui | Animated arrow-up-right icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-up-right.json` |
| arrow-up-tray | registry:ui | Animated arrow-up-tray icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-up-tray.json` |
| arrow-up | registry:ui | Animated arrow-up icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-up.json` |
| arrow-uturn-down | registry:ui | Animated arrow-uturn-down icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-uturn-down.json` |
| arrow-uturn-left | registry:ui | Animated arrow-uturn-left icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-uturn-left.json` |
| arrow-uturn-right | registry:ui | Animated arrow-uturn-right icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-uturn-right.json` |
| arrow-uturn-up | registry:ui | Animated arrow-uturn-up icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-uturn-up.json` |
| arrows-pointing-in | registry:ui | Animated arrows-pointing-in icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrows-pointing-in.json` |
| arrows-pointing-out | registry:ui | Animated arrows-pointing-out icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrows-pointing-out.json` |
| arrows-right-left | registry:ui | Animated arrows-right-left icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrows-right-left.json` |
| arrows-up-down | registry:ui | Animated arrows-up-down icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/arrows-up-down.json` |
| at-symbol | registry:ui | Animated at-symbol icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/at-symbol.json` |
| backspace | registry:ui | Animated backspace icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/backspace.json` |
| backward | registry:ui | Animated backward icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/backward.json` |
| banknotes | registry:ui | Animated banknotes icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/banknotes.json` |
| bars-2 | registry:ui | Animated bars-2 icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/bars-2.json` |
| bars-3-bottom-left | registry:ui | Animated bars-3-bottom-left icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/bars-3-bottom-left.json` |
| bars-3-bottom-right | registry:ui | Animated bars-3-bottom-right icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/bars-3-bottom-right.json` |
| bars-3-center-left | registry:ui | Animated bars-3-center-left icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/bars-3-center-left.json` |
| bars-3 | registry:ui | Animated bars-3 icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/bars-3.json` |
| bars-4 | registry:ui | Animated bars-4 icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/bars-4.json` |
| bars-arrow-down | registry:ui | Animated bars-arrow-down icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/bars-arrow-down.json` |
| bars-arrow-up | registry:ui | Animated bars-arrow-up icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/bars-arrow-up.json` |
| battery-0 | registry:ui | Animated battery-0 icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/battery-0.json` |
| battery-100 | registry:ui | Animated battery-100 icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/battery-100.json` |
| battery-50 | registry:ui | Animated battery-50 icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/battery-50.json` |
| beaker | registry:ui | Animated beaker icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/beaker.json` |
| bell-alert | registry:ui | Animated bell-alert icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/bell-alert.json` |
| bell-slash | registry:ui | Animated bell-slash icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/bell-slash.json` |
| bell-snooze | registry:ui | Animated bell-snooze icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/bell-snooze.json` |
| bell | registry:ui | Animated bell icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/bell.json` |
| bold | registry:ui | Animated bold icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/bold.json` |
| bolt-slash | registry:ui | Animated bolt-slash icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/bolt-slash.json` |
| bolt | registry:ui | Animated bolt icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/bolt.json` |
| book-open | registry:ui | Animated book-open icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/book-open.json` |
| bookmark-slash | registry:ui | Animated bookmark-slash icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/bookmark-slash.json` |
| bookmark-square | registry:ui | Animated bookmark-square icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/bookmark-square.json` |
| bookmark | registry:ui | Animated bookmark icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/bookmark.json` |
| briefcase | registry:ui | Animated briefcase icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/briefcase.json` |
| bug-ant | registry:ui | Animated bug-ant icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/bug-ant.json` |
| building-library | registry:ui | Animated building-library icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/building-library.json` |
| building-office-2 | registry:ui | Animated building-office-2 icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/building-office-2.json` |
| building-office | registry:ui | Animated building-office icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/building-office.json` |
| building-storefront | registry:ui | Animated building-storefront icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/building-storefront.json` |
| cake | registry:ui | Animated cake icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/cake.json` |
| calculator | registry:ui | Animated calculator icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/calculator.json` |
| calendar-date-range | registry:ui | Animated calendar-date-range icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/calendar-date-range.json` |
| calendar-days | registry:ui | Animated calendar-days icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/calendar-days.json` |
| calendar | registry:ui | Animated calendar icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/calendar.json` |
| camera | registry:ui | Animated camera icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/camera.json` |
| chart-bar-square | registry:ui | Animated chart-bar-square icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/chart-bar-square.json` |
| chart-bar | registry:ui | Animated chart-bar icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/chart-bar.json` |
| chart-pie | registry:ui | Animated chart-pie icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/chart-pie.json` |
| chat-bubble-bottom-center-text | registry:ui | Animated chat-bubble-bottom-center-text icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/chat-bubble-bottom-center-text.json` |
| chat-bubble-bottom-center | registry:ui | Animated chat-bubble-bottom-center icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/chat-bubble-bottom-center.json` |
| chat-bubble-left-ellipsis | registry:ui | Animated chat-bubble-left-ellipsis icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/chat-bubble-left-ellipsis.json` |
| chat-bubble-left-right | registry:ui | Animated chat-bubble-left-right icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/chat-bubble-left-right.json` |
| chat-bubble-left | registry:ui | Animated chat-bubble-left icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/chat-bubble-left.json` |
| chat-bubble-oval-left-ellipsis | registry:ui | Animated chat-bubble-oval-left-ellipsis icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/chat-bubble-oval-left-ellipsis.json` |
| chat-bubble-oval-left | registry:ui | Animated chat-bubble-oval-left icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/chat-bubble-oval-left.json` |
| check-badge | registry:ui | Animated check-badge icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/check-badge.json` |
| check-circle | registry:ui | Animated check-circle icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/check-circle.json` |
| check | registry:ui | Animated check icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/check.json` |
| chevron-double-down | registry:ui | Animated chevron-double-down icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/chevron-double-down.json` |
| chevron-double-left | registry:ui | Animated chevron-double-left icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/chevron-double-left.json` |
| chevron-double-right | registry:ui | Animated chevron-double-right icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/chevron-double-right.json` |
| chevron-double-up | registry:ui | Animated chevron-double-up icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/chevron-double-up.json` |
| chevron-down | registry:ui | Animated chevron-down icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/chevron-down.json` |
| chevron-left | registry:ui | Animated chevron-left icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/chevron-left.json` |
| chevron-right | registry:ui | Animated chevron-right icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/chevron-right.json` |
| chevron-up-down | registry:ui | Animated chevron-up-down icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/chevron-up-down.json` |
| chevron-up | registry:ui | Animated chevron-up icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/chevron-up.json` |
| circle-stack | registry:ui | Animated circle-stack icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/circle-stack.json` |
| clipboard-document-check | registry:ui | Animated clipboard-document-check icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/clipboard-document-check.json` |
| clipboard-document-list | registry:ui | Animated clipboard-document-list icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/clipboard-document-list.json` |
| clipboard-document | registry:ui | Animated clipboard-document icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/clipboard-document.json` |
| clipboard | registry:ui | Animated clipboard icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/clipboard.json` |
| clock | registry:ui | Animated clock icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/clock.json` |
| cloud-arrow-down | registry:ui | Animated cloud-arrow-down icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/cloud-arrow-down.json` |
| cloud-arrow-up | registry:ui | Animated cloud-arrow-up icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/cloud-arrow-up.json` |
| cloud | registry:ui | Animated cloud icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/cloud.json` |
| code-bracket-square | registry:ui | Animated code-bracket-square icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/code-bracket-square.json` |
| code-bracket | registry:ui | Animated code-bracket icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/code-bracket.json` |
| cog-6-tooth | registry:ui | Animated cog-6-tooth icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/cog-6-tooth.json` |
| cog-8-tooth | registry:ui | Animated cog-8-tooth icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/cog-8-tooth.json` |
| cog | registry:ui | Animated cog icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/cog.json` |
| command-line | registry:ui | Animated command-line icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/command-line.json` |
| computer-desktop | registry:ui | Animated computer-desktop icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/computer-desktop.json` |
| cpu-chip | registry:ui | Animated cpu-chip icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/cpu-chip.json` |
| credit-card | registry:ui | Animated credit-card icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/credit-card.json` |
| cube-transparent | registry:ui | Animated cube-transparent icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/cube-transparent.json` |
| cube | registry:ui | Animated cube icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/cube.json` |
| currency-bangladeshi | registry:ui | Animated currency-bangladeshi icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/currency-bangladeshi.json` |
| currency-dollar | registry:ui | Animated currency-dollar icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/currency-dollar.json` |
| currency-euro | registry:ui | Animated currency-euro icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/currency-euro.json` |
| currency-pound | registry:ui | Animated currency-pound icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/currency-pound.json` |
| currency-rupee | registry:ui | Animated currency-rupee icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/currency-rupee.json` |
| currency-yen | registry:ui | Animated currency-yen icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/currency-yen.json` |
| cursor-arrow-rays | registry:ui | Animated cursor-arrow-rays icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/cursor-arrow-rays.json` |
| cursor-arrow-ripple | registry:ui | Animated cursor-arrow-ripple icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/cursor-arrow-ripple.json` |
| device-phone-mobile | registry:ui | Animated device-phone-mobile icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/device-phone-mobile.json` |
| device-tablet | registry:ui | Animated device-tablet icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/device-tablet.json` |
| divide | registry:ui | Animated divide icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/divide.json` |
| document-arrow-down | registry:ui | Animated document-arrow-down icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/document-arrow-down.json` |
| document-arrow-up | registry:ui | Animated document-arrow-up icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/document-arrow-up.json` |
| document-chart-bar | registry:ui | Animated document-chart-bar icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/document-chart-bar.json` |
| document-check | registry:ui | Animated document-check icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/document-check.json` |
| document-currency-bangladeshi | registry:ui | Animated document-currency-bangladeshi icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/document-currency-bangladeshi.json` |
| document-currency-dollar | registry:ui | Animated document-currency-dollar icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/document-currency-dollar.json` |
| document-currency-euro | registry:ui | Animated document-currency-euro icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/document-currency-euro.json` |
| document-currency-pound | registry:ui | Animated document-currency-pound icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/document-currency-pound.json` |
| document-currency-rupee | registry:ui | Animated document-currency-rupee icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/document-currency-rupee.json` |
| document-currency-yen | registry:ui | Animated document-currency-yen icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/document-currency-yen.json` |
| document-duplicate | registry:ui | Animated document-duplicate icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/document-duplicate.json` |
| document-magnifying-glass | registry:ui | Animated document-magnifying-glass icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/document-magnifying-glass.json` |
| document-minus | registry:ui | Animated document-minus icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/document-minus.json` |
| document-plus | registry:ui | Animated document-plus icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/document-plus.json` |
| document-text | registry:ui | Animated document-text icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/document-text.json` |
| document | registry:ui | Animated document icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/document.json` |
| ellipsis-horizontal-circle | registry:ui | Animated ellipsis-horizontal-circle icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/ellipsis-horizontal-circle.json` |
| ellipsis-horizontal | registry:ui | Animated ellipsis-horizontal icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/ellipsis-horizontal.json` |
| ellipsis-vertical | registry:ui | Animated ellipsis-vertical icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/ellipsis-vertical.json` |
| envelope-open | registry:ui | Animated envelope-open icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/envelope-open.json` |
| envelope | registry:ui | Animated envelope icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/envelope.json` |
| equals | registry:ui | Animated equals icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/equals.json` |
| exclamation-circle | registry:ui | Animated exclamation-circle icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/exclamation-circle.json` |
| exclamation-triangle | registry:ui | Animated exclamation-triangle icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/exclamation-triangle.json` |
| eye-dropper | registry:ui | Animated eye-dropper icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/eye-dropper.json` |
| eye-slash | registry:ui | Animated eye-slash icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/eye-slash.json` |
| eye | registry:ui | Animated eye icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/eye.json` |
| face-frown | registry:ui | Animated face-frown icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/face-frown.json` |
| face-smile | registry:ui | Animated face-smile icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/face-smile.json` |
| film | registry:ui | Animated film icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/film.json` |
| finger-print | registry:ui | Animated finger-print icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/finger-print.json` |
| fire | registry:ui | Animated fire icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/fire.json` |
| flag | registry:ui | Animated flag icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/flag.json` |
| folder-arrow-down | registry:ui | Animated folder-arrow-down icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/folder-arrow-down.json` |
| folder-minus | registry:ui | Animated folder-minus icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/folder-minus.json` |
| folder-open | registry:ui | Animated folder-open icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/folder-open.json` |
| folder-plus | registry:ui | Animated folder-plus icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/folder-plus.json` |
| folder | registry:ui | Animated folder icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/folder.json` |
| forward | registry:ui | Animated forward icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/forward.json` |
| funnel | registry:ui | Animated funnel icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/funnel.json` |
| gif | registry:ui | Animated gif icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/gif.json` |
| gift-top | registry:ui | Animated gift-top icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/gift-top.json` |
| gift | registry:ui | Animated gift icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/gift.json` |
| globe-alt | registry:ui | Animated globe-alt icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/globe-alt.json` |
| globe-americas | registry:ui | Animated globe-americas icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/globe-americas.json` |
| globe-asia-australia | registry:ui | Animated globe-asia-australia icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/globe-asia-australia.json` |
| globe-europe-africa | registry:ui | Animated globe-europe-africa icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/globe-europe-africa.json` |
| h1 | registry:ui | Animated h1 icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/h1.json` |
| h2 | registry:ui | Animated h2 icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/h2.json` |
| h3 | registry:ui | Animated h3 icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/h3.json` |
| hand-raised | registry:ui | Animated hand-raised icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/hand-raised.json` |
| hand-thumb-down | registry:ui | Animated hand-thumb-down icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/hand-thumb-down.json` |
| hand-thumb-up | registry:ui | Animated hand-thumb-up icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/hand-thumb-up.json` |
| hashtag | registry:ui | Animated hashtag icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/hashtag.json` |
| heart | registry:ui | Animated heart icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/heart.json` |
| home-modern | registry:ui | Animated home-modern icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/home-modern.json` |
| home | registry:ui | Animated home icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/home.json` |
| identification | registry:ui | Animated identification icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/identification.json` |
| inbox-arrow-down | registry:ui | Animated inbox-arrow-down icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/inbox-arrow-down.json` |
| inbox-stack | registry:ui | Animated inbox-stack icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/inbox-stack.json` |
| inbox | registry:ui | Animated inbox icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/inbox.json` |
| information-circle | registry:ui | Animated information-circle icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/information-circle.json` |
| italic | registry:ui | Animated italic icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/italic.json` |
| key | registry:ui | Animated key icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/key.json` |
| language | registry:ui | Animated language icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/language.json` |
| lifebuoy | registry:ui | Animated lifebuoy icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/lifebuoy.json` |
| light-bulb | registry:ui | Animated light-bulb icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/light-bulb.json` |
| link-slash | registry:ui | Animated link-slash icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/link-slash.json` |
| link | registry:ui | Animated link icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/link.json` |
| list-bullet | registry:ui | Animated list-bullet icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/list-bullet.json` |
| lock-closed | registry:ui | Animated lock-closed icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/lock-closed.json` |
| lock-open | registry:ui | Animated lock-open icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/lock-open.json` |
| magnifying-glass-circle | registry:ui | Animated magnifying-glass-circle icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/magnifying-glass-circle.json` |
| magnifying-glass-minus | registry:ui | Animated magnifying-glass-minus icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/magnifying-glass-minus.json` |
| magnifying-glass-plus | registry:ui | Animated magnifying-glass-plus icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/magnifying-glass-plus.json` |
| magnifying-glass | registry:ui | Animated magnifying-glass icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/magnifying-glass.json` |
| map-pin | registry:ui | Animated map-pin icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/map-pin.json` |
| map | registry:ui | Animated map icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/map.json` |
| megaphone | registry:ui | Animated megaphone icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/megaphone.json` |
| microphone | registry:ui | Animated microphone icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/microphone.json` |
| minus-circle | registry:ui | Animated minus-circle icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/minus-circle.json` |
| minus | registry:ui | Animated minus icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/minus.json` |
| moon | registry:ui | Animated moon icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/moon.json` |
| musical-note | registry:ui | Animated musical-note icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/musical-note.json` |
| newspaper | registry:ui | Animated newspaper icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/newspaper.json` |
| no-symbol | registry:ui | Animated no-symbol icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/no-symbol.json` |
| numbered-list | registry:ui | Animated numbered-list icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/numbered-list.json` |
| paint-brush | registry:ui | Animated paint-brush icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/paint-brush.json` |
| paper-airplane | registry:ui | Animated paper-airplane icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/paper-airplane.json` |
| paper-clip | registry:ui | Animated paper-clip icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/paper-clip.json` |
| pause-circle | registry:ui | Animated pause-circle icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/pause-circle.json` |
| pause | registry:ui | Animated pause icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/pause.json` |
| pencil-square | registry:ui | Animated pencil-square icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/pencil-square.json` |
| pencil | registry:ui | Animated pencil icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/pencil.json` |
| percent-badge | registry:ui | Animated percent-badge icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/percent-badge.json` |
| phone-arrow-down-left | registry:ui | Animated phone-arrow-down-left icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/phone-arrow-down-left.json` |
| phone-arrow-up-right | registry:ui | Animated phone-arrow-up-right icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/phone-arrow-up-right.json` |
| phone-x-mark | registry:ui | Animated phone-x-mark icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/phone-x-mark.json` |
| phone | registry:ui | Animated phone icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/phone.json` |
| photo | registry:ui | Animated photo icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/photo.json` |
| play-circle | registry:ui | Animated play-circle icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/play-circle.json` |
| play-pause | registry:ui | Animated play-pause icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/play-pause.json` |
| play | registry:ui | Animated play icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/play.json` |
| plus-circle | registry:ui | Animated plus-circle icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/plus-circle.json` |
| plus | registry:ui | Animated plus icon for React | `npx shadcn@latest add https://www.heroicons-animated.com/r/plus.json` |

## For AI agents

```text
You are adding components from @heroicons-animated to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/heroicons-animated.md) for the component list.
2. Fetch the machine-readable index: https://www.heroicons-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: heroicons-animated).
```