Have you ever struggled to find the perfect icon for your website or app? You know, something that's clean, consistent, and just... works? Look no further! Bootstrap Icons, a free and open-source SVG icon library, offers a fantastic solution. In this guide, we'll walk through how to easily integrate and use these versatile icons in your projects.

Why Choose Bootstrap Icons?

Before we dive in, let's talk about why Bootstrap Icons are a great choice:

  • Free and Open-Source: They're free to use, even in commercial projects, with an MIT license.

  • High-Quality SVGs: Scalable Vector Graphics mean they look crisp at any size and on any device, with no loss of quality.

  • Extensive Library: Hundreds of icons covering a wide range of categories are available.

  • Easy to Integrate: The setup is straightforward, with multiple ways to get started.

  • Consistent Design: Bootstrap Icons are designed to complement the Bootstrap framework, making them perfect for projects using Bootstrap, or if you want clean, cohesive iconography.

Getting Started with Bootstrap Icons

Here are the main ways to include Bootstrap Icons in your project:

1. Using the CDN (Content Delivery Network)

This is the quickest and simplest way to get started. Add the following <link> tag to the <head> section of your HTML:

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

content_copydownload

Use code with caution.Html

Note: Always check for the latest version on the official Bootstrap Icons website or CDN providers. Replace 1.11.3 with the current version.

2. Installing via npm or Yarn (for project management)

If you're using a project manager, you can install the icons like this:

  • npm: npm install bootstrap-icons

  • Yarn: yarn add bootstrap-icons

Then, import the CSS file in your project's main CSS or JS file. For example if using sass:

@import "~bootstrap-icons/font/bootstrap-icons.css";

content_copydownload

Use code with caution.Scss

You might also need to configure your build tools so that they copy the required font files into a location that your website can access. For more information refer to your bundler documentation (webpack, vite, esbuild, parcel...).

3. Download and Host Locally

You can also download the bootstrap-icons.css file and the fonts folder from the Bootstrap Icons repository and host them yourself. Include the bootstrap-icons.css file in your HTML like a normal stylesheet and that is it.

How to Use Icons

Once you've included the CSS file, using an icon is as simple as adding an <i> tag with the corresponding class:

<i class="bi bi-star-fill"></i>   <!-- Filled star icon -->
<i class="bi bi-heart"></i>        <!-- Empty heart icon -->
<i class="bi bi-check-circle"></i>  <!-- Check circle icon -->
<i class="bi bi-alarm"></i>  <!-- Alarm icon -->

content_copydownload

Use code with caution.Html

  • The base class is always bi.

  • Then, add bi-icon-name, replacing icon-name with the actual icon name. You can find all the icon names in the official documentation.

  • You can use standard CSS properties to style the icons, like font-size, color and more.

Example: Simple Website Navigation

Here's a quick example showing Bootstrap Icons in a navigation bar:

<nav>
  <ul>
    <li><a href="#"><i class="bi bi-house"></i> Home</a></li>
    <li><a href="#"><i class="bi bi-search"></i> Search</a></li>
    <li><a href="#"><i class="bi bi-person"></i> Profile</a></li>
    <li><a href="#"><i class="bi bi-gear"></i> Settings</a></li>
  </ul>
</nav>

content_copydownload

Use code with caution.Html

Accessibility

Remember accessibility! Screen readers won't announce icons by default, so always add meaning with text or aria-label.

<button aria-label="Close"><i class="bi bi-x"></i></button>
<a href="/home"><i class="bi bi-house" aria-hidden="true"></i>Home</a>

content_copydownload

Use code with caution.Html

  • aria-label is useful when the icon itself is the only content in the button for example.

  • aria-hidden="true" when the icon is supplementary and has an associated visible text.

Customization

You can easily customize the icons' size, color, and spacing using CSS. For example:

<i class="bi bi-info-circle" style="font-size: 2rem; color: #007bff;"></i>

content_copydownload

Use code with caution.Html

Final Thoughts

Bootstrap Icons offer a fantastic and easy way to enhance your web design with consistent, high-quality iconography. They are quick to integrate and can significantly improve the user interface of any web project. Try them out and see the difference they make! Be sure to browse the official website to check for the latest icons and updates.