Skip to main content

​
Prerequisites

Before installing Anicon, make sure you have:
Anicon uses the shadcn CLI for installation. You need a components.json file in your project root.If you haven’t set up shadcn/ui yet, follow the shadcn/ui installation guide for your framework (Next.js, Vite, Remix, etc.).
Anicon requires React 18 or later for full compatibility with Motion.
You’ll need npm, yarn, pnpm, or bun installed.

​
Installation Methods

Install specific icons on-demand using the shadcn CLI. This is the recommended approach as it keeps your bundle size minimal. 
npx shadcn@latest add https://anicon.dev/r/icon-heart.json
Replace icon-heart with any icon name from the Anicon gallery. The CLI will:
  • Copy the icon component to components/ui/
  • Install motion dependency if not already present
  • Configure TypeScript types

​
Method 2: Install Multiple Icons

You can install multiple icons in a single command: 
npx shadcn@latest add https://anicon.dev/r/icon-heart.json https://anicon.dev/r/icon-star.json https://anicon.dev/r/icon-sparkle.json

​
What Gets Installed

When you install an icon, the shadcn CLI will:
1

Create the component file

The icon component is copied to components/ui/icon-[name].tsx (or your configured components directory).
2

Install dependencies

If motion isn’t already in your package.json, it will be installed automatically:
package.json
{
  "dependencies": {
    "motion": "^11.18.2"
  }
}
3

Configure TypeScript

TypeScript definitions are included in the component file with proper prop types.

​
Verify Installation

After installation, you should see the icon component in your project: 
project/
├── components/
│   └── ui/
│       └── icon-heart.tsx    ← Your new icon!
├── components.json
└── package.json
The icon component is now part of your codebase. You can modify it, customize the animations, or adjust styling to fit your needs.

​
Manual Installation

If you prefer not to use the CLI, you can manually copy icon components:
1

Install Motion

npm install motion
2

Copy the icon component

Browse the Anicon gallery, find your icon, and copy the component code to components/ui/icon-[name].tsx.
3

Import and use

Import the icon in your components:
import { IconHeart } from "@/components/ui/icon-heart";

​
Troubleshooting

Anicon requires a components.json file created by shadcn/ui. Initialize shadcn first:
npx shadcn@latest init
Make sure motion is installed:
npm install motion
If you’re using an older version of Framer Motion, Anicon requires the newer motion package (formerly framer-motion).
Ensure your tsconfig.json includes the components directory:
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

​
Next Steps

Quick Start Guide

Learn how to use your installed icons in your application

Build docs developers (and LLMs) love

Get started for freeTalk to us