How to Add Icons in HTML? - Coding

Adding icons in HTML enhances the visual appeal and usability of web pages. We will explore fou methods including Font Awesome, Bootstrap Icons, Google Icons, and image icons to Add Icons in HTML.

Below are the approaches to Add Icons in HTML:

Table of Content

Font Awesome Icons
Bootstrap Icons
Google Icons
Image Icons

Font Awesome Icons

In this approach, insert an appropriate CDN link to the Font Awesome library inside your HTML document’s <head> section. Use the class name associated with an inline element such as <i> tag to show the required icon.

Example: The example below shows how to Add Icons in HTML using Font Awesome Icons.

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" 
              content="width=device-width, 
                       initial-scale=1.0" />
        <title>
   Font Awesome Icon Example
        </title>
        
          <!-- Include Font Awesome icon library -->
        <link href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" 
              rel="stylesheet"/>
    </head>
    <body>
        
          <!-- Font Awesome Icon -->
        <i class="fas fa-home">
        </i>
    </body>
</html>

Output:

Font-Awesome

Bootstrap Icons

In this approach, Include the Bootstrap Icons library using a CDN link in the <head> section. You can display these by using the <i> tag and selecting an appropriate class name.

Example: The example below shows how to Add Icons in HTML using Bootstrap Icons.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, 
                   initial-scale=1.0" name="viewport" />
    <title>
        Bootstrap Icon Example
    </title>
    
      <!-- Include Bootstrap Icons library -->
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" 
          rel="stylesheet" />
</head>

<body>
    
      <!-- Bootstrap Icon -->
    <i class="bi bi-house-fill">
    </i>
</body>

</html>

Output:

Bootstrap Icons

Google Icons

In this approach, Include the Google Icons library using a CDN link in the <head> section. Use the <span> tag with the class material-icons and specify the icon name.

Example: The example below shows how to Add Icons in HTML using Google Icons.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, 
                   initial-scale=1.0" name="viewport" />
    <title>
        Google Icon Example
    </title>
    
      <!-- Include Google Icons library -->
    <link href=
"https://fonts.googleapis.com/icon?family=Material+Icons" 
          rel="stylesheet" />
</head>

<body>
    
      <!-- Google Icon -->
    <span class="material-icons">
        home
    </span>
</body>

</html>

Output:

Google Icons

Image Icons

In this approach, Use <img> tag to add icon in form of image your webpage. Apply CSS to Adjust Size of Icon.

Example: The example below shows how to Add Icons in HTML using Image Icons.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, 
                   initial-scale=1.0" name="viewport" />
    <title>
        Image Icon Example
    </title>
    <style>
        .icon {
            width: 24px;
            height: 24px;
        }
    </style>
</head>

<body>
    <!-- Image Icon -->
    <img alt="home icon" class="icon" 
src="https://media.geeksforgeeks.org/wp-content/uploads/20240527124348/zi.png" />
</body>

</html>

Output:

Image Icons

Reffered: https://www.geeksforgeeks.org

HTML

Related
How to Add Autoplay Video in HTML?
How to use SVG Images in CSS & HTML?
HTML Boilerplate
How to Add a Line Break with the br Tag in HTML?
How to Embed Video in Iframe in HTML?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	18