BootstrapHow-ToBeginner · 3 min read

How to Use Icons in Bootstrap: Simple Guide with Examples

To use icons in Bootstrap, include the Bootstrap Icons library in your project and add icon classes like bi bi-alarm to an  or  tag. This lets you easily add scalable vector icons that match Bootstrap's style.

📐

Syntax

Bootstrap Icons are used by adding specific classes to an HTML element like  or . The main class is bi, followed by the icon name class like bi-alarm.

Example parts:

bi: base class for all Bootstrap Icons
bi-alarm: specific icon name

html

<i class="bi bi-alarm"></i>

Output

An alarm clock icon appears

💻

Example

This example shows how to include Bootstrap Icons via CDN and use an alarm icon inside a button.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Icons Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body>
  <button type="button" class="btn btn-primary">
    <i class="bi bi-alarm"></i> Alarm
  </button>
</body>
</html>

Output

A blue Bootstrap styled button with an alarm clock icon followed by the text 'Alarm'

⚠️

Common Pitfalls

Common mistakes when using Bootstrap Icons include:

Not including the Bootstrap Icons CSS file, so icons don't show.
Using incorrect icon class names or typos.
Using  tags without the bi base class.

Always check the icon name on the official Bootstrap Icons site and ensure the CSS is loaded.

html

<!-- Wrong: missing 'bi' base class -->
<i class="alarm"></i>

<!-- Right: includes 'bi' base class -->
<i class="bi bi-alarm"></i>

Output

Wrong code shows no icon; right code shows alarm icon

📊

Quick Reference

Here is a quick summary to use Bootstrap Icons:

Step	Description
1	Include Bootstrap Icons CSS via CDN or local files
2	Use `<i>` or `<span>` with classes `bi` and `bi-iconname`
3	Check icon names on https://icons.getbootstrap.com/
4	Style icons with CSS or Bootstrap utilities if needed

✅

Key Takeaways

Always include the Bootstrap Icons CSS file to display icons.

Use the base class 'bi' plus the specific icon class like 'bi-alarm' on an element.

Check official icon names to avoid typos and missing icons.

Icons are scalable vector graphics and style well with Bootstrap utilities.

You can use icons inside buttons, links, or anywhere inline in your HTML.