もうこれでSVGアイコンを探すときに困らない! 無料で利用できるアイコンライブラリを横断検索できる便利サイト -Icônes
Post on:2023年5月31日
当ブログでもたくさんのSVGアイコンのライブラリを紹介してきましたが、それらのほとんどがひとまとめに閲覧・検索できる便利なサイトを紹介します。
複数のアイコンライブラリから探せるだけでなく、異なるライブラリのアイコンをまとめてアイコンフォントにもできます。矢印アイコンはMaterial Iconsで、ホームアイコンはBootstrapで、ということもできます。
![もうこれでSVGアイコンを探すときに困らない! 無料で利用できるアイコンライブラリを横断検索できる便利サイト -Icônes](http://coliss.com/wp-content/uploads-202302/2023053001@2x.png)
Icônesの特徴
Icônesは、150,000個を超えるオープンソースのベクターアイコンをまとめたIconifyを利用して、無料で利用できるSVGアイコンを閲覧・検索できるサイトです。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202302/2023053002-01@2x.png)
各アイコンのライセンス(MIT, Apacheなど)は一目で分かるので、便利ですね。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202302/2023053002-07@2x.png)
アイコンを表示するときには、ライトモードとダークモードの両方に対応しています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202302/2023053002-02@2x.gif)
aaa
Icônesに登録されているアイコンライブラリ
Icônesに登録されているアイコンライブラリの一覧は、下記ページで分かります。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202302/2023053003-01.png)
アイコンライブラリは、ジャンル別にも分けられています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202302/2023053003-02.png)
UIデザイン用の一般的なアイコン
SVGのスピナーに特化されたライブラリやかわいい絵文字に特化されたライブラリもあります。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202302/2023053003-03.png)
アニメーションアイコン、絵文字アイコン
ブランドのロゴ、ソーシャルメディアのロゴ、スキル用のアイコン、国旗や地図用のアイコンも揃っています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202302/2023053003-04.png)
ブランドのアイコン、地図・旗のアイコン
テーマ別には、ゲーム、オーディオ、天気、メディカル、covid用のアイコンが揃っています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202302/2023053003-05.png)
テーマ別のアイコン
Icônesの使い方
Icônesの使い方は、簡単です。
アイコンを一覧から探すか、キーワードで検索できます。
たとえば、先日の記事で紹介したUIデザインに最適でシンプルなSVGアイコン「Phosphor Icons」も登録されています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202302/2023053002-03@2x.gif)
各アイコンをクリックすると、利用方法(ダウンロード・コード)が表示されます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202302/2023053002-04@2x.png)
アイコンのダウンロード
上部のメニューから「Multiple Select」をオンにすると、複数のアイコンを選択できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202302/2023053002-05@2x.png)
「Multiple Select」をオンに
選択したアイコンは、下部のショッピングアイコンに納まります。アイコンをまとめてzipファイルでダウンロードしたり、アイコンのフォントファイルを作成することもできます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202302/2023053002-06@2x.png)
選択したアイコンのダウンロード
sponsors