Docs

Iconimate is a set of 216 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

Icon motions are small and only ever start on hover or focus, so they play for everyone by default. They do not currently check the prefers-reduced-motion setting on their own.

To gate them, branch on the useReducedMotion hook at the point where you render the icon and skip it when the preference is set. Wrapping your tree in a MotionConfig boundary will not do it: useReducedMotion reads the media query directly and never consults MotionConfig, so the icons keep animating.

License

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