これでもうUIデザイン用のSVGアイコンに困らない！ 商用無料のSVGアイコンを横断検索・ダウンロードでき、カスタマイズもできる便利サイト -Iconbuddy
Post on:2024年3月13日
sponsors
商用で無料利用できる、MITライセンスなどのオープンソースで利用できるSVGアイコンは、たくさんのサイトからリリースされています。これらをまとめて検索してダウンロードでき、しかもカスタマイズもできてしまう便利サイトを紹介します。
FigmaとVS Codeのプラグインも揃っており、そこから直接アイコンを利用することもできるので、かなり便利です。
Iconbuddy -200K+ open source free svg icons
Iconbuddyの特徴
Iconbuddyは、オープンソースで利用できる200,000種類以上のSVGアイコンを無料で検索、ダウンロード、さらにアイコンのカスタマイズもできるアイコン検索エンジンです。
Iconbuddy -200K+ open source free svg icons
Pro Accessを見ると有料版もあり、無制限のアイコン検索・保存とあるので、無料の場合は回数制限があるのかもしれません。
SVGアイコンの利用方法
SVGアイコンの利用方法は簡単、登録など面倒なことは一切不要です。
アイコンを選択すると、下記のように表示され、SVGやPNGファイルをダウンロードしたり、SVGコードをコピーすることができます。
アイコンのダウンロード
「edit this icon」をクリックすると、アイコンのカスタマイズができます。また、複数のモックアップでこのアイコンがどのように見えるかを確認することもできます。
SVGアイコンを入手するのにサイトにアクセスするのは面倒という人は、こちら。
- Figma
- VS Code
それぞれのプラグインから簡単にSVGアイコンを利用できます。
Figma用のプラグインは、下記から。
VS Code用のプラグインは、下記から。
Iconbuddy -Visual Studio Marketplace
便利そうなので、さっそくインストールしてみました。
左にIconbuddyのアイコンが表示され、アイコンをクリックするとサイドバーにIconbuddyが表示されます。「Search」「Home」「Mail」などキーワードでアイコンを検索でき、SVGのコードを簡単にコピペできます。
VS Codeにプラグインをインストールしたところ
Iconbuddyで利用できるSVGアイコン
Iconbuddyでは、200,000種類以上のSVGアイコンが登録されています。全部を紹介するのは無理なので、いくつかを紹介します。
Line Awesome
Icons8によって作成されたSVGアイコン、Apache 2.0ライセンス。元サイトへのリンクや必要な情報も記載されているので、便利ですね。
Tabler Icons
MIT licenseのSVGアイコン。
HerosIcons
こちらも有名なSVGアイコンですね、MIT licenseで利用できます。
Google Material Icons
Material Iconsをはじめ、Bootstrap Iconsなどの有名どころも揃っています。
Material Symbols Light
最新のMaterial Symbolsの方も揃っています。
Health Icons
Health Iconsは、病院・医療・看護・健康に関するアイテムが揃ったSVGアイコンです。こういった何か特化されたアイコンもけっこう揃っています。
SVG Spinners
スピナー・ローディングに特化されたSVG Spinnersもあるとは！
sponsors
