300 components · shadcn registry · MIT licensed

Animated icons for shadcn/ui

Every useAnimations icon is in a shadcn registry. One CLI command adds a typed React component to your project, with the hover, click or loop interaction it was designed for, reduced-motion support and colors that follow your theme. The code lands in your repository, like any other shadcn/ui component.

Add an icon

Run the shadcn CLI with the icon's registry URL:

npx shadcn@latest add https://useanimations.com/r/checkmark.json

import { AnimatedCheckmark } from '@/components/animations/checkmark';

<AnimatedCheckmark size={24} />

The component is named Animated + the icon id in PascalCase (check-box → AnimatedCheckBox) and lands in components/animations/<id>.tsx. The CLI also adds the shared components/use-animation.tsx wrapper and installs react-useanimations, which brings its own player: no lottie-web.

Short names with a registry namespace

Add the registry to components.json once, then add icons by name, several at a time:

{
  "registries": {
    "@useanimations": "https://useanimations.com/r/{name}.json"
  }
}

npx shadcn@latest add @useanimations/menu @useanimations/heart @useanimations/loading

The registry index at /r/registry.json lists every item with its title, category and interaction.

Use it in a shadcn Button

The components take the same props as UseAnimations. For a toggle such as the menu icon, pass active and keep the state in your button; the icon animates whenever it changes:

npx shadcn@latest add https://useanimations.com/r/menu.json

"use client"

import { useState } from "react"
import { AnimatedMenu } from "@/components/animations/menu"
import { Button } from "@/components/ui/button"

export function MenuToggle() {
  const [open, setOpen] = useState(false)
  return (
    <Button
      variant="ghost"
      size="icon"
      aria-label={open ? "Close menu" : "Open menu"}
      aria-expanded={open}
      onClick={() => setOpen(!open)}
    >
      <AnimatedMenu size={20} active={open} />
    </Button>
  )
}

Icons follow the text color, so text-primary or text-muted-foreground recolor them and dark mode needs nothing extra. More props and patterns are in the documentation.

Popular icons for shadcn/ui

All 300 icons →

Every icon page shows its shadcn command.

FAQ

Are the shadcn/ui animated icons free?

Yes. All 300 icons and the component code are MIT-licensed, for personal and commercial projects. The registry needs no account or API key.

What does the shadcn CLI add to my project?

The icon component in components/animations/<id>.tsx, the shared UseAnimation player wrapper in components/use-animation.tsx (once, as a registry dependency) and react-useanimations@^3.1.1 from npm. lottie-web is not needed: the package has its own 8 kB player.

Do the components work with Next.js server components?

Yes. The components are marked "use client" and draw the animation only in the browser, so you can render them from server components and pages without dynamic imports or ssr: false.

Can I change how the icons look and move?

The code is yours, in your repository. The components take the props of UseAnimations: size, strokeColor, fillColor, interaction, active, autoplay, loop and speed. Icons follow the text color, so Tailwind classes such as text-primary or text-muted-foreground recolor them.