An animatable icon set created using Variable fonts

Variable typefaces got a major upswing a couple of years ago when it got a wider support in major browsers.

The cool thing about variable fonts is that you can use it to create icons that have built in states.

This is an experiment I did in 2019 where I created an icon font that have predefined states that will animate when you trigger them. The user of the font can also individually control the thickness of the icons and how fast they animate using CSS.

Try them out yourself on variicon.netlify.app.