Open In App

CSS Icons

Improve
Improve
Like Article
Like
Save
Share
Report

In CSS Icons of other libraries can be formatted using CSS styles. They can be customized according to size, color, shadow, etc. The icon is a graphical representation that conveys the specific meaning for which it is used & helps to navigate accordingly.

There are 3 types of icon libraries available, namely

  • Font Awesome Icons
  • Google Icons
  • Bootstrap Icons

We will include the required CDN link from the available icon library, which will help us to use the pre-defined icon classes or we can customize it using the CSS.

Using Icons with CSS

In order to use icons, we need to add the required CDN link inside the <head> section. The following steps to add the predefined class in the HTML:

  • 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 CSS icons are scalable vector icons that can be customized with the required CSS properties such as size, color, shadow, etc.

Note: All the above-mentioned libraries do not require any downloading or installation.

1. Font Awesome Icons

To use Font Awesome Icons, add the following link inside the <head> section.

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

Syntax:

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

We can use the font-size property to make it large-size icons for display. The below example illustrates the use of the font-size property.

Example 1: In this example, we have used the font-size property with each icon class & whose value is set to 32px.

HTML




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet"
          href=
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <i class="fa fa-cloud"
       style="font-size:32px;">
    </i>
    <i class="fa fa-heart"
       style="font-size:32px;">
    </i>
    <i class="fa fa-file"
       style="font-size:32px;">
    </i>
    <i class="fa fa-car"
       style="font-size:32px;">
    </i>
    <i class="fa fa-bars"
       style="font-size:32px;">
    </i>
</body>
</html>


Output:

Font Awesome Icons Example

Example 2: In this example, we have used the “fa fa-heart” class having the font-size property & color property whose values is set to 28px & red, blue respectively.

HTML




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet"
          href=
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <i class="fa fa-heart"
       style="font-size:28px;color:red;">
      </i>
    <i class="fa fa-heart"
       style="font-size:30px;color:blue;">
      </i>
    <i class="fa fa-heart"
       style="font-size:32px;color:red;">
      </i>
    <i class="fa fa-heart"
       style="font-size:34px;color:blue;">
      </i>
    <i class="fa fa-heart"
       style="font-size:36px;color:red;">
      </i>
</body>
</html>


Output:

Font Awesome Icons Example

2. Google Icons

To use Google Icons, add the following link inside the <head> section. 

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

Syntax:

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

Please refer to the How to use Google material icon as list-style in a webpage using HTML and CSS? article to know how to use CSS properties with the pre-defined class.

Example 1: In this example, we have used the “material-icons” class with the required icon.

HTML




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet"
          href=
</head>
 
<body>
    <h1>GeekforGeeks</h1>
    <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:

Google Icons Example

Example 2: In this example, we have used the “material-icons” class with the cloud shape.

HTML




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet"
          href=
</head>
 
<body>
    <h1>GeekforGeeks</h1>
    <i class="material-icons"
       style="font-size:30px;">
      cloud
      </i>
    <i class="material-icons"
       style="font-size:40px;">
      cloud
      </i>
    <i class="material-icons"
       style="font-size:50px;">
      cloud
      </i>
    <i class="material-icons"
       style="font-size:60px;">
      cloud
      </i>
    <i class="material-icons"
       style="font-size:70px;">
      cloud
      </i>
</body>
</html>


Output:

Google Icons Example

3. Bootstrap Icons

To use Bootstrap Icons add the following link inside the <head> section.

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>

Syntax:

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

We can use the font-size property to make it large-size icons for display. The below example illustrates the use of the font-size property with the pre-defined class.

Example 1: In this example, we have used the font-size property with each glyphicon class & all the value is set to different numbers.

HTML




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet"
          href=
</head>
 
<body>
    <h1>GeekforGeeks</h1>
    <i class="glyphicon glyphicon-cloud"
       style="font-size:28px;">
      </i>
    <i class="glyphicon glyphicon-user"
       style="font-size:30px;">
      </i>
    <i class="glyphicon glyphicon-thumbs-up"
       style="font-size:32px;">
      </i>
    <i class="glyphicon glyphicon-remove"
       style="font-size:34px;">
      </i>
    <i class="glyphicon glyphicon-envelope"
       style="font-size:36px;">
      </i>
</body>
</html>


Output:

 Bootstrap Icons Example

Example 2: In this example, we have used the “glyphicon glyphicon-thumbs-up” class with the thumbs-up shape & all the value is set to different numbers.

HTML




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet"
          href=
</head>
 
<body>
    <h1>GeekforGeeks</h1>
    <i class="glyphicon glyphicon-thumbs-up"
       style="font-size:20px;">
      </i>
    <i class="glyphicon glyphicon-thumbs-up"
       style="font-size:30px;">
      </i>
    <i class="glyphicon glyphicon-thumbs-up"
       style="font-size:40px;">
      </i>
    <i class="glyphicon glyphicon-thumbs-up"
       style="font-size:50px;">
      </i>
    <i class="glyphicon glyphicon-thumbs-up"
       style="font-size:60px;">
      </i>
</body>
</html>


Output:

Bootstrap Icons Example



Last Updated : 07 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads