Type to generate custom UI components with AI

Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

A Complete Guide to Using Bootstrap Icons

Are you looking to add icons to your web applications? Bootstrap provides a library of over 2000 free icons that can be integrated into any web application, even if you aren’t using Bootstrap for your project.

In this tutorial, we’ll cover the basics of using icons in modern web development. Then show you how to install and use the Boostrap icons library.

Before we begin, let’s first get familiar with Bootstrap and why it’s important to use icons for your web projects.

Introduction to Bootstrap

Bootstrap is a widely used open-source framework primarily for front-end web development. Think of it as a toolkit that helps in building responsive and visually appealing websites with ease. For beginners, “responsive” means that the website will look great on devices of all sizes, from giant desktop monitors to tiny smartphone screens.

Bootstrap Icons are an integral part of the framework, serving as a library of open-source, SVG (Scalable Vector Graphics) icons. These icons can be used alongside Bootstrap components or on their own in web projects.

If you’d like to explore already-built templates that include some of these icons, then checkout PureCode AI’s component library. Our library includes responsive templates to help you speed up your development time. PureCode AI also lets you generate the component you want in real-time by passing a prompt to the model.

Get Started With PureCode AI

Why Use Bootstrap Icons?

  1. Intuitive Design: Icons help make user interfaces more intuitive. They offer visual cues that can guide users in navigating and understanding a website, much like symbols on a map.

  2. Aesthetic Appeal: Icons add an aesthetic touch to a website. They can make interfaces look more polished and professional.

  3. Efficiency: Icons can convey a lot of information in a small space, making them efficient tools for communication in design. They can replace longer text descriptions, saving space and potentially improving page load times.

  4. Flexibility: Since they are SVGs, Bootstrap Icons are scalable without loss of quality. This means they look sharp and clear at any size, which is crucial for responsive design.

Getting Started with Bootstrap Icons

Bootstrap Icons are a collection of open-source, SVG-based symbols ready to be used in web development. They complement the Bootstrap framework but can also be used independently. These icons are perfect for enhancing the user interface with clean, scalable graphics.

Requirements for Using Bootstrap Icons

  1. Bootstrap Dependency: The good news is, that Bootstrap Icons don’t require you to have Bootstrap installed. They’re independent, meaning you can use them with or without the Bootstrap framework. This flexibility is great for developers who might be using different frameworks or custom CSS.

  2. Browser Support: Since Bootstrap Icons are SVGs, they’re supported in all modern web browsers, including Chrome, Firefox, Safari, and Edge. If you’re using Internet Explorer, you might experience some compatibility issues because the browser isn’t supported by most framework.

  3. SVG Support: Your project should be set up to handle SVG files. But this is usually the case with most modern web development environments.

Step-by-Step Guide to Adding Bootstrap Icons to a Website

Step 1: Include Bootstrap Icons

First things first, you need to include Bootstrap Icons in your project. There are several ways to do this:

  • Using a CDN (Content Delivery Network): This is the easiest method. Simply add the following line in the <head> section of your HTML file:

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

    This link imports the Bootstrap Icons stylesheet from a CDN.

  • Downloading and Hosting Locally: If you prefer to have the files on your server, download the Bootstrap Icons from the official website. Then, link the bootstrap-icons.css file in your HTML.

https://youtu.be/8VbF_CGJmqs?si=lt8DxrBVr4qT5zub

Step 2: Using Icons in Your Web Page

Once the icons are included, using them is a breeze. Simply add an <i> tag with the appropriate class name for the icon you want to use. For example:

<i class="bi bi-alarm"></i>

This line of code will display an alarm clock icon. The bi class is a general class name for Bootstrap Icons, and bi-alarm specifies the specific icon. Here is how the icon looks when you preview your template.

Step 3: Customization

Bootstrap Icons are SVGs, so you can style them with CSS just like you would style any other HTML element. Want to change the color or size? No problem! Here’s an example:

