とにかくTシャツ買え。
とにかくTシャツ買え。

【2021】無料で商用利用可なフリーアイコン素材サイト12選

花ちゃん

こんにちは、デザイナーの花ちゃんです!

Webサイトのデザインをしていると、アイコンを取り入れる場面がよくあると思います。アイコンには文字だけではわかりにくい情報を、ユーザーに対して直感的に素早く伝える効果があります。また、モチーフを簡略化しているので、限られたスペースでもしっかりその機能を果たしてくれます。

今回は、Webサイトはもちろん、図版や資料作成にも欠かせない、無料で使えるアイコン素材サイトをテイスト別にまとめてみました!

写真・イラストのフリー素材はこちら

👉働きながら♪ 在宅で♪ Webデザインの勉強するなら
デジタルハリウッドSTUDIO by LIG」へGO!

線画・塗りつぶしのアイコン

線画(アウトライン)と塗りつぶし(ソリッド)が用意されているアイコン素材サイトです。アウトライン型のアイコンは、輪郭の形に特徴があるモチーフに使われやすく、内側のスペースが広いほど視認性も高くなります。ソリッド型のアイコンは、塗りの特性上細かく凝ったデザインは不得意ですが、パッと見てわかりやすいという特徴があります。

ICON BOX

ICON BOXのトップページの画像

ICON BOX
商用利用:◯
加工:◯
ファイル形式:PNG・SVG
クレジット表記:不要
ユーザー登録:不要
利用規約

高クオリティで汎用性の高いアイコンが多く、線の太さなどテイストごとに探すことができます。また、パスが編集できる状態でデータを提供しているので、加工の際にとっても便利。線と線の間に隙間を作っていたり、角に丸みがあったりと、ころんとしていて可愛らしいアイコンです。

現在はアウトラインのみ扱っていますが、今後ソリッドのアイコンも随時追加されていくようです。

Ikonate

Ikonateのトップページの画像

Ikonate
商用利用:◯
加工:◯
ファイル形式:PNG・SVG
クレジット表記:不要
ユーザー登録:不要
利用規約

アウトラインを中心に扱った、直線的で抜け感のあるアイコンサイトです。カスタマイズ性が高く、デザインのテイストに合わせて、サイト上で色やサイズ、線の太さやスタイルを変更できます。

必要なアイコンだけを選択してダウンロードが可能です。

ICOOON MONO

ICOOON MONOのトップページの画像

ICOOON MONO
商用利用:◯
加工:◯
ファイル形式:Ai・PNG・SVG・EPS・JPG
クレジット表記:不要
ユーザー登録:不要
利用規約

「わかりやすさ」・「正確さ」・「シンプルさ」を意識した、6,000点以上のアイコンが揃っています。

サイト上では黒いアイコンが並んでいますが、カラーピッカーで素材の色を自由に変更できます! ダウンロードしたあと、色を変える手間が省けるので、本当にありがたい機能です。

ICOOON MONOでカ素材の色を自由に変更している画像

icon-rainbow

icon-rainbowのトップページの画像

icon-rainbow
商用利用:◯
加工:◯
ファイル形式:PNG・SVG・EPS
クレジット表記:不要
ユーザー登録:不要
利用規約

アウトライン・ソリッドのアイコンを扱っているサイトです。シンプルですが、とくにアウトラインのアイコンは書き込みが細かく凝った表現がされています。他のサイトなかなか見つからない、PCやインターネット関連、記号・マークの素材が充実しています。

こちらも、サイト上でサイズと色を自由に変更してからダウンロードができます。

iconmonstr

iconmonstrのトップページの画像

iconmonstr
商用利用:◯
加工:◯
ファイル形式:Ai・PSD・PNG・SVG
クレジット表記:不要
ユーザー登録:不要
利用規約

海外のサイトなので、検索は英語のみ対応しています。アイコンは線が太いものが多く、ポップで力強い印象なので、フォントのウエイトを重くしたものと合わせると統一感が出ると思います!

こちらもPNG形式のみ、サイト上でサイズと色を自由に変更してからダウンロードができます。

IFN 無料アイコン素材

IFN無料アイコン素材のトップページの画像

IFN無料アイコン素材
商用利用:◯
加工:◯
ファイル形式:PNG・SVG・EPS
クレジット表記:不要
ユーザー登録:不要
利用規約

小さいサイズで使うことを考慮されたアイコンです。人物素材は髪型や服装違いなど細かい差分がついており、図版などにおすすめです!

公式Twitterで新しいアイコンの追加情報を配信しているので、併せてチェックしてみてください!

Material Icons

Material Iconsのトップページの画像

Material Icons
商用利用:◯
加工:◯
ファイル形式:PNG・SVG
クレジット表記:不要
ユーザー登録:不要
利用規約

Googleが無料で公開しているアイコンで、マテリアルデザインのガイドラインに基づいています。

