<a href="https://www.morphicons.com" target="_blank" rel="noopener nofollow">morphicons</a>
I got tired of icon morphs that either need a hand-declared “rotation group” per pair, or interpolate raw coordinates and shear the shape in transit. So I built morphicons.
The whole API is: change the prop.
<pre><code>import { MorphIcon } from &quot;morphicons/react&quot;;
import { Menu, X } from &quot;lucide&quot;; // data, not components

&lt;button onClick={() =&gt; setOpen(o =&gt; !o)} aria-expanded={open}&gt;
 &lt;MorphIcon icon={open ? X : Menu} /&gt;
&lt;/button&gt;
</code></pre>
No wrappers, no <code>AnimatePresence</code>, no keys, no from/to pairs, no config. State lives outside; the animation is an implementation detail the component picks up when the prop changes.
Three modes if you need them: uncontrolled (above), controlled (<code>from</code>/<code>to</code> + <code>progress</code>, for gestures/scroll) and imperative (<code>ref.morphTo()</code> / <code>ref.set()</code>).
What I actually care about:
<ul>
<li>Rotations emerge. It solves the optimal 2D similarity between the two shapes (Procrustes) and interpolates in polar space. arrow-right → arrow-down gives θ = 90° on its own. plus → x gives 45°. Nobody declares that anywhere.</li>
<li>Real interruptions. A <code>morphTo</code> mid-flight re-plans from the current intermediate shape and preserves the spring’s velocity. Click spam never jumps.</li>
<li>Clean SSR. The server emits the exact static SVG — zero flash, zero layout shift. The runtime is born on hydration.</li>
<li>Drop-in for lucide-react: <code>size</code>, <code>strokeWidth</code>, <code>absoluteStrokeWidth</code>, <code>color</code>, <code>className</code> and the rest of the svg props pass through. <code>aria-hidden</code> by default, <code>label</code> → <code>role=&quot;img&quot;</code> + <code>&lt;title&gt;</code>. <code>prefers-reduced-motion</code> degrades to an instant swap.</li>
<li>One global rAF for every instance on the page.</li>
</ul>
Works with Lucide, Tabler, Heroicons (outline), Iconoir and the shadcn icon registry — no per-library adapters, because it just eats a <code>d</code> string or Lucide’s <code>[tag, attrs][]</code> shape. Requirement is that the icons are stroke-drawn on a shared grid (all of the above are 24×24); off-grid packs go through <code>fitIcon(icon, 32)</code> once at module scope.
MIT, zero runtime deps, ESM, 7.65 KB gzip for the React entry (react external). React &gt;= 18 as optional peer.
Playground with a scrubber so you can freeze any morph mid-flight: <a href="https://www.morphicons.com" target="_blank" rel="noopener nofollow">https://www.morphicons.com</a>
Repo: <a href="https://github.com/guillermolg00/morphicons" target="_blank" rel="noopener nofollow">https://github.com/guillermolg00/morphicons</a>

Smiley Face

Join 'Everything ShadCN' – a community for developers to share, learn, and discuss resources, tips, and best practices related to ShadCN. Whether you're a beginner or a pro, connect and grow your skills with fellow enthusiasts!

All ShadCN

Morphicons is a React library for animating SVG icon transitions without manual configuration. It uses Procrustes analysis to compute optimal 2D similarity transforms between shapes, interpolating in polar space so rotations emerge naturally (e.g., arrow-right to arrow-down auto-detects 90°). The API is a single prop change on a MorphIcon component. Features include three control modes (uncontrolled, controlled, imperative), real mid-flight interruption with spring velocity preservation, clean SSR with zero flash, and compatibility with Lucide, Tabler, Heroicons, Iconoir, and shadcn icons. MIT licensed, zero runtime dependencies, 7.65 KB gzip.

Morphicons: Any stroke icon morphs into any other

This morph handles click spam without resetting its spring velocity. Even icons need interruption handling

Looks pretty neat! Good job. A small hint: The link at the bottom of the article directs to “repo” instead of the URL.

Interaction is busted for me in Chrome and Brave. ☹️ bummer - looks potentially very cool!

One of the coolest things I have seen this year! Awesome job, very creative - and generous for making it foss

taking from this, i published the sveltekit port - <a href="https://morphicons-svelte.vercel.app/" target="_blank" rel="noopener nofollow">https://morphicons-svelte.vercel.app/</a>
<a href="https://github.com/fractalmandala/mandala/tree/main/packages/morphicons-svelte" target="_blank" rel="noopener nofollow">https://github.com/fractalmandala/mandala/tree/main/packages/morphicons-svelte</a>