Bootstrap Icons

Bootstrap Icons is an official open-source icon library with over 2,000 icons designed to work with Bootstrap components and documentation.

Current Version: 1.13.x (check https://icons.getbootstrap.com for latest)

Installation Methods CDN (Quickest)

npm npm install bootstrap-icons

Then import:

// In SCSS @import "bootstrap-icons/font/bootstrap-icons.css";

// In JavaScript import 'bootstrap-icons/font/bootstrap-icons.css';

Download

Download from https://icons.getbootstrap.com and include files locally.

Composer (PHP)

For PHP projects using Composer:

composer require twbs/bootstrap-icons

Then reference icons from the vendor directory:

// Laravel Blade example Heart

// Symfony Twig example Heart

Usage Methods Icon Fonts (Recommended for Most Cases)

Icon fonts are the simplest method for most projects:

Easy syntax: Just add Automatic sizing: Icons scale with surrounding text Color inheritance: Icons use the parent's color property Single dependency: One CSS file provides all icons

For advanced use cases (color gradients, animation, or offline/email), consider SVG methods instead.

Embedded SVG

Copy SVG code directly from the website:

Benefits of embedded SVG:

No external dependencies Full CSS control Can be manipulated with JavaScript currentColor inherits text color SVG Sprite

Include sprite once, reference icons:

Or reference external sprite file:

External Image

Reference icon SVG files directly via element:

When to use:

Email templates (no CSS/font dependencies) Simple static pages Content management systems When caching individual icons

Trade-offs:

Cannot inherit text color (use CSS method for that) Each icon is a separate HTTP request (unless using HTTP/2) Requires explicit width/height attributes CSS Method

Include icons via CSS background-image or mask:

/ Background-image approach (fixed color) / .icon-heart { display: inline-block; width: 1em; height: 1em; background-image: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/icons/heart.svg"); background-size: contain; background-repeat: no-repeat; }

/ Mask approach (inherits currentColor) / .icon-heart-mask { display: inline-block; width: 1em; height: 1em; background-color: currentColor; mask-image: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/icons/heart.svg"); mask-size: contain; mask-repeat: no-repeat; -webkit-mask-image: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/icons/heart.svg"); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; }

When to use:

Decorative icons applied via CSS classes Icons that need to inherit text color (use mask approach) Avoiding markup changes

Trade-offs:

Background-image: Cannot change color dynamically Mask approach: Requires vendor prefixes for Safari (-webkit-mask-*) Both: Not accessible without additional ARIA markup Styling Icons Sizing

Coloring

Vertical Alignment

Accessibility Icons with Meaning

When icons convey meaning, provide accessible text:

Decorative Icons

Hide purely decorative icons from screen readers:

Icon with Visible Text

When text is visible, hide icon from screen readers:

Common Patterns Button with Icon

Navigation with Icons

Home
Profile

List with Icons

Feature one
Feature two
Not included

Social Icons

Icon Badges

Popular Icon Names Actions

bi-plus, bi-dash, bi-x, bi-check, bi-pencil, bi-trash, bi-download, bi-upload, bi-search, bi-filter

Navigation

bi-arrow-left, bi-arrow-right, bi-arrow-up, bi-arrow-down, bi-chevron-left, bi-chevron-right, bi-house, bi-list, bi-grid

UI Elements

bi-bell, bi-gear, bi-sliders, bi-three-dots, bi-three-dots-vertical, bi-person, bi-people, bi-envelope, bi-chat

Status

bi-check-circle, bi-x-circle, bi-exclamation-circle, bi-info-circle, bi-question-circle

Files

bi-file, bi-folder, bi-image, bi-film, bi-music-note, bi-file-pdf, bi-file-word, bi-file-excel

Social

bi-facebook, bi-twitter-x, bi-instagram, bi-linkedin, bi-github, bi-youtube, bi-discord, bi-slack

Additional Resources Reference Files references/icon-categories.md - Full icon list organized by category (Actions, Navigation, UI Elements, Status, Files, Media, Social, Devices, Weather, E-commerce, Development) references/sass-integration.md - Sass variables, bundler configuration (Vite, Parcel, Webpack), integration with Bootstrap Sass, and troubleshooting references/rails-integration.md - Rails 8 Propshaft setup, cssbundling-rails, dartsass-rails, bootstrap-icons gem, and troubleshooting Example Files examples/icon-methods-styling-patterns.html - Icon fonts, embedded SVG, SVG sprites, sizing, coloring, and vertical alignment techniques examples/icon-ui-accessibility-patterns.html - Buttons, navigation, lists, social icons, badges, and accessibility patterns

安装