or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

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

svg-sprite.mddocs/

SVG Sprite System

Bootstrap Icons provides a comprehensive SVG sprite system that combines all 2,078 icons into a single reusable file. This approach enables efficient caching, reduces HTTP requests, and maintains the flexibility and scalability of SVG graphics.

Capabilities

Sprite File Structure

The main sprite file contains all icons as SVG symbols that can be referenced individually.

<!-- Sprite file: bootstrap-icons.svg (1.1MB) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol class="bi bi-alarm" viewBox="0 0 16 16" id="alarm">
    <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"/>
  </symbol>
  
  <symbol class="bi bi-house-door" viewBox="0 0 16 16" id="house-door">
    <path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"/>
  </symbol>
  
  <!-- ... 2,076 more symbols -->
</svg>

Symbol Structure

Each icon is defined as an SVG symbol with consistent attributes.

<!-- Symbol definition pattern -->
<symbol class="bi bi-{icon-name}" viewBox="0 0 16 16" id="{icon-name}">
  <path d="..."/>
  <!-- Additional paths for complex icons -->
</symbol>

Symbol Properties:

  • class: Bootstrap Icons class "bi bi-{icon-name}"
  • viewBox: Always "0 0 16 16" for consistent scaling
  • id: Icon name for referencing (e.g., "alarm", "house-door")

Basic Usage with <use> Element

Reference sprite symbols using SVG <use> elements.

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

<svg class="bi" width="16" height="16" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#house-door"/>
</svg>

<svg class="bi" width="16" height="16" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#gear"/>
</svg>

Inline Sprite Usage

Embed the sprite directly in HTML for same-page references without external files.

<!DOCTYPE html>
<html>
<head>
  <style>
    .sprite-container { display: none; }
    .bi { display: inline-block; }
  </style>
</head>
<body>
  <!-- Embed sprite at top of page (hidden) -->
  <div class="sprite-container">
    <svg xmlns="http://www.w3.org/2000/svg">
      <symbol class="bi bi-alarm" viewBox="0 0 16 16" id="alarm">
        <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"/>
      </symbol>
      <!-- Add more symbols as needed -->
    </svg>
  </div>
  
  <!-- Use symbols throughout the page -->
  <svg class="bi" width="16" height="16" fill="currentColor">
    <use href="#alarm"/>
  </svg>
</body>
</html>

CSS Styling

Style sprite-based icons using standard CSS properties.

/* Base icon styling */
.bi {
  display: inline-block;
  vertical-align: -0.125em;
  fill: currentColor;
}

/* Size variations */
.bi-sm { width: 12px; height: 12px; }
.bi-lg { width: 20px; height: 20px; }
.bi-xl { width: 24px; height: 24px; }

/* Color variations */
.bi-primary { fill: #007bff; }
.bi-success { fill: #28a745; }
.bi-danger { fill: #dc3545; }
.bi-warning { fill: #ffc107; }

/* Custom styling */
.bi-custom {
  width: 32px;
  height: 32px;
  fill: #6f42c1;
  transition: fill 0.2s ease;
}

.bi-custom:hover {
  fill: #5a32a3;
}

JavaScript Integration

Dynamically work with sprite icons using JavaScript.

// Create icon element dynamically
function createIcon(iconName, options = {}) {
  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
  
  svg.classList.add('bi');
  svg.setAttribute('width', options.width || '16');
  svg.setAttribute('height', options.height || '16');
  svg.setAttribute('fill', options.fill || 'currentColor');
  
  use.setAttributeNS('http://www.w3.org/1999/xlink', 'href', `bootstrap-icons.svg#${iconName}`);
  
  svg.appendChild(use);
  return svg;
}

// Usage
const alarmIcon = createIcon('alarm', { width: '24', height: '24', fill: 'red' });
document.body.appendChild(alarmIcon);

// Change icon dynamically
function changeIcon(svgElement, newIconName) {
  const useElement = svgElement.querySelector('use');
  useElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', `bootstrap-icons.svg#${newIconName}`);
}

Build System Integration

Webpack:

// Webpack configuration to handle SVG sprites
module.exports = {
  module: {
    rules: [
      {
        test: /bootstrap-icons\.svg$/,
        use: ['file-loader']
      }
    ]
  }
};

// Usage in modules
import spriteUrl from 'bootstrap-icons/bootstrap-icons.svg';

const iconHTML = `
  <svg class="bi" width="16" height="16" fill="currentColor">
    <use href="${spriteUrl}#alarm"/>
  </svg>
`;

Vite:

// vite.config.js
export default {
  assetsInclude: ['**/*.svg']
};

// Usage
import spriteUrl from 'bootstrap-icons/bootstrap-icons.svg?url';

React Component Example

import React from 'react';

const BootstrapIcon = ({ 
  name, 
  size = 16, 
  color = 'currentColor', 
  className = '', 
  ...props 
}) => (
  <svg 
    className={`bi ${className}`}
    width={size} 
    height={size} 
    fill={color}
    {...props}
  >
    <use xlinkHref={`bootstrap-icons.svg#${name}`} />
  </svg>
);

// Usage
const App = () => (
  <div>
    <BootstrapIcon name="alarm" size={24} color="red" />
    <BootstrapIcon name="house-door" size={20} />
    <BootstrapIcon name="gear" className="rotating-icon" />
  </div>
);

Vue Component Example

<template>
  <svg 
    :class="['bi', className]"
    :width="size" 
    :height="size" 
    :fill="color"
  >
    <use :xlink:href="`bootstrap-icons.svg#${name}`" />
  </svg>
</template>

<script>
export default {
  name: 'BootstrapIcon',
  props: {
    name: { type: String, required: true },
    size: { type: [String, Number], default: 16 },
    color: { type: String, default: 'currentColor' },
    className: { type: String, default: '' }
  }
};
</script>

Performance Benefits

Advantages:

  • Reduced HTTP Requests: Single file for all icons
  • Better Caching: One file caches all icons
  • Smaller Total Size: Shared SVG overhead across icons
  • Scalable: Vector-based for any resolution
  • Customizable: Full SVG styling capabilities

Considerations:

  • Initial Load: Larger initial download (1.1MB)
  • Unused Icons: Downloads all icons even if not used
  • CORS: May require same-origin or CORS headers

Browser Compatibility

<!-- Modern browsers (preferred) -->
<use href="bootstrap-icons.svg#icon-name"/>

<!-- Legacy browser support -->
<use xlink:href="bootstrap-icons.svg#icon-name"/>

Supported Browsers:

  • Chrome 24+
  • Firefox 24+
  • Safari 7+
  • Edge 12+
  • Internet Explorer 9+ (with xlink:href)

Icon Reference Format

All 2,078 icons are available using their kebab-case names:

<!-- Reference pattern -->
<use href="bootstrap-icons.svg#{icon-name}"/>

<!-- Examples -->
<use href="bootstrap-icons.svg#alarm"/>
<use href="bootstrap-icons.svg#alarm-fill"/>
<use href="bootstrap-icons.svg#house-door"/>
<use href="bootstrap-icons.svg#house-door-fill"/>
<use href="bootstrap-icons.svg#gear"/>
<use href="bootstrap-icons.svg#bootstrap"/>
<use href="bootstrap-icons.svg#check-circle"/>
<use href="bootstrap-icons.svg#x-circle"/>