Bootstrap Icons — Free Open Source SVG Icon Library

Introduction

Bootstrap Icons is a free, open-source icon library maintained by the Bootstrap team. It provides over 2,000 carefully designed SVG icons that work with any web project, not just Bootstrap. Icons are available as standalone SVGs, an SVG sprite sheet, or a web font.

What Bootstrap Icons Does

• Provides 2,000+ SVG icons covering UI, commerce, media, devices, people, weather, and more
• Ships as individual SVG files for tree-shaking, an SVG sprite for efficient loading, and a web font for CSS-only usage
• Offers consistent sizing, alignment, and visual weight across all icons
• Includes both outlined and filled variants for common icons
• Supports CSS customization of size, color, and alignment through standard properties

Architecture Overview

Each icon is designed on a 16x16 pixel grid as a standalone SVG file. The build process compiles all SVGs into an SVG sprite sheet and generates a web font (WOFF/WOFF2) with corresponding CSS. The npm package exposes individual SVG files so bundlers can tree-shake unused icons. A docs site built with Hugo provides a searchable catalog with copy-to-clipboard functionality.

Self-Hosting & Configuration

• Install via npm and import individual SVGs or the web font CSS in your bundler
• Use the CDN link for quick prototyping without local installation
• Embed SVGs inline for full CSS control over stroke, fill, width, and height
• Use the SVG sprite with <use> elements to load icons efficiently with a single HTTP request
• Customize icon size with CSS font-size (web font) or width/height attributes (SVG)

Key Features

• Over 2,000 icons with consistent visual design language and grid alignment
• Multiple consumption formats: individual SVGs, sprite, web font, React components, and Vue components
• Fully open source under MIT license with no attribution requirements
• Accessible by default with appropriate aria-hidden and role attributes documented
• Searchable catalog with categories, tags, and instant copy-paste code snippets

Comparison with Similar Tools

• Lucide — fork of Feather with more icons; Bootstrap Icons offers a larger library with broader category coverage
• Heroicons — Tailwind-aligned, two styles only; Bootstrap Icons provides 2,000+ icons in multiple formats
• Font Awesome — freemium model with many icons behind a paywall; Bootstrap Icons is entirely free and open source
• Tabler Icons — similar size and quality; Bootstrap Icons benefits from the Bootstrap ecosystem and documentation
• Material Design Icons — Google's design language; Bootstrap Icons follows its own neutral aesthetic

FAQ

Q: Do I need Bootstrap to use Bootstrap Icons? A: No. Bootstrap Icons is a standalone library that works with any HTML, CSS, or JavaScript project regardless of framework.

Q: How do I use icons with React or Vue? A: Install the react-bootstrap-icons or vue-bootstrap-icons community packages, or import the SVG files directly into your components.

Q: Are the icons accessible? A: Yes. The documentation recommends using aria-hidden="true" for decorative icons and providing aria-label or visually hidden text for meaningful icons.

Q: Can I modify or customize the icons? A: Yes. Since they are SVGs, you can change colors, sizes, and strokes using CSS or by editing the SVG markup directly.

Sources

• https://github.com/twbs/icons
• https://icons.getbootstrap.com/