--- title: morphicons: any stroke icon morphs into any other description: morphicons is a React library for animating icon transitions using Procrustes-based optimal 2D similarity solving and polar-space interpolation. Unlike... canonical: https://daily.dev/posts/morphicons-any-stroke-icon-morphs-into-any-other-530fwxr2a twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: morphicons: any stroke icon morphs into any other | daily.dev og:description: morphicons is a React library for animating icon transitions using Procrustes-based optimal 2D similarity solving and polar-space interpolation. Unlike... og:url: https://daily.dev/posts/morphicons-any-stroke-icon-morphs-into-any-other-530fwxr2a og:image: https://api.daily.dev/og/posts/530fWxr2a.png og:image:alt: morphicons: any stroke icon morphs into any other og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # morphicons: any stroke icon morphs into any other **[Web Developement](https://daily.dev/sources/webdevelopement)** · [@guillermolg](https://daily.dev/guillermolg) · 2 min read · 1 upvotes · 0 comments ## Summary morphicons is a React library for animating icon transitions using Procrustes-based optimal 2D similarity solving and polar-space interpolation. Unlike existing solutions, it requires no per-pair rotation groups or raw coordinate interpolation — just change the icon prop. It supports uncontrolled, controlled, and imperative modes, handles mid-flight interruptions with spring velocity preservation, emits clean SSR SVGs, and works with Lucide, Tabler, Heroicons, Iconoir, and shadcn icons out of the box. Ships as MIT-licensed ESM at 7.65 KB gzip with zero runtime dependencies. ## Content [morphicons](https://www.morphicons.com) 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. ``` import { MorphIcon } from "morphicons/react"; import { Menu, X } from "lucide"; // data, not components setOpen(o => !o)} aria-expanded={open}> ``` No wrappers, no `AnimatePresence`, 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 (`from`/`to` + `progress`, for gestures/scroll) and imperative (`ref.morphTo()` / `ref.set()`). What I actually care about: - **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. - **Real interruptions.** A `morphTo` mid-flight re-plans from the current intermediate shape and preserves the spring's velocity. Click spam never jumps. - **Clean SSR.** The server emits the exact static SVG — zero flash, zero layout shift. The runtime is born on hydration. - **Drop-in for lucide-react**: `size`, `strokeWidth`, `absoluteStrokeWidth`, `color`, `className` and the rest of the svg props pass through. `aria-hidden` by default, `label` → `role="img"` + `