Thursday, October 6, 2022
HomeNewsGoogle announces Material Symbols - a new set of modern icons

Google announces Material Symbols – a new set of modern icons

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.

Material Symbols

Material Symbols released by Google
Material Symbols released by Google

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

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:

Source: Google

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.

Axes

There are four axes in Material Symbols available to change – fill, weight, grade, and optical size.

Fill

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.

Optical Size

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.

Styles

3 styles in the set
1 – Outlined. 2 – Rounded. 3 – Sharp.

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

Google Fonts website.
Google Fonts website

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.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Categories

Most Popular

Follow Us

45FansLike
2,500FollowersFollow
105,000SubscribersSubscribe