Google Material Design Icons — 3,600 Free SVG Icons For Your Next Web Project
Material Design Icons is an open source icon library from google, containing more than 3600+ svg icons in various styles. Go to https://fonts.google.com/icons, find the icon name and include it in your project using one cdn link in the header tag of your html file.
Earlier i spent most of my time asking the agent to place an icon there and they would reply either with some random emojies or horrible icons. But then i realised that google does have an open source icon library which has been there for years but nobody really talks about this library as if its usable.
Material Design Icons is an official icon library from google. They have 2 types of icons, Material Icons(old ones which have been there since 2014) and Material Symbols(newer variable font icons launched in 2022). Both of them are totally free to use. You can access them here https://fonts.google.com/icons. Just select the category, style and size of the icon. They have a total of more than 3600 icons ranging from arrows to checkmarks, weather, transport, maps etc.
Source
google/material-design-icons
★ 53,634
The easiest way to implement these icons in any web project is by using google’s cdn links. All you have to do is put one line of code in your project and you will be able to use all the icons by simply typing their name in any html element. You don’t even need to download or drag and drop the icons. If you are working on a godot or unity project then you can directly download the svg files from the repo.
How to use Google Material Icons in your project
- 1Open fonts.google.com/icons in your browser
- 2Find the icon you need — use the search bar or browse by category
- 3Click the icon → a panel opens on the right showing its name (e.g. 'search', 'favorite', 'home')
- 4Copy that name — you'll paste it into your HTML
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<span class="material-icons">search</span>
If you want to use the new Material Symbols then you can do so by using css to change the weight, fill and size of the icons. The agent should know both the icon formats so just tell him/her which one to use.
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
<span class="material-symbols-outlined">favorite</span>
3,600+ free icons from Google in several styles — outlined, rounded, sharp, two-tone. Browse and copy icon names at fonts.google.com/icons, add with one CDN tag in your HTML head. Apache 2.0 license — free for any project, personal or commercial.
Source: github.com
Free course
Stop reading about AI — start building with it
The free Claude Code course: your first site, tool or game — no coding. No upsells, no cross-sells — nothing to buy here.
Start free →▌ Related guides
Author
Evgenii Arsentev
PhD · Chief Executive Officer, digital health
Articles · Latest articles