DEV Community

Cover image for How to Use Bootstrap Icons? - Guide with Examples 👨🏻‍💻
ThemeSelection profile image Ajay Patel
Ajay Patel for ThemeSelection

Posted on

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

#bootstrap #programming #webdev #beginners

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?

What are bootstrap Icons

Bootstrap Icons is an open-source library created by the Bootstrap team. It provides a wide range of scalable vector icons that are easily customizable with CSS. Built in SVG format, these icons ensure high-quality visuals that maintain their sharpness across various screen sizes.

Key features:

  • 1,500+ icons to choose from
  • Scalable, high-quality SVG visuals
  • Fully customizable with CSS
  • Works well with any web framework, not just Bootstrap

Installing Bootstrap Icons

There are two main ways to add Bootstrap Icons to your project: using a CDN or downloading the icons locally.

1. Using a CDN

The quickest and easiest way to get started with Bootstrap Icons is through a CDN. All you need to do is add the following link to your HTML <head> :

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
Enter fullscreen mode Exit fullscreen mode

2. Downloading the Icons

If you'd rather host the icons yourself, you can download them and add them to your project:

  • Go to Bootstrap Icons
  • Click the "Download" button to get the .zip file
  • Extract the files and include them in your project directory

Then, link the downloaded CSS file in your HTML:

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

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:

Home icon

<i class="bi bi-house-door"></i>
Enter fullscreen mode Exit fullscreen mode

This will display the "house door" icon.

Customizing Size and Color

  • You can easily customize the icon’s size, color, and more using simple CSS: 
<i class="bi bi-house-door" style="font-size: 2rem; color: #007bff;"></i>
Enter fullscreen mode Exit fullscreen mode

You can also control the size using predefined classes like bi-lg, bi-2x, bi-3x, etc.

<i class="bi bi-house-door bi-3x"></i>
Enter fullscreen mode Exit fullscreen mode

This will make the icon three times bigger.

4. Advanced customization

You can make Bootstrap Icons even more interesting by adding hover effects or animations.

Hover Effects

  • Change the icon's color when the user hovers over it: 
<i class="bi bi-heart" style="font-size: 2rem;" class="icon-hover"></i>

<style>
  .icon-hover:hover {
    color: red;
    cursor: pointer;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

Animations

  • Animate the icons using CSS keyframes. For example, you can make the icon rotate: 
<i class="bi bi-arrow-repeat" style="font-size: 2rem;" class="icon-spin"></i>

<style>
  .icon-spin {
    animation: spin 2s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>
Enter fullscreen mode Exit fullscreen mode

This will make the icon rotate continuously.

5. Using Icons with Bootstrap Components

Bootstrap Icons work perfectly with other Bootstrap components. Here’s how you can use them with buttons, navigation, and more.

Example with a Button:

Button

<button class="btn btn-primary">
  <i class="bi bi-check-circle"></i> Submit
</button>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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 :

Icon with aria lable

<i class="bi bi-eye" aria-label="View"></i>
Enter fullscreen mode Exit fullscreen mode

If you’re using the SVG version, add aria-hidden="true" :

<svg class="bi" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
  <path d="..."></path>
</svg>
Enter fullscreen mode Exit fullscreen mode

If you want more detailed information or advanced usage options, you can refer to the official Bootstrap Icons documentation.

You can also consider using Iconify for icons in your bootstrap projects. For example, you can check the Sneat Bootstrap Icons Examples which uses the iconify for the icons.

Iconify allows you to easily integrate SVG icons into your project. It simplifies the process of adding scalable vector icons without relying on multiple libraries, providing access to thousands of icons in a single package.

Sneat bootstrap template 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!

Top comments (0)