Bootstrap Icons provides 2,078 individual SVG files optimized for direct use in web applications, build systems, and component libraries. Each icon is designed on a 16x16px grid with consistent styling.
All individual SVG files are located in the icons/ directory with kebab-case naming.
<!-- File path pattern -->
icons/{icon-name}.svg
<!-- Examples of available files -->
icons/alarm.svg
icons/alarm-fill.svg
icons/house-door.svg
icons/house-door-fill.svg
icons/gear.svg
icons/bootstrap.svg
icons/arrow-left.svg
icons/arrow-right.svg
icons/check-circle.svg
icons/x-circle.svg
<!-- ... 2,068 more files -->Each SVG file follows a consistent structure optimized for web use.
<!-- Standard SVG structure -->
<svg xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-{icon-name}"
viewBox="0 0 16 16">
<path d="..."/>
<!-- Additional paths for complex icons -->
</svg>SVG Properties:
"http://www.w3.org/2000/svg""16" (can be overridden with CSS)"currentColor" for automatic color inheritance"bi bi-{icon-name}""0 0 16 16" for consistent scalingReference SVG files directly in HTML elements.
<!-- Image element -->
<img src="icons/alarm.svg" alt="Alarm" width="16" height="16">
<img src="icons/house-door.svg" alt="Home" width="24" height="24">
<!-- Object element -->
<object data="icons/gear.svg" type="image/svg+xml" width="16" height="16">
Settings
</object>
<!-- Inline background image -->
<div style="background-image: url('icons/check-circle.svg'); width: 16px; height: 16px;"></div>Copy SVG content directly into HTML for maximum customization.
<!-- Inline SVG with custom styling -->
<svg xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
fill="blue"
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>Common patterns for integrating SVG files into build systems and bundlers.
Webpack:
// Import SVG as URL
import alarmIcon from 'bootstrap-icons/icons/alarm.svg';
// Use in template
const iconHTML = `<img src="${alarmIcon}" alt="Alarm">`;Vite:
// Import SVG as URL
import alarmIcon from 'bootstrap-icons/icons/alarm.svg?url';
// Import SVG as raw content
import alarmSVG from 'bootstrap-icons/icons/alarm.svg?raw';React Component:
import React from 'react';
const AlarmIcon = ({ width = 16, height = 16, fill = "currentColor", ...props }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={width}
height={height}
fill={fill}
className="bi bi-alarm"
viewBox="0 0 16 16"
{...props}
>
<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>
);Icons are organized by category with consistent naming patterns:
Numbers: 0-circle, 1-square-fill, 123
Arrows: arrow-left, arrow-right, arrow-up-circle
UI Elements: house-door, gear, person, envelope
Actions: plus, minus, check, x
Brand Icons: bootstrap, github, twitter
Shapes: circle, square, triangle
SVG files can be customized through CSS or direct modification:
/* Size customization */
.custom-icon {
width: 24px;
height: 24px;
}
/* Color customization */
.custom-icon {
fill: #007bff;
color: #007bff;
}
/* Animation */
.rotating-icon {
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}