--- 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. It requires no... canonical: https://daily.dev/posts/morphicons-any-stroke-icon-morphs-into-any-other-qpdg4dbpn 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. It requires no... og:url: https://daily.dev/posts/morphicons-any-stroke-icon-morphs-into-any-other-qpdg4dbpn og:image: https://api.daily.dev/og/posts/QpDg4dbpN.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 **[WebDev](https://daily.dev/sources/webdev)** · [@guillermolg](https://daily.dev/guillermolg) · 2 min read · 149 upvotes · 12 comments ## Summary morphicons is a React library for animating icon transitions using Procrustes-based optimal 2D similarity solving and polar-space interpolation. It requires no per-pair configuration — rotations emerge automatically (e.g., arrow-right to arrow-down yields 90°, plus to X yields 45°). The API is a single prop change on a MorphIcon component, with three modes: uncontrolled, controlled (for gestures/scroll), and imperative via ref. Features include real mid-flight interruption with velocity preservation, clean SSR with zero flash, drop-in Lucide compatibility, accessibility support, and prefers-reduced-motion handling. Works with Lucide, Tabler, Heroicons, Iconoir, and shadcn icons. MIT licensed, zero runtime deps, 7.65 KB gzipped. ## 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"` + `