Tool Open source

morphicons

morphicons is an open-source, zero-dependency JavaScript library for morphing one stroke-based SVG icon into another with spring physics. It accepts icon data such as IconNode objects or raw path strings, supports icon sets including Lucide, Tabler, Heroicons, and Iconoir, and can use custom paths.

View repository Visit site Mentioned in 3 videos ↓

Overview

Its morphing algorithm solves the optimal similarity between shapes using 2D Procrustes analysis and polar interpolation, allowing rotation and scale to emerge mathematically rather than being declared for each icon pair. The library provides React, Vue, Svelte, React Native, vanilla custom-element, Astro, and core usage options, including uncontrolled prop-driven animation, controlled progress, and imperative morphing. It is distributed as an ESM package with optional framework peer dependencies.

What morphicons is used for

3 uses taken from transcripts — each links to the moment in the video.

  • An open-source JavaScript library that animates one stroke-based icon into another using spring physics. It supports common icon sets and custom SVG paths, with React, Vanilla DOM, and Pure Core builds.

  • Morphs one stroke icon into another by mathematically solving their similarity and interpolating rotation, scale, and residual shape while preserving exact corners.

  • Morphs one icon into another across icon sets without manually declaring corresponding parts. It automatically determines rotations and interpolates in polar coordinates to preserve shape quality and velocity during interrupted animations.

Videos mentioning morphicons

3 in the library.