アイコン素材
サイト集

2024.01.14

Web制作においては、「アイコン素材」を活用することにより、デザインの質と制作効率を同時に上げることができます。

「アイコン素材」を提供するサイトはこちらで紹介した以外にも本当にたくさんあるのですが、多すぎても迷いますし、実際に使うのは10サイトもないと思いますので、今回は、あさんて視点で使う可能性があるものだけを掲載しました。他にも良いサイトが見つかれば、随時入れ替えていきます。

できるだけ本ブログでリンク先のアイコンの雰囲気が分かるようにサイト画像を張りましたが、詳細はリンク先でご確認下さい。

素材の活用とサイト一覧

活用方法

アイコン活用として「シンプルなアイコン」「デザインに応用できるアイコン」「その他のアイコン」に分類しました。

「シンプルなアイコン」は、文字代わりにも使えるようなシンプルなものをリストしました。”Font Awesome” でほぼ希望のモノが見つかると思いますが、雰囲気の異なるものを選びたい場合に残りのサイトの活用をオススメします。

「デザインに応用できるアイコン」は、少し凝ったアイコンをリストしており、アイキャッチやイラストにも応用できるアイコンです。

「その他のアイコン」にある “SVG PORN” は米国系だけのように思いますが、主だったロゴのSVGデータが入手可能です。時々正式版のロゴが欲しくなるので、そのような際に活用できます。

サイト一覧

素材数は2023年末時点の数字です。

著作権表記の「MIT」とは「MITライセンス」のことで、複製する場合には著作権表示をソフトウェアやコンテンツに記載する必要がありますが、Web制作の観点では制約は少なく使いやすいです。

サイト	商用 利用	著作権 表記	ファイル 形式	フリー素材数 (@2023年末)	補足
Font Awesome	〇	不要	SVG	2,000	シンプルで使いやすいサイトです。 有料も含めると30,000以上あります。
Material Icons	〇	不要	SVG PNG	3,100	Google 提供のサイトです。 現在は Google Font に統合されています。
IconPark	〇	不要	SVG PNG	2,600	中国 ByteDance 社提供のサイトです。 2色使い、複数食使いのアイコンも簡単に作れます。
Atlas icons	〇	MIT	SVG	2,700	洋風アイコンサイトです。 100pxという大きめのアイコンを作れます。
Phosphor Icons	〇	MIT	SVG PNG	7,400	洋風アイコンサイトです。 “Randomize” というボタンが面白いです。
SVG REPO	〇	MIT	SVG PNG	500,000	様々なタイプのアイコンがあり、 デザインに合わせて選択可能です。
ICOOON MONO	〇	不要	SVG PNG JPG	6,000	和風アイコンサイトです。 最大 512px のアイコンを作ることもできます。
icon-pit	〇	不要	PNG AI	3,500	日本語カテゴリに分類された和風アイコンサイトです。 手書き風のデザインが特徴です。
SVG PORN	〇	不要	SVG	800	海外企業のブランドロゴを入手可能です。 SVGで入手できるので助かります。

シンプルなアイコン

Font Awesome

サイト	商用 利用	著作権 表記	ファイル 形式	フリー素材数 (@2023年末)
Font Awesome	〇	不要	SVG	2,000

2023年時点で、2,000点以上のフリー素材、有料も含むと30,000点以上が活用でき、使い勝手の良さからあさんても良く使用しています。

カテゴリ “Brands” を選択すると、”facebook”、”twitter (現 X)”、”instagram”、”tiktok”、”linkdin”、”discord”、”Google”、”apple”、”figma” などのブランドロゴも取得でき、統一感があることから並べて扱いやすいです。

Material Icons

サイト	商用 利用	著作権 表記	ファイル 形式	フリー素材数 (@2023年末)
Material Icons	〇	不要	SVG PNG	3,100

以前は独立したサイトだったようですが、現在は “Google Font” に統合されており、より安心して使えるように思います。

“Filters” を選択すると、内部を塗ったり (Fill)、線の太さを変更したり (Weight) などを簡単に行うことができますし、”Optical Size” を活用すると見た目上のサイズ感を揃えた加工も可能です。

IconPark

サイト	商用 利用	著作権 表記	ファイル 形式	フリー素材数 (@2023年末)
IconPark	〇	不要	SVG PNG	2,600

中国 ByteDance 社提供のサイトですので、和風と少し異なったデザインのものがあります。

単色使いはもちろん、2色使い、複数色などへの色変更も柔軟にできるため、サイトデザインに合わせた色合いのアイコンも簡単に作成できるのは強みかと思います。

Atlas icons

サイト	商用 利用	著作権 表記	ファイル 形式	フリー素材数 (@2023年末)
Atlas icons	〇	MIT	SVG	2,700

2023年時点で、2,700点以上のフリーコンテンツを提供しており、SVG形式でのダウンロードおよび “web font” と呼ばれるネットワーク経由での活用も可能です。

米国系サイトであることから、”ICOOON MONO” とは異なる風合いのアイコンが欲しいときに利用します。

SVG形式はサイズ変更に強いとはいえ、サイト上で “Size” を 12 – 100px までと大きめのサイズまで変更できるは使いやすいと思います。

Phosphor Icons

サイト	商用 利用	著作権 表記	ファイル 形式	フリー素材数 (@2023年末)
Phosphor Icons	〇	MIT	SVG PNG	7,400

デザインは Atlas icons と似通っているのですが、7,400点を超える素材があるので、こちらも探したいモノを見つけやすいサイトです。

タブの右側に “Randomize” というボタンがあり、それを押すと、色、サイズ、線の太さなどをランダムに設定したアイコンを作ってくれるので、デザインに悩んだときの参考になります。

デザインに応用できるアイコン

少し凝ったアイコンをリストしており、アイキャッチやイラストにも応用できるアイコンです。単体で用いるよりはいくつかのアイコンを組み合わせてデザインを制作することが多いです。

SVG REPO

サイト	商用 利用	著作権 表記	ファイル 形式	フリー素材数 (@2023年末)
SVG REPO	〇	MIT	SVG PNG	500,000

いろんなスタイルのアイコンがあるため、順番に見ているだけでも楽しいサイトですし、デザインを検討する際にも参考になります。

ICOOON MONO

サイト	商用 利用	著作権 表記	ファイル 形式	フリー素材数 (@2023年末)
ICOOON MONO	〇	不要	SVG PNG JPG	6,000

2023年時点で6,000点以上のフリー素材を扱っている国産サイトです。国産につき、日本語でも検索ができるのが特徴の1つです。

サイト上でのサイズ変更も 16 – 512 px のレンジですので、最初から大きなサイズで確認したい場合に扱いやすいと思います。

icon-pit

サイト	商用 利用	著作権 表記	ファイル 形式	フリー素材数 (@2023年末)
icon-pit	〇	不要	PNG AI	3,500

「お金・ビジネス」「ファッション・美容」「人物」などの分かりやすいジャンル別にまとめられた国産のアイコンサイトです。国産につき日本語でも検索できます。

手書き風のデザインが特徴であり、暖かいイメージのサイトを作りたいときに使いやすいデザインかと思います。

その他のアイコン

SVG PORN

サイト	商用 利用	著作権 表記	ファイル 形式	フリー素材数 (@2023年末)
SVG PORN	〇	不要	SVG	800

米国系の企業やブランドロゴのSVPファイルを入手できるサイトです。

ブランドロゴはGoogle検索などでも探すことはできるのですが、サイズ変更などを考えるとできるだけオリジナルに近い SVGファイルを入手することで、品位も上げることができます。

関連カテゴリ

“デザイン素材” に関する投稿になります。