Webデザイン、サイトの操作性・UIをわかりやすくする!商用可の秀逸なアイコン素材サイトまとめ11選

Webデザイン
ユキックス
ユキックス

こんにちは!ユキックス(@MILKIT_DESIGN)です!

ユキックス

Webサイトのデザインには、文字情報だけではなくアイコンや図版、イラストなどが内容をさらに分かりやすくするためによく使われていますよね!

読まないとわからない文字情報を視覚的に伝えたり文字だけでは伝わりにくい情報や内容の補足として表現する時、わかりやすい導線作りや心地よい使用感に欠かせないのが、アイコンの存在です。

ユキックス

ビジュアルに統一感を出したいときなど、アイコンはデザインツールでオリジナルのデザインを制作することの方が多いですが、イメージに近いアイコンを素材から探したり、クオリティの高いアイコン素材をたくさんの中から選んで使うこともできます。

この記事ではWebサイト制作依頼を検討中の方や制作を依頼中の方へ、アイコンデザインのアイディアやヒントにお役立ていただけるもの、現役Webデザイナーが実務の現場でよくチェックしている良質なアイコン素材をたくさん取り揃えているサイトを厳選してご紹介します!

操作性(UIデザインや使い心地)の改善、使用感アップの参考などにお役立ていただければ幸いです。

操作性・UIをわかりやすくする!現役Webデザイナーが実務の現場でチェックしている商用利用可の秀逸なアイコン素材サイトまとめ11選

無数にあるアイコン素材サイトの中でも、特に見やすい探しやすい心地良く感じるイメージに近いデザインが掲載されている秀逸なアイコン素材サイトを厳選してご紹介します。

基本的に商用利用可能なサイトをご紹介していますが、使用する際はライセンスなど各サイト先の規約を必ずご確認ください。

Noun Project

Noun Project

https://thenounproject.com/

ひとつのキーワード入力で、全部見るのが大変なほどのたくさんのアイコンを見つけることができる圧巻の掲載数を誇るサイト。色々なアイコンの表現があり、見ているだけで楽しい!その数なんと300万種類以上!!膨大な量のアイコンから検索できます!英語対応サイトです。

Orion Icon Library

Orion Icon Library

https://orioniconlibrary.com/

ラインの太さが絶妙にかわいいくて、個人的なお気に入り度高め&私用で使うことの多いアイコンサイト!

わたしはNotionの自分のページ用にもよく使っています。2021年10月時点で、6014個の無料アイコンと、2599個の有料アイコンがあって充実の掲載ボリューム!英語対応サイトです。

iconmonstr

iconmonstr

https://iconmonstr.com/

2021年10月時点で、4512個以上が商用フリーのアイコン素材集!モンスターの顔のようなサイトのアイコンがキャッチーでなかなか好きです。太さ・細さごとに選択して閲覧できます!英語対応サイトです。

Ikonate

Ikonate

https://ikonate.com/

カスタマイズ性が重視されていて、線の太さ、サイズ、色など細かな設定ができる、英語対応の個人・商用フリーのアイコン素材サイト。必要なアイコンのみ選択して、まとめてダウンロードが可能です。

Unicons

Unicons

https://iconscout.com/unicons

オープンソースのプロジェクトで、24pxの小さなSVGのラインスタイルアイコンが1100種類以上、無料提供されています!27種類の細かなカテゴリ分けで目的のアイコンが探しやすく汎用性の高いアイコンが揃っています。Webフォントとしても利用可能で、Figmaとも連携しています!

Tabler Icons

Tabler Icons

https://tablericons.com/

線の太さ、サイズ、色が選択できます。2021年10月時点で、1298個のアイコンが無料提供されているアイコン素材サイト!英語対応です。

Boxicons

Boxicons

https://boxicons.com/

公式のGoogleマテリアルデザインガイドラインにも準拠していて汎用性の高いアイコンが揃っています。オープンソースプロジェクトで、1525個のアイコンが商用でも使用できます。

ionicons

ionicons

https://ionic.io/ionicons

汎用性の高いシンプルなオープンソースのアイコン素材です。

Heroicons

Heroicons

https://heroicons.dev/

塗りつぶしとアウトラインを選べます!アイコンをクリックするだけでSVGコードをコピーできて使用感も軽いです!FigmaやGitHubで開けるのも、デザイナーや開発者にとって嬉しいポイント。

icon-icons.com

icon-icons.com

https://icon-icons.com/ja/

カテゴリ分けが用途ごとに分けられており、種類が豊富!色付きや3Dアイコン、塗り潰しアイコンや線のアイコンなど様々なスタイルを選べます!フッターから言語(Language)が選べて日本語対応もしています。

ICON BOX

ICON BOX

https://iconbox.fun/

パスが編集できる商用フリーのアイコン素材集!
太さ・細さの選択ができたり、カテゴリ分けもされています。日本語表記なので分かりやすく操作性も◎!

まとめ

今回は実務の現場でデザインを組んで行くときや、コンテンツ内容をアイコンに置き換えてデザインするとき、ビジュアルに統一感を出す際によくチェックしている秀逸なアイコン素材サイトを厳選してご紹介しました!

基本的に商用利用可能なサイトをご紹介していますが、使用する際はライセンスなど各サイト先の規約を必ずご確認ください。

ユキックス

他にも素晴らしいアイコン素材サイトがたくさんあるので、探してみてくださいね!

お気に入りのテイストや使ってみたいアイコンイメージの参考など、アイディアが見つかるきっかけになったならうれしいです。

執筆者は、ユキックスでした!

ご依頼・ご相談はこちら

お客様の課題解決に最適なメンバーアサインでスムーズなプロジェクト進行をいたします。制作して終わりではなく、お客様が求める成果に結びつくご提案をさせていただきます。

この記事がシェアできます

この記事を書いた人
ユキックス

ユキックス
デザイナー / アートディレクター / Web制作クリエイター

ユキックス
デザイナー / アートディレクター / Web制作クリエイター

Web制作を主軸にデザイナー・アートディレクターとして柔軟に国内の企業、商業デザインのクリエイティブ制作、ディレクションに携わり、受託制作や業務委託を中心に個人、制作パートナー、クリエイティブチームで協業し、幅広くクリエイティブデザインを制作しています。

  • Wepotについて

    アイコン

    Wepotはデジタルクリエイティブで課題を抱えるすべての人への解決策を提示できます。

  • 実績一覧

    アイコン

    Wepotには多種多様な実績があります。メンバーの強みが生きた実績をご覧ください。

  • 制作のご相談

    アイコン

    現在の課題やお悩みをお聞かせください。あなただけのクリエイティブチームを編成し解決へと導きます。