Bootstrap Icons
Bootstrap Icons is the official icon library from the Bootstrap team, offering over 2,000 free SVG icons. While designed to work perfectly with Bootstrap CSS, the library is completely framework-agnostic and works well in any web project. The library covers an impressive range of categories and is particularly strong in UI-specific icons — form controls, navigation patterns, media controls, and system symbols are all well represented. Both outline and filled variants are available for most icons. The collection is licensed under MIT; review the icon license guide for commercial-use details.
Bootstrap Icons Specifications & Framework Compatibility
| Property | Specification Details |
|---|---|
| Total Icons | 4,168 vector SVG icons |
| License | MIT (Commercial & Personal Use) |
| TypeScript Support | Native .d.ts definitions included |
| Framework Support | React, Next.js, Vue, Svelte, Tailwind CSS |
| Primary NPM Package | bootstrap-icons |
| Source Repository | Official GitHub Repository → |
How many icons does Bootstrap Icons have?
Bootstrap Icons currently includes 4,168 vector icons indexed in the IconSearch catalog. Every icon is available in clean SVG format with customizable stroke widths, colors, and direct multi-framework code exports for modern web applications.
Is Bootstrap Icons free for commercial use?
Yes, Bootstrap Icons is distributed under the MIT license. This permissive open-source license allows unrestricted commercial and personal usage in proprietary software, SaaS platforms, client websites, and digital products without licensing fees.
How do you install and use Bootstrap Icons in React, Next.js, and Vue?
Install the package using npm install bootstrap-icons, then import icons directly into your JSX, TSX, or Vue components. Alternatively, copy raw customized SVG markup directly from IconSearch with zero client-side JavaScript overhead.
// Install package
npm install bootstrap-icons
// React & Next.js App Router usage
import { 0CircleFill } from 'bootstrap-icons'
export default function Header() {
return <0CircleFill className="w-5 h-5 text-indigo-500" />
}Bootstrap Icons FAQ & Technical Guide
Do I need Bootstrap CSS to use Bootstrap Icons?
No. Bootstrap Icons is completely independent of Bootstrap CSS. You can use it in any project regardless of what CSS framework you use.
Is Bootstrap Icons free for commercial use?
Yes. Bootstrap Icons uses the MIT license which allows free commercial use without attribution.
How do I use Bootstrap Icons in React?
Import the CSS file in your root component, then use icon class names as className on i elements. For example: import 'bootstrap-icons/font/bootstrap-icons.css' then <i className='bi bi-house' />.
How many Bootstrap Icons are there?
Bootstrap Icons has over 2,000 icons as of version 1.11. New icons are added with each release.
Can I use Bootstrap Icons with Tailwind CSS?
Yes. Since icons are HTML elements you can apply Tailwind text color and sizing utilities directly to them.