Animated Icons

Icons that move. Colors that follow your theme.

137 animated icons with one to three color slots, piped from your shadcn/ui tokens. Each one has its own animations. Copy them into your codebase with the shadcn CLI.

Browse icons Read the docs
npx shadcn add @kovenlabs/bell

or all 137 at once with @kovenlabs/all, or pnpm add @kovenlabs/animated-icons

/icons

137 icons, all alive

Open the catalog

why

Built for design systems, not screenshots

Palette

colors

Your theme's colors

Three slots, read from your shadcn tokens, dark mode included. Give one color and it paints the whole icon; give two and the third follows.

variant

variants

Every icon, its own moves

A bell rings, shakes or jumps. Variant names are typed per icon, in props and in your global config. Re-trigger mid-animation and it picks up from where it is.

corners

corners

Round, bevel or sharp

Drawn sharp, rendered round: the geometry itself is reshaped at render, at whatever radius fits your brand. One prop, the whole set.

install

Yours to own

Installation guide

  1. 1 · add

    npx shadcn add @kovenlabs/bell @kovenlabs/loader

# or the whole set
npx shadcn add @kovenlabs/all

# or as a package
pnpm add @kovenlabs/animated-icons motion

    The shadcn way copies the source into components/animated-icons/, yours to edit. The package keeps it all in one dependency.

  2. 2 · use

    <BellIcon />
<BellIcon variant="shake" trigger="auto" />
<BellIcon colors={{ accent: "destructive" }} />

    Hover, click, auto, in view, or drive it yourself through a ref.

  3. 3 · configure once

    export default defineIconConfig({
  trigger: "hover",
  corners: "round",
  icons: { bell: { variant: "shake" } },
})

    Global defaults in config.ts; providers for a subtree; props win.