DOCSEARCHbyAlgolia
Submit Docs

Bootstrap Icons Documentation

repository·main·Indexed 27 days ago

https://github.com/twbs/icons

Official open-source SVG icon library for Bootstrap, providing over 2,000 icons. Version 1.13.1 supports integration via npm, Composer, CDN, embedded SVGs, SVG sprites, icon fonts, and CSS data URIs. Includes guidance on accessibility, Sass variable configuration, and local development setup using Hugo.

Tokens
2.6K
Snippets
11
Records
17
Agent score
93%

What's inside Bootstrap Icons

  2. Install Bootstrap Icons via npm or Composer

    main

    Bootstrap Icons can be installed as a package containing processed SVGs.

    To install via npm:

    npm i bootstrap-icons

    To install via Composer (for Packagist users):

    composer require twbs/bootstrap-icons

  3. Add new SVG icons to the library

    main

    New icons must be designed in Figma on a 16x16px grid and exported as flattened SVGs with fill (no stroke).

    To process new icons added to the icons directory:

    1. Run npm run icons to optimize SVGs with SVGO and normalize attributes.
    2. Run npm run pages to build permalink pages.
    3. Complete the generated pages.
    4. Commit the results in a new branch.

    Warning: Do not include auto-generated files such as font/** and bootstrap-icons.svg in your branch, as they cause conflicts and are typically updated in the dist files before a release.

  4. Use Bootstrap Icons in your project

    main

    Bootstrap Icons can be integrated into your application using several methods:

    • Copy-paste SVGs: Use the SVG code directly as embedded HTML.
    • <img> element: Reference the icon files via an image tag.
    • SVG sprite: Use the provided SVG sprite for efficient loading.
    • CSS: Include icons via CSS declarations.

  5. Install Bootstrap Icons via CDN

    main

    To use icon fonts quickly without local installation, include the Bootstrap Icons stylesheet from jsDelivr in your HTML <head> or via CSS @import.

    HTML link:

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

    CSS import:

    @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@{{< param version >}}/font/bootstrap-icons.min.css");

  6. Ensure accessibility for Bootstrap Icons

    main

    To make icons accessible:

    • For purely decorative icons, add aria-hidden="true".
    • For functional/meaningful icons:
      • If using <img>, provide an alt attribute.
      • If using <i> or <svg>, use role="img" and an aria-label.
      • If the icon is inside a control (like a button), provide an aria-label on the control itself.

    Examples:

    <!-- alt on <img> -->
<img src="/assets/icons/bootstrap.svg" alt="Bootstrap" ...>

<!-- role and aria-label on <i> or <svg> -->
<i class="bi-github" role="img" aria-label="GitHub"></i>
<svg class="bi" role="img" aria-label="Tools">...</svg>

<!-- aria-label on the control -->
<button aria-label="Mute">
  <svg aria-hidden="true">...</svg>
</button>
    <img src="/assets/icons/bootstrap.svg" alt="Bootstrap" ...>

  8. Set up the local development environment

    main

    To run the documentation server locally, clone the repository, install dependencies, and start the Hugo server:

    git clone https://github.com/twbs/icons/
cd icons
npm i
npm start

    Once started, access the documentation at http://localhost:4000.

  9. Configure Bootstrap Icons Sass variables

    main

    When using Bootstrap in a Sass project, you may need to adjust the $bootstrap-icons-font-dir variable to point to the location of the font files (typically within node_modules). This is often required for bundlers like Vite or Parcel.

    // Update the import directory to point to it's location within node_modules
$bootstrap-icons-font-dir: "bootstrap-icons/font/fonts";

// Import the Sass files as usual
@import "bootstrap-icons/font/bootstrap-icons";
    $bootstrap-icons-font-dir: "bootstrap-icons/font/fonts";
@import "bootstrap-icons/font/bootstrap-icons";

  10. Workarounds for SVG known issues

    main

    When working with SVGs, consider these common issues and fixes:

    • Focus in IE/Edge Legacy: SVGs receive focus by default. Add focusable="false" to the <svg> element.
    • Screen Reader Support for <img>: Screen readers may skip SVGs in <img> tags. Add role="img" to the <img> element.
    • IE Sprite Support: External SVG sprites may not work in Internet Explorer. Use the svg4everybody polyfill.

  11. Use Bootstrap Icons as an icon font

    main

    Include the icon web fonts via CSS, then use class names to reference icons (e.g., <i class="bi bi-alarm"></i>). You can change the appearance using font-size and color.

    <i class="bi bi-alarm"></i>
<i class="bi bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>
    <i class="bi bi-alarm"></i>

  12. Use Bootstrap Icons in CSS via Data URIs

    main

    You can use SVGs within CSS using background-image. Ensure you escape special characters like # (use %23 for hex colors). The viewBox attribute is required for resizing with background-size, and the xmlns attribute is mandatory.

    .bi::before {
  display: inline-block;
  content: "";
  vertical-align: -.125em;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}