Bootstrap Icons

Bootstrap Icons is a free, open-source SVG icon library designed to pair naturally with Bootstrap. This lesson covers installation and common usage patterns.

Bootstrap Icons Overview

Bootstrap Icons ships as both a webfont (using <i class="bi bi-{name}"></i>) and individual SVG files, giving you flexibility to embed icons inline as font glyphs for simplicity or as SVGs for finer control over styling and accessibility.

Icons automatically inherit the current text color and font size by default when used as the webfont, making them easy to combine with Bootstrap's text and sizing utilities without any extra configuration.

Concept	Description	Common Usage
Icon font classes (bi bi-*)	Icon rendered as a font glyph	Quick, simple icon usage inline with text
Inline SVG icons	Copy-pasted <svg> markup per icon	Precise styling, animation, or accessibility control
Sizing via font-size	Icons scale with fs-* or inline font-size	Matching icon size to surrounding text or headings
Coloring via text-* utilities	Icons inherit currentColor by default	Reusing Bootstrap's color palette for icons
Accessible icon usage	aria-hidden plus visible or visually-hidden text	Icon-only buttons that remain screen-reader friendly

Bootstrap Icons Example

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

<button class="btn btn-outline-secondary">
  <i class="bi bi-download" aria-hidden="true"></i> Download
</button>

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

<i class="bi bi-star-fill text-warning fs-3"></i>

After linking the Bootstrap Icons stylesheet, icons render as font glyphs using the bi bi-{name} class pattern. The first button pairs an icon with visible text, so aria-hidden hides the redundant glyph from screen readers. The second, icon-only button relies on aria-label since it has no visible text. The final example combines a color utility and font-size utility to style a standalone icon.

Top 10 Bootstrap Icons Examples

These are the icon usage patterns you'll reach for constantly when adding visual cues to UI elements.

#	Example	Syntax
1	Basic icon	`<i class="bi bi-house"></i>`
2	Icon with text in a button	`<button class="btn btn-primary"><i class="bi bi-plus-lg"></i> Add</button>`
3	Icon-only button with aria-label	`<button class="btn btn-outline-secondary" aria-label="Search"><i class="bi bi-search"></i></button>`
4	Colored icon	`<i class="bi bi-heart-fill text-danger"></i>`
5	Larger icon via font size	`<i class="bi bi-star fs-2"></i>`
6	Icon in a navbar brand	`<a class="navbar-brand"><i class="bi bi-lightning-fill"></i> Brand</a>`
7	Icon inside an alert	`<div class="alert alert-info"><i class="bi bi-info-circle-fill me-2"></i>Note</div>`
8	Icon inside a badge	`<span class="badge bg-success"><i class="bi bi-check"></i> Verified</span>`
9	Icon toggling between two states	`<i class="bi bi-eye" id="toggleIcon"></i>`
10	SVG sprite reference (advanced usage)	`<svg><use xlink:href="bootstrap-icons.svg#heart-fill"></use></svg>`

Popular Real-World Bootstrap Icons Examples

These icon patterns commonly enhance buttons, navigation, and status indicators across real interfaces.

Scenario	Pattern
Icon-enhanced primary action button	`<button class="btn btn-primary"><i class="bi bi-plus-lg"></i> New Project</button>`
Social share icon row	`<a href="#"><i class="bi bi-twitter-x fs-4"></i></a>`
Status icon in a table row	`<i class="bi bi-check-circle-fill text-success"></i>`
Password field visibility toggle	`<i class="bi bi-eye-slash" id="togglePassword"></i>`
Navigation menu icons	`<a class="nav-link"><i class="bi bi-house-door me-2"></i>Home</a>`
Feature list with icon bullets	`<li><i class="bi bi-check2-circle text-success me-2"></i>Fast setup</li>`
Rating stars display	`<i class="bi bi-star-fill text-warning"></i><i class="bi bi-star-fill text-warning"></i><i class="bi bi-star text-warning"></i>`
Empty state illustration icon	`<i class="bi bi-inbox display-1 text-muted"></i>`

Best Practices

Use aria-hidden="true" on icons that sit alongside visible text, since the text already conveys the meaning.
Always add aria-label on icon-only interactive elements like icon buttons.
Use text color utilities (text-danger, text-warning) instead of custom inline colors for icons.
Use font-size utilities (fs-1 through fs-6) to size icons consistently with the surrounding typography scale.
Prefer the icon font for simple use cases and inline SVG when you need per-path styling or animation.
Keep icon usage purposeful; decorative icons on every single label can add visual noise.
Pin an exact Bootstrap Icons version when linking via CDN, just like the main framework.

Common Mistakes

Forgetting aria-label on icon-only buttons, leaving screen reader users without any description.
Not adding aria-hidden on redundant icons next to visible text, causing duplicate announcements.
Mixing icon font versions with mismatched Bootstrap versions, leading to missing or renamed icons.
Using icons as the sole indicator of an interactive state without any text or tooltip fallback.
Overriding icon color with inline styles instead of Bootstrap's text color utilities.
Loading the entire icon font when only a handful of icons are actually used, adding unnecessary weight.

Key Takeaways

Bootstrap Icons ships as both a webfont (bi bi-*) and standalone SVG files.
Icons inherit text color and size, working naturally with Bootstrap's color and typography utilities.
Icon-only interactive elements require an aria-label for accessibility.
aria-hidden should be used on icons that duplicate adjacent visible text.
Choosing font icons versus inline SVG depends on how much per-icon control you need.

Pro Tip

For icon-only buttons, add both an aria-label on the button and aria-hidden="true" on the icon itself—this combination gives screen readers a clear label while preventing the decorative glyph from being announced twice.