flâneur

guillermolg00/morphicons: Any icon morphs into any other — universal morphing for stroke-based icons with spring physics. Zero dependencies, ~7 KB gzip. ·

github.com · 5,571 words · saved by 1 readers

Any icon morphs into any other — universal morphing for stroke-based icons with spring physics. Zero dependencies, ~7 KB gzip. morphicons.com — live playground Universal morphing for stroke-based icons (Lucide, Tab ler, Heroicons, Iconoir, or your own paths): any icon morphs into any other with spring physics. Rotations are never declared by hand — they emerge from the math (2D Procrustes + polar interpolation). Zero runtime dependencies. That's the whole thing. No wrappers, no AnimatePresence, no keys, no from/to pairs, no configuration. State lives outside; the animation is an implementation detail the component picks up when the prop changes. The usual icon morphs either interpolate raw coordinates (shapes shrink and shear in transit) or require hand-declaring "rotation groups" per icon pair. morphicons solves the optimal similarity between shapes in closed form and interpolates it in its natural space: if a pair is congruent under rotation, it rotates; if not, it morphs in the alig

morphicons.com — live playground Universal morphing for stroke-based icons (Lucide, Tab ler, Heroicons, Iconoir, or your own paths): any icon morphs into any other with spring physics. Rotations are never declared by hand — they emerge from the math (2D Procrustes + polar interpolation). Zero runtime dependencies. import { MorphIcon } from "morphicons/react"; import { Menu, X } from "lucide"; // data, not components <button onClick={() => setOpen(o => !o)} aria-expanded={open}> <MorphIcon icon={open ? X : Menu} /> </button> That's the whole thing. No wrappers, no AnimatePresence, no…

saved by

related reading