Bootstrap IconsをSass変数でカスタマイズ！色とサイズを統一管理する方法

アイコン（Bootstrap Icons）の色・サイズを変数で統一管理

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

生徒

「Bootstrap Iconsを使っているんですが、アイコンの色やサイズを毎回クラスで指定するのが面倒です。もっと効率的に管理できませんか？」

先生

「それならSassの変数を使って、アイコンの色やサイズを統一管理する方法がおすすめですよ。変数にまとめておけば、あとから色を変えるのも簡単です。」

生徒

「Sass変数で色やサイズを変えられるんですか？CSSのfont-sizeやcolorを直接書かなくてもいいんですか？」

先生

「はい。Sass変数に設定して、それをカスタムCSSに適用することで、全てのアイコンに一括で反映できます。つまり、管理の手間が大幅に減ります。」

1. Bootstrap Iconsとは？

Bootstrap Iconsは、Bootstrapチームが提供している公式のアイコンセットです。CDNやnpmで簡単に導入でき、<i class="bi bi-alarm"></i>のようにクラスを指定するだけで表示できます。

通常はfont-sizeやcolorを個別に指定して使いますが、Sass変数を活用すれば、色やサイズを全体で統一でき、デザインが整いやすくなります。

2. Sass変数でアイコンを統一管理する考え方

例えば、アイコンの色を$icon-color、サイズを$icon-sizeという変数にまとめておくと便利です。サイト全体でアイコンを変更したいときも、変数を1か所修正するだけで済みます。

これは、会社の制服を「青」に決めたら全員が自動的に青い服を着るのと同じイメージです。変数を「制服の色」として決めると、全体が統一されるわけです。

3. 実際のコード例（CSS変数で管理）

ここでは、CSS変数を使ってアイコンの色とサイズをまとめて管理する例を紹介します。


<style>
    :root {
        --icon-color: #ff6600;  /* アイコンの色 */
        --icon-size: 2rem;      /* アイコンの大きさ */
    }
    .bi {
        color: var(--icon-color);
        font-size: var(--icon-size);
    }
</style>

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

ブラウザ表示

4. Sass変数でさらに柔軟に

BootstrapをSassでカスタマイズしている場合は、Sass変数にまとめる方法も便利です。

例えば、$icon-colorや$icon-sizeを定義して、.biクラスに適用すれば、コンパイル後のCSSに反映されます。

ライトモード/ダークモードの切り替え時も変数を上書きするだけで全体を切り替えられるので、アイコンのデザインがテーマに自然になじみます。

5. 初心者が試すときの工夫

初心者はまず、1つの色と1つのサイズを全アイコンに適用するところから始めると理解しやすいです。その後、「通知アイコンだけ赤くする」「重要なボタンのアイコンだけ大きくする」といった応用をすると、より使いこなせます。

また、検索エンジン対策として「Bootstrap Icons Sass 変数色サイズ統一管理」といったキーワードを含めておくと、アイコンの使い方を調べている人に記事を見つけてもらいやすくなります。

まとめ

Bootstrap Iconsを変数で管理する重要性を振り返ろう

この記事では、Bootstrap Iconsを使うときに、色やサイズを毎回クラスやスタイルで指定するのではなく、 Sass変数やCSS変数を使って一括で管理する考え方について解説してきました。 Bootstrap Iconsはとても便利なアイコンセットですが、何も考えずに使い続けると、「このページではアイコンが大きい」「別のページでは色が違う」といったデザインのばらつきが起こりやすくなります。その結果、サイト全体の統一感が失われてしまうことも少なくありません。

そこで重要になるのが、「変数でまとめて管理する」という発想です。アイコンの色やサイズを変数として定義しておけば、どのページでも同じルールで表示され、デザインが自然と整います。また、後から「やっぱり色を変えたい」「少しサイズを小さくしたい」と思ったときにも、変数の値を1か所修正するだけで全体に反映できるため、修正の手間やミスを大きく減らすことができます。

Sass変数とCSS変数の考え方の共通点

記事の中では、Sass変数とCSS変数の両方に触れました。 Sass変数は、ビルド時に値が確定する仕組みで、 BootstrapをSassでカスタマイズしているプロジェクトでは特に力を発揮します。一方、CSS変数はブラウザ上で動的に値を切り替えられるため、ダークモードやテーマ切り替えと相性が良いという特徴があります。

どちらを使う場合でも共通しているのは、「色やサイズといったデザインのルールを1か所に集める」という考え方です。これはBootstrap Iconsに限らず、ボタン、アラート、バッジ、ナビゲーションなど、あらゆるUIパーツに応用できます。アイコンだけを特別扱いするのではなく、サイト全体の設計として変数管理を取り入れることで、保守性の高いWeb制作につながります。

まとめとして確認するアイコン統一管理サンプル

ここで、今回学んだ内容をひとつのサンプルとして振り返ってみましょう。 CSS変数を使い、Bootstrap Iconsの色とサイズを統一管理する基本例です。初心者の方でも、そのままコピーして試せる構成になっています。


<style>
    :root {
        --icon-color: #0066cc;
        --icon-size: 1.8rem;
    }
    .bi {
        color: var(--icon-color);
        font-size: var(--icon-size);
    }
</style>

<p>
    <i class="bi bi-alarm"></i>
    アラームアイコン
</p>
<p>
    <i class="bi bi-heart-fill"></i>
    お気に入りアイコン
</p>
<p>
    <i class="bi bi-star-fill"></i>
    評価アイコン
</p>

ブラウザ表示

このように、アイコンの見た目を変数で管理しておくことで、デザインの変更や調整がとても簡単になります。特にページ数が増えてきたときや、チームで開発している場合には、「どの色を使うのか」「どのサイズが基準なのか」が明確になるため、作業効率も大きく向上します。

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

生徒

「今までは、アイコンごとに colorやfont-sizeを書いていましたが、それだと後から直すのが大変だと分かりました。」

先生

「そうですね。最初は簡単でも、数が増えるほど管理が難しくなります。だからこそ変数でまとめるのが大切なんです。」

生徒

「変数を使えば、サイト全体のアイコンを一気に変更できるので、デザインの統一感も出ますね。」

先生

「その通りです。今回学んだBootstrap Iconsの管理方法は、他のUIパーツにも応用できます。ぜひ、自分の制作環境でも試してみてください。」

2026年最新スキルアップ・実践セミナー