Design AtlasAn animated icon doesn't snap between states — it morphs smoothly from one shape into the next as the state changes. A hamburger menu turning into an X, a play button flipping to pause, a checkbox drawing in its own checkmark — these are the classic cases, and they communicate "something just changed" far more clearly than an instant icon swap.
There are two common ways to build one. The first genuinely rotates and shifts the lines or shapes themselves so the form actually changes (the hamburger-to-X morph is the textbook case). The second layers two states on top of each other and cross-fades their opacity. For a "drawing itself in" feel — a checkmark being traced — the stroke is animated in with stroke-dashoffset so it appears in the order it was drawn.
Duration usually sits in the 150–300ms range. Too long and it gets in the way of the next action; too short and nobody registers that anything happened. And the shape it lands on after the animation has to exactly match the real state — the menu is actually open, playback is actually running. A beautiful animation that ends on the wrong shape erodes trust rather than building it.
When to use
Use it on toggle buttons where the state change needs to register clearly — open/close menus, play/pause, completion checks. Keep it short (around 150–300ms) and make sure the shape it ends on always matches the real state.