Installation

Pick a wayCopy Anchor Link

Pick the registry if you treat icons as part of your design system and want to tweak them. Pick the package if you just want to use them and update with your other dependencies.

shadcn registryCopy Anchor Link

1. Point the CLI at the registryCopy Anchor Link

Add the @kovenlabs namespace to your components.json, once:

{
"registries": {
  "@kovenlabs": "https://animated-icons-nu.vercel.app/r/{name}.json"
}
}

2. Add iconsCopy Anchor Link

One icon:

npx shadcn add @kovenlabs/bell

Several at once:

npx shadcn add @kovenlabs/bell @kovenlabs/loader @kovenlabs/mail

Everything, all icons in one command:

npx shadcn add @kovenlabs/all

Only the core (factory, provider, config.ts, color variables), for building your own icons:

npx shadcn add @kovenlabs/animated-icons

Every icon depends on the core, so the first add installs it automatically, along with motion.

Without a namespaceCopy Anchor Link

You can skip step 1 and pass the item's URL directly:

npx shadcn add https://animated-icons-nu.vercel.app/r/bell.json

The icon's dependency on the core is a full URL too, so nothing else needs configuring.

What you getCopy Anchor Link

components/animated-icons/
├─ config.ts          ← app-wide defaults, edit freely
├─ lib/               ← factory, provider, resolution, corners, parts
└─ icons/
   ├─ bell.tsx
   └─ loader.tsx

The CLI also adds --icon-primary, --icon-secondary and --icon-accent to your globals.css, pointing at your shadcn tokens. See Colors.

import { BellIcon } from '@/components/animated-icons/icons/bell';

<BellIcon />;

UpdatingCopy Anchor Link

The files are yours, so the CLI won't touch them unless you ask. Re-add with --overwrite to take the latest version (your edits to those files are replaced):

npx shadcn add @kovenlabs/bell --overwrite

npm packageCopy Anchor Link

npm install @kovenlabs/animated-icons motion

Import from the package root, or from a single icon's path. Both tree-shake, so you only ship the icons you use:

import { BellIcon, MailIcon } from '@kovenlabs/animated-icons';
import { RocketIcon } from '@kovenlabs/animated-icons/icons/rocket';

ColorsCopy Anchor Link

Add the three slots to your globals.css. Point them at whatever tokens you like:

:root {
  --icon-primary: var(--foreground);
  --icon-secondary: var(--muted-foreground);
  --icon-accent: var(--primary);
}

If you skip this step, every slot falls back to currentColor, so icons still render, in one color.

Global defaultsCopy Anchor Link

With the package there's no config.ts to edit. Put a provider at your root instead. It takes the same options:

import { AnimatedIconsProvider } from '@kovenlabs/animated-icons';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <AnimatedIconsProvider trigger="hover" corners="round">
          {children}
        </AnimatedIconsProvider>
      </body>
    </html>
  );
}

Server componentsCopy Anchor Link

Icons are client components (each file starts with "use client"), so you can render them straight from a React Server Component. Only Icon.meta is unavailable there: on the server an icon import is a client reference without statics.

By handCopy Anchor Link

Every registry item is plain JSON with the file contents inside, so you can copy them without the CLI:

1. Open /r/animated-icons.json (the core) and copy each file in files to the path given by its target.
2. Do the same for each icon you want, from /r/<name>.json. The catalog's Source tab shows the same code.
3. Install motion, and add the color variables (as in the package section above).

RequirementsCopy Anchor Link

• React 19
• motion 12 or newer
• Tailwind v4 and shadcn/ui tokens are recommended for the color slots, but not required