Bootstrap 5 Icons is a “free, high quality, open source icon library with over 1,600 icons.” It is provided by the same Twitter team who built Bootstrap. Since the icons are SVGs you can include them into your HTML in several different ways. This allows for flexibility to support how your project is setup. Using this library we will create a bootstrap button with icon.
Installing Icons
The icon set can be downloaded here. However, there is no need to pull in the whole package. Just copy in the icons you need for your project.
Embedding Icons as SVG
On our projects, we like to import the icons directly as SVG. The following example shows the phone-fill icon being added in a hidden block.
At this point, the icon is embedded in the page but not visible.
Creating a Bootstrap Button with Icon
Once the icon is embedded it is ready to use. Below is an example of using the embedded icon as part of a button.
<button type="submit" class="btn"><svg style="margin-right: 5px;" class="bi" width="1.5em" height="1.5em"><use xlink:href="#phone-fill"/></svg> Contact Us</button>This will result in a very plain looking rendered button. Next we will customize the coloring for dark backgrounds.
Customizing the Bootstrap 5 Icon Color
The are a number of ways to customize the icon color, some are documented on the Bootstrap Usage page. A more direct route which offers more flexibility is to directly update the SVG path. This direct manipulation allows each path to be colored differently. Below the SVG is being updated to a white fill so it will stand out on a dark background.
<symbol id="az-sort" viewBox="0 0 16 16">
<path fill="#ffffff" d=. . .
</symbol>When paired with a dark button this will result in a modern and stylish button.
