Bootstrap Iconsとは？アイコンの使い方・色・サイズ・ライセンスの基礎

先生と生徒の会話形式で理解しよう

生徒

「Webサイトにマークや絵を入れたいんですが、どうすればいいですか？」

先生

「Bootstrap Iconsという便利なアイコン集を使うと、簡単に追加できますよ。」

生徒

「それって無料なんですか？使い方も知りたいです！」

先生

「もちろん無料で使えますし、色やサイズの変更も簡単です。一緒に学びましょう！」

1. Bootstrap Iconsとは？

Bootstrap Icons（ブートストラップ・アイコン）は、世界中で最も人気のあるWebフレームワーク「Bootstrap」の開発チームが公開している、高品質な無料アイコンライブラリです。 2,000種類を超える豊富なラインナップがあり、すべてオープンソース（MITライセンス）で提供されています。

通常、Webサイトに「虫眼鏡」や「ゴミ箱」といったマークを入れるには、画像ファイル（PNGやJPEG）を自作したり用意したりする必要があります。しかし、Bootstrap Iconsを使えば、たった1行のコード（タグ）を書き込むだけで、プロがデザインしたような洗練されたアイコンを瞬時に表示させることができます。

初心者の方へ：アイコンを使うメリット

文字より伝わりやすい：「検索」と書くより、虫眼鏡のマークがある方が直感的に理解できます。
画像じゃないから軽い：画像ファイルと違い、文字（フォント）と同じ仕組みで動くため、読み込みが非常に速いです。
デザインが自由自在：CSSを使って、色や大きさを自由に変更できます。

まずは、どのようなアイコンが表示できるのか、簡単なサンプルを見てみましょう。


<p><i class="bi bi-hand-thumbs-up"></i> いいね！ボタン</p>
<p><i class="bi bi-cart4"></i> お買い物カート</p>
<p><i class="bi bi-telephone-fill"></i> お問い合わせ電話番号</p>
<p><i class="bi bi-alarm" style="color: blue;"></i> 目覚まし時計（青色に変更）</p>

ブラウザ表示

2. Bootstrap Iconsの読み込み方法

Bootstrap Iconsを使うためには、Webページに専用のコードを読み込む必要があります。
これは「CDN（シー・ディー・エヌ）」という仕組みを使います。CDNとは、インターネット上にあるデータをすぐに使えるようにしてくれる仕組みです。


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">

3. Bootstrap Iconsの使い方と基本的な書き方

読み込みができたら、アイコンを表示するには「i」タグに「bi bi-アイコン名」をつけるだけです。
たとえば「家（ホーム）」のアイコンを表示したい場合は、次のように書きます。


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

ブラウザ表示

4. よく使うBootstrap Iconsの種類

Bootstrap Iconsには1,500種類以上のアイコンが用意されています。
その中でもよく使うものをいくつか紹介します。


<i class="bi bi-person"></i> 人のアイコン<br>
<i class="bi bi-envelope"></i> メールのアイコン<br>
<i class="bi bi-search"></i> 検索の虫眼鏡アイコン<br>
<i class="bi bi-trash"></i> ゴミ箱アイコン<br>
<i class="bi bi-heart"></i> ハートのアイコン

ブラウザ表示

5. アイコンの色を変える方法

Bootstrapでは、クラスを追加するだけでアイコンの色を変更できます。
たとえば赤にしたい場合は「text-danger」、青は「text-primary」、緑は「text-success」です。


<i class="bi bi-heart text-danger"></i> 赤色のハート<br>
<i class="bi bi-person text-primary"></i> 青色の人アイコン<br>
<i class="bi bi-check-circle text-success"></i> 緑色のチェック

ブラウザ表示

6. アイコンのサイズを変更する方法

アイコンは「fs-1」や「fs-2」といったクラスを使えば大きさを変えることができます。
数字が小さいほど大きな文字になります。「fs」は「フォントサイズ（文字の大きさ）」の略です。


<i class="bi bi-star fs-1"></i> 一番大きい<br>
<i class="bi bi-star fs-3"></i> 少し小さい<br>
<i class="bi bi-star fs-6"></i> 小さめ

ブラウザ表示

7. Bootstrap Iconsのライセンスとは？商用利用はできる？

Bootstrap Iconsは「MITライセンス」という自由なルールで公開されています。
MITライセンスとは、「使ってもいいし、改造してもいいし、売ってもOK。でも著作権の表記だけは残してね」という内容です。