ガイドラインを見るだけでも、アイコンのサイズや表示領域、色や角の処理など、Webサイト制作やアプリ開発にアイコンを取り入れる際、かなり参考になります! よく使うアイコンが揃っており、アウトラインやソリッドの他にも、ツートーン、ラウンドやシャープなどがあり、テイストのバリエーションも豊富です。

ファイル形式はPNGとSVGの他に、Webフォントとしてサイトに埋め込むこともできます。

シルエットのアイコン

輪郭の中がモノトーンで塗りつぶされたシルエット(影絵)のアイコン素材サイトです。「形」のみという最低限の視覚情報で伝えられるため、反射的な認識が必要な場面(道路標識など)で使われることも多いです。国の形など有名なモチーフや単純でわかりやすいモチーフに向いています。

SILHOUETTE DESIGN

SILHOUETTE DESIGNのトップページの画像

SILHOUETTE DESIGN
商用利用:◯
加工:◯
ファイル形式:Ai・PNG・JPG・SVG
クレジット表記:不要
ユーザー登録:不要
利用規約

クオリティが高く、リアルなものからデフォルメされたものまで、さまざまなテイストが揃っています。

人物だけでなく、動物や乗り物、地図など、画像トレースでも時間がかかりそうな素材をダウンロードすることができます。

SILHOUETTE ILLUST

SILHOUETTE ILLUSTのトップページの画像

SILHOUETTE ILLUST
商用利用:◯
加工:◯
ファイル形式:Ai・PNG・JPG
クレジット表記:不要
ユーザー登録:不要
利用規約

無料で使える素材が10,000点以上!! 圧倒的な数ですが、カテゴリー検索が充実しているので、目当ての素材を探しやすいです。

ちょっとマイナーな素材もここなら見つけられる気がします……!

オリンピックにも使われるピクトグラム

ピクトグラムの無料素材サイトです。ピクトグラムとは、何らかの情報をわかりやすい絵で表現した視覚記号のひとつです。非常口やトイレマークなど国際的に統一されたデザインもあり、公共の空間でよく使われています。誰が見てもわかるという特徴から、ユニバーサルデザインに活用されることも。シンプルなデザインなので動きをつけやすく、アニメーションとの親和性も高いです。

EXPERIENCE JAPAN PICTOGRAMS

EXPERIENCE JAPAN PICTOGRAMSのトップページの画像

EXPERIENCE JAPAN PICTOGRAMS
商用利用:◯
加工:
ファイル形式:PNG・SVG
クレジット表記:不要
ユーザー登録:必要
利用規約

日本デザインセンターが日本の観光体験を支えるために企画・制作した無償ピクトグラムです。日本に古くから根付く、独特の文化や習慣、マナーを、シンプルで美しく、親しみやすい造形で表現しています。

素材の使用例が本当に素晴らしいので、ぜひ見てみてください!

※ 素材の形状を変形して使用する行為は禁止されています。使用する際は注意が必要です。

HUMAN PICTOGRAM 2.0

HUMAN PICTOGRAM 2.0のトップページの画像

HUMAN PICTOGRAM 2.0
商用利用:◯
加工:◯
ファイル形式:Ai・PNG・JPG
クレジット表記:不要
ユーザー登録:不要
利用規約

非常口のあの人による、真面目なものから愛嬌のある面白いポーズまで、動きのバリエーションが豊富な人型のピクトグラムです。

Adobe Illustratorがあれば、ヒューマンピクトグラム専用アタッチメント素材と組み合わせて、新しいピクトグラムを作ってみるのもおすすめです!

ヒューマンピクトグラム専用アタッチメント素材でカスタマイズしている画像

凹凸がないフラットなアイコン

凹凸がない平面的なフラットデザインのアイコン素材サイトです。立体表現や質感を最小限に抑えているのでスッキリとした印象もある一方で、色彩豊かで見た目にも華やかなデザインが多いです。

FLAT ICON DESIGN

FLAT ICON DESIGNのトップページの画像

FLAT ICON DESIGN
商用利用:◯
加工:◯
ファイル形式:Ai・PNG・SVG・EPS・JPG
クレジット表記:不要
ユーザー登録:不要
利用規約

ポップで可愛らしいアイコンは、それぞれテイストや配色が統一されているので、いくつか組み合わせて使っても、違和感がないのが嬉しいポイントです!

サイト上でサイズと色を変更したり、ファイル形式のJPG、PNG、SVGのいずれかを選ぶと、背景の有無を選択できます。

FLAT ICON DESIGNで背景色を変更している画像

まとめ

一から作るのはちょっと大変なアイコンですが、Webサイトやサービス、コンテンツの世界観に合わせたテイストにすれば、独自性を出すこともできます。

オリジナルのアイコンを作るための参考にするのもよし! 時短のために使うのもよし!

それでは、花ちゃんでした!

 
働きながら♪ 授業の合間に♪ Webデザインを勉強するなら……デジタルハリウッドSTUDIO by LIG

M o n g o