Material Symbols
Google's current Material Design icons: 3,900+ icons in one variable font, with fill, weight, grade and optical size as settings. The successor to Material Icons, free under the Apache License 2.0.
Preview
font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24
Google Fonts
Add to your page's <head>. Add &icon_names=home,search,… (sorted) to load only the icons you use.
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />What are Material Symbols?
Material Symbols are the icon set Google designs for Material Design and uses across Android and its own apps. Google released them in 2022 as the successor to Material Icons, and they're the set that still gets new icons. Each symbol is published as a variable font on Google Fonts and as SVG files, under the Apache License 2.0, so you can use them in commercial projects. Browse them all on the icon search or by category.
Material Symbols vs. Material Icons
The classic Material Icons come as five fixed font families (Filled, Outlined, Round, Sharp and Two-tone) with about 2,100 icons, and no longer get new ones. Material Symbols have three styles, over 3,900 icons, and four variable axes, so one font covers every look. Names mostly carry over (home, arrow_back), but the CSS classes change from material-icons to material-symbols-outlined. The full comparison, with migration steps, is in Material Icons vs. Material Symbols.
Variable axes
| Axis | Range | Default | Use |
|---|---|---|---|
Fill FILL | 0–1 | 0 | Outline or solid. Animates for toggles. |
Weight wght | 100–700 | 400 | Stroke thickness. Match the adjacent text. |
Grade GRAD | −50–200 | 0 | Thickness without changing size. −25 on dark backgrounds. |
Optical size opsz | 20–48 | 24 | Detail tuned to display size. Set to the icon's px size. |
Examples: fill, weight, grade and optical size.
Outlined, Rounded and Sharp
| Style | Class | Shape |
|---|---|---|
| Outlined | material-symbols-outlined | Even strokes. The default. |
| Rounded | material-symbols-rounded | Rounded corners and stroke ends. |
| Sharp | material-symbols-sharp | Square corners. |
All three take the same four axes; Rounded with fill 1 matches the old "Round" icons.
FAQ
What is the difference between Material Icons and Material Symbols?
Material Symbols are the newer set: over 3,900 icons in three styles (Outlined, Rounded, Sharp) with variable fill, weight, grade and optical size. Material Icons are the older set of about 2,100 icons in five fixed styles, which Google no longer adds to.
Are Material Symbols free for commercial use?
Yes. Google publishes them under the Apache License 2.0, which allows commercial use, modification and redistribution. You don't need to credit Google in your interface, but keep the license notice if you redistribute the font or SVG files.
How do I use Material Symbols in HTML?
Add the Google Fonts stylesheet for the style you want, then write the icon's name inside an element with the matching class, for example <span class="material-symbols-outlined">home</span>.
How do I make a Material Symbol filled?
Set the fill axis to 1 with CSS: font-variation-settings: 'FILL' 1. With SVG files, use the -fill version of the icon.
How do I change the size or thickness of a Material Symbol?
Use font-size for the size, and set the optical size (opsz) to the same number of pixels. Change the thickness with the weight axis (wght, 100 to 700), or fine-tune it with grade (GRAD).
How do I use Material Symbols in React?
Load the Google Fonts stylesheet and render a span with the icon name and the material-symbols-outlined class, or import the SVG files from the @material-symbols/svg-400 npm package as components with your bundler's SVG plugin.
How do I use Material Symbols in Figma?
Open the icon's page here, pick the style, fill and weight, click Copy SVG and paste into Figma: it becomes an editable vector you can recolor and resize. For a whole set, download the SVG files and drag them in.
Why does my Material Symbol show as text?
The icon's name shows as text until the font loads, or if the font didn't load. Check that the stylesheet is on the page, that the class matches the style you loaded, and add &display=block to the font URL to hide the text while it loads.