Icons typeface

Material Symbols Outlined

Try your own text
Material Symbols Outlined — Bright stars shimmer above the quiet harbor.
Instant CSS
About this font

Material Symbols Outlined is an icon font built for interface and information-design work. Its outlined symbols can help represent common actions, objects, and navigation points while keeping visual details lighter than filled icon styles. The supplied metadata identifies one normal style, a broad weight range, and a variable font format.

Best suited for: Use it for interface controls, navigation cues, status indicators, settings panels, dashboards, and compact explanatory graphics. It can also support prototypes or design systems where symbols need to appear beside labels and adapt across different interface sizes.

Design considerations: The seven available weights, from 100 through 700, allow you to adjust emphasis without changing the overall outlined approach. Lighter settings may suit quieter secondary controls, while heavier settings can improve visibility for prominent actions. Test sizing and spacing carefully, especially where symbols sit next to text or inside small controls.

Pairing guidance: Combine the icons with a clear sans-serif interface font that offers consistent proportions and readable numerals. A restrained text style helps the symbols remain easy to recognize rather than competing with them. Match stroke emphasis where possible, and use spacing, alignment, and consistent sizing to create a unified system.

Font pairing ideas

Fonts that pair well with Material Symbols Outlined

Explore complementary typefaces for headings, body copy, accents, and interface text.

Anek Kannada
Aa
Sans-serif · 8 weights
Coustard
Aa
Serif · 2 weights
Argentum Sans
Aa
Sans-serif · 9 weights
Enriqueta
Aa
Serif · 4 weights
B612
Aa
Sans-serif · 2 weights