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.
Swapping icons with a rotate or fade often looks "jumpy". Morphing, where the strokes gradually bend from one shape into another, shows users clearly that a state just changed (menu becomes X, play becomes pause). Coding it yourself is hard because two SVG icons usually have different numbers of path points. Morphicons is a library that morphs SVG icons smoothly into each other with spring-based motion, works with popular icon sets and pulls in no heavy dependencies.
Why morphing beats a straight swap
- It communicates the state change: the eye can follow the transformation and understand "what just happened".
- It feels smooth and polished: motion with inertia looks more natural than linear easing.
- It saves space: one button can handle two states.
Features
| Feature | Meaning |
|---|---|
| Spring physics | Natural motion with inertia instead of linear easing. |
| Works with popular icon sets | Lucide, Tabler, Heroicons: no need to change your tech stack. |
| Zero dependencies | Computes the shape transitions itself, no heavy runtime libraries. |
| Multi-framework | Versions for plain JavaScript, React and Vue. |
The hard part the library solves
For a smooth morph, the two paths need the same number of points in corresponding order. Otherwise the strokes twist or jump. The library handles matching and interpolating between differently structured paths, so you don't have to normalise each icon pair by hand.
Where to use it
- Menu ↔ close (hamburger to X).
- Play ↔ Pause.
- Add ↔ Added (plus to tick).
- Light ↔ Dark (sun to moon).
- Favourite stars, bookmarks, likes.
Good practice
- Keep durations around 150–300ms so the effect is meaningful without slowing interaction.
- Always update the
aria-labeltoo (e.g. "Open menu" → "Close menu"), since screen reader users don't see the effect. - Respect
prefers-reduced-motion: swap the icon instantly without animation. - Don't overdo it: use it only for state-toggle buttons, not every icon.
How to apply it
- Frontend devs: try it on one button (menu/close) in a project already using Lucide/Heroicons.
- Designers: pick icon pairs worth morphing; check the meaning stays clear in the in-between states.
- PM/QA: test on low-end devices and with screen readers.