Morphicons

The gist

• Morphicons is a 6.5 KB gzipped SVG icon morphing library with zero runtime dependencies, installed via npm install morphicons.
• It computes optimal similarity between two shapes in closed form using 2D Procrustes analysis, rotating congruent pairs and morphing others in the aligned frame, with planning taking about 1 ms per pair.
• The API is a single MorphIcon component that takes an icon prop, with no from/to pairs, wrappers or keys, for example MorphIcon icon={open ? X : Menu}.
• It supports React, Vue, Svelte, React Native, Astro, Next.js and vanilla JS, and in Astro needs no island because the icon upgrades to a web component.
• Icons are consumed as data, either a d attribute or Lucide's IconNode format, so Lucide, Tabler, Heroicons, Iconoir, Akar, Untitled UI and Hugeicons all morph into each other on the shared 24x24 grid.
• Springs are interruptible, corners stay sharp at rest, and every icon on screen shares a single requestAnimationFrame loop.

Discussion