bootstrap-icons

Bootstrap Icons

Bootstrap Icons は、Bootstrap のコンポーネントやドキュメントと連携するように設計された、2,000 種類以上のアイコンを収録する公式のオープンソースアイコンライブラリです。

現在のバージョン：1.13.x（最新バージョンは https://icons.getbootstrap.com を確認してください）

インストール方法

CDN（最も簡単）

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" integrity="sha384-CK2SzKma4jA5H/MXDUU7i1TqZlCFaD4T01vtyDFvPlD97JQyS+IsSh1nI2EFbpyk" crossorigin="anonymous">

npm

npm install bootstrap-icons

次に、インポートします：

// In SCSS
@import "bootstrap-icons/font/bootstrap-icons.css";

// In JavaScript
import 'bootstrap-icons/font/bootstrap-icons.css';

ダウンロード

https://icons.getbootstrap.com からダウンロードし、ファイルをローカルに配置します。

Composer（PHP）

Composer を使用する PHP プロジェクトの場合：

composer require twbs/bootstrap-icons

次に、vendor ディレクトリからアイコンを参照します：

// Laravel Blade example
<img src="{{ asset('vendor/twbs/bootstrap-icons/icons/heart.svg') }}" alt="Heart">

// Symfony Twig example
<img src="{{ asset('bundles/bootstrap-icons/icons/heart.svg') }}" alt="Heart">

使用方法

アイコンフォント（ほとんどの場合に推奨）

アイコンフォントは、ほとんどのプロジェクトで最も簡単に使える方法です：

• 簡単な構文：<i class="bi bi-*"></i> を追加するだけです
• 自動サイズ調整：アイコンは周囲のテキストに合わせて拡大・縮小します
• 色の継承：アイコンは親要素の color プロパティを使用します
• 依存関係が単一：1 つの CSS ファイルですべてのアイコンを利用できます

高度な用途（色のグラデーション、アニメーション、オフラインやメール）では、代わりに SVG を使用する方法を検討してください。

<i class="bi bi-alarm"></i>
<i class="bi bi-heart-fill"></i>
<i class="bi bi-check-circle"></i>


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


<i class="bi bi-alarm fs-1"></i>
<i class="bi bi-alarm fs-3"></i>


<i class="bi bi-heart-fill text-danger"></i>
<i class="bi bi-check-circle text-success"></i>
<i class="bi bi-star-fill text-warning"></i>

SVG の埋め込み

ウェブサイトから SVG コードを直接コピーします：

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
  <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg>

SVG を埋め込むメリット：

• 外部依存関係がありません
• CSS で完全に制御できます
• JavaScript で操作できます
• currentColor はテキストの色を継承します

SVG スプライト

スプライトを一度だけ含め、アイコンを参照します：

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="heart" viewBox="0 0 16 16">
    <path d="m8 2.748-.717-.737C5.6.281..."/>
  </symbol>
  <symbol id="star" viewBox="0 0 16 16">
    <path d="M2.866 14.85c-.078.444..."/>
  </symbol>
</svg>


<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="#heart"/>
</svg>

または、外部のスプライトファイルを参照します：

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

外部画像

<img> 要素を使って、アイコンの SVG ファイルを直接参照します：

<img src="https://cdn.jsdelivr.net/npm/[email protected]/icons/heart.svg" alt="Heart" width="32" height="32">


<img src="/assets/icons/heart.svg" alt="Heart" width="32" height="32">

使用する場面：

• メールテンプレート（CSS やフォントへの依存関係がありません）
• シンプルな静的ページ
• コンテンツ管理システム
• アイコンごとにキャッシュする場合

トレードオフ：

• テキストの色を継承できません（その場合は CSS の方法を使用してください）
• アイコンごとに HTTP リクエストが発生します（HTTP/2 を使用する場合を除く）
• width/height 属性を明示的に指定する必要があります

CSS の方法

CSS の background-image または mask を使ってアイコンを含めます：

