Skip to content
FontsNotoIconsKnowledgeFAQ

Customize

400
100700
0
-25 (low)200 (high emphasis)
24
20px48px

Filter

Style
Category
Material Design icon guidelines
Learn about the latest best practices for icons
Figma plugin
Use the Material Symbols plugin on Figma
GitHub repo
This repository contains the binary font file served by Google Fonts
Apache license
Material Symbols are available under the Apache License Version 2.0
Developer guide
How to use Material Symbols in your projects
Download Material Symbols
Get all Material Symbols in a single variable font file

UI actions

Social

Actions

Communicate

Images

Business

Maps

Text

Audio & Video

Transit

Activities

Hardware

Android

Privacy

Travel

Household

Home

AI

Shelves

Shelves

Instructions

Check the Material Symbols guide for advanced examples such as animations and font loading optimization.

Variable icon font

Add the variable font stylesheet request to your head tag and the current variable axes configuration to icons using CSS.

<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&icon_names=shelves" />
<style> .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 } </style>

Static icon font

Alternatively, the current configuration can be loaded as a static font instead of a variable one.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=shelves" />

Inserting the icon

<span class="material-symbols-outlined"> shelves </span>

Code point

f86e

Icon name

shelves
Material Symbols & Icons - Google Fonts