Icone

Animated icons, without a runtime

Draw the icon, define two states, and the transition between them is interpolated automatically. What you see in the preview is what gets exported, because both run the same code.

Open the editor How it works

What it does

Smart Animate that explains itself

Layers are matched across frames by identifier first, then by name, then by similarity. When a match is uncertain the editor says so and lets you correct it, instead of leaving you to rename layers until it works.

Path morphing that degrades instead of breaking

Identical paths interpolate directly. Reconcilable ones are resampled to a common segment count. Everything else crossfades. The worst case is a dissolve, never twisted geometry.

Export with zero dependencies

Typed, tree-shakeable, SSR-safe. Forty icons measure 11 kB gzipped in total. The same forty as Lottie measure 24 kB, and that is before the player, which is a dependency the component export does not have at all. Both figures come from a test in the repository, not from a brochure.

A real vector editor

Bézier pen, point editing, boolean operations, stroke outline and offset, radial repeat and mirror, pixel grid and Material keylines. Reduced motion is included in every animated export, always.

What lands in your repo

A generated component imports nothing. No player, no animation library, no provider to wrap the app in. It is the file you would have written by hand, if you had had the time.

import { MenuIcon } from './icons/MenuIcon'

export function Header() {
  return <MenuIcon size={24} animate />
}

// size?: number | string   side in pixels, the icon stays square
// animate?: boolean        false keeps it still on the first frame
// className?: string

Three steps

  1. Drop in two SVG files, or draw the icon from scratch.
  2. Duplicate the frame and change what should move.
  3. Pick a format and copy the code. Still SVG and PNG come from the frame’s context menu.

Where your work lives

Projects are stored in your browser and saved as you go. Nothing is uploaded, and no account is required. You can download a project as a file and open it again later.