無料のアイコン素材サイト

文字の横にアイコンを1つ添えるだけで、ボタンやメニューはぐっと分かりやすくなります。ここでは無料で使えるアイコン素材サイトを、やりたいこと別に画面つきで紹介します。

タイプ1：定番の総合アイコン集

種類がとにかく豊富で、たいていのジャンルがそろう定番サイトです。

Font Awesome

Web制作の世界的な定番。矢印・SNS・道具などジャンルを問わず数万点。

Font Awesome

Material Symbols

Googleが提供する、統一感のあるシンプルなアイコン集。

Material Symbols

タイプ2：おしゃれでデザイン性の高いもの

雰囲気をそろえたいときは、統一されたデザインコンセプトを持つアイコン集が向いています。

Solar Icons

なめらかな曲線が特徴の、今どきの雰囲気のアイコン集。

Solar Icons

Phosphor Icons

線の太さを6段階から選べる、柔軟なアイコン集。

Phosphor Icons

Feather Icons

線だけで描かれた、とにかくシンプルなアイコン集。

Feather Icons

タイプ3：まとめて探す

複数のアイコン集を横断して探したいときは、検索サイトが便利です。

Iconify

上で紹介したものも含め、200種類以上・30万点以上のアイコン集を横断検索できる。

Iconify

使うときの注意：ライセンスを見る

無料でも、使っていい範囲（ライセンス）はサイトごとに決まっています。次の2つだけ頭のすみに置いておきましょう。

「無料だからどれも同じ」ではなく、クレジット表記が要るかどうかはアイコン集ごとに違います。この記事で紹介したものはこうなっています。

練習で使うぶんには気にしすぎなくて大丈夫ですが、お店や仕事のページで使うときは、そのアイコン集の「ライセンス」ページを一度のぞいておきましょう。

アイコンの使い方：SVGとして埋め込む

多くのアイコン素材サイトでは、アイコンをSVGという形式でダウンロードまたはコピーできます。SVGは文字と同じようにHTMLへそのまま貼りつけられる画像形式で、<img>いらずでページに置けます。

<button>
  <svg viewBox="0 0 24 24" width="20" height="20">
    <path d="…" />
  </svg>
  保存する
</button>

サイトの「Copy SVG」や「Download SVG」ボタンから中身をコピーし、そのままHTMLに貼りつければ表示できます。色を変えたいときは、SVGのfill属性やCSSのcolorプロパティで調整できます。

文字の色に合わせてアイコンの色も自動で変えたいときは、SVG側をfill="currentColor"にしておく方法が便利です。こうすると、アイコンの色はそのまま囲んでいる文字の色に追従します。

button {
  color: #3a3a3a;
}

<button>
  <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
    <path d="…" />
  </svg>
  保存する
</button>

こう書けば、buttonの文字色を変えるだけでアイコンの色も一緒に変わり、CSSを二重に書かずに済みます。

まとめ

1. アイコン素材サイトはやりたいこと別に選ぶ——総合系 / デザイン重視 / まとめて探す
2. 迷ったら、Font AwesomeかMaterial Symbolsから
3. 使う前にライセンスを確認し、貼りつけはSVGで

アイコンが1つあるだけで、ボタンやメニューの意味は一目で伝わりやすくなります。