Animating Icons

Overview

An icon is not a picture you move. It is an object that does something, and the animation is that thing happening once.

Core principle: the gesture is the icon's meaning acting on itself. A bell rings, a plug disconnects, a package lands, a branch is written. The motion has to be something only that object could do.

This is the whole difference between a library worth starring and 400 icons that wobble. Existing animated-icon libraries fail here constantly: lucide-animated's search icon translates the entire <svg> by x:[0,0,-3,0], y:[0,-4,0,0] — nothing inside the glyph moves relative to anything else, and those exact keyframes would look identical on any of its 435 icons. That is decoration. It is not what we are making.

The swap test

Could these exact keyframes be pasted onto a different icon and still look fine?

If yes, it is decoration. Delete it and start over. Run this twice: once when you have the idea, before writing any CSS, and once on the finished icon.