How to add icons in project using Bootstrap ?

Last Updated : 11 Sep, 2024

Bootstrap Icons is an open-source icon library specifically designed for use with Bootstrap's framework. Adding icons using Bootstrap means integrating the Bootstrap Icons library into your project and using its icon classes in HTML. This allows easy inclusion of scalable, customizable icons directly in your web pages.

Syntax

<i class="bi bi-icon_name"></i>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/>

Bootstrap Font Icon CSS link:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />

Approach

Go to the official site of Bootstrap & copy the Bootstrap CDN for CSS, JS, Popper.js, and jQuery links.
Add the CDN link along with add font icon link inside the <head> tag
Add the class with bi bi-icon_name followed by the name of the icon.

Example 1: This example we use Bootstrap to include a globe icon (bi-globe) alongside a heading. It links to Bootstrap CSS and icons via CDN for easy styling and icon usage.

HTML

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

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />

    <title>Bootstrap Icons in HTML</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />

    <!-- Bootstrap Font Icon CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
</head>

<body>
    <center>
        <h1 style="color: green">
            Geeks For Geeks
        </h1>
        
        <h1 class="m-4">Globe Icon:
            <i class="bi-globe"></i>
        </h1>
    </center>
</body>

</html>

Output:

Example 2: This example we use Bootstrap to style and display icons. It includes a centered heading and shows three Bootstrap icons: search, alarm, and cart, each with its own label

HTML

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

<head>
    <meta charset="utf-8" />
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1" />

    <title>Bootstrap Icons in HTML</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />

    <!-- Bootstrap Font Icon CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
</head>

<body>
    <center>
        <!-- Main heading with green color -->
        <h1 style="color: green">
            Bootstrap Icons
        </h1>

        <!-- Display Search Icon -->
        <h1 class="m-4">Search Icon:
            <i class="bi-search"></i>
        </h1>

        <!-- Display Alarm Icon -->
        <h1 class="m-4">Alarm Icon:
            <i class="bi-alarm"></i>
        </h1>

        <!-- Display Cart Icon -->
        <h1 class="m-4">Cart Icon:
            <i class="bi-cart"></i>
        </h1>
    </center>
</body>

</html>