商用利用無料！オープンソースで利用できる、SVGアイコンのライブラリのまとめ

無料のアイコンはたくさんありますが、中でもオープンソースで利用できるアイコンは非常に使い勝手がよく、重宝します。商用のプロジェクトでも無料で利用できる、オープンソースのSVGアイコンのライブラリを紹介します。

10 open source SVG icon libraries that you can use for your next project
by @zolidev

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

私は先日、reddit上でお気に入りのアイコンライブラリはどれですか？というスレッドを立ち上げました。このスレはすぐに人気がでて、私が知らないオープンソースの素晴らしいアイコンライブラリがたくさんあることを知りました。スレに基づいて、オープンソースのアイコンライブラリのベスト10をリストしたいと思います。

ここで紹介するアイコンのライセンスはすべて利用規約を確認しました。すべてのライブラリは、完全にオープンソースで利用できます。また、すべてのアイコンは、最新のデザインで提供されています。

では、オープンソースのアイコンライブラリのベスト10を紹介します。

Font Awesome
GitHub
ライセンス: Font Awesome Free License(open source)

Font Awesomeのアイコンは、オープンソースの中でも特に人気が高いライブラリの一つなので、ほとんどの人は今までに一度は使用していると思います。
Font Awesomeには現在、1,588個のフリーアイコンと7,842個のプロアイコンがあります。

Font Awesomeが今でも広く使用されている主な理由の一つは、Font Awesomeが提供している豊富なアイコンのコレクションにあると考えられます。実際にわたし達のサイトではFont Awesome Proのデュオトーンのアイコンを使用しており、他の類似のサイトと比較して、より際立たせていると思います。

Font Awesomeで提供されている興味深い機能の一つは、アカウントを作成するとパーソナライズされたCDNリンクを生成できることです。これにより、通常のアイコンを条件付きで除外でき、デュオトーンのアイコンのみを使用することができます。

もちろん、SVGコードを直接コピーペーストして、そのアイコンだけを使用することもできますが、この方法はアイコンを2,30個以上は使用しないという場合にお勧めします。

結論として、Font Awesomeを使用する方法はたくさんあります。例えば、アイコンのSVGコードをコピーペーストしたり、ライブラリをダウンロードしたり、CDNを使用するなどです。
Font Awesomeを使い始める際は、下記ページからアクセスしてください。

• Start -Font Awesome

Ionicons
GitHub
ライセンス: MIT License

Ioniconsは、オープンソースのSVGを使ったアイコンライブラリです。特に、アウトライン、シェイプのデザインがとてもすっきりしており、分かりやすいのが気に入っています。次のプロジェクトでアイコンを使用する際は、ぜひ試してみることをお勧めします。

Ioniconsの使用方法はドキュメント化されており、スタンドアロンのSVGだけでなく、ライブラリ全体を使用したい場合は以下のスクリプトをフッタに含めます。

あとは、HTMLで下記のように記述します。使用するアイコンの種類は、name属性で定義します。

基本的な使い方については、公式サイトから読むことができます。

• Usage -Ionicons

CSS.gg
GitHub
ライセンス: MIT License

Redditのデベロッパーコミュニティのアクティブなメンバーであれば、スタイル設定にCSSのみを使用する新しいアイコンライブラリがリリースされたことに気づいているかもしれません。アラート、矢印、コード、デザインなどのカテゴリに基づいて、740個以上のアイコンが用意されています。

パフォーマンスの観点からCSSとSVGのどちらを使用するのが良いかについてはいくつかの議論がありますが、ライブラリの制作者である@astritmalsijaは、SVG, SVG Sprite, Figma, Adobe XDフォーマットをリリースし、より幅広い実装を提供しています。

CSS.ggを使い始めるのは、npm -i css.ggコマンドを実行し、headタグ内に下記のスタイルシートを含めるだけです。

もちろん、UNPKGやJSDelivrなどのCDNも用意されています。

CSS.ggの使用方法については、リポジトリの公式をご覧ください。

• CSS.gg GitHub

Feathericons
GitHub
ライセンス: MIT License

Feathericonsは282個のSVGアイコンを備えて、見栄えがよくクリーンなライブラリです。デフォルトではメインフォーマットとしてSVGのみですが、現在のところこれは推奨されるアイコンの使用方法であるため、問題はありません。

アイコンをダウンロードする前に、アイコンの会津やストロークやカラーを設定できる点を私は気に入っています。また、サイト右上の月のアイコンでライトとダークモードを切り替えることができます。

Feathericons を使い始めるには、SVGファイルをダウンロードしてsrcを使用するか、インラインSVGとして使用するかで、マークアップに含めるのと同じくらい簡単です。

