Copy, don't depend
Icons are installed as source files in your repo. No extra icon package — just React + Motion.
Open Source · 500+ Animated Icons
Install like shadcn.
Animate with Motion.
Drop animated SVG icons into your React app with one command. No npm icon packs — just copy the component and go.
Icons in the registry
Hover or tap to preview animations. Install any icon with one command.
hearta-arrow-downa-arrow-upa-large-smallaccessibilityactivityactivity-squareair-ventairplayamphoraalarm-clockalarm-clock-checkOne command to add any icon
Works with any project that has shadcn and components.json.
1
Init shadcn
Set up shadcn in your React / Next.js project.
2
Run the CLI
Pick an icon and run the install command.
3
Use the component
Import and drop the animated icon into your JSX.
$ pnpm dlx shadcn@latest add https://an-icon.vercel.app/r/icon-heart.jsonThe CLI copies the component and adds motion if needed.
Why Anicon
Lightweight, flexible, and familiar if you already use shadcn.
Motion-powered
Built with Motion (Framer Motion). Hover, tap, and layout animations work out of the box.
shadcn-style CLI
Uses the same registry format and CLI as shadcn. Add your registry URL and install with one command.