morphicons

morphicons is a small JavaScript and TypeScript library that lets one icon smoothly turn into another, with spring based physics driving the animation. Instead of icons snapping between states, or a developer having to hand write which direction an icon should rotate, morphicons works out the correct motion using geometry: if two icon shapes are basically the same shape rotated, it rotates between them; if they are different shapes, it blends them in a way that keeps proportions steady rather than stretching or shrinking oddly along the way.

It ships with almost no size cost, weighing about 7 kilobytes after compression, and has no runtime dependencies of its own. It is a drop in replacement for the popular lucide-react icon components, meaning existing code that renders Lucide icons can often switch to morphicons with a small change. The library reads icon data, not finished icon components, so it pulls shapes directly from the base lucide package rather than the framework specific ones.

Bindings are provided for React, Vue, and Svelte, each offering three ways to use it: an uncontrolled mode where changing a prop triggers the animation automatically, a controlled mode where a developer supplies the exact progress value for things like drag gestures, and an imperative mode for scripting a sequence of morphs. There is also a plain custom element version that works without any framework at all, plus an Astro specific version. Accessibility is handled by default, icons are hidden from screen readers unless a label is given, and rendering works cleanly on the server so there is no visible flash when the page loads. It can also respect a user's reduced motion operating system setting when that option is turned on.

The full README is longer than what was shown.