UIに使えるアイコンライブラリ

アイコンはデザインシステムの中で最も早く崩れる部分です。1セットで始め、足りない1つを別のセットから借り、半年後には何も揃わなくなります。

それを防ぐ規則は退屈です。自分の領域を覆えるライブラリを1つ選び、そこを出るのはブランドロゴのときだけにすること。

自作

IconKit

アウトラインとソリッドで3039個。すべてcurrentColor対応で、web、Flutter、React、Vue、Swiftなどのラッパー付き。

iconkit.suils.es

オープンソース

Lucide

Featherをコミュニティが継いだもの。統一感があり軽く、どのフレームワークでも使えます。

lucide.dev

オープンソース

Phosphor

同じアイコンに6段階の太さ。珍しく、情報量の多い画面でとても効きます。

phosphoricons.com

オープンソース

Tabler Icons

5000を超える線アイコン。特殊な概念を扱う製品ほど、この網羅性が効きます。

tabler.io/icons

オープンソース

Heroicons

Tailwindチームによる小さく丁寧なセット。すでにTailwindを使っているなら最適です。

heroicons.com

オープンソース

Remix Icon

癖のないシステムアイコン。すべてに線と塗りの両方が用意されています。

remixicon.com

ブランドロゴ

Simple Icons

正しいブランドカラー付きの公式ロゴ。汎用セットには絶対に入っていない部分を埋めます。

simpleicons.org

統合検索

Iconify

20万点のアイコンを横断検索し、使う分だけ書き出せます。

iconify.design

どれを選んでも、アイコンフォント全体ではなく実際に使うSVGだけを自前配信してください。だいたい80KBと2KBの差になります。

選ぶだけでなく、作る必要がありますか?

Webアプリ、API、インフラ、インターフェース。バルセロナ拠点のフリーランス、世界中のクライアントと。

問い合わせる


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *