商用無料の SVG アイコン素材サイト&ライセンス表記まとめ

商用無料の SVG アイコン素材サイト&ライセンス表記まとめ

商用無料の SVG アイコン素材サイト&ライセンス表記まとめ

商用無料で利用できる SVG アイコン素材には、ライセンスによってクレジット表記が必要なものと不要なものがあります。

フリー=クレジットなしで使える、というわけではありません。

SVG アイコンを探していた際に「無料アイコン素材●選」のような記事を見ましたが、クレジット表記について明確な記載がないものが多く、結局素材サイトごとにライセンスを確認しました。

というわけで、この記事では SVG アイコンの素材サイトをライセンスとクレジット表記の要否とともにまとめました。SVG の素材探しの際、よければ参考にしてください。

ただ、利用前には念のため各サイトの利用規約をご確認ください。

目次

SVG 素材のライセンス種類とクレジットの要否

SVG 素材サイトには、主に次のようなライセンスが指定されています。

ライセンス 使用時のクレジット表記
CC BY 4.0 必要
MIT License 必要
Apache License 2.0 不要
CC0 1.0 不要
ライセンス表記なし 個別の利用規約に従う

CC BY 4.0MIT License は、商用無料でサイト等に使用できますがクレジット表記が必要なライセンスです。ソースコードなどにクレジットを表記したうえで使用します。

Apache License 2.0 に関しては、使用においてはクレジット表記は不要。再頒布する際に、ライセンス条文にて指示されているクレジット表記が必要です。

CC0 1.0 は著作権を放棄する宣言で、クレジット表記も不要。パブリックドメインとも呼ばれます。

ライセンス表記がない場合は、素材サイトの利用規約に従って利用します。この記事では、利用規約を確認の上、クレジット表記なしで商用無料で使用できる素材サイトをピックアップしました。

CC BY 4.0 参考サイト

MIT License 参考サイト

Apache License 2.0 参考サイト

CC0 1.0 参考サイト

クレジット表記が必要な SVG アイコン素材サイト

Font Awesome

Font Awesomeサイトキャプチャ

Font Awesome

ライセンス:CC BY 4.0
クレジット表記:必要
参照:Free License | Font Awesome

Font Awesome については有名ですが、アイコンを SVG 形式でダウンロードして使用する場合にはクレジット表記が必要です。

SVG アイコンをダウンロードすると各 SVG コードに次のようなクレジットが含まれているので、これを削除せずに使用すれば OK です。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M272 288h-64C163.8 288 4 16-16 16H96c-8.836 0-16-7.164-16-16V64c0-8.838 7.164-16 16-16h288c8.836 0 16 7.162 16 16V448z"/></svg>

SVG ダウンロード:Download Font Awesome Free or Pro | Font Awesome

複数使用する場合は、まとめて一箇所に書いておけば良いと思います(後述のクレジット表記方法を参照)。

Bootstrap Icons

Bootstrapサイトキャプチャ

Bootstrap Icons

ライセンス:MIT License
クレジット表記:必要
参照:icons/LICENSE.md at main · twbs/icons · GitHub

Bootstrap から出ている SVG アイコンも MIT ライセンスなので、ソースコードなどにクレジット表記が必要です。

Feather

Featherサイトキャプチャ

Feather

ライセンス:MIT License
クレジット表記:必要
参照:feather/LICENSE at master · feathericons/feather · GitHub

Feather のアイコンは丸みがあってかわいいです。サイト上で Stroke や色を変更してダウンロードできます。MIT ライセンス。

Ionicons

Ioniconsサイトキャプチャ

Ionicons

ライセンス:MIT License
クレジット表記:必要
参照:ionicons/LICENSE at main · ionic-team/ionicons · GitHub

Outline、Filled、Sharp の3種類があります。下のほうに、ブランドや SNS のロゴもあります。

CSS Icons

CSS Iconsサイトキャプチャ

CSS Icons

ライセンス:MIT License
クレジット表記:必要
参照:css.gg/LICENSE at master · astrit/css.gg · GitHub

サイズは S M L XL の4パターン、色は5パターンから選べます。

Heroicons

Heroiconsサイトキャプチャ

Heroicons

ライセンス:MIT License
クレジット表記:必要
参照:heroicons/LICENSE at master · tailwindlabs/heroicons · GitHub

SOLID と OUTLINE があります。丸みがあってかわいい感じ。

Octicons

Octiconsサイトキャプチャ

Octicons

ライセンス:MIT License
クレジット表記:必要
参照:octicons/LICENSE at main · primer/octicons · GitHub

12px、16px、24px があります。

Radix Icons

Radix Iconsサイトキャプチャ

Radix Icons

ライセンス:MIT License
クレジット表記:必要
参照:icons/LICENSE at master · radix-ui/icons · GitHub

15px サイズで線が細めのアイコン。

Eva Icons

Eva Iconsサイトキャプチャ

Eva Icons

