Docs

Iconimate is a set of 186 animated React icons drawn on the Phosphor 256 grid. Every icon is a self-contained component whose only runtime dependency is motion. Add just the icons you need through the shadcn registry.

Install an icon

Each icon is published as a shadcn registry item at https://iconimate.app/r/<slug>.json. Add one with the shadcn CLI:

npx shadcn@latest add https://iconimate.app/r/bell.json

That copies a single component into your project. The hover controller and motion tokens are inlined, so there is nothing else to wire up. The same command works with pnpm dlx, yarn dlx, and bunx --bun; the gallery shows the exact line for your package manager.

Use an icon

import { BellIcon } from "@/components/ui/bell";

export function Example() {
  return <BellIcon size={24} />;
}

Hover or keyboard-focus the icon and it animates. Every icon accepts a size prop (default 28, calibrated to read at 24) plus any standard div attributes.

Control the animation yourself

On touch devices :hover never fires, and sometimes you want a parent element to drive the motion. Each icon forwards a ref exposing startAnimation and stopAnimation:

import { useRef } from "react";
import { BellIcon } from "@/components/ui/bell";
import type { IconHandle } from "@/lib/icon";

export function Example() {
  const ref = useRef<IconHandle>(null);

  return (
    <button
      onPointerEnter={() => ref.current?.startAnimation()}
      onPointerLeave={() => ref.current?.stopAnimation()}
    >
      <BellIcon ref={ref} size={24} />
    </button>
  );
}

Copy AI prompt

Every icon in the gallery has a Copy AI promptaction. It gives you a self-contained brief for that icon — the glyph's subpaths, the motion it plays, the alternatives that were explored before it shipped, and the rules every Iconimate icon follows (imperative handle, normal/animate variants, reduced-motion fallback, pixel-identical rest state). Paste it into any LLM to author a matching icon or restyle this one.

TypeScript

Iconimate is written in TypeScript. Icons are typed as ForwardRefExoticComponent with an IconProps surface (size plus div attributes) and an IconHandle ref, so autocomplete and type checking work out of the box.

Reduced motion

Iconimate icon motions are small and triggered only by hover or focus, so they play for all users by default. If you want to gate them behind the prefers-reduced-motion setting in your own app, wrap your tree in a motion MotionConfig reducedMotion="user" boundary, or branch on the useReducedMotion hook where you render the icons.

License

MIT. Use the icons anywhere, in personal and commercial projects, for free.