CSS Icons

Introduction

With the help of CSS icons, we can add icons to the HTML page from the icon library. All the icons available in the icon library can be formatted using the CSS properties. We can customize the icon based on size, color, shadow, etc. We can graphically represent the icons used in size, color, shadow, etc. There are three types of icons available on the internet. These are as follows.

Font Awesome Icons
Google Icons
Bootstrap Icons

We required the CDN link to make all the icons on the webpage. We can also customize the predefined icons with the help of CSS.

Approach

To use the icons first, we must link the CDN link inside the <head> tag. To achieve this, we have to follow the below steps.

First, we have to add the name of the icon of the class in the HTML element.
We can add the icons with the help of <i> and <span> elements.
Then, we need all the icons to be customized with the required CSS properties, such as size, color, shadow, etc.

Method 1: Font Awesome Icons

When there is a need for awesome icons, we must add the link below inside the <head> tag.

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

We must follow the syntax below when adding icons to the web page.

Syntax:

Example 1:

In the below example, we use the font property with each icon class & whose value is set to 32px.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <link rel= "stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    .custom-icon {
      font-size: 32px;
      color: #007bff; 
      margin: 10px; 
    }

    .custom-icon:hover {
      color: #ff0000; 
      cursor: pointer; 
    }
  </style>
</head>
<body>
 <h1>Welcome To javaTpoint</h1>
  <i class="fa fa-cloud custom-icon"></i>
  <i class="fa fa-heart custom-icon"></i>
  <i class="fa fa-file custom-icon"></i>
  <i class="fa fa-car custom-icon"></i>
  <i class="fa fa-bars custom-icon"></i>

 
  <i class="fa fa-globe custom-icon"></i>
  <i class="fa fa-sun custom-icon"></i>
  <i class="fa fa-moon custom-icon"></i>
</body>
</html>

Output:

Example 2:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <link rel= "stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    .custom-icon {
      margin: 10px; /* Add some margin between icons */
      cursor: pointer; /* Add a pointer cursor on hover */
    }

    .red-icon {
      color: red;
    }

    .blue-icon {
      color: blue;
    }

    .green-icon {
      color: green;
    }
  </style>
</head>
<body>
 <h1>Welcome to javaTpoint</h1>
  <i class="fa fa-heart custom-icon red-icon" style="font-size: 28px;"></i>
  <i class="fa fa-heart custom-icon blue-icon" style="font-size: 30px;"></i>
  <i class="fa fa-heart custom-icon red-icon" style="font-size: 32px;"></i>
  <i class="fa fa-heart custom-icon blue-icon" style="font-size: 34px;"></i>
  <i class="fa fa-heart custom-icon red-icon" style="font-size: 36px;"></i>
  <i class="fa fa-star custom-icon red-icon" style="font-size: 28px;"></i>
  <i class="fa fa-star custom-icon blue-icon" style="font-size: 30px;"></i>
  <i class="fa fa-star custom-icon green-icon" style="font-size: 32px;"></i>
  <i class="fa fa-star custom-icon red-icon" style="font-size: 34px;"></i>
  <i class="fa fa-star custom-icon blue-icon" style="font-size: 36px;"></i>
</body>
</html>

Output:

Method 2: Google Icons

We can also insert the Google icons in our HTML web page. To do this, we have to insert the following code inside the head tag of our HTML code.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Syntax:

We must follow the syntax below to import the Google icon into our webpage.

Example 3:

In the below example, we will see the implementation of the "material-icons" class with the required icon.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel= "stylesheet"
    href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <style>
    .custom-icon {
      font-size: 32px;
      color: #007bff; /* Custom color (blue) */
      margin: 10px; /* Add some margin between icons */
    }

    .custom-icon:hover {
      color: #ff0000; /* Change color on hover (red) */
      cursor: pointer; /* Add a pointer cursor on hover */
    }
  </style>
</head>
<body>
  <h1>Welcome to javaTpoint</h1>
  <i class="material-icons custom-icon">cloud</i>
  <i class="material-icons custom-icon">favorite</i>
  <i class="material-icons custom-icon">attachment</i>
  <i class="material-icons custom-icon">computer</i>
  <i class="material-icons custom-icon">traffic</i>

  <i class="material-icons custom-icon">home</i>
  <i class="material-icons custom-icon">beach_access</i>
  <i class="material-icons custom-icon">flight</i>
  <i class="material-icons custom-icon">local_cafe</i>
  <i class="material-icons custom-icon">movie</i>
</body>
</html>

Output:

Example 4:

In the below code, we will see the implementation of the "material-icons" class with the cloud shape.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel= "stylesheet"
    href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <style>
    .custom-icon {
      margin: 10px; /* Add some margin between icons */
      cursor: pointer; /* Add a pointer cursor on hover */
    }

    .red-icon {
      color: red;
    }

    .blue-icon {
      color: blue;
    }

    .green-icon {
      color: green;
    }
  </style>
</head>
<body>
  <h1>Welcome to javaTpoint</h1>
  <i class="material-icons custom-icon red-icon" style="font-size: 30px;">cloud</i>
  <i class="material-icons custom-icon blue-icon" style="font-size: 40px;">cloud</i>
  <i class="material-icons custom-icon green-icon" style="font-size: 50px;">cloud</i>
  <i class="material-icons custom-icon red-icon" style="font-size: 60px;">cloud</i>
  <i class="material-icons custom-icon blue-icon" style="font-size: 70px;">cloud</i>
  <i class="material-icons custom-icon red-icon" style="font-size: 35px;">favorite</i>
  <i class="material-icons custom-icon blue-icon" style="font-size: 45px;">favorite</i>
  <i class="material-icons custom-icon green-icon" style="font-size: 55px;">favorite</i>
  <i class="material-icons custom-icon red-icon" style="font-size: 65px;">favorite</i>
  <i class="material-icons custom-icon blue-icon" style="font-size: 75px;">favorite</i>
