Library / SDK
twbs/icons avatar
twbs/icons

Bootstrap Icons: how to install and use twbs/icons in HTML, React and Figma

Official open source SVG icon library for Bootstrap.

8,136 stars1,123 forksTypeScriptMIT

At a glance

What is it?
Bootstrap Icons is the official SVG icon set for Bootstrap, shipped on npm as processed SVGs plus a font, sprite and TypeScript definitions. It is a good fit if you want a large, MIT-licensed set that drops into plain HTML or a React build, and a poor fit if you need per-icon tree shaking or icons outside its own catalog.
Who is it for?
Adopt Bootstrap Icons if you are already building a Bootstrap or plain-CSS interface and want a permissively licensed set that installs with npm i bootstrap-icons and covers both CSS-class and inline SVG usage. Do not adopt it if you need per-icon JavaScript imports for tree shaking, or if your design system requires icons that are not in the catalog, since the README states icons are typically only added by @mdo.
Can I use it commercially?
Yes. MIT is a permissive licence: you can use, modify and sell software built on it, as long as you keep its copyright and licence notices.
Is it still maintained?
Yes. The repository last received commits 1 day ago.
What is it written in?
Mainly TypeScript, according to GitHub's language statistics.

Answers come from the project's GitHub data, last synced on September 30, 2026, and from our analysis. They are not legal advice.

Editorial analysis

What Bootstrap Icons solves, and who it is built for

Most projects need a couple of dozen interface glyphs and do not want to license an icon set, hand-draw arrows and chevrons, or wire up a build step just to render a magnifying glass. Bootstrap Icons targets exactly that gap. The README describes it as the "Official open source SVG icon library for Bootstrap with over 2,000 icons", and the package is published to npm under the name bootstrap-icons. The audience is narrow and clear: teams already using Bootstrap, or teams using plain CSS who want a large MIT-licensed set with no runtime dependency. The repository's package.json lists a style entry at font/bootstrap-icons.css, a sass entry at font/bootstrap-icons.scss and a types entry at font/bootstrap-icons.ts, which tells you the intended consumers are CSS users, Sass users and TypeScript users. What it is not is a design tool with a paid support contract. The README points to the project site and to a Figma community file rather than to a commercial licence tier.

How the icons are generated and what lands in the package

