LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 2615 min read

Bootstrap Icons

Learn how to add the official Bootstrap Icons library to your project via CDN and use icon classes in buttons, navs, and forms.

Introduction

Bootstrap Icons is the official, free icon library maintained by the Bootstrap team, with over 2,000 SVG icons designed to match Bootstrap's visual language. It ships completely independent of the main Bootstrap CSS/JS bundle, so you add it separately, either through a CDN stylesheet or as an npm package.

What You Will Learn
  • How to load Bootstrap Icons via CDN.
  • The <i class="bi bi-*"> class naming pattern.
  • Using icons inside buttons, navs, and form fields.
  • Controlling icon size and color with utility classes.

Installing via CDN

The fastest way to use Bootstrap Icons is to link its stylesheet in your document <head>, alongside your normal Bootstrap CSS.

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>

For npm-based projects, install it as a package and import the CSS in your build entry point instead.

npm install bootstrap-icons
import 'bootstrap-icons/font/bootstrap-icons.css';

Using Icon Classes

Every icon is used the same way: an <i> (or <span>) element with the base class .bi plus a specific bi-{icon-name} class. Icon names match what you see in the official Bootstrap Icons gallery.

<i class="bi bi-heart"></i>
<i class="bi bi-heart-fill"></i>
<i class="bi bi-house-door"></i>
<i class="bi bi-search"></i>
<i class="bi bi-trash"></i>
<i class="bi bi-check-circle-fill"></i>
Result

Click Run to see what this code prints.

Icons in Buttons

Place an icon inside a button alongside text, with a small margin utility like .me-1 or .me-2 to space it from the label. For icon-only buttons, add an aria-label since the icon itself carries no accessible text.

<button class="btn btn-primary">
  <i class="bi bi-download me-2"></i>Download
</button>


<button class="btn btn-outline-danger" aria-label="Delete item">
  <i class="bi bi-trash"></i>
</button>

Icons in Navs & Forms

Icons work naturally inside nav links, list groups, and form input groups to reinforce meaning at a glance.

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#"><i class="bi bi-house-door me-2"></i>Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#"><i class="bi bi-gear me-2"></i>Settings</a>
  </li>
</ul>


<div class="input-group">
  <span class="input-group-text"><i class="bi bi-search"></i></span>
  <input type="text" class="form-control" placeholder="Search courses...">
</div>

Sizing & Color

Bootstrap Icons inherit font-size and color from their surrounding element, so you can resize and recolor them with ordinary CSS or Bootstrap text utilities — no separate icon-sizing system to learn.

<i class="bi bi-star-fill fs-1 text-warning"></i>
<i class="bi bi-star-fill fs-3 text-warning"></i>
<i class="bi bi-star-fill text-warning"></i>
UtilityPurpose
fs-1 through fs-6Scales icon size, since it inherits font-size
text-primary, text-danger, etc.Colors the icon using currentColor
me-2, ms-2Adds spacing next to accompanying text

Alternative: SVG Sprite

For production sites, Bootstrap also offers a single SVG sprite file you can reference with <svg><use>, avoiding an icon font entirely and only paying for the icons you actually reference.

<svg class="bi" width="24" height="24" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>

Common Mistakes

Avoid These Mistakes
  • Forgetting to add the separate bootstrap-icons stylesheet — Bootstrap's main CSS does not include icons.
  • Using an icon-only button with no aria-label, leaving screen reader users with no idea what it does.
  • Mismatching the icon class name (e.g. bi-trash-fill vs bi-trash) — always confirm the exact name in the icon gallery.
  • Pinning an old CDN version long after newer icons are released, missing new additions to the set.

Best Practices

  • Pin a specific version number in the CDN URL for consistent, reproducible builds.
  • Prefer the npm package for production apps so icons are bundled and versioned with your other dependencies.
  • Always add aria-hidden="true" to purely decorative icons that sit next to visible text.
  • Add aria-label to icon-only interactive elements like icon buttons.

Frequently Asked Questions

Yes. Bootstrap Icons are released under the MIT license, so they are free to use in personal and commercial projects without attribution.

No, the icon font/CSS is fully standalone and can be used in any project, even one that doesn't use Bootstrap's grid or components at all.

The library ships with well over 2,000 icons covering common UI concepts — arrows, media controls, social, files, and more — searchable on the official Bootstrap Icons website.

Key Takeaways

  • Bootstrap Icons is a separate library from Bootstrap core, loaded via its own CDN link or npm package.
  • Icons are used with the class="bi bi-{name}" pattern on an <i> or <span>.
  • Icons inherit font-size and color, so sizing/coloring uses normal text utilities.
  • Always label icon-only interactive elements with aria-label for accessibility.

Summary

Bootstrap Icons gives you a large, free, scalable icon set that plugs directly into your existing utility classes for sizing and color. Next, you will go deeper into customizing Bootstrap itself by overriding its Sass variables to produce your own themed build.

Next Lesson →

Customizing Bootstrap with Sass