Bootstrap Iconsとは？アイコンの使い方・色・サイズ・ライセンスの基礎
生徒
「Webサイトにマークや絵を入れたいんですが、どうすればいいですか？」
先生
「Bootstrap Iconsという便利なアイコン集を使うと、簡単に追加できますよ。」
生徒
「それって無料なんですか？使い方も知りたいです！」
先生
「もちろん無料で使えますし、色やサイズの変更も簡単です。一緒に学びましょう！」
1. Bootstrap Iconsとは？
Bootstrap Icons（ブートストラップ・アイコン）は、Bootstrap公式が提供している無料のアイコン集です。
「アイコン」とは、ゴミ箱マークや人の顔、虫の絵など、操作や内容をわかりやすくするための小さな画像のことです。
このBootstrap Iconsを使えば、画像を用意しなくても、マークをすぐにWebページに表示できます。
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って思ったより便利なんですね。タグだけで表示できるのがすごく簡単です。」
先生
「そうでしょう。色や大きさの変更も直感的なので、慣れるとどんどん使いこなせるようになりますよ。」
生徒
「実際にコードを書いてみたらすぐ表示されて楽しかったです。好きな色に変えられるのも嬉しいです。」
先生
「ページの案内や操作をわかりやすくするためにも、アイコンはとても役立ちます。目的に合わせて選べるようになると制作がもっと楽しくなりますよ。」
生徒
「はい！これからたくさんのアイコンを試しながら、自分でも使いこなしてみたいです。」
この記事を読んだ人からの質問
