Bootstrap Icons

By the end of this lesson, you will be able to add Bootstrap Icons to a web page using the Bootstrap Icons stylesheet and render icons with the correct bi classes.

What it is

Bootstrap Icons is a standalone icon set created by the Bootstrap team. Standalone means it can be used without loading the full Bootstrap CSS framework. It provides many open-source icons that can be used in HTML and CSS without JavaScript. The simplest CSS-based method loads a stylesheet that defines an icon font and utility classes. Each icon is rendered by adding the base class bi and an icon-specific class such as bi-check-circle.

Bootstrap Icons can also be used as SVG sprites, but this lesson focuses on the CSS font method. Related terms: icon font, CSS class, CDN, SVG sprite, accessibility.

Why it matters

• It gives a consistent visual style that matches Bootstrap projects.
• It is easy to add with one stylesheet link and a few classes.
• Icons can be styled with normal CSS properties such as color and font-size.
• It works well for common UI actions like check, close, search, download, and settings.
• It avoids writing custom SVG markup for every small icon.

Syntax or steps

1. Add the Bootstrap Icons stylesheet to the page, usually in the <head>.
2. Insert an empty inline element, commonly <i>, where the icon should appear.
3. Give the element the base class bi.
4. Add the icon class, such as bi-check-circle.
5. Use CSS or utility classes to adjust size and color if needed.

Example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bootstrap Icons</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
</head>
<body>
  <p>
    <i class="bi bi-check-circle" aria-hidden="true"></i>
    Saved successfully
  </p>
</body>
</html>

Part-by-part explanation

• The <link> loads the Bootstrap Icons CSS from a CDN.
• The <i> element is empty; the icon appears through CSS.
• bi activates the Bootstrap Icons font and base styles.
• bi-check-circle selects the check-circle glyph.
• aria-hidden="true" tells screen readers to ignore the decorative icon because the text already explains the meaning.

Common mistakes

• Forgetting the stylesheet link, which causes the icon to disappear or show as a blank box.
• Using only the icon class, such as bi-check-circle, without the required base class bi.
• Guessing icon names; icon names must match the Bootstrap Icons set exactly.
• Using an icon as the only meaning, such as a check mark with no text, which can be inaccessible.

When to use it

Bootstrap Icons is a good choice when you want a simple, consistent icon set with minimal setup. Compare it with nearby approaches:

Practice

Guided exercise: Create a small HTML page that loads Bootstrap Icons and displays three icons: a check circle, an exclamation circle, and an info circle. Put each icon next to a short label such as “Done,” “Warning,” and “Help.”

Expected output: Three lines of text, each beginning with a visible icon.

Challenge: Add a CSS rule that makes all icons green and twice as large as normal text.

Solution hint: Use a selector such as .bi and set color: green; and font-size: 2em;.

Quick check

Question: What two classes are normally required to display a Bootstrap Icon using the CSS font method?

Answer: The base class bi and the specific icon class, such as bi-check-circle.

Summary

Bootstrap Icons provides a simple way to add common UI icons using a stylesheet and CSS classes. The core pattern is to load the Bootstrap Icons CSS, then use bi plus an icon name on an empty element. Keep icons decorative when text already explains their meaning, and use CSS to adjust size and color.