Icons Tutorial
Icons Introduction
Font Awesome 5
Font Awesome 5 Intro Accessibility Icons Animals Icons Arrows Icons Audio & Video Icons Automotive Icons Autumn Icons Brands Icons Buildings Icons Business Icons Charity Icons Chat Icons Chess Icons Code Icons Communication Icons Computers Icons Currency Icons Date & Time Icons Design Icons Editors Icons Education Icons Emoji Icons Files Icons Food Icons Genders Icons Halloween Icons Hands Icons Health Icons Holiday Icons Images Icons Interfaces Icons Logistics Icons Marketing Icons Mathematics Icons Medical Icons Moving Icons Political Icons Religion Icons Shapes Icons Spinners Icons Sports Icons Tabletop Gaming Icons Travel Icons Users & People Icons Vehicles Icons Weather Icons Winter Icons Writing Icons
Font Awesome 4
Font Awesome 4 Intro Accessibility Icons Brand Icons Chart Icons Currency Icons Directional Icons File Type Icons Form Control Icons Gender Icons Hand Icons Medical Icons Payment Icons Spinner Icons Text Editor Icons Transportation Icons Video Player Icons Web Application Icons
Bootstrap 3
BS Glyphicons
Google Icons Intro 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 Icons

Google Icons Introduction

Material icons are designed to be used with inline elements like the <i> or <span>.

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">

Basic Icons

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

person person person person
<i class="material-icons">person</i> <i class="material-icons" style="font-size:3em;">person</i> <i class="material-icons" style="font-size:4em; color:blue;">person</i> <i class="material-icons" style="font-size:5em; color:coral;">person</i>
Run code

Note that if you change the font-size or color of the icon's container, the icon changes.

Sizing Icons

The material icons can be scaled to any size. You need to use CSS for this.

person person person person person
<style> .sm{ font-size: .8em; } .md{ font-size: 2em; } .lg{ font-size: 3em; } .xl{ font-size: 4em; } </style> <body> <i class="material-icons sm">person</i> <i class="material-icons">person</i> <i class="material-icons md">person</i> <i class="material-icons lg">person</i> <i class="material-icons xl">person</i> </body>
Run code

Applying Custom CSS to Icons

Anything you can do with CSS font styles, you can do with Google icons.

check_circle pets call cloud

Hover-over the icons

Run code