Bootstrap Icons - Methods & Styling Patterns

Icon Fonts (Primary Method)

Use <i class="bi bi-*"> for icon fonts. This is the recommended method for most use cases due to simplicity and automatic sizing with text.

Basic Usage

Class Naming Convention

Icons use bi bi-{name} pattern. Add -fill suffix for filled variants.

External Image Method

Reference icon SVG files directly via <img> element. Ideal for email templates, static pages, and content management systems where CSS/font dependencies should be avoided.

Via CDN

Reference icons directly from jsDelivr CDN.

heart-fill (32x32)

star-fill (32x32)

check-circle-fill (32x32)

Size Variations

16x16

24x24

32x32

48x48

CSS Method

Include icons via CSS background-image or mask-image. Useful for decorative icons applied via CSS classes without markup changes.

Background-image Approach

Icons display as background images with fixed colors. Cannot inherit text color.

Mask Approach (Inherits currentColor)

Icons inherit the parent's text color via currentColor. Requires vendor prefixes for Safari (-webkit-mask-*).

Color Inheritance Demonstration

Same icon class with different parent text colors.

Sizing Variations

Icons scale with font-size. Use inline styles, Bootstrap utilities, or custom CSS classes.

Inline Style Sizing

Bootstrap Font Size Utilities

Use .fs-1 through .fs-6 utilities for consistent sizing.

Custom CSS Classes

Define reusable size classes: .icon-lg, .icon-md, .icon-sm.

Coloring Techniques

Icons inherit text color. Use Bootstrap utilities, inline styles, or CSS classes.

Bootstrap Text Utilities

Inline Color Styles

currentColor Inheritance

Icons automatically inherit the parent element's text color.

Vertical Alignment

Icons may need alignment adjustments when placed inline with text.

Bootstrap Alignment Utilities

CSS Vertical Centering Fix

Use vertical-align: -0.125em for precise baseline alignment with text.

Embedded SVG

Copy SVG code directly from icons.getbootstrap.com for maximum control. Uses currentColor for automatic color inheritance.

Basic SVG Embedding

SVG Sizing with width/height Attributes

SVG with fill Attribute

SVG Sprite

Define icons once as symbols, reference multiple times with <use>. Ideal for pages with many repeated icons.

Internal Sprite Reference

Reference symbols defined in the same document with <use href="#id">.

Colored Sprite Icons

External Sprite Reference (Syntax)

Reference an external sprite file with <use href="path/bootstrap-icons.svg#icon-name">.

<svg class="bi" width="32" height="32" fill="currentColor">
  <use href="bootstrap-icons.svg#heart"/>
</svg>

Combined Patterns

Practical examples combining sizing, coloring, and alignment techniques.

Status Indicators

Icons in Different Contexts