Bootstrap Icons
Free, high quality icons from the Bootstrap team
STATS
OVERVIEW
Bootstrap Icons is the official icon library from the Bootstrap team, offering over 1,800 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.
Bootstrap Icons can be used as SVG sprites, individual SVGs, or an icon font. For React projects there are community packages available. The library does not ship with official TypeScript definitions or a dedicated React package, which puts it behind modern alternatives in developer experience.
// VERDICTBootstrap Icons is excellent if you are already in the Bootstrap ecosystem or need a large, reliable icon set for a traditional web project. For modern React or Next.js applications, Lucide or Heroicons provide a better developer experience with TypeScript and tree-shaking built in.
INSTALLATION
npm install bootstrap-icons
npm install bootstrap-icons // Note: Import the CSS in your root layout. Icons are used as className strings on i elements.
npm install bootstrap-icons
npm install bootstrap-icons
npm install bootstrap-icons
CODE EXAMPLES
// Import CSS in your layout
import 'bootstrap-icons/font/bootstrap-icons.css'
export default function App() {
return (
<div>
<i className="bi bi-house" />
<i className="bi bi-gear" />
<i className="bi bi-person" />
</div>
)
}import 'bootstrap-icons/font/bootstrap-icons.css'
export default function App() {
return (
<div>
{/* Outline variant */}
<i className="bi bi-heart text-gray-500" />
{/* Fill variant */}
<i className="bi bi-heart-fill text-red-500" />
</div>
)
}// Use individual SVGs for better performance
import houseSvg from 'bootstrap-icons/icons/house.svg'
export default function App() {
return <img src={houseSvg} alt="Home" width={24} height={24} />
}