Bootstrapアイコン（Bootstrap Icons） v5.2.0新設

2,000以上のアイコンを備えた無料の高品質なオープンソースアイコンライブラリ。SVG、SVGスプライト、Webフォントなど、好きなようにそれらを組み込める。Bootstrapの有無に関係なく、どのプロジェクトでも使用できる。

※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。

このページの項目 v5.2.0新設

更新履歴 v5.3.3追加

PST 2019/11/26にv1.0.0-alpha1が公開（アイコンの合計213個）
PST 2019/12/14にv1.0.0-alpha2が公開（アイコンの合計315個【+102】）
PST 2020/3/19にv1.0.0-alpha3が公開（アイコンの合計536個【+221】）
PST 2020/5/21にv1.0.0-alpha4が公開（アイコンの合計673個【+137】）
PST 2020/6/26にv1.0.0-alpha5が公開（アイコンの合計1,030個【+357】）
PST 2020/8/28にv1.0.0が公開（アイコンの合計1,120個【+90】）
PST 2020/10/28にv1.1.0が公開（アイコンの合計1,151個【+31】）
PST 2020/12/11にv1.2.0が公開（アイコンの合計1,201個【+50】）
PST 2020/12/12にv1.2.1が公開
PST 2020/12/23にv1.2.2が公開
PST 2021/1/7にv1.3.0が公開（アイコンの合計1,265個【+64】）
PST 2021/2/22にv1.4.0が公開（アイコンの合計1,325個【+60】）
PST 2021/3/29にv1.4.1が公開
PST 2021/5/10にv1.5.0が公開（アイコンの合計1,370個【+45】）
PST 2021/10/13にv1.6.0が公開（アイコンの合計1,406個【+36】）
PST 2021/10/18にv1.6.1が公開
PST 2021/11/1にv1.7.0が公開（アイコンの合計1,521個【+115】）
PST 2021/11/16にv1.7.1が公開
PST 2021/12/3にv1.7.2が公開
PST 2022/1/31にv1.8.0が公開（アイコンの合計1,668個【+147】）
PST 2022/2/7にv1.8.1が公開
PST 2022/5/13にv1.8.2が公開
PST 2022/5/25にv1.8.3が公開
PST 2022/7/13にv1.9.0公開（アイコンの合計1,805個【+137】）
PST 2022/7/16にv1.9.1が公開
PST 2022/11/11にv1.10.0が公開（アイコンの合計1,953個【+148】）
PST 2022/11/11にv1.10.1が公開
PST 2022/11/13にv1.10.2が公開
PST 2022/12/26にv1.10.3が公開
PST 2023/4/3にv1.10.4が公開
PST 2023/4/26にv1.10.5が公開
PST 2023/9/12にv1.11.0が公開（アイコンの合計2,050個【+97】）
PST 2023/9/17にv1.11.1が公開
PST 2023/11/2にv1.11.2が公開
PST 2024/1/4にv1.11.3が公開

アイコンの種類（Icons）

量が多いので、公式サイトをご参照下さい（最新版はv1.11.3）。

インストール（Install）

Bootstrapアイコンはnpmに公開されているが、必要に応じて手動でダウンロードもできる。

パッケージマネージャー（Package manager）

npmやComposerを使用して、Bootstrapアイコン（SVG、アイコンスプライト、アイコンフォントを含む）をインストール。次に、使い方の項目にあるアイコンを組み込む方法を選択。

設定例

npmの実行コマンド$ npm i bootstrap-icons

Composerの実行コマンドcomposer require twbs/bootstrap-icons

【注意】

v1.9.0からComposerを使用してインストール可能に

ダウンロード（Download）

リリース版がGitHubで公開されており、アイコンSVG、フォント、ライセンス、readmeが入っている。package.json も入っているが、npmスクリプトは主に開発ワークフローで使用できる。

最新のZIPをダウンロード

CDN

CDNからアイコンフォントスタイルシートをWebサイトの <head> 内かCSSの @import を経由して組み込めば数秒で使用開始できる（最新版はv1.11.3）。実例は、アイコンフォントの項目に記載。

HTMLの場合<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" integrity="sha384-XGjxtQfXaH2tnPFa9x+ruJTuLE3Aa6LhHSWRr1XeTyhezb4abCG4ccI5AkVDxqC+" crossorigin="anonymous">

CSSの場合@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

Figma v5.3.3追加

Bootstrapアイコンは、Figmaのコミュニティにも公開されている。

使い方（Usage）

BootstrapアイコンはSVGであるため、プロジェクトの設定方法に応じて、様々な方法でHTMLに組み込める。font-size で簡単にサイズを変更できるように width: 1em（オプションで height: 1em も）での使用を推奨。

埋め込み（Embedded）

