Morph any SVG icon into any other with spring math

Morph any SVG icon into any other with spring math

An ultra-lightweight library just made smooth SVG icon transitions stupidly simple.

Developer Guillermo López released morphicons, an open-source tool that morphs any stroke-based icon into another using spring physics. The project picked up 705 GitHub stars in its first week. Instead of requiring manual rotation groups or custom animation pairs, it uses 2D Procrustes alignment math to figure out rotations automatically.

Why it matters: Traditional icon morphs usually make shapes shrink or shear awkwardly in transit unless you configure every pair by hand. morphicons solves that geometry in real time, has zero runtime dependencies, and weighs around 7 KB gzipped. It works across React, Vue, Svelte, and React Native.

Here's the gist: you pass your target icon into a single component, and it handles the rest. It plays nicely with popular sets like Lucide, Tabler, and Heroicons, renders cleanly on the server, and automatically respects user motion preferences. You can install it with bun add morphicons or npm install morphicons.

Say goodbye to hand-coding your menu-to-close button animations.

Sources