Open In App

Bootstrap 5 Icons

Improve
Improve
Like Article
Like
Save
Share
Report

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=
</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:

Bootstrap 5 icons

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=
    <!-- Bootstrap Font Icon CDN -->
    <link rel="stylesheet"
          href=
</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>


Output:

Bootstrap 5 icons

Reference:https://getbootstrap.com/docs/5.0/extend/icons/#bootstrap-icons



Last Updated : 30 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads