Tutorials References Exercises Videos Menu
Free Website Get Certified Pro

Icons Tutorial

Icons HOME Icons Reference

Font Awesome 5

Font Awesome 5 Intro Icons Accessibility Icons Alert Icons Animals Icons Arrows Icons Audio & Video Icons Automotive Icons Autumn Icons Beverage Icons Brands Icons Buildings Icons Business Icons Camping Icons Charity Icons Chat Icons Chess Icons Childhood Icons Clothing Icons Code Icons Communication Icons Computers Icons Construction Icons Currency Icons Date & Time Icons Design Icons Editors Icons Education Icons Emoji Icons Energy Icons Files Icons Finance Icons Fitness Icons Food Icons Fruits & Vegetables Icons Games Icons Genders Icons Halloween Icons Hands Icons Health Icons Holiday Icons Hotel Icons Household Icons Images Icons Interfaces Icons Logistics Icons Maps Icons Maritime Icons Marketing Icons Mathematics Icons Medical Icons Moving Icons Music Icons Objects Icons Payment & Shopping Icons Pharmacy Icons Political Icons Religion Icons Science Icons Science Fiction Icons Security Icons Shapes Icons Shopping Icons Social Icons Spinners Icons Sports Icons Spring Icons Status Icons Summer Icons Tabletop Gaming Icons Toggle Icons Travel Icons Users & People Icons Vehicles Icons Weather Icons Winter Icons Writing

Font Awesome 4

Font Awesome Intro Icons Brand Icons Chart Icons Currency Icons Directional Icons File Type Icons Form Icons Gender Icons Hand Icons Medical Icons Payment Icons Spinner Icons Text Icons Transportation Icons Video Icons Web Application

Bootstrap

Icons BS Glyphicons

Google

Google Icons Intro Icons Action Icons Alert Icons AV Icons Communication Icons Content Icons Device Icons Editor Icons File Icons Hardware Icons Image Icons Maps Icons Navigation Icons Notification Icons Places Icons Social Icons Toggle


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 »