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

60 components react shadcn-cli MIT

website ↗ github ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://www.heroicons-animated.com/r/registry.json

pnpm pnpm dlx shadcn@latest add https://www.heroicons-animated.com/r/registry.json

bun bunx shadcn@latest add https://www.heroicons-animated.com/r/registry.json

fetch registry curl -s https://www.heroicons-animated.com/r/registry.json

Components

60 total

academic-cap ui

Animated academic-cap icon for React

npx shadcn@latest add https://www.heroicons-animated.com/r/academic-cap.json

adjustments-horizontal ui

Animated adjustments-horizontal icon for React

npx shadcn@latest add https://www.heroicons-animated.com/r/adjustments-horizontal.json

adjustments-vertical ui

Animated adjustments-vertical icon for React

npx shadcn@latest add https://www.heroicons-animated.com/r/adjustments-vertical.json

archive-box-arrow-down 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 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 ui

Animated archive-box icon for React

npx shadcn@latest add https://www.heroicons-animated.com/r/archive-box.json

arrow-down-circle 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 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 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 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 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 ui

Animated arrow-down-tray icon for React

npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-down-tray.json

arrow-down ui

Animated arrow-down icon for React

npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-down.json

arrow-left-circle 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 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 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 ui

Animated arrow-left icon for React

npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-left.json

arrow-long-down 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 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 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 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 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 ui

Animated arrow-path icon for React

npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-path.json

arrow-right-circle 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 ui

Animated arrow-up-tray icon for React

npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-up-tray.json

arrow-up ui

Animated arrow-up icon for React

npx shadcn@latest add https://www.heroicons-animated.com/r/arrow-up.json

arrow-uturn-down 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 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 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 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 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 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 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 ui

Animated arrows-up-down icon for React

npx shadcn@latest add https://www.heroicons-animated.com/r/arrows-up-down.json

at-symbol ui

Animated at-symbol icon for React

npx shadcn@latest add https://www.heroicons-animated.com/r/at-symbol.json

backspace ui

Animated backspace icon for React

npx shadcn@latest add https://www.heroicons-animated.com/r/backspace.json

backward ui

Animated backward icon for React

npx shadcn@latest add https://www.heroicons-animated.com/r/backward.json

banknotes ui

Animated banknotes icon for React

npx shadcn@latest add https://www.heroicons-animated.com/r/banknotes.json

bars-2 ui

Animated bars-2 icon for React

npx shadcn@latest add https://www.heroicons-animated.com/r/bars-2.json

bars-3-bottom-left 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 ui

Animated bars-3-bottom-right icon for React

npx shadcn@latest add https://www.heroicons-animated.com/r/bars-3-bottom-right.json