How to Use Bootstrap Icons? - Guide with Examples 👨🏻‍💻

Icons are the unsung heroes of web design, adding visual flair and intuitive navigation to your React projects.

Whether you’re building a sleek dashboard or a vibrant e-commerce site, the right icon library can make your user interface pop while keeping things functional.

In this guide, we’ll show you how to easily integrate and use Bootstrap Icons in your web projects. Whether you're looking to add icons quickly with a CDN or customize them with CSS, this tutorial will walk you through every step.

By the end, you’ll have the skills to implement these scalable icons in your web applications to enhance user experience and improve your site’s design.

Now, let's begin:

What are Bootstrap Icons?

Then, link the downloaded CSS file in your HTML:

<link href="path/to/bootstrap-icons.css" rel="stylesheet">

3. Using Bootstrap Icons in HTML

Once Bootstrap Icons are included in your project, you can easily start using them in your HTML.

Basic Usage

• To add an icon, just use the <i> tag with the appropriate class name:

<button class="btn btn-primary">

  <i class="bi bi-check-circle"></i> Submit

</button>

Example with Navigation:

<nav>

  <ul class="nav">

    <li class="nav-item">

      <a class="nav-link" href="#">

        <i class="bi bi-house-door"></i> Home

      </a>

    </li>

  </ul>

</nav>

6. Accessibility Considerations

To ensure your icons are accessible, consider adding aria-label or using the <svg> version for better screen reader support.

Example for an icon with aria-label :

.

You can also consider using Iconify for icons in your bootstrap projects. For example, you can check the Sneat comes with feature-rich and highly customizable dashboard which can be used for any kind of projects such as CRM, eCommerce, banking apps & much more.

Why use Bootstrap icons?

Bootstrap Icons offer several advantages for web development projects:

Easy Integration:

• Bootstrap Icons are simple to add to your project. Just include the CSS file, and you’re set, no complex setup required.

Scalable & High-Quality:

• Built in SVG format, these icons stay sharp and clear on any screen resolution, ensuring your website looks great everywhere.

Lightweight & No Dependencies:

• No extra JavaScript or complex libraries required, just pure CSS and icons, keeping your site fast and efficient.

Fully Customizable:

• Easily adjust the size, color, and style of your icons with just a bit of CSS, letting you align them with your site's design.

Huge Library:

• With over 1,500 icons, you’ll have everything you need for your project, whether you're building a simple webpage or a complex app.

Free & Open-Source:

• Bootstrap Icons are free to use under the MIT License, so you can use them in any project without worrying about licensing fees.

Conclusion

In this guide, we've shown you how to integrate and customize Bootstrap Icons in your web projects. From CDN integration to styling with CSS, these icons offer a flexible way to enhance your UI. Whether for personal or professional projects, they’re easy to implement and fully customizable.

Now that you know how to use them, it's time to add Bootstrap Icons to your next project for a sleek, modern look. Happy coding!