Introducing Material Symbols
Get them on Google Fonts and with the new Figma plugin!
About a year ago, Google Fonts added Material Icons to its catalog as part of a larger effort to support open-source icons. This was a natural evolution for the platform, given that icons and fonts are so closely related. Today, Material Icons are one of the most popular design resources in the world and are used for both online and real-world applications.
There are a couple obvious reasons for the icon set’s popularity. First, the library is robust—it has 2,000 distinct icons in five styles. They’re also open source. But most of all, they were designed to be minimal and universally recognizable across different cultures and languages—and that makes them extremely versatile. Now, with the launch of Material Symbols, they’re also customizable.
“Starting last year, we wanted to rethink our iconography as a whole and asked, ‘what’s next for Icons?” said Senior Designer Sehee Lee, who leads iconography and visual system design for Google Fonts (and who designed Material Icons). “We saw a big opportunity to evolve our traditional icon format with variable fonts technology to improve their design flexibility, user experience, and accessibility benefits.”
A variable icon font
The Material Symbols font is the variable version of the Material Icons font. Variable fonts are a relatively new font format that allow one font file to contain multiple stylistic variations. Not only is this single font much smaller than a collection of individual font files, but it also gives you the flexibility to select values in between the traditional definitions for specific attributes of the design. These are the “variables” of variable fonts, more commonly referred to as axes. So for example, you can increase just the weight of an icon, without having to increase its size or grade.
Google Fonts has developed numerous variable fonts and they’re becoming increasingly common in typography overall. (In fact, “Show only variable fonts” is a filter on fonts.google.com.) But the idea of variable icons is a newer concept. “Applying the variable fonts concept to icons seemed like a wild idea in the beginning,” said Lee. “We spent a lot of time researching and prototyping the new Symbols to find the right approach. We are so excited to reveal our latest icon assets and share them with the community!”
The axes
Material Symbols have four variable axes: weight, fill, grade, and optical size.
The weight axis—as mentioned above—allows you to increase or decrease how light or bold a font looks without having to increase its size, grade, etc.
The fill axis fills in transparent forms to make them opaque. This can be useful for animation or state transitions, but you can also use it to make your default style look unique.
Weight and grade both affect a symbol’s thickness. But adjustments to grade are more granular than adjustments to weight and have a smaller impact on the size of the symbol.
The grade axis is also available in some text fonts; matching the grade levels between text and symbols helps create a harmonious visual effect. For example, if the text font has a -25 grade value, the symbols can match it with a suitable value of -25.
The optical size axis makes it possible for the stroke weight to automatically adjust when you increase or decrease the symbol size so that it always looks “optically correct.”
Whether you choose to adjust one or all of the axes, you can easily fine-tune a style to your liking and/or enhance the cohesive feel between your type, UI design, and even brand elements like wordmarks and logotypes. For a better idea of how the axes work, try them out for yourself on Google Fonts.
The styles
Material Symbols are available in three styles: outlined, rounded, and sharp. The design for all three is based on the latest version of Material Icons, but all the Symbols have been newly drawn to be pixel-crisp and modernized.
Outlined Symbols are a light, clean style that works well in dense UIs. The stroke weight of outlined icons can be adjusted to complement or contrast the type weight you’ve chosen.
Rounded Symbols use a corner radius that pairs well with brands that use heavier typography, curved logos, or circular elements to express their style.
Sharp Symbols use corners and straight edges for a crisp, rectangular style that remains legible even at smaller scales.
How to use Material Symbols
Everyone should have access to quality design resources, so Material Symbols are open source and available under the Apache 2.0 license. They’re offered as variable icon fonts and SVGs at fonts.google.com and the Material Design icon repository. Material Symbols are also available as a Figma plugin which you can use to easily search and add Symbols directly to your design.
Check out the full library on Google Fonts. We can’t wait to see what you design with them!