Animating icons

A long time ago I came across Benji Taylor morphing basic icons, and I read his article, Morphing icons with Claude. It's cool you should read it.

Recently I saw a post on X making a video with animated icons, done in Motion. I cannot find it again. I thought, oh, cool, I want to do something like that, but not with Motion. With CSS. This is what I did.

The main thing I wanted for myself was to put some meaning behind each icon. Take the API key. When it plays, it rotates. Not because a spin looks good, but because rotating a key is what you actually do with an API key. That is the whole rule: the gesture should be the thing the icon already means, happening once.

There are a lot of icon animations you can do, and plenty of them are easy: small, snappy moments that make a sidebar feel alive. Those are good. This library has a lot of the easy, cool ones and they are worth seeing. What I wanted was to go a little beyond that and put some meaning into each one, which is a whole different level. So I picked the icons I could actually animate that way, and left the easy ones alone, arrows and the like. Those you can always animate yourself with the skill I made.

The hardest and most rewarding ones are the hands. A hand does not slide or spin. It changes shape. Fingers fold, a palm gathers into a fist, an open hand rolls into a sign. No transform can fake that, so these are true vector morphs: the same path drawn twice, once for each pose, with the same points in the same order, and the browser walks every point from one to the next.

I draw the poses myself. I open Figma and lay out the hand frame by frame, the way you would storyboard a shot, then hand those drawings over and let the morph run through them in order. The Muscle is the cleanest example. Its two poses are close, so the flex bulges and releases like real tissue, and a wind-up past the start plus an overshoot past the peak gives it the snap.

Most icons are not hands. They are rigid objects with parts that slide, turn, or drop, and the shape never actually deforms. Those are plain CSS keyframes on a transform, and they are far more forgiving than a morph.

The Stack is the one I fought over. My first version morphed a pill into a chevron, and it read as the pill closing up from the sides, which is wrong. A stack does not deform. A chevron is just what a whole pill looks like when the pill above it covers most of it. So nothing bends. A new layer drops in and shoves the stack down one slot, and the layers that slide under it are revealed already whole. Occlusion, not deformation, so masking does a lot of work here.

Between those two there are a few more moves worth naming, because picking the right one is most of the work.

Travel and come back. Something leaves the frame and returns. The airplane flies off, a second plane lands on the runway, the first flies back. The trick is that nothing fades. The icon clips at its own edge, so a plane can genuinely be off screen and parked, and slide back in. Hiding by fading is banned. Hiding by leaving is honest.

Draw it on. A line writes itself, in the order a hand would draw it, using the length of the stroke rather than any fade. The git branch retracts into its head and rewrites itself. The truck streams its speed lines on as it revs.

Move the holes. In a solid, filled icon the details are not marks you can move. They are holes cut out of the ink. The chat dots, the robot eyes, the ball dropping through the funnel are all punched by a mask, and the mask is what animates.

A correct gesture with wrong timing still reads as cheap. The thing I got wrong early was borrowing the interface rule that says keep motion under 300ms. That rule is for state changes the user is waiting on. A gesture is not that. It is something they are watching, so it gets room to breathe.

Everything here performs one clear beat in a little under a second and returns exactly to where it started. It waits a breath before it plays, and if you leave halfway it speeds up to finish rather than snapping back. Larger motion runs slower, exits run a touch faster than entrances, leaving the frame is the one place an ease-in is right, and arriving is always an ease-out.

So the timing is a key. Thanks to Emil Kowalski, His course has all of the sauce, for animatiions.

There is a bunch I got wrong. The handshake, the truck, the book, the notebook and the box. I loved animating them anyway. Probably nobody is going to use these, and that is fine.

The reason I could not finish them is the same each time: some needed more painting in Figma and more time than I wanted to give one icon. It just did not click, and at some point you notice you are losing too much time on a single glyph. I had fun getting them wrong.

I'm not the first person to do this. People were animating icons with care long before me. There is lucide-animated, and hugeicons-animated is another small pack worth taking. I just wanted to do it with meaning. I hope this is useful to you.

If you want to make icons like these, here is everything. All the icons I made are here to copy and use however you want. If you want to prompt them the way I do, there is a skill with the rules I have been describing. I won't pretend the skill is great, it just holds the rules, and if you use it you will probably want to iterate on it a little more.

A few generic prompts that works, but pelase know that you will need to itirate to get it right.