Icons Bootstrap Icons
Bootstrap Icons is a free, open-source icon library from the Bootstrap team that you can add to any page with a single stylesheet link and use with simple bi class names.
What Is Bootstrap Icons?
Bootstrap Icons is a set of more than 1,900 free icons published by the team behind the Bootstrap CSS framework. Despite the shared name, it does not require the Bootstrap framework itself - you can drop Bootstrap Icons into any project, with or without the rest of Bootstrap.
Setting It Up
The quickest way to use Bootstrap Icons is its webfont build: link the stylesheet from a CDN in your page's <head>, then reference any icon with an <i> element carrying two classes - the shared bi class, and a second class naming the specific icon.
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
</head>
<body>
<i class="bi bi-heart"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-cloud-download"></i>
</body>
</html>The Naming Pattern
Every Bootstrap Icons class starts with the base bi class, which loads the shared font styling, followed by bi-{icon-name}, which selects the specific glyph. Many icons come in an outline version and a matching -fill version, so you can pick a lighter or bolder look without switching libraries.
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
</head>
<body>
<button type="button">
<i class="bi bi-trash"></i>
Delete
</button>
</body>
</html>Because the webfont build of Bootstrap Icons is a font, sizing and coloring it works exactly like styling text: set font-size to change how big it looks and color to change its color. You'll practice that in the Sizing and Coloring lesson later in this tutorial.
Exercise: Icons Bootstrap
What CSS class prefix does Bootstrap Icons use for its icon elements?
