Figmaですぐに使えるUIデザイン用のアイコン素材! シンプルで、可読性を最大限に高めた4,000種類のアイコン
Post on:2023年6月28日
WebサイトやスマホアプリのUIデザイン用にシンプルで、可読性を最大限に高めたアイコン素材を紹介します。ライン・デュオトーン・ソリッド・フラットの4つのスタイルに、計4,000種類のアイコンが揃っています。
アイコンはオープンソースなので、商用プロジェクトでも無料で利用できます。Figmaで配布されているので、すぐに使用できるのも嬉しいですね。
![Figmaですぐに使えるUIデザイン用のアイコン素材! シンプルで、可読性を最大限に高めた4,000種類のアイコン](http://coliss.com/wp-content/uploads-202302/2023062601@2x.png)
4,000 Free + Open Source Icons
アイコン界のヘルベチカを目指して、可読性を最大限に高めるために14pxのグリッド上に構築されています。Streamlineの10年以上の経験を持つ8人のアイコンデザイナーによって作成されています。
アイコンの利用方法は簡単で、下記ページにアクセスし、「Figmaで開く」をクリックします。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202302/2023062602-01@2x.png)
4,000 Free + Open Source Icons
Figmaで開くと、こんな感じです。
ライトモードとダークモードが用意されています。
![アイコンをFigmaで開いたところ](http://coliss.com/wp-content/uploads-202302/2023062602-02@2x.png)
アイコンをFigmaで開いたところ
アイコンには4つのスタイル(ライン・デュオトーン・ソリッド・フラット)があります。ライン・ソリッドはモノクロで、デュオトーン・フラットはカラーのアイコンです。
![4つのスタイル](http://coliss.com/wp-content/uploads-202302/2023062603@2x.png)
4つのスタイル
アイコンはカテゴリごとにまとめられています。
まずは、インターフェイス用のアイコン、マップ、フード・ドリンク。
![ライン: ダークモード](http://coliss.com/wp-content/uploads-202302/2023062602-03@2x.png)
ライン: ダークモード
メール、プログラミング、エンタテインメント、マップ、電話・カルチャー。
![ライン: ダークモード](http://coliss.com/wp-content/uploads-202302/2023062602-04@2x.png)
ライン: ダークモード
ヘルス、エコロジー、マネー、ワーク、フォトグラフィー、シッピング、アフィリエイトなどのカテゴリがあります。
![ライン: ダークモード](http://coliss.com/wp-content/uploads-202302/2023062602-05@2x.png)
ライン: ダークモード
拡大して、アイコンを見ると、こんな感じです。デフォルトでは、14pxのグリッドで設計されています。
![14pxのグリッドで設計](http://coliss.com/wp-content/uploads-202302/2023062602-06@2x.png)
アイコンは、14pxのグリッドで設計
アイコンはカスタマイズも簡単にできます。サイズを変更したいときは、Figmaの「拡大縮小」を選択します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202302/2023062602-07@2x.png)
Figmaの「拡大縮小」を選択
右パネルの「拡大縮小」で倍率やサイズを変更すると、すぐに適用されます。
![アイコンのサイズ変更](http://coliss.com/wp-content/uploads-202302/2023062602-08@2x.png)
アイコンのサイズ変更
sponsors