How to Add Icon in HTML?

To add an icon in HTML, the most common and flexible method is to use an icon library such as Font Awesome, Bootstrap Icons, or Google Icons. These icons are scalable, customizable, and easy to integrate into any project. Here’s how you can add icons to your website:

1. Using Icon Libraries (Recommended)

A. Font Awesome

Step 1: Include the CDN link for Font Awesome in your <head> section:

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

Step 2: Add the icon using an inline element like <i> or <span>, and specify the icon’s class:

<i class="fas fa-home"></i>   <!-- Solid home icon -->
<i class="far fa-clock"></i>  <!-- Regular clock icon -->
<i class="fas fa-cat"></i>    <!-- Solid cat icon -->

You can use different class prefixes for style (e.g., fas for solid, far for regular).

Customization: You can resize, color, and style the icon using CSS:

<i class="fas fa-home" style="font-size: 36px; color: green;"></i>

B. Bootstrap Icons

Include Bootstrap Icons via a CDN and use the corresponding classes in your HTML, similar to Font Awesome.

2. Using Image Icons

You can also display icons as images with the <img> tag:

<img src="icon.png" alt="Description of icon" style="width:24px;">

This method is good for custom or unique icons.

3. Favicon (Page Title Icon)

To show an icon in the browser tab (favicon), add to your <head>:

<link rel="icon" type="image/x-icon" href="favicon.ico">

Replace favicon.ico with the path to your icon file. Favicons can use common formats like .ico, .png, .jpg, or .svg.

Examples

<!DOCTYPE html>
<html>

<head>
    <title>Adding Icons Example</title>
    <!-- Font Awesome CDN -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
    <h2>Font Awesome Icon:</h2>
    <i class="fas fa-user"></i>

    <h2>Image Icon:</h2>
    <img src="icon.png" alt="Custom Icon" style="width:24px;">
</body>

</html>

Key Points

Use <i> or <span> with library classes for scalable vector icons; customize with CSS.
For custom icon images, use <img>.
For browser tab (favicon) icons, use a <link rel="icon"> in the <head>.
Always check icon library documentation for the latest CDN and class syntax.

This approach makes icons easy to add, style, and manage across your HTML projects.