商用利用無料、UIデザイン用のSVGアイコンが1100種類!Adobe XDやFigmaのツールも完備されてて、これは便利
Post on:2020年9月9日
企業サイトをはじめ、プロダクト、オンラインショップ、アプリ、ブログなど、さまざまな商用プロジェクトで無料で利用できるSVGアイコンを紹介します。
SVGアイコンの数は1,100種類以上で、しかもオープンソース!
さらに、Adobe XD, Figma, Sketchなどでアイコンが簡単に使えるツールもリリースされています。
![UIデザイン用のSVGアイコンが1100種類 -Unicons](http://coliss.com/wp-content/uploads-202003/2020090601@2x.png)
Uniconsの特徴
Uniconsは、1,100種類以上のピクセルパーフェクトなSVGアイコンが揃っています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202003/2020090602.gif)
アイコンには3つのスタイルがあり、1,100種類以上、27のカテゴリがカバーされたラインアイコンは、オープンソースで配布されています。他の2つ、モノクロームとソリッドは有料(一部は無料)です。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202003/2020090603-01.png)
3スタイルのうち、ラインはApache License 2.0で無料で利用できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202003/2020090603-02.png)
アイコンはSVGのベクターなので、カラーやサイズなどを自由に変更できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202003/2020090604.gif)
アイコンのカスタマイズは簡単
Uniconsのダウンロード
Uniconsはさまざまな形式、ツールで利用できます。
まずは、アイコンフォント・SVGアイコン・VueJSとReactのパッケージ。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202003/2020090603-03.png)
SVGアイコン1,100種類をまとめてダウンロードしたい時は、GitHubからが簡単です。
- Unicons -GitHub
「Code」から「Download ZIP」を選択。
アイコンフォント用に公式のCSSファイルも用意されています。
1 |
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v2.1.5/css/unicons.css"> |
VueJSとReactのパッケージは、下記からご利用ください。
Figma, Adobe XD, Sketchなどのツールとしても利用できます(要登録無料)。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202003/2020090603-04.png)
Uniconsの使い方
UniconsはWebアプリも用意されており、アイコンを簡単に利用できます。カテゴリ・スタイル・フォーマットなどを選択できます。
例えば、アローだけでもさまざまなアローが揃っています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202003/2020090603-05.png)
ロゴのアイコンも同じスタイルで利用できるのはいいですね。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202003/2020090603-06.png)
WebページやスマホアプリのUI用のアイコンも豊富です。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202003/2020090603-07.png)
医療関係など、レアなアイコンも揃っています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202003/2020090603-08.png)
sponsors