CSS icons - CSS Tutorial
Python JavaScript HTML CSS C Java C# / .NET C++ TypeScript Dart Kotlin

CSS icons

BLUF: Styling is what brings the web to life, and mastering CSS icons is key to creating beautiful, responsive interfaces. This tutorial breaks down the concepts and syntax you need to succeed with CSS.
Visual Design Hack: CSS icons

CSS is all about presentation. Discover how CSS icons works to transform plain HTML into a premium user experience in the guide below.

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 need the CDN link to display all the icons on the website. Additionally, we have the option to style the default icons using 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 requirement for fantastic icons, we should insert the following link within the <head> element.

Example

<link rel= "stylesheet"  

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

We need to adhere to the following syntax when incorporating icons into the webpage.

Syntax:

Example

<i class="fa fa-cloud"></i>

Example 1:

In this example, we apply the font property to each icon class, setting its value to 32px.

Code:

Example

<!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 C# Tutorial</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:

Example

<!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 C# Programming</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 embed Google icons into our HTML webpage by including the provided code within the head section of our HTML document.

Example

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

Syntax:

We need to adhere to the following syntax in order to incorporate the Google icon into our webpage.

Example

<i class="material-icons">cloud</i>

Example 3:

In this example, we will explore how to use the "material-icons" class to display the necessary icon.

Code:

Example

<!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 C# Programming</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 following code snippet, we will explore how the " material-icons " class is applied to represent a cloud icon.

Code:

Example

<!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 C# Programming</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 need to connect the hyperlink within the <head> element to display the bootstrap icon.

Example

<link rel= "stylesheet"  


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

Example 5:

In this example, the font-size attribute has been applied with various numerical values, along with distinct glyph icon classes assigned.

Code:

Example

<!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 C# Programming</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 this example, we've utilized the " glyph icon glyph icon-thumbs-up " class to display the thumbs-up icon, resulting in various shapes and quantities for each output.

Code:

Example

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

    
    .C# Tutorial-likes {

      color: green;

    }

  </style>

</head>

<body>

  <h1>Welcome to C# Programming</h1>

  <i class="glyphicon glyphicon-thumbs-up C# Tutorial-likes" style="font-size:20px;"></i>

  <i class="glyphicon glyphicon-thumbs-up C# Tutorial-likes" style="font-size:30px;"></i>

  <i class="glyphicon glyphicon-thumbs-up C# Tutorial-likes" style="font-size:40px;"></i>

  <i class="glyphicon glyphicon-thumbs-up C# Tutorial-likes" style="font-size:50px;"></i>

  <i class="glyphicon glyphicon-thumbs-up C# Tutorial-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 following program showcases several icons within a single webpage.

Example

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

Input Required

This code uses input(). Please provide values below:

Logic Practice
Install Logic Practice
Add to home screen for a faster app-like experience