Morphicons: smoothly morph one icon into another — no animation code
TL;DR
Morphicons is a library that morphs SVG icons into each other (e.g. Menu → X, Play → Pause) with spring-physics motion. It works with popular icon sets like Lucide, Tabler and Heroicons and adds no heavy runtime dependency.
Why it’s worth it
Swapping icons with a rotate or fade feels abrupt. A morph — strokes bending from one shape into the next — clearly shows that state changed, but it’s hard to hand-code because two icons rarely have matching path points.
| Feature | Why it matters |
|---|---|
| Spring physics | Natural motion with momentum instead of linear easing. |
| Works with popular icon sets | Lucide, Tabler, Heroicons — no stack change. |
| Zero dependencies | Computes shape transitions itself, no heavy runtime. |
| Multi-framework | Vanilla JavaScript, React and Vue. |
How to put it to work
- Use it for toggle buttons: menu/close, play/pause, add/added, light/dark.
- Keep durations around 150–300ms so the motion is meaningful without slowing users down.
- Always update
aria-labeltoo (e.g. “Open menu” → “Close menu”) — screen-reader users don’t see the animation.
Links: morphicons (npm) · Demo on CSS Script