（外部画像ファイルではなく）ページのHTML内にアイコンを埋め込む。ここでは、任意の width と height を使用。

見本

設定例

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-emoji-heart-eyes" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M11.315 10.014a.5.5 0 0 1 .548.736A4.498 4.498 0 0 1 7.965 13a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .548-.736h.005l.017.005.067.015.252.055c.215.046.515.108.857.169.693.124 1.522.242 2.152.242.63 0 1.46-.118 2.152-.242a26.58 26.58 0 0 0 1.109-.224l.067-.015.017-.004.005-.002zM4.756 4.566c.763-1.424 4.02-.12.952 3.434-4.496-1.596-2.35-4.298-.952-3.434zm6.488 0c1.398-.864 3.544 1.838-.952 3.434-3.067-3.554.19-4.858.952-3.434z"/></svg>

【設定】

各SVGは、公式サイトに記載されている各アイコンをクリックし、"Copy HTML"の項目に記載されているコードをコピーして使用
width と height は任意に設定可能

SVGスプライト（Sprite）

SVGスプライトを使用して、<use> 要素を経由して任意のアイコンを挿入。アイコンのファイル名をフラグメント識別子として使用（例：toggles は #toggles）。SVGスプライトを使用すると、<img> 要素に似た外部ファイルを参照できるが、currentColor の機能を使用して簡単にテーマを設定できる。

注意！：<use> がドメイン間で機能しないChromeの問題がある。

見本

設定例

<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#toggles"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#shop"/>
</svg>

【設定】

SVGスプライトは、ダウンロード版を解凍後、bootstrap-icons.svg を任意のディレクトリにアップして使用（CDNでの bootstrap-icons.svg の使用はできない）
利用したいアイコン名は、公式サイトに記載されている各アイコンの下に記載の名称を使用し、先頭に # をつける

外部画像（External image）

個別のBootstrapアイコンSVGを任意に選択したディレクトリにコピーし、<img> 要素を使用して通常の画像のように使用。

見本

設定例

<img src="/assets/img/bootstrap.svg" alt="Bootstrap" width="32" height="32">

【設定】

各SVGは、公式サイトに記載されている各アイコンをクリックし、"Download"の項目に記載されているDownload SVGからダウンロードして使用
width と height は任意に設定可能

アイコンフォント（Icon font）

Bootstrapアイコンには、すべてのアイコンのクラスを持つアイコンフォントも組み込まれている。CSSを経由してページにアイコンのWebフォントを組み込み、必要に応じてHTMLでクラス名を参照（例：<i class="bi-alarm-clock"></i>）。

1.通常の使用

見本

設定例

<i class="bi bi-alarm"></i>

2.任意にスタイルを設定

font-size と color を使用して、アイコンの外観を変更。

見本

設定例

<i class="bi bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>

【設定】

CDNの項目に記載の方法でアイコンフォントファイルを取得して使用
各アイコンのコードは、公式サイトに記載されている各アイコンをクリックし、"Icon font"の項目に記載されているコードをコピーして使用

CSS v5.3.0設定変更

1.SVGアイコンで設定

CSS内でSVGの使用もできる（16進色の値を指定するときは、# を %23 などに必ずエスケープして下さい）。<svg> の width と height でサイズが指定されていない場合、アイコンで使用可能なスペースを埋め込む。

アイコンのサイズを background-size で変更する場合は、viewBox 属性が必要。xmlns 属性が必須なのにも注意。

見本1：background-imageで設定

見出し

Bootstrap5.3.0の設定例緑背景が5.3.0での変更箇所

HTML<span class="bi-a1">見出し</span>

CSS.bi-a1::before {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: -.125em;
  content: "";
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23888' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>"); /* dot */
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}

見本2：contentで設定

見出し

Bootstrap5.3.0の設定例緑背景が5.3.0での変更箇所

HTML<span class="bi-a2">見出し</span>

CSS.bi-a2::before {
  display: inline-block;
  vertical-align: -.125em;
  content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='%23888' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/%3E%3C/svg%3E"); /* dot */
}

【設定】

データURLのSVGは、公式サイトに記載されている各アイコンをクリックし、"Copy HTML"の項目に記載されているコードをコピーして使用
contentで設定する場合は、width と height の設定と < は %3C、> は %3E にエスケープする必要あり（SVG エスケープツールの変換ツールでエンコードすると便利）
カラーは、fill を currentColor から任意のカラーに設定（ #fff などにする場合は # を %23 にエスケープする必要あり）

【変更履歴】

【v5.3.0】
- カラーモードの新設に伴い、アイコンのカラー設定を #333 から #888 に変更

2.フォントアイコンで設定

見本1：`.bi-*` で設定

一時停止

設定例

HTML<span class="bi-b">一時停止</span>

