How to Add Colors to Bootstrap Icons with CSS

Using icons is great for every website as they provide easy visual information. But what if you want to change the Bootstrap Icons' standard colors? Fortunately, CSS allows us to style them. Since Bootstrap Icons are font-based, you can change their appearance using the CSS color property. You can also adjust the font-size.

In this snippet, we’ll demonstrate how to do this step by step. Start with creating HTML.

Create HTML

Use an <h1> element for the title, and <span> elements for the icons.
To import the icon library, in the <head> section, use a <link> element with the rel and href attributes pointing to the official Bootstrap Icons CDN.

How to Add Color to Bootstrap Icons with Pure CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" />
  </head>
  <body>
    <h1>Example</h1>
    <span class="bi bi-heart icon-green"></span>
    <span class="bi bi-star icon-large"></span>
    <span class="bi bi-grid icon-red"></span>
  </body>
</html>

Try it Yourself »

Add CSS

Specify the text-align property for the <body> element.
Set the display to “inline-block” and specify the padding for the <span> element.
Set the color property for the "icon-green" and "icon-red", separately.
Set the font-size of the "icon-large".

How to Add Color to Bootstrap Icons with Pure CSS

body {
  text-align: center;
}

span {
  display: inline-block;
  padding: 10px 20px;
}

.icon-green {
  color: green;
}

.icon-red {
  color: red;
}

.icon-large {
  font-size: 25px;
}

Now, we can see the full code.

Example of adding color to Bootstrap icons:

How to Add Color to Bootstrap Icons with Pure CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" />
    <style>
      body {
        text-align: center;
      }
      span {
        display: inline-block;
        padding: 10px 20px;
      }
      .icon-green {
        color: green;
      }
      .icon-red {
        color: red;
      }
      .icon-large {
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <h1>Example</h1>
    <span class="bi bi-heart icon-green"></span>
    <span class="bi bi-star icon-large"></span>
    <span class="bi bi-grid icon-red"></span>
  </body>
</html>

Try it Yourself »

In our example, three icons are used. We changed the color of two icons and the font size of one icon.

Note: Bootstrap 3's Glyphicons were deprecated and removed in Bootstrap 4. This tutorial uses the modern, official Bootstrap Icons library, which is the recommended standard for current projects.