xiry.

Development · Web app

morphicons

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

From the Xiry library · Updated 3 October 2026

Visit morphicons.com ↗

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.

What it's 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
Topic
UI Components
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: Replaces abrupt icon fade/toggle transitions in apps with fluid vector morphing animations, supporting frameworks like React, Vue, Svelte, and React Native.

Compare

Related

  • shadcn/ui

    Copy-paste React UI components built with Tailwind CSS and Radix primitives.

  • Efferd

    Pre-built, responsive shadcn/ui blocks and layouts for React applications

  • Motion

    Open-source animation library for React, Vue, and vanilla JavaScript

  • React Bits

    Open-source animated and interactive React UI components and backgrounds

  • 21st.dev

    Curated directory of crafted React, Tailwind, and shadcn UI components.

  • lucide-animated

    Open-source animated React icons built with Lucide and Motion

All 114 in UI Components →

Updated