Material icons
51,443 free, open source SVG icons in 6 Material icon sets. The largest are Material Symbols Light, Material Symbols and Google Material Icons. Open a set to browse its icons, check its license and copy SVG, React, Vue or CSS code.
Material icon sets (6)
About Material icons
Material icons follow Google's Material Design guidelines: geometric shapes on a 24px grid, with filled, outlined, rounded and sharp variants that sit naturally in Android apps, dashboards and web apps built with Material UI or Angular Material.
Iconyz lists 51,443 Material icons from 6 sets. The largest are Material Symbols Light, Material Symbols and Google Material Icons. All of them are monotone, so every icon takes the color of the surrounding text (currentColor) and can be recolored with CSS.
Licenses vary by set: 6 sets can be used commercially without attribution. The table below summarizes them; each set page links to its full license.
Material icon licenses
| License | Icon sets | Commercial use | Attribution |
|---|---|---|---|
| Apache-2.0 | 4 | Yes | Not required |
| MIT | 1 | Yes | Not required |
| OFL-1.1 | 1 | Yes | Not required |
A summary, not legal advice. Read our guide to icon licenses and the license linked on each set page.
Material icons FAQ
Are Material icons free for commercial use?
Most are, but it depends on the set. 6 of the 6 Material icon sets allow commercial use without attribution (Apache-2.0, MIT, OFL-1.1).
Which Material icon set has the most icons?
Material Symbols Light is the largest, with 15,802 icons. Larger sets are more likely to cover every icon you need, which keeps your interface visually consistent.
How do I use Material icons in React, Vue or HTML?
Open any icon and copy its code as SVG, JSX for React or Solid, a Vue or Svelte component, Astro or CSS, or download it as SVG or PNG. You can also link an icon directly from HTML with an <img> tag that points to its SVG URL.
Can I change the color of Material icons?
Yes, for monotone sets. Their SVG code uses currentColor, so inline icons follow the CSS color of their parent element. When linking an icon as an image, add ?color=%23RRGGBB to its SVG URL. Multicolor icons keep their original colors.
Other icon categories
Emoji (11) Flags / Maps (12) Logos (18) Programming (11) Thematic (9) UI 16px / 32px (18) UI 24px (65) UI Multicolor (12) UI Other / Mixed Grid (35) Archive / Unmaintained (30) Uncategorized (16)