Material Design Icons

Q: How do I use Material icons in React?

Install the package with npm install @mui/icons-material, then import icons as components. Every Material 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.

What Material is

Material Design Icons is Google's official icon set, and it is the most widely deployed icon vocabulary on the web. The 14,001 icons follow the Material geometry rules — a 24×24 grid with 2px keypoint padding, straight edges softened by corner radii, and a deliberate, slightly geometric construction.

The set ships in five themes: Outlined, Rounded, Sharp, Two Tone, and Filled. Because it is the native icon language of Android and Google's own web products, users have been trained on these glyphs for over a decade — which is a real usability advantage when you need an icon to be understood instantly.

IconStash indexes the complete Material Design Icons 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.

React

npm install @mui/icons-material

The official package ships each icon as a tree-shakeable component, so bundlers only include the icons you actually import. Open any Material 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 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.

Good fit

Products that follow Material Design, Android-adjacent apps, and any interface where recognition matters more than distinctiveness. If your users already use Gmail, Drive, or Android, these icons need no explanation.

Consider alternatives

Google's newer Material Symbols supersedes this set with variable-font icons in a single file. For a less Google-flavoured look, Fluent UI and Carbon are the enterprise equivalents.

Licensing

Apache 2.0. Free for commercial use, with an explicit patent grant from Google. You should not use the icons to imply Google endorses your product, but ordinary use in an interface is unrestricted.

Library	Icons	Style	License
Material Design Icons	14,001	Five themes	Apache 2.0
Material Symbols	18,547	Variable	Apache 2.0
Fluent UI Icons	20,170	Regular & filled	MIT
Carbon Icons	2,644	Outline	Apache 2.0
Ionicons	2,607	Outline, filled & sharp	MIT

Communication & Messaging

Bell Mail Phone Share

Files & Documents

Folder File Book

Media & Photography

Image Video Music Camera

Commerce & Payments

Cart Tag Gift Wallet

Media icons Communication icons Commerce icons Navigation icons Files icons Editing icons Devices icons Development icons Security icons Health icons Weather icons Transport icons Social icons Time icons Data icons Interface icons

What is Material Design Icons?

Material Design Icons is Google's official icon set, and it is the most widely deployed icon vocabulary on the web. The 14,001 icons follow the Material geometry rules — a 24×24 grid with 2px keypoint padding, straight edges softened by corner radii, and a deliberate, slightly geometric construction.

Is Material Design Icons free for commercial use?

Yes. Material Design Icons 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 icons in React?

Install the package with npm install @mui/icons-material, then import icons as components. Every Material 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 icons as PNG?

Yes. Open any Material 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 is the difference between Material Icons and Material Symbols?

Material Symbols is the newer format. It uses variable font technology, packs 18,547 icons into a single file, and exposes four adjustable axes — Weight, Fill, Grade, and Optical Size — so one font covers what previously needed five static themes. Material Icons (this set) remains the better choice if you need stable, individually imported SVG components.

Which Material theme should I use?

Outlined for dense or light interfaces, Filled for active and selected states, Rounded for consumer products that want a softer feel, Sharp when you need crisper geometry at small sizes, and Two Tone for a hint of depth without full fill. Mixing Outlined for inactive and Filled for active is the pattern Google's own products use.

Material Symbols Fluent UI Icons Carbon Icons Ionicons Material Symbols Light Phosphor Icons Solar Icons Tabler Icons