テック技報最新号へ →
CSS

アイコンは SVG コンポーネントではなく CSS の mask で（Icons in Pure CSS）

SVG を data URI にして mask に指定し、background-color: currentColor で塗ると、クラス1つで「文字色に追従し、文字サイズで伸縮する」アイコンになる。

@ryoppippi · 2026-10-09
#アイコン#mask#パフォーマンス#currentColor

どんな時に使う？

  • React などで SVG アイコンコンポーネントを大量に import して JS バンドルが重いとき。
  • 投稿者は SVG アイコンライブラリをやめて CSS クラス化し、CSS は増えたが JS が大きく減って Lighthouse スコアが改善したと報告。

コード

css
.icon {
  display: inline-block;
  inline-size: 1em;      /* 親の font-size に追従 */
  block-size: 1em;
  background-color: currentColor; /* 文字色に追従 */
  mask: var(--svg) no-repeat center / 100% 100%;
}
.icon-check {
  --svg: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}
html
<button><span class="icon icon-check" aria-hidden="true"></span>保存</button>
  • 単色アイコン → mask ＋ currentColor。
  • 多色アイコン → background: url(...) no-repeat center / 100% 100% で画像としてそのまま表示。
  • SVG はテキストなので base64 より URL エンコード（<→%3C など）のほうが小さくなる。
  • 手書きせず UnoCSS の preset-icons（Iconify）などで自動生成するのが現実的。

注意点

  • 装飾アイコンは aria-hidden="true"、意味があるならボタン側にラベルを付ける。
  • 使うアイコンが多いと CSS が膨らむので、必要なものだけ生成する仕組みと組み合わせる。

出典

X の元の投稿を開く