/* Background-image approach (fixed color) */
.icon-heart {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url("https://cdn.jsdelivr.net/npm/[email protected]/icons/heart.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Mask approach (inherits currentColor) */
.icon-heart-mask {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  mask-image: url("https://cdn.jsdelivr.net/npm/[email protected]/icons/heart.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("https://cdn.jsdelivr.net/npm/[email protected]/icons/heart.svg");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}

使用する場面：

• CSS クラスを使って適用する装飾アイコン
• テキストの色を継承する必要があるアイコン（mask の方法を使用してください）
• マークアップの変更を避けたい場合

トレードオフ：

• background-image：色を動的に変更できません
• mask の方法：Safari ではベンダープレフィックス（-webkit-mask-*）が必要です
• どちらの方法も、追加の ARIA マークアップがなければアクセシビリティに対応できません

アイコンのスタイル設定

サイズ

<i class="bi bi-heart" style="font-size: 24px;"></i>
<i class="bi bi-heart" style="font-size: 2rem;"></i>


<i class="bi bi-heart fs-1"></i>  
<i class="bi bi-heart fs-2"></i>  
<i class="bi bi-heart fs-3"></i>  
<i class="bi bi-heart fs-4"></i>  
<i class="bi bi-heart fs-5"></i>  
<i class="bi bi-heart fs-6"></i>  


<style>
  .icon-lg { font-size: 3rem; }
  .icon-md { font-size: 1.5rem; }
  .icon-sm { font-size: 0.875rem; }
</style>
<i class="bi bi-heart icon-lg"></i>


<svg class="bi" width="48" height="48">...</svg>

色

<i class="bi bi-heart text-primary"></i>
<i class="bi bi-heart text-danger"></i>
<i class="bi bi-heart text-success"></i>
<i class="bi bi-heart text-warning"></i>
<i class="bi bi-heart text-info"></i>


<i class="bi bi-heart" style="color: #ff6b6b;"></i>


<svg class="bi" fill="#ff6b6b">...</svg>


<div style="color: red;">
  <svg class="bi" fill="currentColor">...</svg>
</div>

垂直方向の配置

<i class="bi bi-heart" style="vertical-align: middle;"></i>


<i class="bi bi-heart align-middle"></i>


<style>
  .bi {
    vertical-align: -.125em;
  }
</style>

アクセシビリティ

意味を持つアイコン

アイコンが意味を伝える場合は、アクセシブルなテキストを用意します：

<button class="btn btn-danger">
  <i class="bi bi-trash" aria-hidden="true"></i>
  <span class="visually-hidden">Delete</span>
</button>


<button class="btn btn-danger" aria-label="Delete">
  <i class="bi bi-trash" aria-hidden="true"></i>
</button>


<i class="bi bi-info-circle" title="More information" role="img" aria-label="More information"></i>

装飾アイコン

装飾のみを目的とするアイコンは、スクリーンリーダーから隠します：

<i class="bi bi-star-fill" aria-hidden="true"></i>

表示テキストを伴うアイコン

テキストが表示されている場合は、アイコンをスクリーンリーダーから隠します：

<button class="btn btn-primary">
  <i class="bi bi-download" aria-hidden="true"></i> Download
</button>

よく使われるパターン

アイコン付きボタン

<button class="btn btn-primary">
  <i class="bi bi-download me-1"></i> Download
</button>


<button class="btn btn-primary">
  Next <i class="bi bi-arrow-right ms-1"></i>
</button>


<button class="btn btn-outline-secondary" aria-label="Settings">
  <i class="bi bi-gear-fill"></i>
</button>

アイコン付きナビゲーション

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">
      <i class="bi bi-house-fill me-1"></i> Home
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <i class="bi bi-person me-1"></i> Profile
    </a>
  </li>
</ul>

アイコン付きリスト

<ul class="list-unstyled">
  <li><i class="bi bi-check-circle text-success me-2"></i>Feature one</li>
  <li><i class="bi bi-check-circle text-success me-2"></i>Feature two</li>
  <li><i class="bi bi-x-circle text-danger me-2"></i>Not included</li>
</ul>

ソーシャルアイコン

<div class="d-flex gap-3 fs-4">
  <a href="#" class="text-decoration-none">
    <i class="bi bi-facebook text-primary"></i>
  </a>
  <a href="#" class="text-decoration-none">
    <i class="bi bi-twitter-x text-dark"></i>
  </a>
  <a href="#" class="text-decoration-none">
    <i class="bi bi-instagram text-danger"></i>
  </a>
  <a href="#" class="text-decoration-none">
    <i class="bi bi-linkedin text-primary"></i>
  </a>
  <a href="#" class="text-decoration-none">
    <i class="bi bi-github text-dark"></i>
  </a>
</div>

アイコンバッジ

<button class="btn btn-primary position-relative">
  <i class="bi bi-envelope"></i>
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

よく使われるアイコン名

アクション

bi-plus、bi-dash、bi-x、bi-check、bi-pencil、bi-trash、bi-download、bi-upload、bi-search、bi-filter

ナビゲーション

bi-arrow-left、bi-arrow-right、bi-arrow-up、bi-arrow-down、bi-chevron-left、bi-chevron-right、bi-house、bi-list、bi-grid

UI 要素

bi-bell、bi-gear、bi-sliders、bi-three-dots、bi-three-dots-vertical、bi-person、bi-people、bi-envelope、bi-chat

ステータス

bi-check-circle、bi-x-circle、bi-exclamation-circle、bi-info-circle、bi-question-circle

ファイル

bi-file、bi-folder、bi-image、bi-film、bi-music-note、bi-file-pdf、bi-file-word、bi-file-excel

ソーシャル

bi-facebook、bi-twitter-x、bi-instagram、bi-linkedin、bi-github、bi-youtube、bi-discord、bi-slack

その他のリソース

リファレンスファイル

• references/icon-categories.md - カテゴリ別のアイコン一覧（アクション、ナビゲーション、UI 要素、ステータス、ファイル、メディア、ソーシャル、デバイス、天気、E コマース、開発）
• references/sass-integration.md - Sass 変数、バンドラーの設定（Vite、Parcel、Webpack）、Bootstrap Sass との統合、トラブルシューティング
• references/rails-integration.md - Rails 8 の Propshaft 設定、cssbundling-rails、dartsass-rails、bootstrap-icons gem、トラブルシューティング

サンプルファイル

• examples/icon-methods-styling-patterns.html - アイコンフォント、埋め込み SVG、SVG スプライト、サイズ調整、色付け、垂直方向の配置テクニック
• examples/icon-ui-accessibility-patterns.html - ボタン、ナビゲーション、リスト、ソーシャルアイコン、バッジ、アクセシビリティのパターン