クリエイティブなWeb制作に
役立つ情報メディア

商用利用可能なフリーのアイコン・ピクトグラムまとめ

フラットデザインが主流になり早数年。
当然のようにピクトグラムがデザインに入り込んできています。
それなのに、単純な形で表現しなくてはならない分、悲しいかな伝わらずに「デザインの敗北」と言われてしまいがち。

そんな時の強い味方が、商用利用可能なフリーのアイコン素材。
参考にするもよし、そのまま使うもよし。便利だなと思うものをまとめてみました。

ICOOON MONO

URL:http://icooon-mono.com/

ダウンロード形式:PNG JPG SVG


サイト上で色やサイズが変えられるのでイメージが掴みやすいです。
分類カテゴリも分かりやすくて多いので、探しやすく重宝します。

icon rainbow

URL:http://icon-rainbow.com/

ダウンロード形式:PNG JPG SVG


こちらも色やサイズがページ上で確認できます。
検索した一覧の状態で一気に色を変えられるので便利です。
比較的細かく書き込まれたアイコンが多いイメージです。

ICONFINDER

URL:https://www.iconfinder.com/

ダウンロード形式:PNG SVG


アイコンによって有料・無料があるので要確認!
フリーアイコンの種類もさることながら、エディットモードなるものが存在し、サイト上でアイコンに手を入れられます。
もちろん編集したものもダウンロード可能です。

FLATICON

URL:https://www.flaticon.com/

ダウンロード形式:PNG SVG EPS PSD


クレジット表記が必要なので、フリーで使う際は注意が必要です。
とにかくバリエーションが多くテイストも様々なので、同じ意味のアイコンでもどういう観点から作るかのヒントになります。

iconmonstr

URL:https://iconmonstr.com/

ダウンロード形式:PNG SVG EPS PSD


ダウンロード形式が豊富なのがありがたいです。
Iconic Fontからttfが配布されているので、ダウンロードすればアイコンフォントとしても利用可能です。

Noun Project

URL:https://thenounproject.com/

ダウンロード形式:PNG SVG


アイコンによって有料・無料があるので要確認。
ダウンロードには登録が必要ですが、量も多く見ているだけで楽しいです。

Font Awesome

URL:https://fontawesome.com/


webサイトでアイコンを使うなら欠かせないFont Awesome。
Font Awesome5が出てさらに種類が豊富になりました。
ダウンロードフォルダ内(web-fonts-with-css/webfonts)のttfファイルをインストールすれば、PhotoshopやIllustratorでもフォントとして使えるので本当に便利。
使いたいアイコンをチートシートからコピペすればOKです。


ここからはアイコンというよりはイラストよりなサイトをご紹介したいと思います。

ハンコでアソブ

URL:http://hankodeasobu.com/

ダウンロード形式:PNG


素材のテイスト上、ダウンロード形式は少ないですが、ハンコのかすれ具合がいい雰囲気です。
手軽に可愛い雰囲気を出せる良いイラストが揃っています。

シルエットデザイン

URL:http://kage-design.com/wp/

ダウンロード形式:AI


アイコンとして使えるシンプルなものから精密なものまで、大量のイラストがダウンロードできます。
しかもAiデータなので使い勝手もとても良いです。

FLAT ICON DESIFN

URL:http://flat-icon-design.com/

ダウンロード形式:PNG JPG SVG EPS AI


種類豊富なアイコンイラストが、これまた豊富なダウンロード形式で提供されています。
カラーバリエーションも3種類あり至れり尽くせりです。


上記のようなサイト形式ではなく、まとまった数をアイコンセットとして配布している所もたくさんあります。
ベーシックなものからアイコンセットならではのコアなものまであるので、そちらはそちらでまとめたいなと思います。