</body>
</html>

Output:

Method 3: Bootstrap Icons

We must link the link inside the <head> tag to use the bootstrap icon.

<link rel= "stylesheet"  

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Example 5:

In the below example, we have implemented the font-size property and all the glyph icon class & all the value is set to different numbers.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel= "stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <style>
    .custom-icon {
      font-size: 32px;
      color: #007bff; /* Custom color (blue) */
      margin: 10px; /* Add some margin between icons */
    }

    .custom-icon:hover {
      color: #ff0000; /* Change color on hover (red) */
      cursor: pointer; /* Add a pointer cursor on hover */
    }
  </style>
</head>
<body>
  <h1>Welcome to javatpoint</h1>
  <i class="glyphicon glyphicon-cloud custom-icon"></i>
  <i class="glyphicon glyphicon-user custom-icon"></i>
  <i class="glyphicon glyphicon-thumbs-up custom-icon"></i>
  <i class="glyphicon glyphicon-remove custom-icon"></i>
  <i class="glyphicon glyphicon-envelope custom-icon"></i>

  
  <i class="glyphicon glyphicon-star custom-icon"></i>
  <i class="glyphicon glyphicon-thumbs-down custom-icon"></i>
  <i class="glyphicon glyphicon-ok custom-icon"></i>
  <i class="glyphicon glyphicon-heart custom-icon"></i>
  <i class="glyphicon glyphicon-plane custom-icon"></i>
</body>
</html>

Output:

Example 6:

In the below example, we have implemented the "glyph icon glyph icon-thumbs-up" class, which gives the output of the thumbs-up shape, and all the outputs have different shapes and numbers.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <style>
    
    .gfg-likes {
      color: green;
    }
  </style>
</head>
<body>
  <h1>Welcome to javatpoint</h1>
  <i class="glyphicon glyphicon-thumbs-up gfg-likes" style="font-size:20px;"></i>
  <i class="glyphicon glyphicon-thumbs-up gfg-likes" style="font-size:30px;"></i>
  <i class="glyphicon glyphicon-thumbs-up gfg-likes" style="font-size:40px;"></i>
  <i class="glyphicon glyphicon-thumbs-up gfg-likes" style="font-size:50px;"></i>
  <i class="glyphicon glyphicon-thumbs-up gfg-likes" style="font-size:60px;"></i>

  
  <div>
    <p>Thank you for liking GeekforGeeks!</p>
    <button id="likeButton" onclick="likePost()">Like</button>
    <p id="likeCounter">0 Likes</p>
  </div>

  <script>
    let likeCount = 0;

    function likePost() {
      likeCount++;
      document.getElementById('likeCounter').innerText = likeCount + (likeCount === 1 ? ' Like' : ' Likes');
    }
  </script>
</body>
</html>

Output:

Example 7:

The below program contains some of the icons in a single web page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <style>
    .icon-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      margin: 20px;
    }

    .icon-box {
      text-align: center;
      margin: 10px;
      min-width: 150px;
    }

    .icon-box i {
      font-size: 36px;
      color: #007bff; 
    }
  </style>
</head>
<body>
  <h1>CSS Icons with Font Awesome</h1>
  <div class="icon-container">
    <div class="icon-box">
      <i class="fas fa-heart"></i>
      <p>Heart</p>
    </div>
    <div class="icon-box">
      <i class="fas fa-star"></i>
      <p>Star</p>
    </div>
    <div class="icon-box">
      <i class="fas fa-thumbs-up"></i>
      <p>Thumbs Up</p>
    </div>
    <div class="icon-box">
      <i class="fas fa-thumbs-down"></i>
      <p>Thumbs Down</p>
    </div>
    <div class="icon-box">
      <i class="fas fa-smile"></i>
      <p>Smile</p>
    </div>
    <div class="icon-box">
      <i class="fas fa-frown"></i>
      <p>Frown</p>
    </div>
    <div class="icon-box">
      <i class="fas fa-star-half-alt"></i>
      <p>Half Star</p>
    </div>
    <div class="icon-box">
      <i class="fas fa-check-circle"></i>
      <p>Check Circle</p>
    </div>
    <div class="icon-box">
      <i class="fas fa-times-circle"></i>
      <p>Times Circle</p>
    </div>
    <div class="icon-box">
      <i class="fas fa-info-circle"></i>
      <p>Info Circle</p>
    </div>
    <div class="icon-box">
      <i class="fas fa-question-circle"></i>
      <p>Question Circle</p>
    </div>
    <div class="icon-box">
      <i class="fas fa-comment"></i>
      <p>Comment</p>
    </div>
    <div class="icon-box">
      <i class="fas fa-envelope"></i>
      <p>Envelope</p>
    </div>
    <div class="icon-box">
      <i class="fas fa-user"></i>
      <p>User</p>
    </div>
    <div class="icon-box">
      <i class="fas fa-lock"></i>
      <p>Lock</p>
    </div>
    <div class="icon-box">
      <i class="fas fa-camera"></i>
      <p>Camera</p>
    </div>
    
  </div>
</body>
</html>

Output: