Bootstrap Icons: How to Install, Use, Size, and Color Them

Bootstrap Icons is Bootstrap’s official icon library: 2,078 free icons, MIT licensed, drawn on the same 16 by 16 grid so they sit neatly next to text, buttons, and form controls. It is a separate package from the Bootstrap CSS, so you add it yourself, and you can use it as a web font, as inline SVG, as an SVG sprite, or as plain image files. This guide shows how to install it, how to use each format, and how to size, color, and align icons so they look right in a real Bootstrap layout. The examples use version 1.13.2, the latest release in November 2026.

Which way should you add Bootstrap Icons?

There are four ways to put a Bootstrap icon on a page. They draw the same shapes; what changes is how much you load and how much control you get.

Method	How you write it	Best for	Trade-off
Icon font	<i class="bi bi-house"></i>	Most sites, especially if you use many icons	Loads the whole font (about 134 KB for the WOFF2 file) plus an 87 KB stylesheet
Inline SVG	Paste the <svg> markup	A handful of icons, best performance	More markup in your HTML
SVG sprite	<svg><use href="bootstrap-icons.svg#house"/></svg>	Many icons without the font, cached once	The sprite must be served from your own domain
Image file	<img src="icons/house.svg" alt="Home">	Quick prototypes and emails	You can’t recolor it with CSS

If you are not sure, start with the icon font. It is the shortest to write, works everywhere Bootstrap does, and follows your text color and size automatically.

Install Bootstrap Icons from a CDN

The fastest setup is a single stylesheet from the jsDelivr CDN. Add it to the <head> next to your Bootstrap CSS:

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

That is all: the stylesheet loads the font files from the same CDN, and every icon class is ready to use. Pin the exact version in the URL, as above, so an update never changes your icons without you knowing.

Install Bootstrap Icons with npm

For a project with a build step, install the package:

npm install bootstrap-icons

Then import the font stylesheet once, from your JavaScript entry file:

import 'bootstrap-icons/font/bootstrap-icons.css'

Or from your Sass, alongside Bootstrap:

@import "bootstrap/scss/bootstrap";
@import "bootstrap-icons/font/bootstrap-icons";

If your bundler can’t find the font files from Sass, set the font folder before the import. The package exposes a variable for exactly this:

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

The package also ships every icon as its own SVG file in bootstrap-icons/icons/, and the full sprite as bootstrap-icons/bootstrap-icons.svg.

Use the icon font

Each icon is a class named bi- plus the icon’s name, together with the base bi class. An empty <i> or <span> is the usual element:

<i class="bi bi-house"></i>
<i class="bi bi-envelope"></i>
<i class="bi bi-star-fill"></i>

Most icons come in an outline version and a -fill version, such as bi-heart and bi-heart-fill, which is handy for states like a saved item or an active tab. Find every name by searching the official site, icons.getbootstrap.com; each icon page shows the class name, the SVG markup, and the font character.

Use inline SVG

Copy the SVG from the icon’s page and paste it into your HTML:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16">
  <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5z"/>
</svg>

fill="currentColor" makes the icon take the color of the surrounding text, so text utilities like text-primary color it just as they color the font version. Inline SVG loads nothing extra, which makes it the lightest option when a page only needs a few icons.

Use the SVG sprite

The sprite holds every icon as a <symbol> in one file. Reference an icon by its name with <use>:

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

The browser downloads and caches the sprite once, then draws any icon from it. One rule trips people up: browsers only load an external sprite from the same origin as the page, so copy bootstrap-icons.svg to your own site rather than pointing <use> at a CDN.

Change icon size

Font icons scale with font-size, so any of these work:

<i class="bi bi-bell fs-4"></i>
<i class="bi bi-bell" style="font-size: 2rem;"></i>
<h2><i class="bi bi-bell"></i> Notifications</h2>

Bootstrap’s fs-1 to fs-6 utilities are the quickest way, and an icon inside a heading grows with the heading. For SVG, set the width and height attributes or size it with CSS; the viewBox keeps it sharp at any size.

Change icon color

Both the font and SVG with currentColor use the current text color, so Bootstrap’s color utilities work directly:

<i class="bi bi-check-circle-fill text-success"></i>
<i class="bi bi-exclamation-triangle-fill text-warning"></i>
<i class="bi bi-x-circle-fill text-danger"></i>

If you set your own brand colors with the builder or in Sass, these utilities pick them up too; see how to customize Bootstrap 5 colors. In dark mode, icons follow the text color, so they switch with the theme without extra work.

Align icons with text

The font CSS already nudges each icon down by -.125em so it lines up with the text around it. Inside flex layouts, align with utilities instead:

<p class="d-flex align-items-center gap-2 mb-0">
  <i class="bi bi-geo-alt"></i>
  12 Market Street, Springfield
</p>

gap-2 gives a consistent space between icon and text, which looks tidier than a space character. The flexbox utilities guide covers the alignment classes in detail.

Icons in buttons, inputs, and lists

A button with an icon and a label:

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

An icon-only button, which needs a text label for screen readers:

<button type="button" class="btn btn-outline-secondary" aria-label="Search">
  <i class="bi bi-search" aria-hidden="true"></i>
</button>

Our Bootstrap buttons guide covers button sizes, colors, groups, and loading states.

An icon inside an input group:

<div class="input-group">
  <span class="input-group-text"><i class="bi bi-envelope"></i></span>
  <input type="email" class="form-control" placeholder="you@example.com">
</div>

A contact list:

<ul class="list-unstyled">
  <li><i class="bi bi-telephone me-2"></i>+1 555 0100</li>
  <li><i class="bi bi-envelope me-2"></i>hello@example.com</li>
  <li><i class="bi bi-clock me-2"></i>Mon to Fri, 9 to 5</li>
</ul>

Make icons accessible

Screen readers can’t describe an icon, so decide whether each one carries meaning.

• Decorative icons, shown next to text that already says the same thing, should be hidden: add aria-hidden="true".
• Meaningful icons with no text, such as an icon-only button, need a label on the control: aria-label="Search" on the button, as above, or visually hidden text with the visually-hidden class. A tooltip can show the same name to sighted users on hover.
• A standalone SVG that means something can carry role="img" and an aria-label.

<svg class="bi" width="16" height="16" fill="currentColor" role="img" aria-label="Verified">
  <use href="/assets/bootstrap-icons.svg#patch-check-fill"/>
</svg>

Keep icons fast

The icon font is convenient but loads every icon, around 134 KB for the WOFF2 file plus an 87 KB stylesheet, even if the page shows three. That is fine for an app that uses dozens of icons. For a landing page with a handful, inline SVG or the sprite loads less. If you use the font, keep the CDN version pinned so browsers can cache it, and see our guide to reducing Bootstrap CSS size for the rest of your stylesheet.

Fix common Bootstrap Icons problems

Icons show as empty squares or nothing at all. The stylesheet loaded but the font files did not. This happens when you copy bootstrap-icons.css into your project without the fonts/ folder next to it, or when a bundler rewrites the path. Keep the fonts/ folder beside the CSS, or set $bootstrap-icons-font-dir in Sass. A strict Content Security Policy can also block the font: allow the CDN or your own domain in font-src.

One icon is missing. Check the exact name on icons.getbootstrap.com, including -fill and hyphens, and that your version includes it. Newer icons only exist in newer releases, so update the package or the CDN version.

Icons sit too high or too low. Don’t add your own vertical-align on top of the built-in one. In a flex row, use align-items-center on the parent instead.

The sprite shows nothing. The <use> path is probably on another domain or wrong. Serve bootstrap-icons.svg from your own site and check the path in the browser’s network panel.

Bootstrap Icons and the rest of your theme

Icons inherit the colors, font sizes, and spacing of your Bootstrap theme, so a consistent theme does most of the styling for you. If you are building a theme, the Bootstrap theme builder lets you set colors and typography visually and export the CSS, and the icons follow along.

FAQ

Are Bootstrap Icons free?

Yes. Bootstrap Icons is free and open source under the MIT license, for personal and commercial projects, with no attribution required in your interface.

How many Bootstrap Icons are there?

Version 1.13.2, the latest release in November 2026, includes 2,078 icons. Many come in both an outline and a filled version.

Do I need Bootstrap to use Bootstrap Icons?

No. Bootstrap Icons is a separate package and works on any website, with or without the Bootstrap CSS framework. It is designed to match Bootstrap’s components, so it fits best alongside them.

How do I change the size of a Bootstrap icon?

For the icon font, set the font size, for example with the fs-1 to fs-6 utilities or style="font-size: 2rem". For SVG, change the width and height attributes or set them in CSS.

How do I change the color of a Bootstrap icon?

Use any text color utility, such as text-primary or text-danger, on the icon or its parent. The icon font and SVGs with fill="currentColor" both take the current text color.

Should I use the icon font or SVG?

Use the icon font when a page needs many icons and you want the simplest markup. Use inline SVG or the SVG sprite when a page needs only a few icons, because they load far less than the full font.

Why are my Bootstrap Icons not showing?

Usually the font files are not loading. Make sure the fonts/ folder sits next to bootstrap-icons.css, or that your CDN link is correct, and check that a Content Security Policy is not blocking fonts. Also check the icon name and that your version includes the icon.