.bi-alarm {
  color: red;
  font-size: 2rem;
}

This CSS will make your alarm icon red and increase its size.

Step 4: Explore and Experiment

Bootstrap Icons offers a wide range of icons for various purposes. The best way to get familiar with them is to explore the Bootstrap Icons library. Experiment with different icons and styling to see what works best for your project.

Categories of Bootstrap Icons

Bootstrap Icons are neatly categorized to help developers quickly find what they need. These categories range from basic UI components to more specific themes like social media or navigation. Here’s a closer look at some of these categories:

1. Navigation Icons: These icons are all about guiding users through a website or app. Think of them as the road signs of the digital world.

  • bi-arrow-left: A simple left-pointing arrow, perfect for back buttons.

  • bi-house-door: Represents a home, typically used for a homepage link.

2. Social Media Icons: These icons are digital handshakes, connecting users to your social network profiles. Some examples:

  • bi-facebook: The iconic “f” logo, instantly recognizable for linking to Facebook profiles.

  • bi-twitter: The little bird that’s synonymous with Twitter.

3. UI Elements Icons: These icons are the nuts and bolts of user interface design, representing common actions and items. Here are a some example icon class name.

  • bi-gear: Symbolizes settings or adjustments.

  • bi-plus-circle: Often used for adding new items or actions.

4. File Type Icons: These icons represent different file types, making it easier to identify what you’re downloading or working with. Here are a few examples.

  • bi-file-earmark-pdf: Indicative of PDF files.

  • bi-file-earmark-zip: Represents ZIP files.

5. Weather Icons: Perfect for displaying weather conditions in apps or on websites. Here are some examples.

  • bi-cloud-sun: A partly cloudy day with some sun.

  • bi-cloud-rain-heavy: Signifies heavy rainfall.

6. Device Icons: These icons represent various electronic devices. Here are some examples

  • bi-phone: Symbolizes a mobile phone.

  • bi-laptop: Depicts a laptop computer.

7. Payment Icons: Useful for e-commerce sites, these icons represent different payment methods or actions. Here are some examples of commonly used payment icons.

  • bi-credit-card: For credit card payments.

  • bi-cash-stack: Represents cash transactions.

Using Icons in Context

It’s important to use these icons where they make sense contextually. For instance, a bi-gear for settings is almost universally understood, while a bi-house-door effectively communicates a return to the home page.

Bootstrap Icons provide a visually coherent language that can enhance user experience when used appropriately. They bridge the gap between functionality and aesthetics, making interfaces more intuitive and engaging.

Customizing Bootstrap Icons

Customizing Bootstrap Icons is a key step in tailoring your website’s look and feel. Let’s delve into how you can adjust the size and color of these icons. We’ll also cover how to align and position them effectively within your webpage.

Changing the Size and Color of Icons

  1. Adjusting Size:

    • CSS Font-Size: The most straightforward way to change the size of Bootstrap Icons is by using the font-size CSS property. Since these icons are font-based, they scale beautifully when you adjust the font size. For example:

      .bi-heart {
        font-size: 24px; /* Makes the heart icon larger */
      }
    • SVG Width and Height: If you’re using SVG directly, you can manipulate the width and height attributes to scale your icons.

  2. Altering Color:

    • CSS Color Property: You can change an icon’s color using the color property in CSS. This is particularly useful for ensuring your icons match your brand’s color scheme:

      .bi-alarm {
        color: blue; /* Sets the color of the alarm icon to blue */
      }
    • Contextual Coloring: Remember, icons inherit the color of their parent element, so placing an icon inside an element with a specific text color will automatically change the icon’s color too.

