guillermolg00/morphicons

What it solves

morphicons provides a way to animate the transition between two different stroke-based icons (such as those from Lucide, Tabler, or Heroicons) so that one smoothly "morphs" into the other. It eliminates the need to manually define rotation groups or deal with shapes that shrink or shear during interpolation by using mathematical alignment to find the most natural path between two shapes.

How it works

The library uses 2D Procrustes analysis and polar interpolation to solve for the optimal similarity between shapes in closed form. This ensures that if two icons are congruent under rotation, the transition will appear as a rotation rather than a distorting morph. It supports three modes of operation: uncontrolled (automatic animation when a prop changes), controlled (explicit progress for gestures or scrolling), and imperative (using a handle to trigger animations via code).

Who it’s for

Frontend developers using React, Vue, Svelte, React Native, or plain HTML/Web Components who want high-quality, physics-based icon animations without complex configuration or runtime dependencies.

Highlights

• Universal Compatibility: Works with any stroke-based icon data (Lucide, Tabler, Heroicons, Iconoir, etc.).
• Multi-Framework Support: Dedicated bindings for React, Vue, Svelte, React Native, and Astro, plus a vanilla JS DOM driver.
• Physics-Based: Uses spring physics for smooth, natural transitions.
• Zero Runtime Dependencies: The core logic is independent of any framework.
• Flexible Output Targets: Can render to inline SVGs, CSS masks (via maskTarget), or 2D Canvas (via canvasTarget).
• Accessibility First: Includes built-in support for reduced-motion OS settings.