Material design system icons are simple, modern, friendly, and sometimes quirky. Material icons are beautifully crafted, delightful, and easy to use in your web, Android, and iOS projects.

Icon font for the web

The material icon font is the easiest way to incorporate material icons with web projects. The best way to use these icons on the web is with an icon web font. It's lightweight, easy to use, and hosted by Google Web Fonts.

Using the font is not only the most convenient method, but it is efficient and looks great:

  • 750+ icons all from a single download.
  • Served from Google Web Font servers or can be self hosted.
  • Supported by all modern web browsers.
  • Colored, sized and positioned entirely with CSS.
  • Vector-based: Looks great at any scale, retina displays, low-dpi display screens.

The icon font contains 750+ icons and weighs in at only 40KB (woff2 format). In comparison, a ZIP file of these in SVGs will be more than 50% larger.

Using the icons in HTML

Material icons look best at 24px, but if an icon needs to be displayed in an alternative size, using the above CSS rules can help:

Size Examples:

18px

face

24px

face

36px

face

48px

face

HTML Code:

<div class="row">
	<div class="col-sm-3 text-center">
		<p>18px</p>
		<i class="material-icons md-18">face</i>
	</div>
	<div class="col-sm-3 text-center">
		<p>24px</p>
		<i class="material-icons md-24">face</i>
	</div>
	<div class="col-sm-3 text-center">
		<p>36px</p>
		<i class="material-icons md-36">face</i>
	</div>
	<div class="col-sm-3 text-center">
		<p>48px</p>
		<i class="material-icons md-48">face</i>
	</div>
</div>

Complete Icons List

Bemat is preloaded with the latest version of the Material Icons icon set.

See the full set of material design icons at the material icons library.