フリー素材

【無料/商用可】WEBデザインで使いやすいおすすめフリーアイコンサイト7選

【無料/商用可】WEBデザインで使いやすいおすすめフリーアイコンサイト7選

こんにちは!

今回は制作会社に勤めて毎日webサイトのデザインをしている私が
よくお世話になっているフリー(無料)のアイコンサイトをご紹介します!

アイコンはwebサイトのデザインを作る時によく使用します。
ヘッダーやボタンなどにアイコンを使っているサイトも多いですよね。

文字だけのwebサイトは味気ないし、見づらい。。。
それに実際WEBサイトでは文字はあまり読まれないので、画像やイラストやアイコンが活躍しているのです。

そのサイトの雰囲気に合うアイコンをすぐ用意できるよう、フリーアイコンサイトを知っておくといいですよ^^

ぽめさん
ぽめさん
アイコンをどのように使っていいのかピンとこない!

という方のために、使用例も交えてご紹介していきます♪

shio
shio
私のbookmarkに入っている無料商用利用可能の実用性のあるサイトをまとめたので、ぜひ最後までチェックしていってくださいね♪ 

※ライセンスについては記事公開後に変更される可能性もあるため、ダウンロード前にご自身でご確認ください。

私がよく使うおすすめフリーアイコンサイト

ICOOON MONO

icooon-mono

icooon mono

シンプルなアイコンの種類が豊富!
なので私がアイコンを探す時、まず最初にこのサイトに来ます。

上部のメニュー部分にジャンルごとにまとめられているので、素材が探しやすいです✨
ダウンロードも簡単で、色も好きに変更でるので、さくっとお目当てのアイコンが手に入ります♪
いろんなサイト見ていて、結構ここのアイコンが使われているな〜と思います^^

▼webデザインではこんな感じで使えます!

webデザインでのアイコンの使用例

これは女性向けクッキングスクールのwebサイトで
持ち物の紹介部分。(例)
下に丸を敷くとおしゃれになります♡

商用利用 可能
クレジット表記 不要
ファイル形式 ・SVG
・PNG
・JPG

FLAT ICON DESIGN

flat-icon-design

flat icon

クオリティーの高いアイコンが揃っています!!
そして、流行りのフラットデザインのアイコンです。

一つのアイコンでも、影あり・背景あり・色味ごとに好みのタイプを選べます。
私も、ポップなデザインのサイトを制作した時に使用させていただきました♪

これで無料なのすごいですよね✨

商用利用 可能
クレジット表記 不要
ファイル形式 ・JPG
・PNG
・SVG
・AI
・EPS

 

OWL STOCK

owl-stock

owl-stock

モノクロもカラーも割とたくさんの種類が揃っています。
全体的にかっちりしすぎず、カジュアルに使える可愛い感じのアイコンです。

上記の2つのサイトと同じようなアイコンですが、まだあまり有名ではないので、上記のサイトで飽きてしまったり、他とあまり被りたくない方にはこちらがおすすめです!!

商用利用 可能
クレジット表記 不要
ファイル形式 ・PNG
・JPG
・AI

ハンコでアソブ

ハンコでアソブ

ハンコでアソブ

個人的に大好きなアイコンサイトです!

ハンコがかすれたナチュラルな風合いが素敵なんです。

保育園サイトをデザインした時に使用させていただきました。
色はモノクロの1種類のみなので、色は自分で編集して付けました♪

おかげさまで可愛いサイトができましたよ^^

▼応用例

こどもデザインのアイコン

フォトショップでカラーオーバーレイや、レイヤーにペンで色を塗ってグリッピングマスクをかけることで、色を簡単につけられます。
ヘッダー部分のアイコンにも、幼稚園のサイトだったら毎日の持ち物の部分にも使えますし、このアイコンだったら周りに散らしてイラストとして使っても可愛いと思います。

商用利用 可能
クレジット表記 不要
ファイル形式 ・PNG

icon-rainbow

icon-rainbow

icon rainbow

お花だけでもいろんな種類のアイコンが揃っていて、種類が豊富な印象です。

ビジネス系の資料で使えるようなフォーマルなものから、他であまり見ないユニークなもの(スケボーだけでも3種類!)まであるので、探していて楽しいです!

一つ目の ICOOON MONOと同じような感覚で簡単に探せます。

商用利用 可能(制限あり)
クレジット表記 不要
ファイル形式 ・JPG
・PNG
・SVG
・AI
・EPS

 Material Icons

 Material Icons

Material Icons

高品質でシンプルで可愛すぎないアイコンです。

検索は英語でですが、基本的なものは揃っているし、使いやすいサイトです。

商用利用 可能
クレジット表記 不要
ファイル形式 ・PNG
・SVG

150 outlined icons

freebiesbug

150-free-outlined-icons

線で作られた小さくてちょこんとしたかわいいアイコンです。
150個セットなので、ダウンロードしておくと便利ですよ!

今後さらに増える予定だそうです✌︎

▼使用例

【無料/商用可】WEBデザインで使いやすいおすすめフリーアイコンサイト7選

今回のアイキャッチでは贅沢にたくさん使いまくりました^^笑

ザ・アイコンって感じのアイコンですよね♡ 可愛い。。。

商用利用 可能
クレジット表記 不要
ファイル形式 ・AI
・PSD
・SVG

 

終わりに

WEBデザインにアイコンは欠かせない素材です。
ここに載っているサイトから探せば、だいたいのアイコンは見つかると思います!

shio
shio
デザインする前に、まずどのサイトにどんなアイコンが揃っているのかチェックしておくと、探す時間が減って効率良くwebサイトが作れますよ^^

サイトを選ぶのにたくさん悩んだので、この記事がサイト作りに役立てたら嬉しいです♡

フリーのイラストサイトのまとめもぜひご覧ください^^

webデザイナー|Canva公式クリエイター
shio
webデザイナーshioのアイコン
*月7000人が読んでるデザインブログ運営 *ナチュラルな婚姻届を心を込めて制作 webデザイナーを目指したい方向けに、 【勉強方法|転職活動|ポートフォリオ制作|制作会社で働いてからのこと|webサイト制作 etc... 】について発信しています。 このブログとともにwebデザイナーとして成長していきます!
\ Follow me /
webデザイナーの就職活動で使うポートフォリオのバナー