# morphicons

> Zero-dependency library to smoothly morph SVG stroke icons using spring physics

morphicons is a lightweight, zero-dependency library and web playground that animates transitions between any two SVG stroke icons. It solves optimal rotation and path alignment in closed form using spring physics, preventing awkward cross-fades without requiring manual keyframes or wrapper setups. It works across React, Vue, Svelte, React Native, Astro, and plain JavaScript.

Website: https://morphicons.com/

## What it is for

- Animate hamburger menu toggles into close icons smoothly
- Transition stateful UI buttons such as play/pause, volume mute, or bookmark toggles
- Preview and test vector morph transitions between different icon sets in the browser playground

## Features

- Zero runtime dependencies with a compact ~6.5 KB gzipped footprint
- Interruptible spring physics with presets like smooth, snappy, and bouncy
- Automatic shape alignment and rotation matching via 2D Procrustes analysis
- Works out of the box with popular icon sets including Lucide, Tabler, Heroicons, and Iconoir
- First-class adapters for React, Vue, Svelte, React Native, and Astro (via Web Components)
- Single shared requestAnimationFrame loop across all morphing icons on the page

## Pricing

Open source. Free and open source (MIT license)

## Details

- Type: Web app
- Category: [Development](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- Open source: yes
- Platforms: Web, Code library
- For: Frontend developers and UI designers building animated web or mobile interfaces
- Alternative to: Framer Motion, Lottie, react-spring
- Tags: svg, animation, icons, react, vue, svelte, ui

## Why it was saved

- [@alexeybychkov_, 20 August 2026](https://www.instagram.com/reel/DcQwUTdN2WT/): Replaces abrupt icon fade/toggle transitions in apps with fluid vector morphing animations, supporting frameworks like React, Vue, Svelte, and React Native.

## Compare

- [Alternatives to Framer Motion](https://xiry.app/alternatives/framer-motion.md)

## Related

- [shadcn/ui](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source)

Updated 3 October 2026. Page: https://xiry.app/resources/morphicons

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.