見積もり
【商用利用可能】ホームページのアイコン素材サイト15選と設定の方法を解説【2024年4月最新版】
ホームページ担当者ならば、商用利用可能なフリー素材を探すのに苦労したという経験をお持ちの方も多いかと思います。Webデザインのテイストとも関連するアイコン素材は、特に最適なものを選ぶのが難しいと感じているWeb担当者も多いのではないでしょうか。
本記事では画像形式やデザイン面の解説も加えながら、商用利用可能なアイコンの無料素材がダウンロードできるサイトをご紹介します。
Web担当者の方は、ぜひ参考にしてください！
ホームページでアイコンを活用するメリットとは
画像イメージを使うことによる視覚的な効果
ホームページを制作する上で重要な目的の一つが、いかにユーザーを視覚的に誘導し、コンバージョンを達成するのかということですよね。
視線の誘導や画面操作で重要な役割を果たすのがアイコンです。
ウィンドウを閉じる×マークのアイコンや、ハンバーガーメニューのアイコンなど、ここクリックすれば、どのような操作ができるのかが一般ユーザーに広く定着しているものもあります。
またSNSやウェブサービスのロゴなど、イメージを見ただけで、どこの外部サービスにつながるのかわかるものもあります。こうした非言語の情報として機能するアイコンを利用することで、ユーザーインターフェイスの質を高めることができるのです。
リズム感を与えデザインのアクセントに
ホームページのデザインは、テキストだけだと、どうしても単調になります。
かといって画像や映像を多用すると、モバイル端末などでは、通信料を気にするユーザーから敬遠されてしうまうリスクもあります。
アイコンを利用すると、サイト訪問者に負荷をかけずにデザインにリズム感やアクセントを加えることが可能になります。近年はモバイルフレンドリーなサイト構築が重要視されていますので、リッチなコンテンツの素材の一つとしてアイコンをうまく利用するのが大変重要になってきます。
そこで今回は、ホームページ制作で使える商用利用可能な無料アイコンをダウンロードできるサイトをご紹介します。
ホームページにアイコンを設定する方法
最適なファイル形式を選ぶ
各フリー素材サイトは、いくつかのファイル形式で画像を提供しています。使用目的に合ったファイル形式のものをダウンロードしましょう。
背景が透明な透過画像データに対応しているのはPNGとSVGです。
AI、EPS、PSDなどはWebにそのままアップロードできませんので、PNG、SVG、JPG、GIFなどに変換してアップロードする必要があります。
JPGは写真などのイメージ画像には向いていますが、それなりにサイズが大きいので、モノトーン系のシンプルなアイコンを利用する場合はPNG、SVGのいずれかを選んでおくと良いでしょう。
ダウンロードした画像を設定する場合
サーバーに画像をアップロードし、その画像のリンクを貼り付けることによってホームページに表示されるようになります。
WordPressなどのCMSを利用している場合は、メディアに画像をアップロードし、編集画面で画像を挿入することでアイコンを設定できます。
WordPressでの設定方法
１）フリーアイコンをダウンロード
２）フリーアイコンをメディアにアップロード
３）編集画面にメディアを追加
４）実際に表示された画面
ウェブフォントを設定する場合
Font Awesameなどの「ウェブフォント」を利用する場合は、HTMLのHead要素内に以下のコードを貼り付けます。
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
上記設定後、利用したいFont Awesameのアイコンを選び、アイコンフォントのコードをコピーし、表示させたい箇所にコードを貼り付けることでホームページに表示することができます。
【商用利用可能】フリーで使えるアイコンのダウンロードサイトまとめ
ICOOON MONO
シンプルなモノトーンのフリーアイコン素材をダウンロードできるサイトです。カテゴリー別に6000種類以上のフリーアイコンが用意されいるので、お目当の画像を見つけるのも簡単です。
UIやUXを意識したデザインは、小さなサイズで利用しても何のイメージかしっかりと判別できるのでモバイル端末にも向いています。
ダウンロード前にサイト上でアイコンの色を変更可能なのも嬉しいポイントです。
商用利用：可能
クレジット表記：必要なし
ファイル形式：JPG、PNG、SVG、AI、EPS
言語：日本語
アイコン配付中！
立体感のあるカラーのリアルアイコンと、モノトーンでシンプルなシルエットアイコンの２種類のスタイルがあり、それぞれ豊富な種類が用意されています。Photoshop、Illustratorなどで編集可能なスマートフォン用のデータもダウンロード可能。
欲しいアイコンをリストに追加（1日12個まで）して一括ダウンロードする形式なので、煩わしい作業の手間も省けます。
商用利用：可能
クレジット表記：必要なし
ファイル形式：AI・PSD・PNGのパスデータ＋PNGの1枚画像の4種類
言語：日本語
ハンコでアソブ
ハンコで押したようなモノトーンのシルエットアイコンがダウンロードできるフリー素材サイト。
最近のWebデザインのトレンドの中に手書き風のフォントや装飾を使ったものがありますが、そんなサイトに通常のアイコンを使うと違和感が出てしまいます。
アルファベットや数字、ソーシャルアイコンなども用意されているので細部までこだわった表現が可能になります。
商用利用：可能
クレジット表記：必要なし
ファイル形式：PNG
言語：日本語
icon-rainbow
モノトーンのシルエットアイコンをダウンロードできるフリー素材サイト。
シンプルなアイコンですが可能な限り細部にこだわった表現がなされているのも特徴です。
人物のアイコンでは髪型や表情まで表現され、他のサイトではなかなか見つからないPC周辺機器のマーク、企業アイコンや規格マークなども用意されています。
こちらのサイトもダウンロード前にサイト上でアイコンのカラーを変更できます。
商用利用：可能
クレジット表記：必要なし
ファイル形式：JPG、PNG、SVG、AI、EPS
言語：日本語
SILHOUETTE DESIGN
影絵風のシルエットアイコンをダウンロードできるフリー素材サイト。
人物のシルエット以外にも、食べ物、乗り物、家具などリアルなシルエットのアイコンが豊富に揃っています。
簡単なインフォグラフィック風の表やグラフを作成したいという場合にも、こちらのサイトのフリー素材アイコンは最適かもしれません。
商用利用：可能
クレジット表記：必要なし
ファイル形式：AI
言語：日本語
SVG PORN
近年、Web制作でよく使われる使われる画像データの形式にSVG （Scalable Vector Graphics）というものがあります。
この形式はベクター画像という画像を拡大・縮小しても画像が荒くならず、なおかつデータサイズも抑えることが可能なデータです。
アニメーション表現をしたい、ホームページの表示速度を改善したいといった場合は、SVG形式のアイコンを選択すると良いかもしれません。
メーカー、SNS関連、カード会社のなどの商用ロゴのSVGデータも豊富に揃っていますのでECサイトの構築などにも役立つアイコンが見つかるでしょう。
商用利用：可能
クレジット表記：必要なし
ファイル形式：SVG
言語：英語
ICONFINDER
様々なタイプのアイコン素材をダウンロードできるサイト。有料のものも多いですが、価格の欄にFreeとかかれたアイコンは、無料でダウンロード可能です。
人気の高いフリー素材というのは、使い勝手が良いだけに数多くのサイトで利用されており、うまく利用しないとサイトのデザインを没個性的にしてしまう危険性もあります。
このサイトでは、様々なデザイナーがデザインした個性的なアイコンを見つけることができるので、「費用は抑えたいけどデザインにこだわりたい」といった方にはおすすめです。
商用利用：可能
クレジット表記：必要なし
ファイル形式：SVG、PNG、AIなど
言語：英語
Metrize Icons
http://www.alessioatzeni.com/metrize-icons/
円形の枠に囲まれたアイコンを無料でダウンロードできるサイトです。
モバイル端末やスマートフォンアプリのボタンは、ユーザーインターフェースを考慮して円形のボタンを導入することが多いですよね。
また、柔らかさを表現するために角丸で統一されたサイトデザインも近年よく見かけます。こうしたデザインに相性の良いのが円形アイコンです。
再生・停止といった操作系のアイコンはもちろん、WebサービスやSNS系のロゴも揃っています。
商用利用：可能
クレジット表記：必要なし
ファイル形式：PNG、SVG、AI、EPS、PDF
言語：英語
iconmonstr
シンプルなアイコンを選んでみたものの、テキストと合わせて用いた時にどうしても違和感が残るといったケースもよくあります。そういった場合は、フォントのウエイト（線の太さ）とアイコンの線の太さが合っていないのかもしれません。
こちらのサイトでは同じアイコンが、Fil / Bold（太め）とThin （細め）の2タイプから選択できるので、ホームページで使っているフォントの書式に合わせたアイコンを選ぶことができます。
商用利用：可能
クレジット表記：必要なし
ファイル形式：SVG、PNG、EPS、PSD（Webアイコンフォントも提供）
言語：英語
Streamline
https://www.streamlineicons.com/index.html
フリープランに登録すれば、100種類のアイコンを３つのウエイト（描画の太さ）のバージョンで一括ダウンロード可能です。登録もファーストネームとメールアドレスの入力のみなので簡単。
ファイル形式は、PNG、SVG、PDFの3種類が同梱されています。
ウエイトやファイル形式はまだ決まっていないけど、デザインを決める中で最適なアイコンを選びたいといった場合には、ダウンロードの手間が少ないのでおすすめの選択肢の一つです。
商用利用：可能
クレジット表記：必要なし
ファイル形式：PNG、SVG、PDF
言語：英語
FLATICON
2012年頃から立体感や質感などの要素を排除したフラットデザインというデザインが、スマホやタブレットなど画面の小さいモバイル端末との相性が良く、現在のウェブデザインの主流となってきています。
本サイトはそのフラットデザインに則したフリーアイコンがダウンロードできるサイトです。
ゲームキャラクターのようなアイコンや、ポップでかわいらしいイメージのアイコンなど種類も豊富。サイトに新規登録後、ダウンロード可能となります。
商用利用：可能
クレジット表記：基本的に「designed by 作成者名 from Flaticon」という表記が必要
ファイル形式：SVG、PNG、EPS、PSD
言語：英語
Material Icons
https://fonts.google.com/icons
2014年にGoogle社が「マテリアルデザイン」という新しいデザイン手法を提唱していますが、このデザインに則したアイコンがフリー素材として入手できるのがこちらのサイトです。
マテリアルデザインは、フラットデザインのシンプルさは引き継ぎつつも「紙」と「インク」といった現実世界の物質（マテリアル）の要素を意識したUIを構築します。
WordPressのテーマでもマテリアルデザインを謳っているものが多くありますので、そうしたテーマを選んだ場合はこちらのサイトでアイコンを探すのが良いかもしれません。
商用利用：可能
クレジット表記：必要なし
ファイル形式：SVG、PNG（Webフォントも提供）
言語：英語
orion Icon Library
アイコンの種類は、ラインで構成された「Line」、モノトーンのシルエットで構成された「Solid」、カラーイラストの「Color」、フラットデザイン向けの「Flat」の4タイプから選択することができます。
proと表示されているアイコンの利用は有料のプロ版に登録しなければいけませんが、それ以外は無料でダウンロード可能です（1日にダウンロードできる数に制限あり）。
商用利用：可能
クレジット表記：必要なし
ファイル形式：SVG、PNG
言語：英語
IconsPedia
様々な種類のアイコンがダウンロードできる素材サイト。
商用利用不可のものも含まれていますが、バラエティに富むクリエイターたちが素材を提供しているので、求めているテイストにぴったりのアイコンを見つけることができるでしょう。
個別のアイコンページには、同種のアイコン、類似のアイコンも表示されるので、根気よく探せば商用利用不可のアイコンと似たテイストの商用利用可能なフリーアイコンを探すこともできます。
商用利用：商用利用の場合のみ必要
クレジット表記：各アイコンによって異なる
ファイル形式：ICO、PNGなど
言語：英語
ダウンロードせずに使えるWebアイコンフォント「Font Awesame」
Font Awesame
画像をダウンロードして自身のサイトにアップロードするといったアイコンの設定方法以外に、Webアイコンフォントと呼ばれるサービスを利用して、フォントとしてサイトに埋め込む設置方法があります。
これは、専用のサーバー上にある画像やフォントなどのデータを読み込んで自分のサイトに表示させる方法なので、サーバーへの負荷を減らすことができるメリットがあります。
サイトの表示速度を重視したい場合は、Webアイコンフォントの利用をおすすめします。
そのWebアイコンフォントの中でもっとも人気の高いサービスの一つがFont Awesameです。
設定にはHTMLやCSSにコードを挿入しなければいけないのでWeb制作中上級者向けですが、アイコンの種類は豊富で、通常のフォント同様に色や大きさを簡単に変更することができるので表現の幅が広がります。
商用利用：可能
クレジット表記：必要なし
言語：英語
商用利用可能のフリーアイコンを扱う際の注意点とは
アイコンを編集しても大丈夫なのか
フリー素材はなぜ無料なのでしょうか。
フリー素材に付随した有料サービスも利用してもらう、広告収入を得るといった目的がある場合や、無名のクリエイターが知名度を高めるために素材提供している場合などもあります。
いずれにしても素材を提供する側にビジネス上のメリットがあることが前提となって運営されているケースがほとんどなので、著作権に関しても放棄しておらず、サイト運営者もしくは製作者が所有していることが大半です。
したがって、著作権法を守った上での利用となります。
また、著作権法の中には著作人格権というものがあり、その中には同一性保持権という第三者が勝手に著作物を改変してはならないという条文があります。
フリー素材として提供されているアイコンには、こうした著作権法の範囲内で編集を許可した状態で提供されているものが数多くあります。
利用規約等の確認は必要ですが、基本的にAI、EPS、PSDといったデータ形式が提供されている場合は編集可能である場合が多いです。
もう一つ注意しなければいけないのは再配布についてです。
フリーソフトウェアで用いられているGPLライセンスなどと同じ規定でアイコンの再配布が許可されている場合もありますが、編集可能な場合でも編集したデータを再配布することはNGとされていることがほとんどなので気をつけましょう。
クレジットやリンクの記載が必要な場合も
制作に関わった人物や団体などを明記することをクレジット表記と言います。フリー素材の中には作成者のクレジットを表記することによって利用可能なものも多くあります。
また、ダウンロードサイトへのリンクを記載することのよって利用可能なケースも存在します。こちらも利用規約で条件を確認しましょう。
必ず利用規約は確認しましょう！
商用利用可能なアイコンでも、公序良俗に反するような内容やアダルト系のサイトでは使用不可と書かれている利用規約が大半です。
アイコン制作者は無料で素材を提供してくれているのでマナーとしても必ず利用規約は確認しておきましょう。
海外のサイトは英語で利用規約を読む必要がありますが、どこに掲載されているのはわかりにくいケースもあるため、不安な場合は国内サイトを利用することをお勧めします。
ホームページで使えるフリーアイコン：まとめ
商用利用可能なフリー素材のアイコンを提供するサイトは他にもありますが、今回紹介したサイトをチェックすれば、お目当のアイコンは大抵見つかると思います。
ホームページを制作するのに0からすべて素材を作っていくのは非常に労力が必要で、Webデザイナーさんでもフリー素材のアイコンを利用してホームページを作ることもよくあることなのです。
工夫次第で、ハイクオリティなホームページに仕上げることもできますので、本記事を参考にしてアイコン素材のダウンロードにチャレンジしてみてください！
Q. ホームページのアイコン素材が見つけられるおすすめのサイトは？
アイコン素材サイトのおすすめとして「ICOOON MONO」「アイコン配付中！」等が挙げられます。それぞれの詳しい特徴は記事内で紹介していますので、ぜひ参考にしてください。
