Bootstrap Icons

Beginner
9 min

Bootstrap Icons

Bootstrap does not bundle icons in its CSS, but the same team maintains Bootstrap Icons, an open-source library of more than 2,000 SVG icons designed to match the framework. This lesson shows the three ways to use them (icon font, inline SVG and SVG sprite), how to size and color icons with the utilities you already know, how to place them in buttons, inputs and lists, and how to keep them accessible.

Installing

Via CDN, add one stylesheet:

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

Via npm:

bash
npm install bootstrap-icons

Then import the font CSS in your bundle, or reference the SVG files directly:

scss
// styles.scss @import "bootstrap/scss/bootstrap"; @import "bootstrap-icons/font/bootstrap-icons.css";

The package contains font/ (icon font and CSS), icons/ (one .svg per icon) and bootstrap-icons.svg (a sprite of every icon).

Three Ways to Use an Icon

| Method | Markup | Best for | |---|---|---| | Icon font | <i class="bi bi-heart"></i> | Quick use, colored with text-*, sized with font-size | | Inline SVG | Paste the <svg> from the icons folder | Full control, no extra request, animatable paths | | SVG sprite | <svg class="bi"><use href="bootstrap-icons.svg#heart"/></svg> | Many icons, one cached file |

Icon font example:

html
<i class="bi bi-alarm"></i> <i class="bi bi-alarm text-danger fs-3"></i>

Inline SVG example (copied from icons/heart-fill.svg):

html
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16" aria-hidden="true"> <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/> </svg>

Because the SVG uses fill="currentColor", it inherits the text color, so text-primary on a parent colors it.

Sizing and Coloring

Font icons behave like text characters:

html
<i class="bi bi-star-fill text-warning"></i> <!-- inherits font size --> <i class="bi bi-star-fill fs-1"></i> <!-- fs-1 to fs-6 --> <i class="bi bi-star-fill" style="font-size: 2.5rem"></i>

Inline SVGs are sized with width and height attributes or style, and colored through fill="currentColor" plus a text color utility. Both approaches work with opacity-* and align-middle.

Icons in Components

Buttons and links:

html
<button class="btn btn-outline-danger"> <i class="bi bi-trash me-1" aria-hidden="true"></i>Delete </button> <button class="btn btn-secondary" aria-label="Settings"> <i class="bi bi-gear" aria-hidden="true"></i> </button>

Input groups:

html
<div class="input-group"> <span class="input-group-text"><i class="bi bi-search" aria-hidden="true"></i></span> <input class="form-control" placeholder="Search" aria-label="Search"> </div>

Lists:

html
<ul class="list-unstyled"> <li><i class="bi bi-check2 text-success me-2" aria-hidden="true"></i>Unlimited projects</li> <li><i class="bi bi-check2 text-success me-2" aria-hidden="true"></i>Priority support</li> </ul>

Navbars and dropdowns follow the same pattern: icon first, me-1 or me-2, then the label.

The icon-link Helper

Bootstrap 5.3 added .icon-link for aligning an inline SVG with link text and .icon-link-hover to nudge the icon on hover:

html
<a class="icon-link icon-link-hover" href="/next" style="--bs-icon-link-transform: translate3d(0, -.125rem, 0)"> Next chapter <svg class="bi" aria-hidden="true"><use href="/bootstrap-icons.svg#arrow-up-right"></use></svg> </a>

The helper sets display: inline-flex, gap, and sizes the .bi element to 1em so it scales with the text.

Accessibility

  • Decorative icons next to text: aria-hidden="true" so screen readers do not read "trash" before "Delete".
  • Icon-only controls: add aria-label to the button or link, not to the icon.
  • Icons that carry meaning on their own (a status check mark): include .visually-hidden text describing it.
  • Inline SVGs that are meaningful can use role="img" and <title> instead.

Common Mistakes

  • Using <i> without bi. Both bi and bi-{name} classes are required for the font method.
  • Loading the icon CSS but referencing a non-existent name. Nothing renders; check the name in the package's icons/ folder.
  • Setting color on the SVG directly. Use fill="currentColor" and set the text color, so utilities and dark mode work.
  • Forgetting me-* spacing. Icons touch the label text without a margin utility.
Quick Quiz
Question 1 of 3

Which classes are required to render an icon with the font method?

Key Takeaways

  • Bootstrap Icons is a separate package; load it from the CDN stylesheet or npm install bootstrap-icons.
  • Use <i class="bi bi-name"> for the font method, inline SVG for full control, or the SVG sprite with <use> for many icons.
  • Size with fs-* or font-size, color with text-* thanks to currentColor.
  • Place icons in buttons, input groups, lists and navs with me-* spacing; .icon-link aligns SVGs in links.
  • Hide decorative icons with aria-hidden="true" and give icon-only controls an aria-label.

Next lesson: Dark Mode and Color Modes - enable Bootstrap 5.3's built-in dark theme, add a toggle, and adapt custom styles with data-bs-theme.

Bootstrap Icons - Bootstrap | CodeYourCraft | CodeYourCraft