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

Icons Tutorial


How to Add Icons to Website

Icons serve a very similar function to text in a page. In Semantic icons receive a special tag <i> or <span> which allow for an abbreviated markup when sitting along-side text.

There are many icons libraries available and most common used libraries are:

  • Font Awesome
  • Bootstrap Glyphicons
  • Google Icons

All the icons in the icon libraries are scalable vector icons that can be customized with CSS.


Font Awesome 5 Icons

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

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"> </head> <body> <i class="fas fa-cat"></i> <i class="fas fa-cannabis"></i> <i class="fas fa-check"></i> <i class="fas fa-clock"></i> <i class="far fa-clock"></i> </body> </html>
Run code

For a complete list of ALL Font Awesome 5 icons, visit our Font Awesome 5 tutorial.


Font Awesome 4 Icons

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!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-home"></i> <i class="fa fa-android"></i> <i class="fa fa-bitcoin"></i> <i class="fa fa-cut"></i> </body> </html>
Run code

For a complete list of ALL Font Awesome 4 icons, visit our Font Awesome 4 tutorial.


Bootstrap 3 Glyphicons

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <span class="glyphicon glyphicon-envelope"></span> <span class="glyphicon glyphicon-qrcode"></span> <span class="glyphicon glyphicon-send"></span> <span class="glyphicon glyphicon-star-empty"></span> </body> </html>
Run code

For a complete list of ALL Bootstrap glyphicons, visit our Bootstrap Glyphicons chapter.


Google 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">
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <i class="material-icons">done_all</i> <i class="material-icons">fingerprint</i> <i class="material-icons">lock_open</i> <i class="material-icons">warning</i> </body> </html>
Run code

For a complete list of ALL Google icons, visit our Google Icons tutorial.