Google Icons Introduction


Basic Icons

To use the Google icons, add the following line inside the <head> section of your HTML page:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Note: No downloading or installation is required!

Add the material-icons class to an inline element and insert the icon's name:

Example

The following code:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<i class="material-icons">cloud</i>
<i class="material-icons" style="font-size:48px;">cloud</i>
<i class="material-icons" style="font-size:60px;color:red;">cloud</i>

</body>
</html>

Results in:

cloud cloud cloud
Try It Yourself »

Google icons are designed to be used with inline elements. The <i> and <span> elements are widely used for icons.

Note: Material icons are 24px by default.

Also note that if you change the color of the icon's container, the color of the icon changes too. Same things goes for shadow, and anything else that gets inherited using CSS. The exception is the CSS font-size property, which is always 24px, unless something else is specified.



Sizable Icons

Although the material icons can be scaled to any size, the recommended font-size is either 18, 24, 36 or 48px:

Example

The following code:

<style>
/* Rules for icon sizes: */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; } /* Default */
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
</style>

<i class="material-icons md-18">cloud</i>
<i class="material-icons md-24">cloud</i>
<i class="material-icons md-36">cloud</i>
<i class="material-icons md-48">cloud</i>

Results in:

cloud cloud cloud cloud
Try It Yourself »

Copyright 1999-2023 by Refsnes Data. All Rights Reserved.