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.

What it is

An icon that is just a shape cut out of a coloured surface, morphing from one symbol to the next while the colour — here a gradient — stays perfectly still. For icon sets delivered as CSS masks and for brands that want their colour to show through the icon. Rebuilt from morphicons.com.

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

Seen in

morphicons.com · Guillermo (guillermolg00) · library and site MIT