Bootstrap Icons

About Bootstrap Icons

Bootstrap Icons is the official SVG icon library from the Bootstrap team, shipping 2,000+ icons optimised for a 16px grid — notably smaller than the 24px baseline used by Lucide, Heroicons, and Tabler. This makes Bootstrap Icons exceptionally crisp for compact UI elements: table badges, form input labels, navigation links, and data-dense list rows where 24px icons appear oversized. MIT licensed — no attribution required for personal or commercial use. Bootstrap Icons are completely standalone: no Bootstrap CSS dependency. The React package (react-bootstrap-icons) and an official SVG sprite are both available. Search Bootstrap Icons, copy SVG code, export as JSX, and download PNG here. Compared with Font Awesome: Bootstrap Icons is lighter, MIT licensed (vs CC BY 4.0), and requires no JavaScript runtime. Compared with Lucide: Bootstrap Icons is built for 16px visual density first. Ideal for Bootstrap-based projects, Django/Flask web apps, and any interface where compact 16px-optimised icons are the design requirement.

How to use Bootstrap Icons icons

npm install react-bootstrap-icons

import { Search, House, GearFill } from 'react-bootstrap-icons';

export default function App() {
  // Bootstrap Icons default to 16px — resize via width/height props
  return <Search width={20} height={20} />;
}

<!-- CDN (SVG sprite or icon font) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" />
<i class="bi bi-search"></i>

import { Icon } from '@iconify/react';

export default function App() {
  return <Icon icon="bi:icon-name" width={24} />;
}

Compare Bootstrap Icons with similar icon packs