Skip to main content

Morphicons: A Morph Engine for the Icons You Already Ship

· 4 min read
Gergely Sipos
Gergely Sipos
Frontend Architect

banner

Morphicons is not an icon set. It ships zero icons. It is a ~6.6 KB gzip engine that interpolates SVG d paths, so any stroke icon can smoothly morph into any other one — hamburger into close, play into pause, sun into moon. Instead of asking you to adopt yet another pack, it sits on top of the sets we already recommend: Lucide and Heroicons outline. The idea is genuinely clever. The maturity is genuinely worrying. Both are worth a closer look.

Not an Icon Set​

There are no icons in the package — it's a transform layer, and you bring your own artwork.

  • It consumes Lucide's IconNode structure, but Lucide is not a dependency or a peer dependency. You can also hand it a raw SVG d string.
  • It works with any stroke set drawn on a 24×24 grid: Lucide, Tabler, Heroicons outline, Iconoir, Akar, Untitled UI, Hugeicons. A fitIcon() helper re-grids packs that don't sit on that canvas.
  • MIT licensed, written by Guillermo López. Free, with GitHub Sponsors as the only funding channel.

How It Works​

The animation is pure SVG path interpolation — not Lottie, not CSS keyframes. That's the differentiator. Morphicons runs a closed-form 2D Procrustes alignment, interpolates in polar coordinates, and drives the result with a spring (a damped harmonic oscillator). Rotation emerges from the math rather than being declared per icon pair, which is why arrow-right → arrow-down finds its own 90° with no configuration.

There are three usage modes: uncontrolled (just an icon prop), controlled (from / to / progress, which is what you want for gestures and scroll-linked motion), and imperative (a ref exposing morphTo() and set()). Spring presets are smooth, snappy, and bouncy. Bindings ship for morphicons/react, /vue, /svelte, /react-native, and /dom, plus a DOM-free core. ESM only, zero runtime dependencies.

import { MorphIcon } from "morphicons/react";
import { Menu, X } from "lucide"; // the data package, not lucide-react

<MorphIcon icon={open ? X : Menu} spring="snappy" />

Note the import is lucide (icon data), not lucide-react (components) — and there's no AnimatePresence, no keys, no from/to pairing. You swap the prop.

Accessibility is handled sensibly: icons are aria-hidden by default, a label prop promotes them to role="img" with a <title>, and prefers-reduced-motion swaps instantly instead of animating.

The Catch​

caution

Morphicons is four days old. The npm package was first published on 2026-08-01 and reached v1.4.1 on 2026-08-04 — 999 weekly downloads and 528 GitHub stars at the time of writing. There is no production track record, no stability guarantee, and the browser support matrix is never stated explicitly. Treat it as a spike, not a dependency.

The second constraint is architectural: stroke icons only. It interpolates outlines on a 24×24 grid and does not work with filled sets — Material Symbols, Phosphor fill, Heroicons solid, Remix Icon and Bootstrap Icons are all out. If your design system is filled-icon-based, this is a non-starter, not a tuning problem. The author's own roadmap still lists "bulletproof inputs — clear errors at every public boundary" as pending, which tells you how early this is.

Should You Use It?​

Yes, for small high-visibility interactions where a morph reads as polish: hamburger↔close, play↔pause, chevron↔check, and a sun↔moon theme switcher. The showcase has copy-paste recipes for exactly those, including Copy→Check and Eye→EyeOff.

No, for anything on your critical path this quarter. Four days of history is not a foundation, and a stroke-only engine will quietly constrain your icon choices later. Prototype it, enjoy it, and revisit in six months.

For the sets it works with, see Design Tools & Resources.