How to use Variicons

Here's a quick installation guide of how you can implement it in your own web projects and make it work.

The animations itself is done with a few CSS-lines, but to make those cool interaction triggers you'll need some JavaScript as well.

1. First off download the Variicon font and put it in your project. Since it's a Variable Font the @fontface looks a bit different than normal. The font-weight and font-stretch need to be set in an interval of 1-100 in order for the browser to know what values to interpolate between like this:

@font-face {

font-family: 'Variicon';
src: url(/fonts/VariiconGX.ttf) format('truetype');
font-weight: 1 100;
font-stretch: 1 100;

}

2. Choose your icon and write it's name in the HTML to embed it, all the icon names are displayed here.

3. Time to style the icon in CSS. With the keyword font-variation-settings you can style the icons weight ("wght"), width ("wdth") and animation state ("TIME"). So to show an easy example how it works an interaction animation can look like this:

And this is how it's done! Note that it's the "TIME"-parameter that contain the animation states itself where "TIME" 0 is always the first state and "TIME" 100 is always the second state. Have fun using it!