morphicons — SVG icon morphing library for React, Vue & Svelte
Morph any SVG icon into any other with spring physics. Animate Lucide, Tabler and Heroicons in React, Vue, Svelte, React Native, Astro or vanilla JS. Zero dependencies, ~6 KB gzip.
Morph any SVG icon into any other. Animate Lucide, Tabler, Heroicons or any stroke icon set. Optimal rotation solved in closed form, spring physics, zero dependencies. npm install morphicons That is the whole thing — in React, Vue, Svelte, React Native or Astro (no island needed: the icon upgrades to a web component). No wrappers, no keys, no from/to pairs, no configuration. Swap the pair for any two icons above. Six kilobytes of math. morphicons solves the optimal similarity between two shapes in closed form (2D Procrustes): if a pair is congruent under rotation, it rotates; if not, it…
saved by
related reading
- GitHub - guillermolg00/morphicons: Any icon morphs into any other — universal morphing for stroke-based icons with spring physics. Zero dependencies, ~7 KB gzip.github.com
- Motion (prev Framer Motion): JavaScript & React animation librarymotion.dev
- Anime.js | JavaScript Animation Engineanimejs.com
- GitHub - tailwindlabs/heroicons: A set of free MIT-licensed high-quality SVG icons for UI development. · GitHubgithub.com
- Shadersshaders.com
- Unicorn Studio — No-code WebGL Toolunicorn.studio
- glimm — shader-driven page transitionsglimm.dev
- Canvas UI: Creative Canvas, WebGL and WebGPU Component Librarycanvasui.dev
- srclsacred.computer
- The "best" way to manage icons in React.jsbenadam.me
- Interactive SVG Animationssvg.guide
- Free SVG Icons - 300,000+ Open Source Icons | Iconbuddyiconbuddy.com