Animating icons
An icon is not a picture you move. It is an object that does something, and the animation is that thing happening once. A bell rings. A plug comes out of its socket. The hamburger menu that rotates into an . The motion has to be something only that object could do.
Most animated-icon libraries fail here: they translate the whole
<svg> by a few pixels, and the exact same keyframes
would look identical on any icon in the set. That is decoration. This
skill is the discipline it takes to do the other thing — and hold the
line across thousands of glyphs.
That widget is one UI slot where any icon becomes any other — the
three-line system. Every icon is exactly three SVG
lines; icons that need fewer collapse the extras to an invisible point
at the centre. menu → cross tweens the line coordinates.
cross ↔ plus is the same shape 45° apart, so it
rotates rather than warping the lines. No crossfade — the
lines genuinely transform.
The four gates
Every icon passes all four, verified by rendering and measuring, never by reasoning:
- Swap test — could these keyframes be pasted onto a different icon and still look fine? If yes, it is decoration.
- Rest test — frame 0 and the final frame are pixel-identical to the untouched source glyph. Hovering an icon must never change what it looks like afterward.
- Strip test — every intermediate frame still reads as the icon, not a pile of disassembled parts.
- Motion test — the delivered speed is read back off the browser's own computed matrix and differentiated. Peak under the aliasing ceiling; anything meant to stop actually reaches zero.
What's in it
Twelve gesture families (draw-on, hinge, travel-and-return, fall-and-land, pulse-from-source, and more), a seventeen-item catalog of the ways these break, the vector-morph correspondence method, the three-line icon-to-icon system you just clicked, and a verify harness that freezes the animation at any timestamp and screenshots it. Every number in the skill was paid for once, by hand.
Install
Drop it into any coding agent — Claude Code, Cursor, Codex, and more:
npx skills add SoraLabsOSS/skills
/plugin marketplace add SoraLabsOSS/skills
/plugin install animating-icons@soralabs
Prompts that hold the line
The skill wakes up on its own when you ask for icon motion — but the wording still decides whether you get a real gesture or just decoration. Three we keep reaching for:
Here's the icon. Find the verb it already stands for, and animate that verb happening exactly once. Pick the mechanism the shape actually calls for — a transform if the part is rigid, a morph if the material truly bends, a mask if something needs to pass behind another part, stroke-dashoffset if a line is meant to be drawn. Pull every number from the path itself, never from intuition. When it's done, the icon should settle back into exactly what it started as.
Before touching a single keyframe: name the verb this object performs, name the one part responsible for it, and name the mechanism that verb demands. Then state explicitly what stays untouched, and why it stays untouched.
Stop before animating: does this icon contain a real gesture, or is it just a noun with nothing to enact? If there's no genuine verb hiding in it, say that plainly, and let it stay still.
Built by the team behind Sora UI. Morphing technique from Benji Taylor. Timing instincts from Emil Kowalski. MIT.