そのため、ブログでも会社のホームページでも自由に利用できます。
商用（しょうよう）利用とは、ビジネスやお店などで使うことですが、それも問題ありません。

まとめ

この記事では、Bootstrap Iconsという便利なアイコンセットを使って、Webページに視覚的な情報をわかりやすく追加する方法を学びました。ふだん何気なく目にしている家の形をしたホームアイコンや、人物を表すシルエット、メールを象徴する封筒や虫眼鏡の形など、多くの場面で使われるアイコンの役割は非常に大きく、ユーザーが迷わず直感的に操作できるように導く重要な要素になります。こうしたアイコンを画像として毎回用意すると手間がかかりますが、Bootstrap Iconsを使えばタグとクラスだけで表示できるため、初心者でも短時間で扱える点が魅力です。また、数千種類ものアイコンが公開されているため、どのようなページにも応用できる柔軟性があります。アイコンはただ飾りとして存在するだけではなく、操作の誘導や情報の整理にも役立つため、使いこなすことでページ全体の見やすさや案内のわかりやすさが向上します。たとえば、ナビゲーションメニューに家のアイコンを置くことで、トップページへの導線がひと目で理解できるようになりますし、メールのアイコンを配置すれば問い合わせリンクが直感的に判断できるようになります。こうした効果は特にスマートフォンでの閲覧時に強く発揮されるため、Bootstrap Iconsはモバイル対応にも向いた実践的な選択肢になります。また、色や大きさの調整がかんたんにできる点も重要で、Bootstrapのユーティリティクラスを活用することで、標識のように目立つ赤、落ち着いた青、安心感のある緑など、イメージや目的に合わせて最適な色を設定できます。視認性を高めるために大きめのサイズを指定したり、文章の邪魔にならないように小さめに配置したりと、場面ごとの細かな調整がしやすい点も、Bootstrap Iconsが実務でよく使われる理由の一つです。さらに、Bootstrap Iconsが採用しているMITライセンスはとても自由度が高く、商用利用も改変も問題なく行えるため、個人ブログから企業サイト、教育向けページやアプリ開発まで、多くの領域で安心して利用できます。ライセンス条件が厳しいと導入コストが高くなってしまいますが、Bootstrap Iconsではそうした心配が少ないため、初心者でも気兼ねなく使える環境が整っています。ここで、記事の振り返りも兼ねて、再度基本的な書き方の例をまとめておきます。同じアイコンでもクラスの組み合わせで見た目がどう変わるのかを確認することで、理解がより深まります。

サンプルプログラム（基本の復習）

基本のアイコン表示：


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

ブラウザ表示

色の変更例：


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

ブラウザ表示

サイズの変更例：


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

ブラウザ表示

上記のように、色とサイズを柔軟に切り替えることで、同じアイコンでも用途に応じた適切な表現が可能になります。特にアイコンの使い方はデザイン全体の印象に影響するため、配置場所や意味を考えながら丁寧に調整していくことが大切です。視覚的な変化がわかりやすいため、学習段階での理解も進みやすく、Web制作に触れたばかりの人にとっても扱いやすい領域です。アイコンは文章だけでは伝わりにくい内容を補ってくれるため、操作性や理解のしやすさに直結する重要な要素です。特に、案内が多いページやボタンが複数並ぶレイアウトでは、アイコンがあるだけで視線の流れが整理され、ページの直感的な読み取りがしやすくなります。Bootstrap Iconsはこのような場面で非常に活用しやすいアイテムであり、初心者がステップアップしていくうえでも触れておきたい技術のひとつです。

先生と生徒の振り返り会話

生徒

「Bootstrap Iconsって思ったより便利なんですね。タグだけで表示できるのがすごく簡単です。」

先生

「そうでしょう。色や大きさの変更も直感的なので、慣れるとどんどん使いこなせるようになりますよ。」

生徒

「実際にコードを書いてみたらすぐ表示されて楽しかったです。好きな色に変えられるのも嬉しいです。」

先生

「ページの案内や操作をわかりやすくするためにも、アイコンはとても役立ちます。目的に合わせて選べるようになると制作がもっと楽しくなりますよ。」

生徒

「はい！これからたくさんのアイコンを試しながら、自分でも使いこなしてみたいです。」