IconTween

IconTween gives an SVG icon purposeful, state-based motion and hands it off as small, readable code. It runs in the browser, nothing is uploaded, and it’s open source.

Fewer icons, more tool

The first idea was a set: the Lucide icons, animated, with a few presets to pick from. I dropped it. If every icon moves, none is special. A product needs a handful of crafted moments, like a copy button that confirms or a menu that becomes a close. And designers who care about those moments usually have their own icons.

So the set shrank to twelve starters, and the tool grew. There’s no export, fix in Figma and upload again. You drop in your own icon and shape every point, curve and step in the browser.

Motion needs a purpose

Every animation starts from why it exists: feedback, a change of state, a call for attention, a hint, or (rarely) delight. Pick one, and the trigger, timing and reduced motion are set for you. Everything stays editable, and the editor shows what you’ve changed from the defaults.

State change Click to toggle

Feedback Click to copy

Attention Plays once on arrival. Click to replay

Delight Click to like

Reduced motion is part of each design. When someone asks for less motion, the icon jumps, fades or stays still, as the designer chose.

Light enough to hand off

I wanted it simple and all in the browser, but shareable. There are no accounts and no backend. Work saves in the browser, and a share link carries the whole animation in the URL. You can export an SVG with no JavaScript, an HTML page, a React component or JSON. The runtime that plays them is 4 KB, and the preview uses the same code, so what you see is what ships.

The editor’s Prepare step: an imported icon, its cleanup report, and the original laid over the prepared copy — Prepare

The editor with the menu starter: states A and B, the onion skin of the previous state, and the morph playing in the preview — Edit

The Export dialog switching between SVG, HTML and React, then copying the code — Export

Three days with Claude

I built it with Claude Code in three days. Claude wrote all the code. I wrote the brief and the rules, made the calls, and every meaningful choice went into a short decision note.

Then I did the part Claude can’t: using it. Claude can’t watch an animation run or notice a wrong cursor. So I went through the app by hand and steered the fixes:

smooth scrolling to anchor links
collapsible sections where long lists got hard to read
cursors that showed the wrong thing
a visual pass over every screen

One of the last decisions: phones get a viewer, not the editor. Nobody opening a link on a phone wants to drag curve handles with a finger. They get the animation, its purpose and settings, and a link to open it on a laptop.

Starter icons from Lucide (ISC licence).