【mask】アイコンをCSSだけで色変更＆imgタグ感覚で利用する方法

もうアイコンを色違いで書き出さない。maskプロパティを活用し、CSSだけで色変更＆変数を活用してimg感覚で利用する方法を解説。filterプロパティは使用せず、正確な色を再現。かつデザインの修正対応も楽に。画像パス毎の新規クラスも不要。

ウェブ制作

公開日：2026/05/08

ウェブ制作の現場において、ピクトグラム風のアイコンの扱いには苦労します。

例えば、

同じデザインだが色違いのアイコンが大量に必要

だったり、

大量のアイコンを書き出し終わった後、「ごめん。やっぱ全部この色に変えて✨」と修正依頼

など😂

こうなってくると、また一からアイコンを書き出すのはウンザリです。今後はいつでも任意の色に変更できるよう、CSSで色を管理したくなります。

`filter`プロパティは使わない

CSSでアイコンの色を変更する方法としては、filterプロパティを使う方法もありますが、仕様上、HEXやRGBで直接色を指定できるわけではないので、意図した色を完全に再現するのは難しいです。

特にfilterが適用された要素を、hover時などにアニメーションで段階的に色を変化させようとすると、致命的な影響が出ます。

`mask`プロパティの活用

そこで使えるのが、CSSの mask を使った方法。

PNGやSVG画像を「型」として使い、CSSで背景色を塗ることで、アイコン画像を任意の色に変更できます。

基本の仕組み：デモコード

.icon {
    display: inline-block;
    width: 1em;
    min-width: 0;
    aspect-ratio: 1/1;
    mask: center center / contain no-repeat;
    mask-image: url(/icons/demo.svg);
    background-color: #333;
}

透過PNGやSVG画像を「型（マスク）」として使い、背景色を塗ることで色を制御します。

サイズやdisplayは用途に応じて調整してください。一例として上記プロパティは、文字サイズと連動した正方形アイコンを想定しています。

パスは変数化し、imgタグ風に使うことも可能

アイコン画像のパスは、CSS側に直接書いても勿論OKです。

ただしこの方法だと「画像パスだけ違うクラス」を大量に用意する必要があり、場合によっては管理が煩雑になります。クラス名を全部考えることも面倒です。

.icon {
    &.icon--a {mask-image: url(/icons/demo_a.svg);}
    &.icon--b {mask-image: url(/icons/demo_b.svg);}
    &.icon--c {mask-image: url(/icons/demo_c.svg);}
}

そこで、CSS変数の出番です。

画像パスや色情報を変数化し、実際の値はHTML側で指定することで、CSSはそのままにアイコンだけ差し替えることができます。

.icon {
    display: inline-block;
    width: 1em;
    min-width: 0;
    aspect-ratio: 1/1;
    mask: center center / contain no-repeat;
    mask-image: var(--url);
    background-color: var(--color);
}

<span class="icon" style="--url: url('/icons/demo.svg'); --color:#333;></span>

結果として、imgタグのような感覚でアイコンを扱えるようになります。

<span class="icon" style="--url: url('/icons/demo_1.svg'); --color:#ffa500;"></span>
<span class="icon" style="--url: url('/icons/demo_2.svg'); --color:#ff8c00;"></span>
<span class="icon" style="--url: url('/icons/demo_3.svg'); --color:#808080;"></span>
<span class="icon" style="--url: url('/icons/demo_4.svg'); --color:#1e90ff;"></span>

全部CSSだけで管理するか、パスや色情報はHTML側に分離するか。用途に応じてケースバイケースで対応してください。

メリット