CSS.bi-b::before {
  padding-right: .25rem;
  content: "\F4C1"; /* pause-circle-fill */
  font-size: 1.25rem;
}

見本2：`.bi-*` 以外で設定

一時停止

設定例

HTML<span class="icon-b">一時停止</span>

CSS.icon-b::before {
  padding-right: .25rem;
  content: "\F4C2"; /* pause-circle */
  font-family: bootstrap-icons;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  vertical-align: -.125em;
}

【設定】

content に入れるアイコンフォントのUnicodeは、公式サイトに記載されている各アイコンをクリックし、"Code point"の"CSS"に記載されているコードをコピーして使用
.bi-* 以外のクラスで設定する場合は、font-family, font-weight, line-height, vertical-align の設定もする（.bi-* の場合は、CDNの bootstrap-icons.min.css に設定があるので不要）

スタイリング（Styling）

カラーは、.text-* クラスや任意のCSSの設定で変更できる。

見本

設定例

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-exclamation-triangle text-success" viewBox="0 0 16 16">
  <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"/>
  <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"/>
</svg>

アクセシビリティ（Accessibility）

純粋に装飾的なアイコンの場合は、aria-hidden="true" を追加し、それ以外の場合は、適切な代替テキストをご提供下さい。アイコンを追加するために使用している方法と、アイコンを使用している場所（スタンドアロンの画像としてか、ボタンや同様のコントロールの唯一のコンテンツとして）に応じて、様々なアプローチが考えられる。以下にいくつかの例を表示：

見本1：外部画像の場合

設定例

<!-- <img>要素のalt="..." -->
<img src="/assets/img/bootstrap.svg" alt="Bootstrap" ...>

見本2：アイコンフォントの場合

設定例

<i class="bi bi-github" role="img" aria-label="GitHub" ...></i>

見本3：SVGスプライトの場合

設定例

<svg class="bi" ... role="img" aria-label="ツール">
  <use xlink:href="bootstrap-icons.svg#tools"/>
</svg>

見本4：ボタンアイコンの場合

設定例

<!-- コントロールのaria-label="..." -->
<button ... aria-label="ミュート">
  <svg class="bi bi-volume-mute-fill" aria-hidden="true" ...>
  ...
  </svg>
</button>

SVGの操作（Working with SVGs）

SVGは操作するのに最適だが、回避すべきいくつかの既知の定義がある。SVGを使用する方法は多数あるため、これらの属性と回避策をコードに含めていない。

既知の問題は以下のとおり：

SVGは、Internet ExplorerとEdge Legacyでデフォルトでフォーカスを受け取る。SVGを埋め込むときは、<svg> 要素に focusable="false" を追加。詳細は、StackOverflowを参照。
<img> 要素でSVGを使用する場合、スクリーンリーダーはそれらを画像として知らせないか、画像を完全にスキップする場合がある。問題を回避するために、<img> 要素に追加の role="img" を入れる。
外部SVGスプライトがInternetExplorerで正しく機能しない場合がある。必要に応じてSVG for Everybodyポリフィルを使用。

SVGに関する注意すべき別の問題が見つかったら、詳細を共有するために、GitHubのIssuesを開いてご指摘下さい。

Bootstrapアイコン（Bootstrap Icons） v5.2.0新設

更新履歴 v5.3.3追加

アイコンの種類（Icons）

インストール（Install）

パッケージマネージャー（Package manager）

設定例

【注意】

ダウンロード（Download）

CDN

Figma v5.3.3追加

使い方（Usage）

埋め込み（Embedded）

見本

設定例

【設定】

SVGスプライト（Sprite）

見本

設定例

【設定】

外部画像（External image）

見本

設定例

【設定】

アイコンフォント（Icon font）

1.通常の使用

見本

設定例

2.任意にスタイルを設定

見本

設定例

【設定】

CSS v5.3.0設定変更

1.SVGアイコンで設定

見本1：background-imageで設定

Bootstrap5.3.0の設定例 緑背景が5.3.0での変更箇所

見本2：contentで設定

Bootstrap5.3.0の設定例 緑背景が5.3.0での変更箇所

【設定】

【変更履歴】

2.フォントアイコンで設定

見本1：.bi-* で設定

設定例

見本2：.bi-* 以外で設定

設定例

【設定】

スタイリング（Styling）

見本

設定例

アクセシビリティ（Accessibility）

見本1：外部画像の場合

設定例

見本2：アイコンフォントの場合

設定例

見本3：SVGスプライトの場合

設定例

見本4：ボタンアイコンの場合

設定例

SVGの操作（Working with SVGs）

Bootstrap5.3.0の設定例緑背景が5.3.0での変更箇所

Bootstrap5.3.0の設定例緑背景が5.3.0での変更箇所

見本1：`.bi-*` で設定

見本2：`.bi-*` 以外で設定