How to use icons in Bootstrap Framework ?

Last Updated : 07 Oct, 2021

Bootstrap is CSS framework for developing responsive and mobile-first websites. Bootstrap added a feature in which one can use quality icons provided by Bootstrap. These icons are available in SVGs or web fonts format.

Bootstrap provides a thousand plus high-quality icons, which you can use in your project. You can also change color and resize these icons on the basis of need.

What makes icons in the Bootstrap framework different and why should we use it?

'Flexibility' is what which makes it different from other icon solutions. If you are using icons in Bootstrap framework, you can change the color of icon with the help of color property of CSS.
You can also change the size of icon by using font-size property of CSS.
Bootstrap is not necessary for using Bootstrap's icons in your project, you can use it with or without Bootstrap.

Basic syntax for using Bootstrap icons:

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

The <i> element is the container element which is used for adding Bootstrap icons. The string 'bi-' is always attached before class name of icons. It refers to bootstrap icons. The class-name is basically a class of icon which we are using. Bootstrap provide us many classes of icons such as Facebook, Twitter, a globe, a star and search etc.

Example: This is the HTML code of using Bootstrap's search icon in submit button.

HTML

<!DOCTYPE html>
<html>

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

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

</head>

<body class="container">
    <h2>Welcome To GFG</h2>
    <p>
        The below button is using the bi-search 
        class to display the search icon.
    </p>

    <!-- We made a button on which Bootstrap 
        icon of 'search' class present -->
    <button type="submit" class="btn btn-primary">
        <span class="bi-search"></span>
        Search
    </button>
</body>

</html>

Output: The search icon which you are seeing on the button that is a icon provided by Bootstrap framework belongs to class-name search.