Material Icons
1 min read
Material Icons are a comprehensive set of visual symbols designed by Google. These icons follow the Material Design guidelines and are widely used across Android, web, and other platforms to provide a consistent, clean, and intuitive UI experience.
Features
• Over 2,000 icons
• Available in multiple styles (Filled, Outlined, Rounded, Sharp, Two-tone)
• Easily customizable (size, color, weight)
• Supported via web fonts, SVGs, and icon components
Icon Styles
| Style | Description |
|---|---|
| Filled | Default solid icons |
| Outlined | Icons with a thin, outlined design |
| Rounded | Icons with rounded corners |
| Sharp | Icons with sharp, angular edges |
| Two-tone | Icons with dual-tone for visual hierarchy |
Installation
Web Font
Add the following <link> tag to your HTML <head>:
html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Then use an icon like this:
html
<i class="material-icons">home</i>
To use other styles (e.g., Outlined, Rounded), change the font family:
html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
Use it like:
html
<i class="material-icons-outlined">home</i>
SVG
You can download individual icons as SVGs from Material Icons or use them programmatically.
Example:
html
<img src="https://fonts.gstatic.com/s/i/materialicons/home/v1/24px.svg" alt="home icon" />
Customization
Size
Use CSS to change the size:
html
<i class="material-icons" style="font-size: 36px;">home</i>
Or use utility classes in frameworks like Tailwind:
html
<i class="material-icons text-4xl">home</i>
Color
html
<i class="material-icons" style="color: #f44336;">home</i>