Getting Started with Material Design Icons Light

See our Getting Started section for guides in many different languages and frameworks.

Using SVGs

All icons are designed in vector and provided in SVG format.

As an Image File

SVGs can be downloaded individually and included the same way as any bitmap image:

<img src="/path/to/icons/example-icon.svg" alt="An example icon" style="width:24px;height:24px" />

Inline SVG

SVG's can be used inline in the HTML.

<svg style="width:24px;height:24px" viewBox="0 0 24 24">
  <path fill="#000000" d="M ... Z" /> <!-- account -->
</svg>

Inline SVGs can also be overlayed by adding additional paths.

<svg style="width:24px;height:24px" viewBox="0 0 24 24">
  <path fill="#000000" d="M ... Z" /> <!-- account -->
  <path fill="#990000" d="M ... Z" /> <!-- block-helper -->
</svg>

Learn More About Using SVG

Using the Webfont

Using the webfont is highly discouraged due to performance and overall request size. Please read the Webfont Alternatives Guide for more details.

One of the easiest ways to use the icons is through the webfont. There is also a hosted CDN option for quick use in demos or development.

Learn More About the Webfont

Frameworks & Technologies

See our Getting Started section for Material Design Icons for guides specific to your framework or language.