Google announced a new set of 2500 glyphs called Material Symbols a few days back. Here’s why it is a big deal.
About a year back, Google fonts released Material Icons. It was an effort to make classic Material Design-style icons more popular and accesible. These Material icons are open-source. They caught up very quickly. Material icons today are one of the most popular icon packs in the world.
This year Google took it a step further with Material Symbols. You can access the pack here.
With Material Symbols, Material Icons have become customizable. Senior Designer Sehee Lee, who designed Material icons decided to use variable font technology on Material Icons.
Variable fonts allow one font file to contain multiple stylistic variations on certain attributes. These variables or attributes are called axes. For example, these variables allow you to increase the weight of an icon, without increasing its size or grade. This is how it looks:
Having these axes helps you choose a range of values rather than specific set choices given by the icon pack. The other benefit is that it also reduces the size of font file, which is great for faster loading.
There are four axes in Material Symbols available to change – fill, weight, grade, and optical size.
The Fill axis helps fill the transparent forms and make them opaque. This can be useful for transition animations or when you want to show state transitions. The values to switch are 0 and 1. Each reverses the filled parts from the other.
Weight & Grade
Weight and Grade both affect icons’ thickness. Grade is, however, more granular than weight. So, Grade changes will have lesser impact on the size of the symbol.
The Weight axis helps you choose how light or bold a font looks without increasing its size.
The Grade axis is for fine tuning. You can experiment and see how different grade levels for a set weight look with the font you choose for your design. For example, a text font with a grade value of -25 will typically go well with icons of similar grade value.
The Optical Size axis is a visual aspect adjustment to make the icons look “optically correct” when the icon size is reduced. It does that by automatically adjusting the stroke weight as per the size.
You can try the axes yourself here to understand it better.
Material Symbols are also available in three styles: Outlined, Rounded, and Sharp.
Outlined Symbols have a light, clean style that typically works well in dense UIs.
Rounded Symbols have rounded corners. It can help to pair them well with designs that use heavier typography, curved logos, or circular elements.
Sharp Symbols have corners as straight edges to give a crisp, rectangular style. Such a style will remain legible even in smaller sizes.
How to use the new pack
Material Symbols are available for web, Android and iOS. It is open-sourced through Apache 2.0 License. You can download them as variable font icons or SVGs from Google Fonts website. They are also available in Material Design icon github repository. It even provides you with a Figma plugin to use it directly in your design renders.
How do you find these new variable font icons? Do you think it’ll help you design better? Let us know in the comments.
Follow our blog for news, tips and tricks on Android and Google.