ライセンス:MIT License
クレジット表記:必要
参照:eva-icons/LICENSE.txt at master · akveo/eva-icons · GitHub

丸みがあってかわいい雰囲気のアイコン。

Ikonate

Ikonateサイトキャプチャ

Ikonate

ライセンス:MIT License
クレジット表記:必要
参照:ikonate/LICENSE at master · mikolajdobrucki/ikonate · GitHub

線の太さ、サイズ、角の処理(丸 or シャープ)、色を選択してダウンロードできます。

Teenyicons

Teenyiconsサイトキャプチャ

Teenyicons

ライセンス:MIT License
クレジット表記:必要
参照:teenyicons/LICENSE at master · teenyicons/teenyicons · GitHub

15×15px のアイコン。小さなスペースに適しています。

Potlab Icons(動くSVGアイコン!)

Potlab Iconsサイトキャプチャ

Potlab Icons

ライセンス:CC BY 4.0
クレジット表記:必要
参照:サイト上に Completely free and open source under CC 4.0. の記載があります。

アイコンが動いています。

クレジットの表記方法

記述方法

クレジットの表記方法については Font Awesome のクレジットが参考になります。

<!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->

また、Bootstrap のように CDN でもファイルを配信している場合は、配信ファイル内に記載されているクレジットをもとに記述しても良いと思います。

