Figmaですぐに使えるUIデザイン用のアイコン素材! シンプルで、可読性を最大限に高めた4,000種類のアイコン
Post on:2023年6月28日
WebサイトやスマホアプリのUIデザイン用にシンプルで、可読性を最大限に高めたアイコン素材を紹介します。ライン・デュオトーン・ソリッド・フラットの4つのスタイルに、計4,000種類のアイコンが揃っています。
アイコンはオープンソースなので、商用プロジェクトでも無料で利用できます。Figmaで配布されているので、すぐに使用できるのも嬉しいですね。

4,000 Free + Open Source Icons
アイコン界のヘルベチカを目指して、可読性を最大限に高めるために14pxのグリッド上に構築されています。Streamlineの10年以上の経験を持つ8人のアイコンデザイナーによって作成されています。
アイコンの利用方法は簡単で、下記ページにアクセスし、「Figmaで開く」をクリックします。

4,000 Free + Open Source Icons
Figmaで開くと、こんな感じです。
ライトモードとダークモードが用意されています。

アイコンをFigmaで開いたところ
アイコンには4つのスタイル(ライン・デュオトーン・ソリッド・フラット)があります。ライン・ソリッドはモノクロで、デュオトーン・フラットはカラーのアイコンです。

4つのスタイル
アイコンはカテゴリごとにまとめられています。
まずは、インターフェイス用のアイコン、マップ、フード・ドリンク。

ライン: ダークモード
メール、プログラミング、エンタテインメント、マップ、電話・カルチャー。

ライン: ダークモード
ヘルス、エコロジー、マネー、ワーク、フォトグラフィー、シッピング、アフィリエイトなどのカテゴリがあります。

ライン: ダークモード
拡大して、アイコンを見ると、こんな感じです。デフォルトでは、14pxのグリッドで設計されています。

アイコンは、14pxのグリッドで設計
アイコンはカスタマイズも簡単にできます。サイズを変更したいときは、Figmaの「拡大縮小」を選択します。

Figmaの「拡大縮小」を選択
右パネルの「拡大縮小」で倍率やサイズを変更すると、すぐに適用されます。

アイコンのサイズ変更
sponsors