--- title: Morphicons: Any stroke icon morphs into any other description: Morphicons is a new open-source library that morphs any stroke icon into any other by simply changing a prop, with no manual rotation groups or from/to pairs... canonical: https://daily.dev/posts/morphicons-any-stroke-icon-morphs-into-any-other-b5tw4mfuj 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 new open-source library that morphs any stroke icon into any other by simply changing a prop, with no manual rotation groups or from/to pairs... og:url: https://daily.dev/posts/morphicons-any-stroke-icon-morphs-into-any-other-b5tw4mfuj og:image: https://api.daily.dev/og/posts/b5tW4mfuj.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 **[Open Source](https://daily.dev/sources/opensourcesquad)** · [@guillermolg](https://daily.dev/guillermolg) · 2 min read · 37 upvotes · 7 comments ## Summary Morphicons is a new open-source library that morphs any stroke icon into any other by simply changing a prop, with no manual rotation groups or from/to pairs needed. It solves the optimal 2D similarity (Procrustes) between shapes and interpolates in polar space, so rotations emerge naturally rather than being hand-declared. It supports uncontrolled, controlled, and imperative modes, handles mid-flight interruptions with spring velocity preservation, renders clean SSR with zero flash, and respects prefers-reduced-motion. It's drop-in compatible with Lucide, Tabler, Heroicons, Iconoir, and shadcn icon sets as long as icons share a 24x24 grid. MIT licensed, zero runtime deps, 7.65 KB gzip for the React entry. ## 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"` + `