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

ブログ運営

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

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

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

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

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

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

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

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

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

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

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

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

CC BY 4.0 参考サイト

Creative Commons — 表示 4.0 国際 — CC BY 4.0

MIT License 参考サイト

Apache License 2.0 参考サイト

CC0 1.0 参考サイト

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

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 Icons

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

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

Feather

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

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

Ionicons

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

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

CSS Icons

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

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

Heroicons

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

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

Octicons

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

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

Radix Icons

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

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

Eva Icons

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

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

Ikonate

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

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

Teenyicons

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

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

Potlab Icons（動くSVGアイコン！）

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) -->

こちらの参考サイトによると、次のような短縮表記でも良さそうです。
ソースコードのライセンスの書き方 | バグ取りの日々

<!-- Feather v4.29.0 | MIT License | https://github.com/feathericons/feather/blob/master/LICENSE -->

クレジットの表記場所

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

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

SVGスプライトは複数のSVGオブジェクトの記述を１つのファイルの中にまとめ、任意の場所で任意の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 アイコンを使用するのが無難だと思います。