<!-- Bootstrap Icons v1.8.0 (https://icons.getbootstrap.jp/) Copyright (c) 2019-2021 The Bootstrap Authors, Licensed under MIT (https://github.com/twbs/icons/blob/main/LICENSE.md) -->

※上記例は、Bootstrap の CSS ファイル内に記述されているクレジットとライセンスページをもとに、Bootstrap Icons の名称や URL 等に修正して作成しました。(Bootstrap Icons の CDN ファイル内には著作権表示がないようでした)

Feather に応用すると次のような感じでしょうか。

<!-- Feather v4.29.0 (https://feathericons.com/) Copyright (c) 2013-2017 Cole Bemis, Licensed under MIT (https://github.com/feathericons/feather/blob/master/LICENSE) -->

クレジットの表記場所

Font Awesome では各 SVG コードにクレジットが含まれています。SVG コードを単体で使う場合はそのままのコードを使えば良いでしょう。

SVG スプライト(※)の形で複数の SVG アイコンを使う場合は、SVG コードの冒頭などにわかるように1つ記述しておく形でも良いと思います。

SVGスプライトは複数のSVGオブジェクトの記述を1つのファイルの中にまとめ、任意の場所で任意のSVGオブジェクトを呼び出す方法のこと。
参考:SVGスプライトの利用① 「作成方法」 | ホームページ制作・作成なら大阪のweb制作.com

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none;">
<!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
  <defs>
    <symbol id='svg-1' viewbox='0 0 24 24'><path d='M19 ...'></path></symbol>
    <symbol id='svg-2' viewbox='0 0 24 24'><path d='M15 ...'></path></symbol>
    <symbol id='svg-3' viewbox='0 0 24 24'><path d='M9 7 ...'></path></symbol>
    ...
  </defs>
</svg>

以下の記事を参考にさせていただきました。
FontAwesomeをSVGで使用する【JavaScriptなし】 | バグ取りの日々
MIT License 利用時の著作権表示箇所 - Qiita

書き方がよくわからない、表記がめんどくさいという場合は、以下で紹介するクレジット表記不要の SVG アイコンを使用するのが無難だと思います。

クレジット表記が不要な SVG アイコン素材サイト

以下ではクレジット表記不要の素材サイトを紹介します。不要といってもクレジット表記してはいけないわけではなく、もちろん表記しても構いません。

素材サイトの利用規約の中にも「表記不要だが表記も歓迎」という形で記載されていることもあります。

Google Material Symbols and Icons

Google Material Symbols and Iconsサイトキャプチャ

Material Symbols and Icons - Google Fonts

ライセンス:Apache License 2.0
クレジット表記:不要
参照:material-design-icons/LICENSE at master · google/material-design-icons · GitHub

Google が出しているアイコン素材です。
以前は Material Icons だけでしたが、Material Symbols という可変アイコンが追加されました。

マテリアル シンボル ガイド  |  Google Fonts  |  Google Developers

Apache License 2.0 のため、使用時のクレジット表記は不要です。

Remix Icon

Remix iconサイトキャプチャ

Remix Icon

ライセンス:Apache License 2.0
クレジット表記:不要
参照:RemixIcon/License at master · Remix-Design/RemixIcon · GitHub

色とサイズを選択してダウンロードできます。ベーシックでかわいいデザインで、使いやすいです。

MingCute Icon

MingCute Iconサイトキャプチャ

MingCute Icon

ライセンス:Apache License 2.0
クレジット表記:不要
参照:MingCute/LICENSE at main · Richard9394/MingCute · GitHub

色とサイズを選択してダウンロードできます。使いやすいアイコンなのですが、SVG コードの中に不要な id が中国語で入っているのが少し気になります。削除すれば良いんですが削除が面倒。。かわいいから使っています。

IconPark

IconParkサイトキャプチャ

IconPark

ライセンス:Apache License 2.0
クレジット表記:不要
参照:IconPark/LICENSE at master · bytedance/IconPark · GitHub

サイズ、Stroke、テーマ(Line・Fill・Two-tone・Multi-color)、色、角の丸みを選択できます。

2色や多色のアイコンを使いたい場合に選びやすいと思います。デザインも多様。

Simple Icons

Simple Iconsサイトキャプチャ

Simple Icons

ライセンス:CC0 1.0
クレジット表記:不要
参照:simple-icons/LICENSE.md at develop · simple-icons/simple-icons · GitHub

ブランドロゴを SVG アイコンにしている素材サイト。

ライセンスは CC0(パブリックドメイン)のため、クレジット不要です。

System UIcons

System UIconsサイトキャプチャ

System UIcons

クレジット表記:不要
利用規約:サイト上に Use how you want, without attribution. の記載があります。

細めの線のアイコンです。

ICOOON MONO

ICOOON MONOサイトキャプチャ

ICOOON MONO

さまざまなカテゴリー・バリエーションのアイコンがあります。

icon rainbow

icon rainbowサイトキャプチャ

icon rainbow

こちらもアイコンの種類が多様。

ICON BOX

ICON BOXサイトキャプチャ

ICON BOX

「デスクトップ」「吹き出し」「家」「星」などは何パターンもデザインがあるので、微妙なデザインの違いにもこだわりたい場合にぴったり。

iconmonstr

iconmonstrサイトキャプチャ

iconmonstr

クレジット表記:不要
利用規約:License Agreement - iconmonstr

アイコンはベーシックで多様。ただ画面上に表示できるアイコンの数が少なく、いろいろ見ながら探したい場合には一覧性がなくてちょっと探しにくい。

Iconstore

Iconstoreサイトキャプチャ

Iconstore

クレジット表記:不要
利用規約:License | Iconstore

アイコンをセットごとにダウンロードできる素材サイト。いろんなテイストがあって見ているだけでも楽しい。

Endless Icons

Endless Iconsサイトキャプチャ

Endless Icons

クレジット表記:不要
利用規約:Terms of Use | Endless Icons

Doodle(落書きという意味)という独特なタッチのアイコンがかわいいです。
Doodle | Endless Icons

Unicons

Uniconsサイトキャプチャ

Unicons icon library

クレジット表記:不要
利用規約:Licenses | IconScout

Line、Solid、Monochrome、Thinline という4種類のアイコンがあり、Line のみ無料で利用できます。

ダウンロードには Google アカウント等でログインが必要です。

Tabler Icons

Tabler Iconsサイトキャプチャ

Tabler Icons

クレジット表記:不要
利用規約:サイト上に No attribution required. For commercial use. の記載があります。

サイズ・Stroke・色を画面上で設定できます。

EXPERIENCE JAPAN PICTOGRAMS

EXPERIENCE JAPAN PICTOGRAMSサイトキャプチャ

EXPERIENCE JAPAN PICTOGRAMS

クレジット表記:不要
利用規約:DOWNLOAD | EXPERIENCE JAPAN PICTOGRAMS

日本の観光体験を伝えるために設計されたアイコン。和っぽいアイコンはこちらのサイトを探せばありそうです。

データダウンロード時に個人情報や利用目的の入力が必要ですが、商用非商用問わず無料で利用可、クレジット表記も不要と記載されています。

IFN

IFNサイトキャプチャ

IFN

クレジット表記:不要
利用規約:利用規約 IFN 無料アイコン

ページ下部のカテゴリーとタグからアイコンを探しやすい。

Forge Icons

Forge Iconsサイトキャプチャ

Forge Icons

クレジット表記:不要
利用規約:Frequently Asked Questions - Forge Icons

サイズ、Stroke、色を変更できます。細めのアイコン。

Indie Icons

Indie Iconsサイトキャプチャ

Indie Icons

クレジット表記:不要
利用規約:Indie Icons License | VISIWIG

カラー、サイズを変更できます。通常パターンの SOLID と、2色デザインの SPLASH があります。SPLASH は15個だけ無料ダウンロード可能で、その他は有料($30)となっています。

素材サイトの紹介は以上です。

関連記事
ブログのロゴを SVG 形式でつくる。簡単なロゴの作成手順と Blogger での設定方法

ブログのロゴを SVG 形式でつくる。簡単なロゴの作成手順と Blogger での設定方法

ブログのロゴは、拡大縮小しても画像がぼやけないSVGという形式で作るのがおすすめです。Inkscapeというフリーソフトを使ったSVG形式でのロゴ作成方法を紹介します。

記事へのコメント・ご質問は こちら まで
NEXT PREV