Techniques for Aligning and Positioning Icons

  1. Vertical Alignment: This property is useful when you need to align icons with adjacent text. Adjusting the vertical-align CSS property can help you position the icon perfectly in line with your text.

    .bi-envelope {
      vertical-align: middle;
    }
  2. Positioning within Elements:

    • Flexbox or Grid: Utilize modern CSS layout techniques like Flexbox or CSS Grid for more complex layouts. These are especially handy when you need to place icons next to larger elements like headings or inside buttons.

    • Margin and Padding Adjustments: Sometimes, all you need is a bit of tweaking with margins and paddings to get your icon positioned just right.

  3. Aligning with Text:

    • Line-Height Matching: To ensure your icons align with your text, match the line-height of the text with the icon’s size. This keeps them on the same visual line and maintains harmony in your design.

  4. Responsive Positioning:

    • Media Queries: For different device sizes, use media queries to adjust the icon’s position. This ensures your icons look great on both mobile and desktop screens.

Advanced Usage

Advanced usage of Bootstrap Icons involves integrating them seamlessly with Bootstrap components and adding interactivity through CSS and JavaScript. Let’s explore these concepts in detail.

Combining Bootstrap Icons with Bootstrap Components

Bootstrap Icons can be added into various Bootstrap components to enhance their functionality and aesthetic appeal. Here’s how you can do it:

Icons in Buttons: Use icons within button elements to make actions more intuitive. For example, a plus icon inside a button can indicate an “Add” action.

<button class="btn btn-primary">
  <i class="bi bi-plus"></i> Add Item
</button>

The code above adds a plus icon to a Bootstrap button, making it clear that clicking the button will add something.

Navigation Bars: Icons can be used in navigation bars to visually represent different sections or actions.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <i class="bi bi-house-door"></i> Home
  </a>
  <!-- other nav items -->
</nav>

In the code above, we added a home icon next to the “Home” label in a navigation bar.

Form Controls: Icons can also be added to input fields to indicate the type of data expected (e.g., an envelope icon for email fields). Here is an example.

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">
      <i class="bi bi-person"></i>
    </span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username">
</div>

In the code above, we used the input group class to combine an icon with an input field. Then we added the person icon, indicating that the field expects a the person’s username.

Sidenote: If you’d like to learn more about input elements in Bootstrap, be sure to check out our Bootstrap Input tutorial for a complete walkthrough.

Creating Interactive Icons with CSS and JavaScript

Hover Effects with CSS: You can enhance icons with CSS hover effects to improve user interaction. For example, changing color or size on hover can indicate that an icon is clickable.

.bi:hover {
  color: #007bff; /* Change color on hover */
  transform: scale(1.1); /* Slightly increase the size */
}

JavaScript Interactivity: JavaScript can be used to add dynamic behaviors to icons. For instance, toggling an icon’s class on click to change its appearance. Let’s say you have a bookmark icon that users can click to bookmark a page.

HTML:

<i class="bi bi-bookmark" id="bookmark-icon"></i>

We can use JavaScript to toggle the ‘bi-bookmark-fill’ class on the icon when clicked. This would change its appearance to indicate that the item is bookmarked. Here is the script for this implementation.

let icon = document.getElementById('bookmark-icon')

icon.addEventListener('click', function() {
  if (icon.className === "bi bi-bookmark") {
    icon.className = 'bi bi-bookmark-fill'
  } else {
    icon.className = 'bi bi-bookmark'
  }
});

Best Practices for Using Bootstrap Icons

When using Bootstrap Icons, it’s crucial to follow best practices, especially regarding accessibility and context-appropriate selection.

Accessibility Considerations

1. Use of ARIA Labels: ARIA (Accessible Rich Internet Applications) labels help screen readers understand the meaning of icons, which are typically visual elements.

To implement this, add aria-label attributes to icons, especially if they are used as standalone buttons or links. For example:

<button aria-label="Close" class="btn">
  <i class="bi bi-x-lg"></i>
</button>

In this example, a screen reader will announce “Close” instead of trying to describe the icon, making it clear what the button does.

2. Hidden Decorative Icons: If an icon is purely decorative and adds no additional information, it should be hidden from screen readers to avoid confusion. This can be done using aria-hidden=”true”:

