文字の横にアイコンを1つ添えるだけで、ボタンやメニューはぐっと分かりやすくなります。ここでは無料で使えるアイコン素材サイトを、やりたいこと別に画面つきで紹介します。
べんりワザ無料の写真・イラスト素材サイト写真やイラストの素材サイトはこちらタイプ1：定番の総合アイコン集
種類がとにかく豊富で、たいていのジャンルがそろう定番サイトです。
Font Awesome
Web制作の世界的な定番。矢印・SNS・道具などジャンルを問わず数万点。
Material Symbols
Googleが提供する、統一感のあるシンプルなアイコン集。
タイプ2：おしゃれでデザイン性の高いもの
雰囲気をそろえたいときは、統一されたデザインコンセプトを持つアイコン集が向いています。
Solar Icons
なめらかな曲線が特徴の、今どきの雰囲気のアイコン集。
Phosphor Icons
線の太さを6段階から選べる、柔軟なアイコン集。
Feather Icons
線だけで描かれた、とにかくシンプルなアイコン集。
タイプ3：まとめて探す
複数のアイコン集を横断して探したいときは、検索サイトが便利です。
Iconify
上で紹介したものも含め、100種類以上のアイコン集を横断検索できる。
使うときの注意：ライセンスを見る
無料でも、使っていい範囲（ライセンス）はサイトごとに決まっています。次の2つだけ頭のすみに置いておきましょう。
| 見るところ | 何を確かめる |
|---|---|
| 商用OKか | お店や仕事のページでも使えるか（練習だけなら気にしすぎなくてOK） |
| クレジット表記 | 「作者の名前を書いてね」というサイトもある |
多くのアイコン集は「無料・クレジット表記なしでOK」ですが、心配なときはそのサイトの「ライセンス」ページをのぞいてみましょう。
Font AwesomeかMaterial Symbols、どちらか1つ触ってみるところからで十分だよ。気に入ったアイコン集が見つかったら、ページ全体をそれでそろえると統一感が出るよ〜
アイコンの使い方：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プロパティで調整できます。
まとめ
- アイコン素材サイトはやりたいこと別に選ぶ——総合系 / デザイン重視 / まとめて探す
- 迷ったら、Font AwesomeかMaterial Symbolsから
- 使う前にライセンスを確認し、貼りつけはSVGで
アイコンが1つあるだけで、ボタンやメニューの意味は一目で伝わりやすくなります。