この記事では、商用利用可能な無料で使えるアイコン素材配布サイトをご紹介します。その中でも以下のような条件で選定しています。
UIデザインに必要なアイコンが網羅されている
モダンで視認性が高いデザイン
アイコンのデザインが統一されている
Figmaで利用しやすい（Figmaプラグインやコミュニティファイルが提供されている）
アイコン素材の入手方法として、ローカル環境にダウンロードできるだけでなく、SVGのコードとしてコピーできるサイトや、CDNで読み込んで使えるサイトなど幅広い用途に対応できる配布サイトを厳選しています。
アイコンは、Webサイトやアプリなど幅広いシーンで活用される素材です。自作できない場合や、時短で効率化したい方は、ぜひ参考にしていただければと思います。
Iconoir | 人間味のある雰囲気のアイコンが揃う
https://iconoir.com/
「Iconoir」は1,500以上のアイコンを配布している素材サイトです。サイト内では、アイコン画像のデータのダウンロードやSVGのコードコピーが可能となっているため、気に入った素材をすぐに使えるのが魅力です。
CSS Icons | CSSだけで作られたモダンなアイコンセット
https://css.gg/
「CSS Icons」は、CSSで作られたアイコンセットです。700以上のアイコンが配布され、FigmaファイルやSVGスプライト版が準備されています。入手画面でカラー変更もできる柔軟性の高さが特徴です。また、CDNで読み込むだけで使えるCSSのコードもあわせて公開されているため、Webサイト制作時に便利なサイトです。
Tabler Icons | アイコンを検索できるFigmaプラグインを提供
https://tablericons.com/
「Tabler Icons」は、4,950以上もの大規模なアイコンセットです。アイコンの検索をFigma上からおこなえるFigmaプラグインや、開発者用のライブラリも準備されています。画像データとしてPNGフォーマットもダウンロード可能です。
Remix Icon | 一貫性のあるデザインのオープンソースアイコンセット
https://remixicon.com/
「Remix Icon」は、1,500以上のシンプルな単色アイコンが提供されています。SVGやPNGデータのダウンロードとあわせて、SVGのコードコピーが可能です。ダウンロードオプションとしては以下の4つが準備されています。
Icon pack：.svg
iconfonts：.css / .less / .eot / .ttf / .woff / .woff2 / svg-sprite
npm：npm install remixicon --save
Figma：Figma Plugin
Simple Icons | 有名ブランドのロゴをSVGアイコンとして配布
https://simpleicons.org/
「Simple Icons」は、有名ブランドのロゴがアイコンとして配布されている、CC0ライセンスのサイトです。各ブランドのカラーコードがプリセットされているため、カラーコードで検索もできます。また、SVGだけでなくPDFでもダウンロード可能なことが特徴です。
Atlas Icons | ReactやVueのコードもサイトからコピー可能
https://atlasicons.vectopus.com/
「Atlas Icons」は、33種類と豊富なカテゴリに分けられたアイコンセットで、個人でも商用プロジェクトでも完全無料で使用できます。入手時はHTML/CSS・React・Vue・Flutterそれぞれのコードがコピー可能です。メールアドレスを登録することで、SVGファイルの一括入手も可能です。
MingCute Icon | 視認性の高いアイコンが2800以上
https://www.mingcute.com/
「MingCute Icon」は、サイズ・カラーを自由にカスタマイズしたうえで素材をダウンロードできるアイコンサイトです。ローカルにはSVG・PNG形式でダウンロードできます。また、サイト上部のダウンロードリンクから一括で素材をダウンロードでき、Webフォントとして使用できるデータも入っています。
Feather | 使いやすいモダンなデザインが特徴
https://feathericons.com/
「Feather」は、Webサイトなどでも使いやすい素材が200種類以上揃っている、シンプルで視認性に優れたアイコンセットです。アイコンサイズやストロークの太さ、カラーをWebサイト上で調整したうえでSVGデータを入手できます。Download allから素材を一括で入手することも可能です。
Lucide | さまざまなフレームワークにも対応
https://lucide.dev/icons/
「Lucide」は、Feather Iconsを元に作られたオープンソースのアイコンセットです。サイト内では1,400以上のアイコンが配布されています。HTMLやReact、Vueなど多様な言語にフォーマットされたコードをコピーすることも可能です。また、GitHubページから一括で素材をダウンロードできます。
Majesticons | 丸みのあるアイコンが特徴
https://www.majesticons.com/
「Majesticons」は、無料で720以上のアイコンが入手できる素材サイトです。無料版ではサイト上からの素材ダウンロードはできないため、GitHubからSVGファイルのダウンロードをする必要があります。99$の買い切りプランを購入することで、7,300以上のアイコン素材を入手できます。
Flowbite | Tailwindとの親和性の高いアイコンセット
https://flowbite.com/icons/
「Flowbite」は、ナビゲーションバーやページネーションなどWebサイトにも使えるコンポーネントが豊富に用意されているアイコン素材サイトです。FlowbiteはTailwind CSSをベースにしているため、Tailwind CSSを使っている場合、そのユーティリティクラスをコピーするだけで導入できます。
Heroicons | 汎用性の高い人気アイコンセット
https://heroicons.com/
「Heroicons」は、Tailwind CSSのクリエイターによって開発された人気のオープンソースアイコンセットです。アイコンをホバーすると、SVGとJSXをコピーできます。また、280種以上のアイ コンが、Outline・Solid・Mini・Micro、それぞれ4種類のスタイルから選択できます。その中でも、Microサイズは16x16で作成されており、密度の高いUIにも活用できます。
Untitled UI | Figmaに最適化されたアイコンセット
https://www.untitledui.com/icons
「Untitled UI」は、Figmaユーザーに最適化されたアイコンパックです。サイト上からできることはSVGコードのコピーのみですが、無料の会員登録をするとことでFigmaのUIキットが入手できます。買い切りの有料版を購入する と、素材数が増えるだけでなく、ダークモードの切り替えやFigma上での変数対応可能な素材が使えるようになります。
また、ライセンスの種別については見当たりませんでしたが、ライセンスページには商業プロジェクト (Web サイト、製品、アプリなど)、クライアントの仕事、個人のプロジェクトで利用できることが明記されています。
Fontawesome | 多様なアイコンが提供されている有名アイコンセット
https://fontawesome.com/
「Fontawesome」は、世界中のクリエイターに利用されている最大規模のアイコン素材配布サイトです。Webサイトやアプリはもちろん、多岐にわたるジャンルのアイコンが用意されています。無料版でも2,000以上、有料版では30,000以上のアイコンを入手できます。Fontawesomeのライセンスは無料版と有料版で若干異なりますが、無料版であるFont Awesome Freeのダウンロードはクリエイティブ・コモンズの下でライセンスされており、CC BY 4.0となっています。
Google Fonts | マテリアルデザインのアイコンセット
https://fonts.google.com/icons
「Google Fonts」は、Googleが提供する無料で商用利用できるWebフォントサービスですが、その中にはアイコン素材も含まれています。3,000を超えるマテリアルシンボルには、3つのスタイルと調整可能な4つの可変フォントスタイル（フィル・ウェイト・グレード・オプティカルサイズ）があります。
おすすめのアイコン素材配布サイト一覧表
SVGフォーマットとは？
SVGフォーマットとは、正式にはスケーラブル・ベクター・グラフィックスと称され、画像を数学的なコードで表現する技術です。
この形式の最大の特徴は、どのような解像度のディスプレイ上でも、画質の劣化なく表示が可能な点 にあります。ピクセルベースの画像と異なり、SVGは図形や文字を直線や曲線といったベクターデータで描写するため、拡大や縮小を行っても鮮明さを保てます。とくにWebデザインの領域では、この性質が大きな利点となります。ロゴやアイコンなどのグラフィック要素は、異なるデバイスや画面サイズに対応する必要があり、SVGフォーマットはその要求を満たすための理想的な選択肢となります。加えて、SVGはCSSやJavaScriptとの連携も容易であり、動的なインタラクションやアニメーションの実装も可能です。
これらの特性から、SVGは高品質かつ柔軟なWebデザインを実現するための重要な画像フォーマットとして位置づけられています。
PNGフォーマットとの使い分け
アイコンやロゴといった色数が限られ、形状がシンプルなグラフィックには、基本的にSVGフォーマットが適しています。その理由は、SVGがスケーラビリティとファイルサイズの効率性を兼ね備えているため、高品質なビジュアル表現が可能となるからです。
一方、PNGフォーマットはその汎用性の高さから採用するケースが考えられます。一部のCMSではSVGのサポートが限定的な場合がありますが、PNGは広くサポートされているため、互換性の面で優位性があります。とくにWordPressのようなプラット フォームでは、セキュリティ上の理由からSVGの使用が制限されることがあるため、PNGが安全な選択肢となります。
このように、SVGとPNGはそれぞれに優れた特性を持ち、適切に使い分けることでパフォーマンスとビジュアルの質を最適化できます。
Figmaコミュニティファイルとは？
Figmaコミュニティは、クリエイターがプラグインやデザインファイルを公開する場です。そしてコミュニティファイルとは、作成者がコミュニティと共有しているデザインファイルを意味します。
これらのファイルには、UIキットやアイコンセット、テンプレートやプラグインなどが含まれ、Figmaのコミュニティによって作成されています。ユーザーはこれらのファイルから自分のプロジェクトに適したものを見つけ、複製してカスタマイズできます。
当記事で紹介したアイコンサイトの素材も、Figmaのコミュニティファイルとして公開されていますので、Figmaを使っている方は活用してみるとよいでしょう。
ライセンスについて
クリエイターが作成したデータには、利用を制限するさまざまなライセンスが設定されています。当記事で紹介した素材サイトのライセンスはすべて商用利用可能なものですが、その中でも以下のような種類があります。
上記ライセンスはいずれも、OSS（オープンソースソフトウェア）としてライセンスが設定されています。
MIT License
MIT License（エムアイティーライセンス）とは、マサチューセッツ工科大学（MIT）が作成したソフトウェアのライセンスです。MIT Licenseでは、ソフトウェアを自由に扱ってよいことや、再頒布時に著作権表示とライセンス表示を含めること、作者や著作権者はいかなる責任も負わないことを定めることなどが定められています。
非常にシンプルかつ自由度が高いライセンスであり、コピーレフト要件は存在せず、作者へのクレジットも必須ではありません。
Apache License 2.0
Apache License（アパッチライセンス）は、世界的にも利用されているオープンソースライセンスのひとつです。MIT License同様、商用利用や素材の改変が認められており、他のライセンスと比較しても条件が緩い部類に入ります。
クリエイティブにて素材を使うだけであればとくに気にする内容はありませんが、利用者の二次利用に際して特許ライセンスを付与する項目が存在しています。
ISC License
ISC License（インターネットシステムコンソーシアムライセンス）は、MITライセンスに似ているものの、さらに簡潔な形式を持つオープンソースライセンスです。ISCライセンスは、ソフトウェアとそのソースコードの使用・コピー・変更や配布を許可し、著作権表示とライセンス文をすべてのコピーに含める必要があります。
フリーアイコンを使用する際のチェックポイント
フリーアイコンを活用する際には、いくつかの重要なチェックポイントを押さえておく必要があります。
商用利用可否
ファイル形式
加工・改変・再配布の可否
これらのポイントを確認することで、意図した用途に合致したアイコンを選択できるようになり、余計なトラブル回避も可能になります。
商用利用可否
フリーアイコンをビジネスシーンで使用する際、もっとも注意すべき点は商用利用が可能かどうかです。フリーアイコンの配布サイトの中には、個人利用を前提として提供されていることもあり、商用目的での使用には制限が伴う場合があります。そのため、ビジネスでアイコンを活用する前には、提供元が商用利用を許可しているかを確認することが不可欠です。
商用利用が許可されているアイコンであっても、クレジット表示の要求や使用条件が定められていることがあるため、利用規約を読み解き、遵守する必要があります。
ファイル形式
フリーアイコンを選ぶ際、提供されているファイル形式にも注意が必要です。とくにSVGファイルは、そのスケーラビリティと品質の高さから多くのデザイナーに好まれていますが、すべてのプロジェクトやプラットフォームに対応しているわけではありません。たとえば一部のWebサイト制作ツールやブラウザでは、SVGの取り扱いに制限がある場合があります。
しかし、SVGフォーマットはデザインツー ルなどで別フォーマットに変換して書き出すことも可能です。そのため、できるだけSVGで提供されている素材サイトを使い、解像度などのサイズや制約などを加味し、必要に応じてPNGなど別フォーマットに変換する、といった運用をおこなうとよいでしょう。
そのため、プロジェクトの要件に応じて、PNGやJPEGといった他のフォーマットが提供されているかを確認することが大切です。また、画質やファイルサイズのバランスを考慮して最適な形式を選ぶことも、効果的なアイコン利用には欠かせません。
加工・改変・再配布の可否
フリーアイコンを選ぶ際には、加工や改変、さらには再配布が可能かどうかも重要なチェックポイントです。多くのアイコンには利用規約が設けられており、その中でこれらの行為が許可されているか明確に定められています。
プロジェクトのニーズにあわせてアイコンの色を変更したり、一部の要素をカスタマイズしたい場合、加工や改変が自由におこなえるアイコンを選択する必要があります。また、自身の作品として再配布する際には、その権利が許諾されているかを注意深く確認することが求められます。無断での加工、改変、再配布は著作権違反につながる可能性があるため、利用規約をしっかりと読み、遵守するこ とが不可欠です。
まとめ
この記事では、WebデザインやUIデザインで活用できる、無料のアイコン素材サイトを紹介しました。いずれのサイトで配布されている素材も商用利用が認められているため、個人・ビジネスに制限されず利用することが可能です。
また、イラスト素材を使用する際の注意点や関連知識についても解説しました。正しい知識をもって、クリエイティブに活用いただければと思います。
