Google Material Design icons icons - Download 617 free & premium icons by This and more than 3,760,731 free and premium icons available on Iconfinder.com Icon sets. Material-design-icons/./1xweb/ material-design-icons/./2xweb/ If multiple icons are in use on a web site, creating spritesheets out of the images is recommended. For more information, refer to recommendations in the sprites directory in the git repository.
Material Design Light•Unicons
- Author:
- Material Design Authors
- License:
- Apache 2.0
- Icons:
- 5680
How to add selected icon to your website:
To embed selected icon in your page add following code:
Show other HTML syntax
Do not forget to add this to <head> section (preferred method to load icons faster) or before </body>:
SVG code for selected icon.
![Google material design icons download free Google material design icons download free](/uploads/1/2/6/1/126143096/669754025.png)
Use it to embed SVG directly in page or to paste it in UI editor application, such as Sketch, Adobe XD, Affinity Designer or Figma.
Most editors ignore SVG viewBox attribute. Because of that when you paste SVG in editor, dimensions often don't match, making it hard to align icon. Code below includes extra transparent rectangle that matches viewBox, so if you paste icon in editor it will have same dimensions as in HTML:
Or click this link to download SVG.
Add code below to your stylesheet to use selected icon as background:
![Google material design icons download Google material design icons download](/uploads/1/2/6/1/126143096/323255654.png)
Add code below to your stylesheet to use selected icon as pseudo element's content:
Avoid using Iconify in CSS if you can. Images are loaded one by one, which might affect performance if there are too many images. Monotone images cannot inherit color from stylesheet, so you must set color attribute.
Add code below to your script to use selected icon as React component.
Import:
Usage:
Customize icon appearance:
Material Design Icons Download
Iconify icons can behave like images or like glyphs. Difference is very small, but important.
- Block (no vertical alignment)
Icon will not have special alignment, perfect for being used as decoration (similar to img tag).
- Inline (below baseline alignment)
Icon will behave like glyphs aligned below baseline, perfect for being used inside text (similar to glyph fonts).
If you want it for decoration, select 'block' option, if you want image to be placed in middle of text, such as placing emoji in text, select 'inline' option.
You have selected a monotone icon.
Monotone icons do not have hardcoded colors, which means you can set any color.
By default color for monotone icons is the same as text color, which means you can style icons using css like this:
.iconify { color: red; }
Monotone icons when used as external resources cannot inherit color from stylesheet, therefore you must specify color. If possible use icon in HTML, not in CSS.
By default height is set to '1em', width is automatically adjusted for each icon.
If you want to, you can set custom width and/or height. Unlike other images, SVG doesn't squish content when width/height ratio is wrong, so you can set any width and height you want.
You can use stylesheet to set custom dimensions like this:
.iconify { width: 24px; height: 24px; }
Set custom height:
You can flip and rotate icon. Transformations are done using SVG transformations, not CSS. This ensures image content remains within its bounding box and allows you to apply additional CSS transformations.
Rotate icon:
Goal of Iconify is to offer unified icon framework for multiple platforms. Currently Iconify is available only as JavaScript library for browsers, React and Angular components.
Flat Icons
If you use HTML or CSS syntax, Iconify loads icons from Iconify API. To use Iconify without relying on Iconify API there is possibility to host custom API and bundle icons with custom scripts or use Iconify for React or Angular.
Additionally you can copy or download SVG code. You can use it in editors (if you are using Sketch, check out Iconify plug-in for Sketch) or embed SVG directly into pages instead of using Iconify JavaScript.
Google Material Design Icons Download For Computer
See about page to learn more about Iconify and project goals.