Design Library

Icon morphing

One stroke icon turning into any other — menu into x, sun into moon, copy into check — without anyone drawing the in-between. Rebuilt 1:1 from morphicons.com: the studio that morphs 250 icons across Lucide, Heroicons and Tabler with the maths on screen, the six swaps real apps repeat most, an icon that lives inside a CSS mask, a trend badge riding a live chart, and map pins that change shape as they change state.

Icon morph · Studio

Any stroke icon becomes any other. Pick icons from Lucide, Heroicons and Tabler into a set and they morph in sequence, with the maths under the stage: the rotation it found, how far the two shapes are from congruent, and what kind of morph that makes. Scrub it frame by frame.

Icon morph · Six everyday swaps

Copy settling into Check, Eye into EyeOff, Sun into Moon, Play into Pause with Mute beside it, a validation mark that flips between check and x, folders that morph open: the six icon swaps real apps repeat most, each done in one slot instead of two stacked icons. Switch library, spring or stroke and every preview follows.

Icon morph · Through a CSS mask

The icon is not an SVG at all but a plain span painted with a gradient, and its shape is a mask that morphs from menu to x to sun, moon, heart and star. The colour never moves; only the hole it shows through does. The way icon sets delivered as CSS masks can animate without being rebuilt as inline SVG.

Icon morph · Trend badge on a live chart

A price streams in nine times a second, and the trend badge beside it is not swapped but morphed: flat into rising into falling, turning green or red with the line and the area under it. Nudge the market up or down and watch the arrow bend over. The icon reads as part of the data rather than an image changing.

Icon morph · Map pins with states

Drop a pin on a map of central Madrid: it is born as a pin, turns into a flag when its street name arrives, becomes a bookmark under the pointer and a check when saved — and saving sends a ripple through the whole map, pins included. One object changing shape tells the story of the interaction.

Full library — live sample, numbers, prompt and source — is for clients. I have the password

All categories