Bootstrap 5 Icons

Last Updated : 30 Nov, 2022

Bootstrap 5 has a growing collection of open-source, high-quality icons. You can use them within any element in your project with or without bootstrap.

There are the following ways to include bootstrap icons:

Install Bootstrap icons package manager.

npm i bootstrap-icons

Embed them within the HTML of your page.
Use the SVG sprite to insert icons through the <use> element. Use the icon’s filename as the fragment identifier.
Copy the icons in your directory and reference them as regular images.
Include the icon web fonts in your page via CSS, then reference the class names as needed in your HTML.
The simplest way to include Bootstrap icons in a web page is using the CDN link.

There are some tested alternative open-source icon sets to bootstrap icons like font awesome, feather, and octicons which have a wide range of scalable vector icons.

Example 1: IN this example we will create the icon as an SVG element.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Icons</title>
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
    <div class="text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <strong>Bootstrap 5 icons</strong>
        <div class="container">
            <h2>Plus button</h2>
            <svg width="160" height="160" class="bi bi-plus" viewBox="0 0 16 16">
                <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 
                           0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
            </svg>
        </div>
    </div>

</body>

</html>

Output:

Example 2: In this example we will use the font icon CDN link to import the icon

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Including Bootstrap Icons in HTML</title>
    <!-- Bootstrap CDN  -->
    <link rel="stylesheet" 
          href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <!-- Bootstrap Font Icon CDN -->
    <link rel="stylesheet" 
          href=
"https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>
    <div class="text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <strong>Bootstrap 5 Icons</strong>
    <h1 class="m-4">Globe icon:
         <i class="bi-globe"></i> 
        </h1>
    <h1 class="m-4">Alarm Icon:
        <i class="bi-alarm"></i>
    </h1>
</body>
</html>