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


Icons Tutorial



How To Add Icons

To insert an icon, add the name of the icon class to any inline HTML element.

The <i> and <span> elements are widely used to add icons.

All the icons in the icon libraries below, are scalable vector icons that can be customized with CSS (size, color, shadow, etc.)


Font Awesome 5 Icons

To use the Free Font Awesome 5 icons, go to fontawesome.com and sign in to get a code to use in your web pages.

Read more about how to get started with Font Awesome in our Font Awesome 5 chapter.

Note: No downloading or installation is required!

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/yourcode.js"></script>
<!--Get your code at fontawesome.com-->
</head>
<body>

<i class="fas fa-band-aid"></i>
<i class="fas fa-cat"></i>
<i class="fas fa-dragon"></i>
<i class="far fa-clock"></i>
<i class="fas fa-clock"></i>

</body>
</html>
Try It Yourself »

Font Awesome 4 Icons

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

Note: No downloading or installation is required!

Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>

</body>
</html>
Try It Yourself »

Bootstrap 3 Icons

To use the Bootstrap 3 glyphicons, add the following line inside the <head> section of your HTML page:

Note: No downloading or installation is required!

Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>

</body>
</html>
Try It Yourself »

Note: Glyphicons are not supported in Bootstrap 4.

For more information about Bootstrap 3 and Glyphicons, visit our Bootstrap 3 Tutorial.


Google Icons

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

Note: No downloading or installation is required!

Example

<!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">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>

</body>
</html>
Try It Yourself »

For a complete list of ALL icons (font awesome, bootstrap and google), visit the Icon Reference.