アイコン集 — 探してSVGをコピーする
複数のアイコンセットをまとめて検索できます。SVGのコードをその場でコピーでき、ライセンスも各セットごとに表示します。
アイコンを探すとき、セットごとにサイトを開いて回るのは手間です。ここでは複数のセットを横断して検索できるので、同じ意味のアイコンを見比べて選べます。
選んだアイコンはSVGのコードとしてコピーできます。そのままHTMLに貼れば、拡大しても輪郭がぼやけません。
セットを混ぜない
画面の中では、同じセットのアイコンで揃えてください。セットごとに線の太さ、角の丸み、余白の取り方が違うため、混ぜると並べたときにちぐはぐに見えます。
一つのセットに必要なアイコンが揃っているかを先に確認してから決めると、後から混ぜる必要がなくなります。
塗りつぶし型と線画型も混ぜないでください。どちらかに統一すると画面が落ち着きます。
ライセンスを確認する
多くのセットはMITなどの寛容なライセンスで、商用利用もできます。ただし条件はセットごとに違い、表示（クレジット）を求めるものもあります。
各セットのライセンスとその参照先を表示しているので、仕事で使う前に必ず確認してください。「無料で使える」と「条件なしで使える」は別です。
ブランドのロゴを集めたセットは特に注意が必要です。アイコンの配布ライセンスとは別に、そのブランドの商標の使用条件が適用されます。
使うときのこつ
- •SVGは色をCSSで変えられます。currentColor が指定されていれば、文字色に追従します。
- •同じ意味を表すアイコンでも、国や文化によって伝わり方が違います。迷ったら文字ラベルを添えてください。
- •アイコンだけのボタンには、読み上げ用の説明を必ず付けてください。
- •検索も表示もブラウザの中で完結します。
よくある質問
商用利用できますか？
セットごとに異なります。表示されているライセンスを確認してください。多くはMITなどで商用利用が可能です。
色を変えられますか？
SVGなのでCSSで変えられます。
PNGで書き出せますか？
SVGのコピーが基本です。PNGが必要なら、貼り付けた後に画像として書き出してください。
アイコンはどこから読み込まれますか？
表示に必要なデータはこのサイトから配信されます。検索した語が外部に送られることはありません。