About Variicons

Variicons is a icon library created with Variable Fonts and made to show some of the possibllities of its technique.

Variable Fonts is a specific font format that most browsers have support for (checkout support here) and the biggest advantage using it is that you only have to use one single font file for each typeface and still get all font weights in it like Regluar, Thin or Bold. This is because within the Variable Font file there's masters, or extremes, set between the thinnest and the thickest state of each glyph and the browser is able to interpolate between these masters to output a desired weight value.

But there's more possibilities with this technique just than changing font weights. The masters can also be seen as states, where master no 1 is the first state and master no 2 is the second state, which makes it possible to make icons with built-in animations. And this is how Variicons is made.

Each icon is made up in a typeface-tool with master that works like animation states, which the browser later can interpolate between.

The magical way to control the font settings when using it in a webpage is to use the CSS keyword "font-variation-settings". With this keyword you'll access the properties that is set for each icon in the font.

And you can bind the animation to be triggered on the most common ways that is used in code, like on hover or when clicked etc. For a more thorough explanation on how to use it in your own web projects, check out the "how to use" page.