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