Icons
18,547Icons
Apache 2.0License
VariableStyle
24×24Grid

Material Symbols

18,547 Apache 2.0-licensed variable icons on a 24×24 grid. The practical effect is that one file replaces what used to require five separate icon sets.

Browse Material Symbols icons by category Compare libraries

About Material Symbols

What Material Symbols is

Material Symbols is Google's current icon format and the successor to Material Icons. It is built on variable font technology: all 18,547 icons live in a single font file, and four axes — Weight, Fill, Grade, and Optical Size — can be adjusted continuously rather than by swapping between five static themes.

The practical effect is that one file replaces what used to require five separate icon sets. You can set weight from 100 to 700, animate the Fill axis to transition an icon from outline to solid, and tune optical size so icons stay balanced from 20px to 48px.

IconStash indexes the complete Material Symbols collection. You can search it alongside 27 other libraries, preview any icon at any size and colour, and export SVG, PNG, React JSX, Vue, CSS, or an SVG sprite without installing a package or creating an account.

Install and use Material Symbols

React

npm install @material-symbols/svg-400

The official package ships each icon as a tree-shakeable component, so bundlers only include the icons you actually import. Open any Material Symbols icon on IconStash and the Code tab shows that icon's exact import statement and JSX.

Plain SVG and other frameworks

You do not have to install anything. Every Material Symbols page lets you copy the raw SVG markup and paste it inline, which avoids a dependency entirely and gives you full control over colour, size, and stroke width.

IconStash also exports PNG at six sizes, Vue and CSS snippets, and SVG sprites — all generated in the browser from the original vector.

When to choose Material Symbols

Good fit

Products that want continuous control over icon weight and fill state, and teams that would rather ship one font file than manage five icon sets.

Consider alternatives

If you need individually imported SVG components with tree-shaking, the older Material Icons set or Lucide is a better fit — a variable font loads all 18,547 glyphs even if you use thirty of them.

Licensing

Apache 2.0 with an express patent grant. Free for commercial use. You may not use the icons to imply Google endorsement.

Material Symbols compared to other libraries

Popular Material Symbols icons

Browse Material Symbols by category

Frequently asked questions

What is Material Symbols?

Material Symbols is Google's current icon format and the successor to Material Icons. It is built on variable font technology: all 18,547 icons live in a single font file, and four axes — Weight, Fill, Grade, and Optical Size — can be adjusted continuously rather than by swapping between five static themes.

Is Material Symbols free for commercial use?

Yes. Material Symbols is released under Apache 2.0, which permits commercial use, modification, and distribution and includes an express patent grant from the licensor. Attribution is not required for ordinary use, but you should not use the icons in a way that implies the licensor endorses your product.

How do I use Material Symbols icons in React?

Install the package with npm install @material-symbols/svg-400, then import icons as components. Every Material Symbols page on IconStash shows the exact import statement and usage snippet for that specific icon in the Code tab, so you can copy working code without checking the docs. Tree-shakeable packages mean your bundler only includes the icons you actually import.

Can I download Material Symbols icons as PNG?

Yes. Open any Material Symbols icon on IconStash and use the Download PNG button to export at 16, 32, 64, 128, 256, or 512 pixels. The PNG is generated client-side from the original vector, so it stays crisp at every size. You can also copy the raw SVG markup, export a React component, or build an SVG sprite without installing anything.

What are the four Material Symbols axes?

Weight (100–700) controls stroke thickness, Fill (0–1) animates an icon from outline to solid, Grade adjusts weight in finer increments without changing icon width, and Optical Size (20–48) optimises the drawing for the size you are rendering at. The Fill axis is particularly useful because it can be transitioned in CSS.

Should I use Material Symbols or Material Icons?

Use Material Symbols if you want continuous weight and fill control from a single file and are comfortable with a font-based approach. Use Material Icons if you need individually imported, tree-shakeable SVG components, or if your tooling handles SVG more naturally than variable fonts.

Explore other icon libraries