or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

css-font.mdindex.mdsvg-files.mdsvg-sprite.md
tile.json

tessl/npm-bootstrap-icons

Official open source SVG icon library for Bootstrap with 2,078 icons

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/bootstrap-icons@1.13.x

To install, run

npx @tessl/cli install tessl/npm-bootstrap-icons@1.13.0

index.mddocs/

Bootstrap Icons

Bootstrap Icons is the official open source SVG icon library for Bootstrap with 2,078 carefully designed icons. The library provides multiple distribution formats including individual SVG files, sprite sheets, and web fonts, enabling flexible integration into web applications and design systems.

Package Information

  • Package Name: bootstrap-icons
  • Package Type: npm
  • Language: SVG
  • Installation: npm install bootstrap-icons
  • CDN: Available via jsDelivr and other CDN providers
  • Alternative Installation: composer require twbs/bootstrap-icons (PHP/Composer)

Core Distribution Formats

Bootstrap Icons provides multiple ways to integrate icons into your projects:

Individual SVG Files

<!-- Direct file reference -->
<img src="node_modules/bootstrap-icons/icons/alarm.svg" alt="Alarm" width="16" height="16">

<!-- Inline SVG (copy SVG content) -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-alarm" viewBox="0 0 16 16">
  <path d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9z"/>
  <path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1zm1.038 3.018a6 6 0 0 1 .924 0 6 6 0 1 1-.924 0M0 3.5c0 .753.333 1.429.86 1.887A8.04 8.04 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5M13.5 1c-.753 0-1.429.333-1.887.86a8.04 8.04 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1"/>
</svg>

CSS/Font Integration

<!-- Include CSS -->
<link rel="stylesheet" href="node_modules/bootstrap-icons/font/bootstrap-icons.css">

<!-- Use CSS classes -->
<i class="bi bi-alarm"></i>
<span class="bi bi-house-door"></span>

SVG Sprite Usage

<!-- Use with SVG sprite -->
<svg class="bi" width="16" height="16" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#alarm"/>
</svg>

Basic Usage

<!DOCTYPE html>
<html>
<head>
    <!-- Include Bootstrap Icons CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body>
    <!-- Font-based usage -->
    <i class="bi bi-alarm"></i>
    <i class="bi bi-house-door"></i>
    <i class="bi bi-gear"></i>
    
    <!-- Image reference -->
    <img src="./icons/alarm.svg" alt="Alarm" width="16" height="16">
    
    <!-- Inline SVG for customization -->
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="red" class="bi bi-heart-fill" viewBox="0 0 16 16">
      <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314"/>
    </svg>
</body>
</html>

Architecture

Bootstrap Icons is structured around multiple distribution formats to support different development workflows:

  • SVG Assets: 2,078 individual optimized SVG files for maximum flexibility
  • Font System: Generated web fonts (WOFF/WOFF2) with CSS classes for icon fonts
  • Sprite System: Combined SVG sprite for efficient loading and caching
  • Build Tools: Node.js-based build system for optimization and generation
  • Styling: CSS and SCSS files with customizable font loading and icon styling

Capabilities

Individual SVG Files

Direct access to all 2,078 optimized SVG icon files for embedding, referencing, or customization. Perfect for build systems, React components, and custom implementations.

<!-- All icons available as individual files -->
<!-- Path pattern: icons/{icon-name}.svg -->
<!-- Examples: -->
<img src="icons/alarm.svg" alt="Alarm">
<img src="icons/house-door.svg" alt="House">
<img src="icons/gear.svg" alt="Settings">

Individual SVG Files

CSS Font Integration

Icon font system with CSS classes for easy integration into any HTML project. Includes web fonts and comprehensive CSS with all icon mappings.

/* Font face declaration */
@font-face {
  font-family: "bootstrap-icons";
  src: url("./fonts/bootstrap-icons.woff2") format("woff2"),
       url("./fonts/bootstrap-icons.woff") format("woff");
}

/* Base icon styles */
.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before {
  font-family: bootstrap-icons !important;
  /* Additional font styling properties */
}

/* Individual icon classes */
.bi-alarm::before { content: "\\f102"; }
.bi-house-door::before { content: "\\f4c6"; }
/* ... 2,076 more icon classes */

CSS Font Integration

SVG Sprite System

Combined SVG sprite containing all icons as reusable symbols. Enables efficient caching and reduces HTTP requests while maintaining SVG flexibility.

<!-- SVG sprite structure -->
<svg xmlns="http://www.w3.org/2000/svg">
  <symbol class="bi bi-alarm" viewBox="0 0 16 16" id="alarm">
    <path d="..."/>
  </symbol>
  <!-- ... 2,077 more symbols -->
</svg>

<!-- Usage with sprite references -->
<svg class="bi" width="16" height="16" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#alarm"/>
</svg>

SVG Sprite System

Icon Name to Unicode Mapping

JSON mapping file that provides Unicode character codes for all icon names, useful for programmatic icon lookup and custom font implementations.

{
  "123": 63103,
  "alarm-fill": 61697,
  "alarm": 61698,
  "house-door": 63750,
  "gear": 63525,
  /* ... 2,073 more icon mappings */
}

File Location: font/bootstrap-icons.json

Types and Structures

// Icon naming structure
type IconName = string; // kebab-case format (e.g., "alarm", "house-door", "gear")

// Available icon variants
type IconVariant = 
  | "regular"     // Base icon (e.g., "alarm")
  | "fill"        // Filled version (e.g., "alarm-fill")
  | "circle"      // Circular container (e.g., "alarm-circle")  
  | "square"      // Square container (e.g., "alarm-square")
  | "circle-fill" // Filled circular (e.g., "alarm-circle-fill")
  | "square-fill" // Filled square (e.g., "alarm-square-fill");

// SVG properties
interface SVGIcon {
  xmlns: "http://www.w3.org/2000/svg";
  width: "16";
  height: "16";
  fill: "currentColor";
  class: `bi bi-${IconName}`;
  viewBox: "0 0 16 16";
}

// CSS class naming convention
type CSSIconClass = `bi-${IconName}`;

// File paths
interface FilePaths {
  individualSVG: `icons/${IconName}.svg`;
  sprite: "bootstrap-icons.svg";
  css: "font/bootstrap-icons.css" | "font/bootstrap-icons.min.css";
  scss: "font/bootstrap-icons.scss";
  woff2: "font/fonts/bootstrap-icons.woff2";
  woff: "font/fonts/bootstrap-icons.woff";
  jsonMapping: "font/bootstrap-icons.json";
}