The repository is a build pipeline, not just a folder of drawings. The icons/ directory holds source SVGs. The npm run icons script runs three things in sequence: icons-main, which the package.json maps to node build/build-svgs.mjs, then icons-sprite and icons-font. The README explains the two transformations applied to each source file: optimize with SVGO, then rewrite the SVG source, stripping attributes and re-emitting them in a preferred order. The SVGO configuration lives in svgo.config.mjs at the repository root, and the sprite configuration in svg-sprite.json. Font generation is configured by .fantasticonrc.js. The published package is deliberately smaller than the repository: the files field in package.json ships icons/*.svg, bootstrap-icons.svg and the font directory, and nothing else. So consumers get processed output, not the build scripts. The README is explicit that the package includes only the processed SVGs and that implementation is left to the consumer's team. That is a design choice worth noting: the library stops at assets and does not offer a component layer, a React wrapper or a framework integration.

Installing Bootstrap Icons and rendering a first icon

The README gives the npm install command directly.

bash
npm i bootstrap-icons

The README lists four supported usage paths: copy-paste SVGs as embedded HTML, reference via an img element, use the SVG sprite, or include via CSS. The CSS route is the one the font directory exists for, and the package.json style field points at font/bootstrap-icons.css. The class prefix is bi and the icon name follows it, so a class such as bi-alarm renders the alarm glyph.

bash
composer require twbs/bootstrap-icons

That is the second install path the README documents, for projects using Packagist. The README also links a Figma community file for designers who want the set in a design tool. For TypeScript consumers, the package.json types field points at font/bootstrap-icons.ts, so the icon name union is available to the editor. The README does not document a React component export; the TypeScript file is the typing surface, not a component library.

Where the font-and-CSS approach costs you

The CSS path is convenient and it is also the heaviest option. Including font/bootstrap-icons.css pulls in the generated web font, so a page that renders two icons still downloads the whole font file. The repository ships font/ as a top-level directory precisely because that is the artifact the CSS classes depend on. If your page weight budget is tight, the sprite or inline SVG paths are the alternatives, and the README lists both. There is a second constraint that is easy to miss: the icon set is curated centrally. The README states that icons are typically only added by @mdo, with exceptions possible, and that new glyphs are designed in Figma on a 16x16px grid, then exported as flattened SVGs with fill and no stroke. That means you cannot expect a niche glyph to be accepted quickly, and you cannot expect stroke-based icons at all, since the source format is fill-only. If your design system uses stroked icons, this library is the wrong tool. The README also warns contributors to exclude auto-generated files such as font/** and bootstrap-icons.svg from branches because they conflict, which is a signal that these generated artifacts are owned by the release process rather than by contributors.

Bootstrap Icons compared with a component-first icon library

The obvious alternative for JavaScript projects is an icon library that ships per-icon imports, where importing one glyph pulls in one module. Bootstrap Icons does not work that way. Its package.json exposes a stylesheet, a Sass file and a TypeScript declaration file, and the files field ships icons/*.svg, bootstrap-icons.svg and font. There is no per-icon JavaScript entry point, so a bundler cannot tree shake individual glyphs through an import statement. The practical difference is where the cost lands. With a component-first library you pay in build configuration and in a dependency on that library's runtime; with Bootstrap Icons you pay in asset weight, because the CSS font or the sprite carries the full set. If you are already loading Bootstrap's CSS, the marginal cost of the icon font is lower than it looks, and the class-based markup matches the rest of your templates. If you are building a small React app with no Bootstrap, you are adding a font file to get a handful of glyphs, and a per-icon import library will usually be the better trade.

Maintenance, releases and what the MIT licence means here

The repository is not archived and the last push was on 2026-09-09. The most recent release listed is v1.13.1 on 2025-05-09, with v1.13.0 earlier the same day and v1.12.1 on 2025-05-04. Releases cluster, which fits the README's description of publishing: documentation is published automatically when a new Git tag is published, and generated dist files are updated before a release. Upgrading therefore means picking a version and accepting whatever glyph changes came with it. Because the package ships processed SVGs and a generated font, an icon rename or removal is a breaking change for your markup, and the README does not document a deprecation policy or a migration guide for icon names. Pin the version in package.json and diff the icons/ directory between tags before you move. The licence is MIT, stated in both the README and the package.json license field, with the full text in LICENSE. MIT is permissive and imposes no attribution requirement in the rendered interface, but icon sets can carry separate trademark concerns for brand logos, and the repository does not address that. This is a description of the licence, not legal advice; check with your own counsel if you are shipping third-party marks.

Editorial conclusion

Adopt Bootstrap Icons if you are already building a Bootstrap or plain-CSS interface and want a permissively licensed set that installs with npm i bootstrap-icons and covers both CSS-class and inline SVG usage. Do not adopt it if you need per-icon JavaScript imports for tree shaking, or if your design system requires icons that are not in the catalog, since the README states icons are typically only added by @mdo. Before committing, verify two things yourself: how many icons you actually use, because the CSS font path loads the whole font file, and whether the icon names you picked still exist in the version you pinned.

Frequently asked questions

How do I install Bootstrap Icons?

The README gives npm i bootstrap-icons as the install command. Composer users can instead run composer require twbs/bootstrap-icons, and the README also links a Figma community file for design work.

How do I use Bootstrap Icons in HTML?

The README lists four usage paths: copy-paste SVGs as embedded HTML, reference via an img element, use the SVG sprite, or include via CSS. The CSS route uses the stylesheet at font/bootstrap-icons.css and a class such as bi-alarm.

How do I use Bootstrap Icons in Figma?

The README links a Figma community file for Bootstrap Icons. It does not describe the file's structure or how updates are synced to it.

How do I use Bootstrap Icons in React?

The package.json exposes a types entry at font/bootstrap-icons.ts, so icon names are typed in the editor, but the README does not document a React component export. React users either render the CSS class on an element or inline the SVGs themselves.

Official sources

  1. License: MIT
  2. Project website
  3. README
  4. Releases
  5. twbs/icons on GitHub
Add this badge to your README

If you maintain this project, the badge below links readers to this analysis and shows its maintenance status from the daily GitHub snapshot. Paste the markdown into your README; add ?metric=license or ?metric=stars to the image URL for a different field.

Add this badge to your README

markdown
[![Hysen Labs](https://hysenlabs.com/badge/twbs-icons.svg)](https://hysenlabs.com/projects/twbs-icons)