explaingit

twbs/icons

★ 8,009TypeScriptAudience · designerComplexity · 1/5LicenseSetup · easy

TLDR

The official Bootstrap icon library with over 2,000 free SVG icons you can drop into any website via HTML, CSS, npm, or Composer, designed for consistency and easy styling.

Mindmap

mindmap
  root((Bootstrap Icons))
    What it is
      2000+ SVG icons
      Official Bootstrap library
    Usage Methods
      Inline SVG in HTML
      CSS sprite sheet
      npm package
      Composer for PHP
    Design
      16x16 grid
      No strokes
      CSS styleable
    Workflow
      Sketch in Figma
      Optimize SVG
      Commit to repo
    License
      MIT
      Free commercial use
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add a checkmark, envelope, or arrow icon to any web page by pasting a single SVG snippet into your HTML.

USE CASE 2

Pull the full icon set into a JavaScript project via npm and import only the icons you need.

USE CASE 3

Style icon colors and sizes purely with CSS without editing the SVG files.

USE CASE 4

Browse and pick icons in Figma using the official Figma file before writing any code.

Tech stack

TypeScriptSVGnpmCSS

Getting it running

Difficulty · easy Time to first run · 5min
MIT license, use freely in personal and commercial projects with no restrictions.

In plain English

Bootstrap Icons is the official icon library from the Bootstrap team, containing over 2,000 open-source SVG icons. These are simple, scalable graphics you can drop into a website to represent common actions, objects, and concepts, things like arrows, envelopes, charts, checkmarks, and hundreds of others. You can add the icons to a project in several ways: paste the SVG code directly into your HTML, reference them as image files, load them as a sprite sheet, or pull them in through CSS. The package is available through npm for JavaScript projects and through Composer for PHP projects. A Figma file is also available for designers who want to work with the icons before writing code. The icons are designed on a 16x16 pixel grid and exported as flat SVG files without strokes, which keeps them consistent and easy to style with CSS. New icons are first sketched in Figma, then run through an optimization script that cleans up the SVG code before they are committed to the repository. The library is maintained by the Bootstrap core team and licensed under MIT, so you can use the icons freely in personal and commercial projects. Documentation and a searchable icon browser are available at the Bootstrap Icons website.

Copy-paste prompts

Prompt 1
I'm using Bootstrap Icons via npm in a React project. Show me how to import the 'envelope-fill' icon as an inline SVG component and set its color with a CSS class.
Prompt 2
I want to use Bootstrap Icons as a sprite sheet so I only load one file. Write the HTML for linking the sprite and rendering two different icons on the same page.
Prompt 3
Show me how to load Bootstrap Icons via CDN with a single link tag, then use the 'github' icon in a button with accessible aria-label text.
Prompt 4
I need icons in my Tailwind CSS project. Show me how to install Bootstrap Icons via npm and use them as inline SVGs with Tailwind color utility classes.
Open on GitHub → Explain another repo

← twbs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.