無料で人気ブランドのロゴなど3000個以上のSVGアイコンをダウンロードできるサイト「Simple Icons」
「Simple Icons」は多数のブランドのアイコンをSVG形式でダウンロード可能なサイトとのことなので、どんなサイトなのか実際に確かめてみました。
Simple Icons
https://simpleicons.org/
サイトにアクセスするとこんな感じ。
そのままでも特に問題なく使えそうですが、日本語バージョンが用意されているので変更します。右上の言語変更ボタンをクリックし、「日本語」をクリック。
サイトのUIが日本語化されました。記事作成時点で3198個のアイコンが利用可能とのこと。
検索欄に探しているアイコンに関連する言葉を入力することである程度の絞り込みが可能。並べ替えでは「アルファベット順」「色順」「関連度順」を切り替えられます。
UIのモード選択では「ライトモード」「ダークモード」「システムと同期」を切り替えることができ、ダウンロードではアイコンのダウンロードマークをクリックしたときのダウンロード形式をSVGとPDFから選択できます。
UIのレイアウト欄ではそれぞれのアイコンに関する情報をコンパクトにまとめるレイアウトに変更可能。検索結果に求めているアイコンが表示されない場合やアイコンが古い場合は下部の「リクエストを提出する」「古いアイコンを報告する」からGitHubのIssueを立てることで対応してもらえるようです。
それぞれのアイコンについて、アイコン欄をクリックするとクリップボードにSVGがコピーされます。また、ライセンスやブランドガイドラインが存在する場合はその旨がアイコンの左下に表示される模様。
虫眼鏡のマークをクリックすると大きくアイコンについてのデータが表示されるほか、SVGのダウンロードだけでなく「色付きSVG」や「PDF」形式でのダウンロードに対応しています。
実際にJavaScriptのアイコンをSVGでコピーして貼り付けてみるとこんな感じ。
JavaScript
なお、それぞれのアイコンはダウンロードせずともCDN経由で利用する事も可能です。下記のコードの[ICON SLUG]の部分を目的のアイコン名にすれば良いとのこと。詳しくはGitHubの説明を確認してみてください。
<img height="32" width="32" src="https://unpkg.com/simple-icons@v13/icons/[ICON SLUG].svg" />