❤️ Eva icons
GitHub
ライセンス: MIT License

Eva Iconsは480個のオープンソースの美しいアイコンのセットで、SVGとPNG形式で提供されています。アウトラインと塗りつぶしの2つのスタイルがあり、ホバー時にズーム・パルス・シェイクなどのアニメーションを利用できる点が気に入っています。

Eva Iconsを使い始めるには、使用するアイコンを選択した後にSVGまたはPNGファイルをダウンロードするか、アイコンのセット全部をダウンロードします。また、NPMパッケージをインストールすることで、Eva Iconsを含めることもできます。

Heroicons
GitHub
ライセンス: MIT License

HeroiconsはTailwind CSSの作成者によって作られたもう一つの素晴らしいオープンソースのアイコンライブラリです。165個を超えるアイコンがあり、アウトライン・塗りつぶしの他に、各要素のダーク・ホワイトバージョンも提供されています。アイコンの外観は非常に高級感があり、よくできています。

アイコンを使い始めるには、アイコンをクリックしてインラインのSVGコードをコピーするだけなので簡単です。また、Figmaのライブラリも提供されており、私は気に入っています。すべてのアイコンを使用したい場合は、リポジトリからすべてのSVGファイルをダウンロードできます。

Bootstrap Icons
GitHub
ライセンス: MIT License

先日、Bootstrap 5の新しいアイコンとFont Awesomeアイコンのそれぞれの使い方と使いやすさを比較を書きました。Bootstrap Iconsは現在、600個以上のSVGアイコンがあり、デザインの面で際立っていると思います。CSSフレームワークとしてBootstrapを使用する場合は、次のプロジェクトでこのBootstrap 5のアイコンを使用することを検討すべきです。

Bootstrap 5のアイコンを使い始めるには、SVGコードをコピーするのと同じくらい簡単で、コードをインラインで使用するか、画像ソースとして含めるか、CSSの疑似クラスを作成するか、お好みの方法で使用できます。いずれの方法も公式サイトで実装方法が掲載されています。

• Bootstrap Iconsの実装方法

Remix Icon
GitHub
ライセンス: Apache License

Remix IconはApacheライセンスで利用できる、2149個の美しいアイコンが揃った大規模なライブラリです。ビジネス、コミュニケーション、ファイナンス、マップなど、さまざまなカテゴリからアイコンを選択できます。

Remix Iconを使い始めるのはとても簡単で、SVGまたはPNGバージョンをダウンロードするか、インラインのSVGコードをコピーペーストすることで始めることができます。また、パッケージ全体を単一の.svgファイルまたはSVGスプライトファイルとしてダウンロードすることもできます。

Octicons
GitHub
ライセンス: MIT License

Octiconsは100個以上のオープンソースのアイコンのセットで、GitHubのメインにも使用されています。バージョン2のライブラリを作成中のようで、デザインのアイコンの多様性が改善される予定です。

Octiconsの大きな利点は、React, Ruby, Rails, JekyllなどJavaScriptですぐに使えるパッケージとして入手できることです。Octoiconsを使い始めるためのすべてのパッケージも用意されています。

Ikonate
GitHub
ライセンス: MIT License

最後になりましたが、Ikonateは約100個のフラットデザインベースのアイコンを備えた素晴らしいオープンソースのアイコンライブラリです。非常に寛容なMITライセンスの下で利用できます。

アイコンをエクスポートする前に、サイズ・ボーダー・コーナー、カラーを簡単に構成することができます。エクスポートされたzipファイルには、選択されたすべてのインラインアイコンを含むHTMLファイルと個別のSVGファイルとスプライトシートを含むフォルダがダウンロードできます。

最後に、これらのアイコンを使用する際は、ライブラリのGitHubにスターをつけて、彼らのおこなった仕事の素晴らしさを知らせて、ライブラリをサポートしてください。また、次のプロジェクトで使用するアイコンをまだ決めていない場合は、このリストがあなたの役に立つことを願っています。

【訳者注】最近リリースされたMITライセンスのSVGアイコンを追加します。

Tabler Icons -GitHub
ライセンス: MIT License

オープンソースのダッシュボードのテンプレート「tabler」からリリースされた、450個のSVGアイコンを備えたライブラリです。さまざまなWebプロジェクトで利用でき、各アイコンは24x24グリッドと2pxストロークでデザインされています。

アイコンを画像として読み込む場合、下記のように記述します。

CSSで、アイコンのサイズ、カラー、ストローク幅を変更できます。すべてのアイコンは、stroke-widthプロパティの値を使用して作成されているため、値を変更すると、デザインに適合するさまざまなアイコンを利用できます。

SVGスプライトにも対応しており、ページに表示するアイコンを指定できます。