Bootstrap Icons

Overview

Bootstrap Icons is the icon library of the Bootstrap project: about 2,000 icons drawn on a 16×16 grid, and 670 of them have a separate -fill version. You don’t need Bootstrap CSS to use them. In React, most people use react-bootstrap-icons, a community wrapper that turns each SVG into a component; the version in this repo exposes 2,078 components. The small grid makes the icons unusually crisp at 16px and a little plain when blown up.

At a Glance

Version examined

react-bootstrap-icons 1.11.6 (depends on bootstrap-icons ^1.13.1)

Components in the package

2,078 (670 are …Fill variants)

Icons available in Icony

317 (curated)

Canvas

16×16 viewBox

Drawing model

Filled outlines only (fill="currentColor"), no strokes

Default size

1em

Rendered House SVG

419 bytes (272 gzipped)

License

MIT

Design language

A rendered <House /> has viewBox="0 0 16 16", width="1em", height="1em", fill="currentColor" and a class="bi bi-house". There is no stroke: the walls are the gap between an outer and inner contour. On the house, that gap is exactly 1 unit (the outer floor sits at y=15, the inner at y=14). That is 1/16 of the icon: 1px at 16px, 1.5px at 24px.

Drawing at 16 units means most edges fall on whole or half pixels at 16px, so the set looks crisp in tables, inputs and inline text. At 32px and above the same drawings start to look simple, because there are only 16 units of detail to scale up.

Outline and solid are separate icons. HouseFill is its own drawing (a roof line plus a solid body), not the outline painted in.

Only 670 of the 2,078 components are …Fill variants, so most outline icons have no solid partner.

Pros and cons

• Breadth and small-size quality together. Among the libraries in Icony only Tabler is larger, and none is drawn for 16px the way this one is.
• Brand icons are included. Logos such as GitHub, Google, Apple, Windows, Discord and Slack ship with it, which many UI sets avoid.
• 1em sizing lines inline icons up with text without extra CSS.
• No stroke control. Line weight is fixed and strokeWidth does nothing.
• The style is neutral and a bit dated next to rounder, trendier sets. It reads as “admin panel”.
• Modules are heavier. Each icon file in react-bootstrap-icons inlines Babel helpers and a prop-types definition; house.js is 2,291 bytes (1,026 gzipped) before minification, several times Lucide’s 594.

When to pick something else

• Your UI mainly uses large icons (32px+) in marketing sections. A 24-grid set with more detail will look better.
• Your design needs adjustable line weight or a soft, rounded look. Lucide or Phosphor fit better.
• You need solid versions of everything. Use Phosphor Fill or Heroicons Solid.

Bootstrap Icons vs. Tabler

Both are large, general-purpose, MIT-licensed sets. Tabler is 24-grid, stroke-based and adjustable; Bootstrap is 16-grid, fill-based and fixed.

Tabler has the bigger catalog (5,986) and an Icon prefix on every name; Bootstrap uses bare names like House and Gear. If most icons appear at 16px in data-heavy screens, Bootstrap tends to look sharper; at 24px and up, Tabler usually looks more modern.

Installation gotchas

• react-bootstrap-icons is a community wrapper maintained outside the Bootstrap team. The official package is bootstrap-icons, which ships SVG files, a sprite and an icon font. Use the official package for plain HTML or <i class="bi bi-house"> markup, and the wrapper for React components.
• Names are bare PascalCase: House, Link, Image, Map, Table, Window. These collide with Next.js Link and Image and with your own components. Alias them: import { Link as LinkIcon } from 'react-bootstrap-icons'.
• Icons whose names start with a digit get an Icon prefix: the file 0-circle is exported as Icon0Circle.
• The wrapper isn’t in Next.js 16’s default optimizePackageImports. If development builds feel slow, add it to that option in next.config yourself.
• title renders a <title>, but aria-hidden isn’t added by default. Set it on decorative icons.

License and logo trademarks

Both the Bootstrap Icons artwork and the react-bootstrap-icons wrapper are MIT-licensed. You can use them commercially and modify them; keep the notices with your source. Brand logos are a different matter. The MIT license covers the drawing, not the trademark, so follow each company’s brand guidelines when you display its logo.

Key Features

• 2,078 React components, 670 of them …Fill variants
• 16×16 grid, sharp at small sizes
• Default size 1em, so icons follow text size
• Brand logos included (GitHub, Google, Apple, Slack…)
• Works without Bootstrap CSS
• MIT license (icons and wrapper)

Installation

npm install react-bootstrap-icons

Usage Example

Basic React usage with Bootstrap Icons

import { House, HouseFill, Gear, Icon0Circle } from 'react-bootstrap-icons';

export function Example({ active }: { active: boolean }) {
  return (
    <p className="text-base">
      {/* 1em by default: scales with the paragraph's font size */}
      {active ? <HouseFill aria-hidden="true" /> : <House aria-hidden="true" />} Home

      {/* Explicit size and color */}
      <Gear size={20} color="#6f42c1" title="Settings" />

      {/* Names starting with a digit get an "Icon" prefix */}
      <Icon0Circle size={16} aria-hidden="true" />
    </p>
  );
}

Best For

Common Questions