morphicons
Any icon morphs into any other — universal morphing for stroke-based icons with spring physics. Zero dependencies, ~7 KB gzip.
What is it?
What it is
A universal morphing library for stroke-based SVG icons that enables any icon to morph into any other using spring physics and mathematical alignment.
Why it exists
To solve the limitations of traditional icon morphing, which typically results in shape shearing or requires manual declaration of rotation groups; morphicons automates rotation and alignment using 2D Procrustes and polar interpolation.
Who should use it
Frontend developers using React, Vue, Svelte, or React NativeUI/UX engineers looking for smooth icon transitionsDevelopers using stroke-based icon libraries like Lucide, Tabler, or HeroiconsDevelopers needing high-performance, zero-dependency SVG animationsDevelopers requiring SSR-friendly icon morphing
Who should avoid it
Developers using filled/outlined-fill glyphs (e.g., Material Symbols solid)Developers using icons with non-standard coordinate spaces without using fitIconDevelopers requiring complex multi-element SVG animations beyond simple path morphingDevelopers working in environments without ESM support
How it works
A quick walkthrough in plain English
How morphicons works
Step 1 of 3
You interact with it
Open morphicons, send a request, or connect it to your stack.
Features
Advantages
- No need to predefine rotation groups
- Cross-framework compatibility (React, Vue, Svelte, React Native)
- High performance with pure functions and no DOM overhead
- Seamless integration with stroke-based icon libraries
- Automatic handling of complex morphing scenarios
- Clean SSR with no flash or layout shift
- Supports both uncontrolled and controlled usage patterns
- Interruption-resistant animations
- Customizable spring behavior for different use cases
- Well-documented and actively maintained
Disadvantages
- Requires stroke-based icons (filled icons may not work correctly)
- Icons must be in a shared coordinate space (e.g., 24x24 grid)
- Limited to frameworks with binding support (React, Vue, etc.)
- Complex underlying math may be challenging for some users
- May require icon resizing for non-24x24 icon sets
- No support for filled or solid icon styles out of the box
Installation
native
bun add morphicons # or npm install / pnpm add
FAQ
What makes morphicons unique compared to other icon morphing libraries?
morphicons automatically handles rotations via 2D Procrustes alignment, eliminating the need for manual rotation group definitions. It morphs shapes optimally in their natural space, preserving geometric relationships without manual intervention.
Which icon libraries are compatible with morphicons?
morphicons works with any stroke-based icon set that provides geometry as a 'd' attribute or IconNode (e.g., Lucide, Tabler, Heroicons, Iconoir). Off-grid icons can be adapted using the `fitIcon` utility to match the 24×24 grid.
How does morphicons handle rotations automatically?
It uses 2D Procrustes analysis to compute the optimal rotation, scale, and translation between icon pairs. If shapes are congruent under rotation, they rotate naturally; otherwise, they morph in the aligned frame without manual angle declarations.
What are the installation requirements?
Install via `bun add morphicons` or `npm install / pnpm add`. Peer dependencies like React (>=18), Vue (>=3.3), or React Native (>=0.71) are optional for framework-specific bindings but not required for the core DOM or vanilla usage.
Can morphicons be used without React or framework bindings?
Yes. The core library (`morphicons/dom`) provides a vanilla DOM API (`createMorph`) that works in any JavaScript environment, including non-framework projects. It requires only an SVG `<path>` element and icon data.
How does morphicons ensure performance with many icons?
It uses zero numeric allocations per frame, caches precomputed plans, and runs on a single global `requestAnimationFrame`. This allows smooth morphing of hundreds of icons simultaneously with minimal overhead.
Featured in Videos
YouTube tutorials and walkthroughs for morphicons
Alternatives
Similar projects ranked by category, topics, and text overlap.
