Install and use Bootstrap Icons

Install

Install the full package—including individual SVGs, the sprite, and icon fonts—or download the latest release.

npm i bootstrap-icons

composer require twbs/bootstrap-icons

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

SVG usage

Use a width and height of 1em when you want an icon to scale with surrounding text.

Embedded SVG

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16" aria-hidden="true">
  <path d="M4 1c2 0 3 1.5 4 3 1-1.5 2-3 4-3 2.5 0 4 2 4 4.5 0 3-2.5 5.5-8 9.5C2.5 11 0 8.5 0 5.5 0 3 1.5 1 4 1"/>
</svg>

External image

<img src="/assets/icons/bootstrap.svg" alt="Bootstrap" width="32" height="32">

SVG sprite

Reference icons from the bundled sprite with <use>. See thesprite guide for examples and browser notes.

Icon font

Include the icon font stylesheet, then use the icon filename in abi-* class.

<i class="bi bi-alarm" aria-hidden="true"></i>

Sass

Point the font directory at the installed package before importing the Sass file.

$bootstrap-icons-font-dir: "bootstrap-icons/font/fonts";
@import "bootstrap-icons/font/bootstrap-icons";

Styling

Embedded SVGs and the icon font inherit currentColor. Changefont-size to resize a 1em icon.

.bi {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.feature-icon {
  color: cornflowerblue;
  font-size: 2rem;
}

Accessibility

Decorative icons should use aria-hidden="true". Meaningful standalone SVGs need an accessible name, and icon-only controls need a label on the control.

<button type="button" aria-label="Mute">
  <svg class="bi" aria-hidden="true">…</svg>
</button>

When using an SVG through <img>, provide usefulalt text, or an empty alt for a decorative image.