❮ Previous Next ❯

Bootstrap Icons

  • Learn how to implement and customize Bootstrap Icons in web projects.

  • Introduction to Bootstrap Icons

    What Are Bootstrap Icons ?

    Bootstrap Icons is an official, open-source icon library created and maintained by the Bootstrap team.

    Bootstrap Icons provide:

    • Vector-based icons

    • Clean and modern design

    • Easy integration with Bootstrap projects

    • Scalability without loss of quality

    They are independent of Bootstrap CSS, meaning:

    • You can use them with Bootstrap

    • You can also use them without Bootstrap

    Why Icons Are Important in Web Design

    Icons play a crucial role in modern user interfaces because they:

    • Improve visual communication

    • Reduce the need for long text

    • Enhance user experience

    • Make interfaces intuitive and user-friendly

    • Improve accessibility when used correctly

    Examples of common icon usage:

    • Search icon

    • Menu (hamburger) icon

    • Edit and delete icons

    • Social media icons

    • Navigation indicators

  • Bootstrap Icons - Overview

    Key Characteristics of Bootstrap Icons

    Bootstrap Icons are:

    • SVG-based (Scalable Vector Graphics)

    • Lightweight and fast-loading

    • Resolution-independent

    • Customizable using CSS

    • Designed to match Bootstrap’s design language

    Because they are SVG-based:

    • Icons remain sharp on all screen sizes

    • Icons scale perfectly on high-resolution displays

    Size and Styling Behavior

    Bootstrap Icons:

    • Do not come with fixed sizes

    • Inherit size from CSS

    • Can be resized using font-size or width/height

    • Can change color using CSS color property

    This makes them flexible and easy to integrate into layouts.

    Accessibility Considerations

    Bootstrap Icons are designed with accessibility in mind.

    Best practices include:

    • Using aria-label for meaningful icons

    • Hiding decorative icons from screen readers

    • Providing text alternatives where necessary

    Accessibility should always be considered when icons convey meaning.

    Ways to Use Bootstrap Icons

    There are two common ways to use Bootstrap Icons in projects:

    1. Using Icons via CDN

    2. Using Icons via npm (package manager)

    Each method serves different project needs.

    Using Bootstrap Icons via CDN

    What Does CDN-Based Icon Usage Mean ?

    Using a CDN means:

    • Icons are loaded from an external server

    • No need to download icon files

    • Quick and easy setup

    • Ideal for learning, demos, and small projects

Adding Bootstrap Icons via CDN

Includes Bootstrap Icons using CDN and allows you to use icons with the bi class inside your HTML. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Icons Setup</title>

  <!-- Bootstrap Icons CDN -->
  <link 
    rel="stylesheet" 
    href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
</head>
<body>

  <h1>
    <i class="bi bi-alarm"></i> Alarm Icon Example
  </h1>

</body>
</html>

  • This single line makes all Bootstrap Icons available.

    Using an Icon in HTML (CDN Method)

    Icons are used with the <i> tag and predefined classes.

Using Bootstrap Icon in HTML (CDN Method)

Uses the tag with predefined Bootstrap Icon classes to display an icon in the webpage. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Icon Example</title>

  <!-- Bootstrap Icons CDN -->
  <link 
    rel="stylesheet" 
    href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
</head>
<body>

  <h2>
    <i class="bi bi-alarm"></i> Alarm Icon
  </h2>

</body>
</html>

  • Explanation:

    • bi → Bootstrap Icons base class

    • bi-alarm → Specific icon name

Styling Bootstrap Icons with CSS

Bootstrap icons behave like text, so you can easily change their size and color using CSS properties like font-size and color. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Styled Icon Example</title>

  <!-- Bootstrap Icons CDN -->
  <link 
    rel="stylesheet" 
    href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
</head>
<body>

  <!-- Inline Styling -->
  <i class="bi bi-heart-fill" style="font-size: 24px; color: red;"></i>

</body>
</html>

  • Icons respond to:

    • font-size

    • color

    • margin

    • padding

    When to Use CDN for Icons

    CDN is best when:

    • You are learning Bootstrap

    • You are building small projects

    • You want fast setup

    • Internet connection is available

  • Using Bootstrap Icons via npm

    What Is npm-Based Icon Usage ?

    Using npm means:

    • Installing Bootstrap Icons as a project dependency

    • Icons become part of your local project

    • Better for large or professional projects

    • Ideal for modern front-end workflows

    This method is commonly used with:

    • React

    • Angular

    • Vue

    • Custom build systems

      Installing Bootstrap Icons Using npm

      Run the following command in your project directory:

      npm install bootstrap-icons

      This downloads the icon package into the node_modules folder.

      Accessing Icon Files

      After installation, icons are available as:

      • SVG files

      • Font files

      • CSS files

      Typical path:

      node_modules/bootstrap-icons/

      This allows developers to:

      • Import icons individually

      • Bundle icons with build tools

      • Optimize performance

    Using Bootstrap SVG Icons (NPM / Local Method)

    Uses SVG icons locally for maximum control over size, color, and customization without relying on CDN fonts. 

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG Icon Example</title>
</head>
<body>

  <!-- SVG Icon Usage -->
  <svg class="bi" width="24" height="24" fill="currentColor">
    <use xlink:href="bootstrap-icons.svg#heart-fill"></use>
  </svg>

</body>
</html>

    • Advantages of SVG usage:

      • Better accessibility

      • Fine-grained styling

      • No dependency on icon fonts

        When to Use npm Installation

        npm installation is preferred when:

        • Building large-scale applications

        • Using modern JavaScript frameworks

        • Optimizing bundle size

        • Working offline

        • Managing dependencies professionally

          CDN vs npm (Detailed Comparison)

          FeatureCDNnpm
          Setup speedVery fastModerate
          Internet dependencyRequiredNot required
          Project size controlLimitedFull control
          Best forLearning, demosProduction apps
          CustomizationBasicAdvanced
          Build tool supportNoYes

          Common Mistakes

          1. Forgetting to include the icon CDN link

          2. Using wrong icon class names

          3. Expecting icons to work without setup

          4. Overusing icons without accessibility support

          5. Mixing Bootstrap Icons with other icon libraries improperly

        ❮ Previous Next ❯