Morph any SVG icon into any other.
Lucide, Tabler, Heroicons or any icon set, stroked or filled. Spring physics, zero dependencies, nothing to configure.
Click an icon to add it to your set. Any icon morphs into any other: across libraries, grids, and outline to fill.
import { MorphIcon } from "morphicons/react";
import { Menu, X } from "lucide"; // data, not components
<button onClick={() => setOpen(o => !o)} aria-expanded={open}>
<MorphIcon icon={open ? X : Menu} />
</button>
That is the whole thing, in React, Vue, Svelte, React Native or Astro. No wrappers, keys or configuration. Swap the pair for any two icons above.
Closed-form math, no config.
morphicons solves the rotation, scale and translation that best map one icon onto the other, in closed form. Shapes that match under rotation simply rotate, and filled icons morph as filled shapes.
Icons are consumed as data, not components: a d attribute or Lucide’s IconNode format. No per-library setup.
- gzip with a framework binding
- 10 KB
- runtime dependencies
- 0
- framework bindings, plus vanilla JS
- 5
- shared rAF for every icon on screen
- 1
Works with any icon set, stroked or filled, on any grid via fitIcon.
- Lucide
- Tabler
- Heroicons
- Iconoir
- Material Symbols
- Phosphor
- Hugeicons
- shadcn registry
