--- obj: concept website: https://fonts.google.com/icons repo: https://github.com/google/material-design-icons --- # Material Icons [Material Icons](https://fonts.google.com/icons) are a comprehensive set of visual symbols designed by Google. These icons follow the [Material Design](https://m3.material.io/) 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) * Free and open-source under the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0) * 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 `` tag to your HTML ``: ```html ``` Then use an icon like this: ```html home ``` To use other styles (e.g., Outlined, Rounded), change the font family: ```html ``` Use it like: ```html home ``` ## SVG You can download individual icons as SVGs from [Material Icons](https://fonts.google.com/icons) or use them programmatically. Example: ```html home icon ``` ## Customization ### Size Use CSS to change the size: ```html home ``` Or use utility classes in frameworks like Tailwind: ```html home ``` ### Color ```html home ```