<span aria-hidden="true"><i class="bi bi-star"></i></span>

3. Keyboard Navigation: Ensure that icons used as interactive elements (like buttons or links) are navigable using keyboard controls. This is often handled automatically in frameworks like Bootstrap but always good to check.

Tips for Selecting Appropriate Icons

1. Clarity and Recognizability: Choose icons that are instantly recognizable and convey a clear message. For example, a magnifying glass for search, a house for home, etc. Avoid abstract icons that might confuse users.

2. Consistency in Style and Size: Use icons that are consistent in style (outline, filled, etc.) and size relative to each other. This uniformity contributes to a cohesive visual design.

3. Balancing with Text: When using icons with text, make sure they complement each other. The icon should reinforce the message of the text, not overshadow it.

4. Testing with Users: User testing can provide valuable feedback on whether your chosen icons are effectively communicating their intended function or message.

Bootstrap Icons Vs Font Awesome Icons

Bootstrap Icons are designed specifically for Bootstrap but can be used independently. They blend seamlessly with Bootstrap components, making them a natural choice for those already using the Bootstrap framework.

Font Awesome, on the other hand, is one of the most popular icon libraries with a large selection of icons. It’s framework-agnostic, meaning it can be used with any web development framework or even with plain HTML/CSS.

Comparison table: https://www.notion.so/Table-f8b3ac81986145a1a505bd00121a37ad?pvs=4

Frequently Asked Questions

Below we’ve answered the top questions about using Bootstrap icons.

What are Bootstrap Icons and why are they important?

Bootstrap Icons are a collection of graphical symbols or glyphs that are used to enhance the user interface of web applications and websites.

Icons play a crucial role in web design by improving user experience. They provide visual cues that can make navigation more intuitive, convey information quickly, and save space.

How do I add Bootstrap Icons to my website?

The easiest way is to include Bootstrap Icons is with a Content Delivery Network (CDN). You simply add a link to the Bootstrap Icons stylesheet in your HTML file’s <head> section:

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

Alternatively, you can download the icon files from the Bootstrap Icons website and include them in your project using NPM scripts. For example, npm i bootstrap-icons.

Can Bootstrap Icons be customized in terms of size and color?

Yes, Bootstrap Icons can be easily customized. Since they are font-based, you can change their size using the font-size CSS property. To change the color, you can use the color CSS property. This flexibility allows you to adapt the icons to fit the design of your website.

Is Bootstrap Icons free?

Absolutely! Bootstrap Icons are open-source and free to use. They are part of the Bootstrap framework, which is known for being accessible and developer-friendly. This makes them a popular choice for web developers looking to enhance their projects without incurring extra costs.

How to add an icon inside an input Bootstrap?

To add an icon inside an input field in Bootstrap, you can use Bootstrap’s input group component. Here’s a simple example:

<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon1">
    <i class="bi bi-search"></i> <!-- Icon -->
  </span>
  <input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="basic-addon1">
</div>

In this example, a search icon is placed inside the input field to indicate its purpose. This is a common design pattern for enhancing the user experience.

Final Thoughts on Using Icons

That’s it! You’ve now learned how to install and use the Bootstrap icons library for your web project. These icons can be used with any frontend web framework, including Bootstrap, Tailwind CSS, vanilla CSS, etc.

In this tutorial, we covered all there is to know about using Bootstrap icons, including combining them with other components on your web app.

Building with Bootstrap speeds up development time. However, you can take it a step further and use some of PureCode AI’s ready-made templates. Purecode AI provides over 10k AI-generated custom components to cater to any component you intend to build on your app.

Checkout PureCode AI Components

Further Reading:

If you enjoyed this post, then check out others from our blog to help you become a better developer.

https://youtu.be/B2Hs9XrzBsU?si=QXgiPQIDNKnvb6o6

David Ozokoye

David Ozokoye

Software Engineer and Technical Writer