# Bootstrap Icons — Free Open Source SVG Icon Library

> An official open-source icon library designed for use with Bootstrap but works with any project. Provides over 2,000 hand-crafted SVG icons available as individual SVG files, an SVG sprite, a web font, and framework-specific packages for React and Vue.

## Install

Save in your project root:

# Bootstrap Icons — Free Open Source SVG Icon Library

## Quick Use
```bash
npm install bootstrap-icons
```
```html
<!-- Or use via CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1/font/bootstrap-icons.css">
<i class="bi bi-alarm"></i>
```

## 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/

---
Source: https://tokrepo.com/en/workflows/asset-d3ad5cc2
Author: AI Open Source