GoogleのアイコンMaterial Symbolsについて、ライセンスと利用条件、再配布時の注意、導入手順、などについてまとめました。
Material Symbols and Iconsとは？
Googleが提供する、商用利用可能な無料のデザインアイコン素材集です。Webフォントとして読み込むか、SVG素材としてダウンロードして使えます。
アイコンの太さ（Weight）や塗りつぶし（Fill）などの属性を、CSSで自由に調整できるのが特徴です。
めちゃくちゃたくさん種類があって、これが無料なのありがたいです。
ライセンスと利用条件
Material Symbols and Iconsのライセンスは「Apache License 2.0」です。
※Apache License 2.0は、Apache Software Foundationが定めるオープンソースライセンスです。
- ⭕️商用利用OK
- ⭕️改変・加工OK
- 🔺再配布OK（元の著作権表示やライセンスの内容の保持・記録が必要）
- ❌商標権の利用はNG
再配布にあたるケース
- SVGやフォントファイルを自社サーバーへ設置して配信する（セルフホスト）
- アイコン入りのテーマ・テンプレート・アプリを配る
- ファイルごとGitHubなどで公開する
※GoogleのCDNからWebフォントを読み込むだけの場合は、再配布に当たりません。
再配布する場合の対応
- 配布物に
LICENSEファイル（Apache License 2.0の全文）を含める - 元ファイルにある著作権・帰属の表示を消さずに残す
- ファイルを改変したときは、変更したことがわかる注記を加える
- もし配布元が
NOTICEファイルを用意している場合は、その内容も配布物に残す
LICENSEファイルの作り方
LICENSEファイルには、公式ページの全文（約200行）をそのまま入れます。
- Apache License 2.0の公式ページから文面をコピー
- 配布物のルートに
LICENSEというファイル名で保存
NOTICEファイルの作り方
Material SymbolsにNOTICEファイルはないので、NOTICEの同梱は義務ではありませんが、帰属表示として作っておくと、出所や改変内容が明確になります。
- 提供元・ライセンス・出典URL・改変内容などの帰属表示を書く
- 配布物のルートに
NOTICEファイルを格納
このサイト（まなびのすけ）ではSVGファイルをダウンロードして使っているので、NOTICEファイルを作っています。
Material Symbols by Google — Apache License 2.0
https://github.com/google/material-design-icons
このディレクトリ配下の SVG は Material Symbols（outlined / weight 400）をvendor したものです。ファイルは改変せず、原本のまま使用しています。
このサイトでもアイコンを表示しているので「配布」にあたります。なので、LICENSE・NOTICEファイルを作っています。
Material Symbolsを導入する方法
導入方法は3通りあります。
1. WebフォントのCDNを読み込む方法【簡単】
ブラウザがGoogleのサーバーへ直接リクエストを送信する方法です。
- HTMLの
<head>タグ内にフォントの読み込みリンク（<link rel="stylesheet" href="...">）を貼る <style>タグでCSSを設定する（サイズや色も指定できる）- アイコンを表示させたい位置に
class="material-symbols-outlined"を配置
<span class="material-symbols-outlined">search</span>
2. SVGを直接埋め込む方法
自社サーバーに直接ファイルを格納するため、外部送信が発生しません。
- Google Fontsの公式サイトや公式GitHubリポジトリから、アイコン単体のSVGファイルをダウンロード
- アイコンを表示させたい位置に、インラインSVGや画像タグで配置
3. パッケージマネージャー（npmなど）での管理
AstroやReactなどの開発環境では、npmを使って、アイコンフォントのパッケージを丸ごとインストールすることもできます。
- 管理ファイルを生成
npm init -y - パッケージを追加して一括ダウンロード
npm install ...
このサイトでは「SVGを直接埋め込む方法」で使っています。
よくある質問（FAQ）
Q. Googleの無料アイコンは商用利用でも使えますか？
使えます。Material SymbolsのライセンスはApache License 2.0で、個人利用・商用利用を問わず、WEBサイトやアプリ、販促物、動画などで無料で使えます。表示するだけの通常利用では、クレジット表記も原則不要です。
Q. Googleの無料アイコンを使って商標登録できますか？
できません。Apache License 2.0は商標の利用までは許諾していないため、アイコンを自社の商標として登録・使用することはできません。
Q. Googleの無料アイコンをダウンロードして使う場合の注意点は？
SVGやフォントファイルを自社サーバーへ置いて配信（セルフホスト）する場合は「再配布」となります。配布物にApache License 2.0の写し（LICENSEファイル）を含め、元の著作権・帰属の表示を残す必要があります。ファイルを改変したときは、変更したことがわかる注記も加えます。
Q. Googleの無料アイコンの色やサイズを変更できますか？
できます。Webフォントで読み込む場合は、CSSのcolorやfont-sizeで色とサイズを調整できます。SVGの場合も、fillやwidth・heightをCSSや属性で変更でき、太さ（Weight）や塗りつぶし（Fill）も指定できます。