Skip to main content
Bootstrap Icons
New in v1.10.0: 140+ new icons!

Bootstrap Icons

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

npm i bootstrap-icons
Open in Figma

現在 v1.10.5 アイコン アイコンスプライト インストール 使い方 スタイル アクセシビリティ GitHubリポジトリ

アイコン

Install

Bootstrap Icons are published to npm, but they can also be manually downloaded if needed.

Package manager

Install Bootstrap Icons—including SVGs, icon sprite, and icon fonts—with npm or Composer. Then, choose how you’d like to include the icons with the usage instructions.

npm i bootstrap-icons
composer require twbs/bootstrap-icons

ダウンロード

リリースはGitHubで公開され、アイコン SVG、フォント、ライセンス、readmeが含まれています。npmスクリプトは主に開発ワークフローのために利用されていますが、私たちのpackage.jsonも含まれています。

最新のZIPをダウンロード

CDN

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

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

使い方

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

組み込み

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

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

スプライト

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

注意Chromeにおいて、 複数のドメイン間にて<use>が動作しないというバグが報告されています。

<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/icons/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に変換するように、全ての文字はエスケープするようにします)。<svg>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-exclamation-triangle text-success" width="32" height="32" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
  ...
</svg>

アクセシビリティ

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

Bootstrap
<!-- alt="..." on <img> element -->
<img src="/assets/icons/bootstrap.svg" alt="Bootstrap" ...>
<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" aria-hidden="true" ...>
  ...
  </svg>
</button>

SVGとの連携

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

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

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

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

  • Internet Explorerにおいて、外部のSVGスプライトが正しく動作しない。 svg4everybody polyfillが必要です。

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