Skip to main content

CSS Icons

Icons can be defined as the images or symbols used in any computer interface refer to an element. It is a graphical representation of a file or program that helps the user to identify about the type of file quickly.

Icons can easily be added to your HTML page, by using an icon library.

How To Add Icons​

The simplest way to add an icon to your HTML page, is with an icon library, such as Font Awesome.

Add the name of the specified icon class to any inline HTML element (like <i> or <span>).

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

Font Awesome Icons​

To use the Font Awesome icons, go to fontawesome.com, sign in, and get a code to add in the <head> section of your HTML page:

<script src="https://kit.fontawesome.com/_yourcode_.js" crossorigin="anonymous"></script>

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

Note: No downloading or installation is required!

Example:

<!DOCTYPE html>  
<html>  
    <head>  
        <script src="https://kit.fontawesome.com/a076d05399.js"  crossorigin="anonymous"></script>  
    </head>  
    <body>  
        <i class="fas fa-cloud"></i>  
        <i class="fas fa-heart"></i>  
        <i class="fas fa-car"></i>  
        <i class="fas fa-file"></i>  
        <i class="fas fa-bars"></i>  
    </body>  
</html>

Output:

Example Font Awesome

Bootstrap Icons​

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

Note: No downloading or installation is required!

Example:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    </head>
    <body class="container">
        <i class="bi-alarm"></i>
        <i class="bi-heart-fill"></i>
        <i class="bi-shop"></i>
        <i class="bi-tools"></i>
    </body>
</html>

Output:

Example Bootstrap Icons

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

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>

Output:

Example Google Icons

Table of Contents