morphicons

Six kilobytes of maths that morph any stroke icon into any other, across Lucide, Heroicons and Tabler

Tier B · UsefulAnimation LibraryPrimitiveIcon Setmorphicons.com

morphicons animates the change from one SVG icon to another. It does not ship icons. It takes the ones you already use and solves the path between them, so a menu icon turns into a close icon rather than swapping for it. The library works because Lucide, Heroicons and Tabler all draw on the same 24×24 grid, so an icon from one set morphs into an icon from another. The site states a closed-form solution for optimal rotation, spring physics, zero dependencies and about six kilobytes. Four spring presets are offered — spring, smooth, snappy and bouncy — and four stroke widths from 1 to 2.5. The call site is one component. It takes icons as data, not as components, so there are no from-and-to pairs, no keys and no configuration. Builds exist for React, Vue, Svelte, React Native and Astro, and the Astro build upgrades itself to a web component so no island is needed.

Install

npm install morphicons

For an agent

Reach for this when a brief asks for an icon that changes state, not for an icon set. It ships no icons of its own and expects Lucide, Heroicons or Tabler to be there already. Pass the icon as data. The API takes the icon itself, not a wrapped component, so a ternary in the prop is the whole pattern: `<MorphIcon icon={open ? X : Menu} />`. There is no from-and-to pair to manage. The 24×24 grid is the constraint that makes it work. An icon set drawn on another grid will not morph cleanly, and the site names only those three sets as compatible.

Why it is here. A menu button that swaps its icon reads as a jump. One that morphs reads as a motion. This is the rare library that solves the geometry rather than asking a designer to hand-draw each pair.

Install command, framework, licence and component list.

Facts

License: Unknown
Pricing: Free, Open source
Framework: React, Vue, Svelte, Astro, React Native, Web Components
Styling: Not applicable
Distribution: npm package, GitHub repository
Platform: Web, Cross-platform
Content type: Code, Icons
Agent readiness: CLI installable, Structured documentation, Copy-paste ready code, Readable open source
Accessibility: Unknown
Maturity: Actively maintained
Pricing detail: Free, and the site links a public GitHub repository. No licence is named on the home page.
Package: morphicons

Components it ships

Icon Animation Transition Button Icon Button

Helps you build

Tab Bar Navigation Action Sheet

Notable for

morphs between Lucide, Heroicons and Tabler
about six kilobytes, zero dependencies
closed-form optimal rotation
React, Vue, Svelte, React Native and Astro
icons passed as data, not as components

Provenance

Verified 2026-08-29. HTTP 200. https://www.morphicons.com/ 200, 304 KB; title "morphicons — SVG icon morphing library for React, Vue & Svelte"; body copy reads "Morph any SVG icon into any other. Animate Lucide, Tabler, Heroicons or any stroke icon set. Optimal rotation solved in closed form, spring physics, zero dependencies" and "Six kilobytes of math"; the install line is `npm install morphicons`; the playground offers the sets All, Lucide, Heroicons and Tabler, and states "Icons from different libraries morph into each other: they all share the 24×24 grid"; the presets are spring, smooth, snappy and bouncy, and the stroke widths 1, 1.5, 2 and 2.5; the framework tabs read React, Vue, Svelte, React Native and Astro, with the note "no island needed: the icon upgrades to a web component"; the sample imports `MorphIcon` from "morphicons/react" and comments "// data, not components"; the navigation links Playground, Showcase, How it works, Roadmap, GitHub and X. No licence is stated on the home page.

Also in Icons & Logos

morphicons.comTier B