Skip to main content
Bootstrap Icons
最新版 v1.4.0: 60以上の天気アイコンを追加しました!

Bootstrap Icons

フリー、高品質、オープンソース、そして1300以上のアイコンを持つアイコンライブラリです。SVG や SVG スプライト、Web フォントなど多様な方法で利用できます。Bootstrapと合わせても、合わせなくても使えます。

npm i bootstrap-icons

最新版 v1.4.0 アイコン インストール 使い方 スタイル アクセシビリティ GitHub リポジトリ

アイコン

インストール

Bootstrap Icons は npm で公開されています。必要な際には手動でダウンロードする必要があります。

npm

npm とコマンドラインを経由して Bootstrap Icons をインストールするには次のコマンドを使用します。その後、使い方でどのようにインクルードするかを選びましょう。

npm i bootstrap-icons

ダウンロード

Bootstrap Icons のリリース は GitHub でも公開されています。すべての SVG アイコンは、ライセンスや readme ファイルと同じくバンドルに含まれています。package.json も含まれていますが、npm スクリプトは主に開発のワークフローのためのものです。

最新の ZIP をダウンロード

CDN

アイコンフォントのスタイルシートを、CSS 内で <head>もしくは@importで読み込むことで、すぐに使い始めることができます。詳しくはドキュメント を参考にしてください。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css");

使い方

Bootstrap Icons は SVG なので、プロジェクトのセットアップの方法にもよりますが、いくつかの方法で HTML に含めることができます。Bootstrap Icons はデフォルトで widthheight1em になっており、font-size を用いて簡単にリサイズできるようになっています。

組み込み

画像ファイルを使わずに、アイコンを HTML に組み込みましょう。この例では widthheight をカスタムしています。

<svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z"/></svg>

Sprite

<use> 要素を用いて、アイコンの挿入に SVG sprite を使えます。アイコンのファイル名をフラグメント識別子として使います(例: toggles#toggles)。SVG sprite は <img> 要素と似た形で参照できますが、currentColor を使うことで簡単にテーマを設定できます。

<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>

外部の画像

Bootstrap Icons の SVG をコピーしディレクトリに追加することで、通常の画像のように <img> 要素を使ってアイコンを参照できます。

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

アイコンフォント

アイコン Web フォントを CSS 経由で読み込むことで、HTML 内でクラス名として参照することができます (例:<i class="bi-alarm-clock"></i>)。

アイコンの見た目を変えるには、font-sizecolor を使います。

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

CSS

SVG は CSS 内でも利用できます(色を指定するときには #%23 に変換するように、全ての文字はエスケープするようにします)。widthheight に何も指定がない場合は、アイコンは余った領域を埋めるようにリサイズされます。

viewbox 属性は background-size に応じてアイコンをリサイズするために使われます。ただし xmlns 属性が必要です。

.bi::before {
  display: inline-block;
  content: "";
  vertical-align: -.125em;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' 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>");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}

スタイル

色を変えるときには、.text-* クラスまたはカスタム CSS を使います。

<svg class="bi bi-alert-triangle text-success" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  ...
</svg>

アクセシビリティ

アイコンが装飾的でない場合には、適切な代替のテキストを付与するようにします。アイコンを使う方法やどの場所で使っているか(例:スタンドアロンの画像なのか、ボタン内なのか)にもよりますが、次のようなアプローチがあります:

Bootstrap
<!-- alt="..." on <img> element -->
<img src="/assets/img/bootstrap.svg" alt="Bootstrap" ...>
<!-- role="img" and aria-label="..." -->
<i class="bi-github" role="img" aria-label="GitHub"></i>
<svg class="bi" ... role="img" aria-label="Tools">
  <use xlink:href="bootstrap-icons.svg#tools"/>
</svg>
<!-- aria-label="..." on the control -->
<button ... aria-label="Mute">
  <svg class="bi bi-volume-mute-fill" ...>
  ...
</svg>

SVG との連携

SVG は素晴らしく連携が行なえますが、いくつか癖があります。以下では SVG を使ういくつかの方法を提示しますが、これらは Bootstrap Icons のコードには含まれていません。

報告されている問題は次のとおりです:

  • Internet Explorer と古いバージョンの Edge において、SVG がはじめからフォーカスされている。 SVG を埋め込む際に、<svg> 要素に focusable="false" を加えます。詳細の Stack Overflow はこちら。

  • SVG を <img タグで利用している場合、ブラウザのボイスアシスタント機能が画像と発音されず、時々スキップする。 可能な場合には role="img" を含めます。詳細の記事はこちら。

  • Internet Explorer において、外部の SVG sprite が正しく動作しない。 svg4everybody ポリフィルが必要です。

他にも問題がありましたか?ぜひ Issue を作成 して報告してください。