プロジェクトに合うアイコンセットの選び方
更新日 · 6 分で読めます
統一されたアイコンセットを使えばインターフェースは「デザインされたもの」に見え、3 つのセットを混ぜると「寄せ集め」に見えてしまいます。無料のセットが何百もある今、大事なのはアイコンを探すことではなく、必要なアイコンがそろい、スタイルが合い、ライセンスも許容できる 1 つのセットを見つけることです。手早く決める方法を紹介します。
1. まず収録範囲を確認する
製品で特によく使うアイコンを 15〜20 個（ホーム、検索、設定、ユーザー、アップロード、ゴミ箱、編集、閉じる、シェブロン、アラートなど）と、請求書、聴診器、Git のブランチといった業界特有のアイコンをいくつか書き出します。次に、候補のセットでそれぞれを検索します。重要なアイコンが 2 つ欠けているセットを選ぶと、あとで別のセットを混ぜることになります。スタイルの合わないアイコンは、インターフェースで最もよく見かける視覚的な不統一の原因です。
収録数は重要ですが、それがすべてではありません。Material Design Icons は 7,447 個、Fluent UI System Icons は 19,850 個ある一方、Heroicons は厳選された 1,288 個です。マーケティングサイトなら小さなセットで十分なこともありますが、複雑なダッシュボードでは収録数の多さが効いてきます。
2. スタイルを選ぶ: アウトライン・塗りつぶし・デュオトーン
- アウトライン（線）アイコンは軽やかでモダンな印象で、ほとんどのインターフェースに合います。例：Lucide、Tabler Icons。
- 塗りつぶし（ソリッド）アイコンは小さいサイズやアクティブ状態でも読み取りやすいのが特長です。例：Material Design Icons、Bootstrap Icons（アウトライン版もあります）。
- 複数のウェイトがあるセットなら、ファミリーを変えずに、通常時はアウトライン、選択時は塗りつぶしと使い分けられます。Phosphor には細字からデュオトーンまで 6 種類のウェイトがあります。Material Symbols にはアウトライン・角丸・シャープのスタイルがあり、Heroicons と Fluent はアウトラインと塗りつぶしがセットになっています。
- マルチカラーのアイコンは、イラストやオンボーディング、空の状態の表示に個性を加えますが、テーマに合わせるのは難しくなります。UI マルチカラーアイコンをご覧ください。
アイコンのスタイルはタイポグラフィに合わせましょう。細い線は軽めで幾何学的なフォントに、太めのアイコンは太字の UI テキストに合います。
3. グリッドと線の太さを合わせる
アイコンはグリッド上に描かれており、多くは 24×24 ピクセルです。グリッドのサイズやその倍数で表示すると最もくっきり見えるので、実際に使うサイズ向けにデザインされたセットを選びましょう。
- UI 24px のセットは、最も一般的なボタン、メニュー、ナビゲーションに適しています。
- 16px・32px のセットは、それぞれ情報量の多いツールと、大きなタップ領域に向いています。
各セットのページにはグリッドのサイズが表示されています。アイコンをテキストと並べる場合は、線の太さも確認してください。標準の太さのテキストには 1.5px の線、中太や太字のテキストには 2px の線がバランスよく合います。
4. ライセンスを確認する
ほとんどのセットは商用利用できますが、条件はさまざまです。MIT、ISC、Apache 2.0 はライセンス本文を含めるだけで済みますが、CC BY では見える場所にクレジットを表示する必要があります。商用利用を一切認めていないセットもわずかにあります。各カテゴリのページにはライセンス表があり、アイコンのライセンスガイドで各ライセンスを解説しています。
5. メンテナンスが続いているセットを選ぶ
メンテナンスが続いているセットには、新しいブランドや UI パターンなど、必要に応じて新しいアイコンが追加され、既存のアイコンも修正されます。アーカイブ（メンテナンス終了）カテゴリのセットも引き続き使えますが、新しいアイコンが必要になったときは自力で対応することになります。エコシステムも確認しましょう。人気のセットには、React や Vue などのフレームワーク向け公式パッケージや、Figma 用のデザインファイルがあります。
用途別のおすすめ
| 作っているもの | おすすめ | 理由 |
|---|---|---|
| モダンな Web アプリや SaaS | Lucide、Tabler | すっきりしたアウトライン、収録数が多く増え続けている、寛容なライセンス（ISC、MIT） |
| アクティブ／非アクティブの状態があるアプリ | Phosphor、Heroicons | アウトラインと塗りつぶしがそろっている |
| Android や Material UI のアプリ | Material Symbols、Material Design Icons | Material Design に準拠、Apache 2.0 |
| Microsoft 風のアプリや業務アプリ | Fluent UI System Icons、Carbon | 非常に豊富な収録数、情報量の多い業務 UI 向け |
| Bootstrap を使ったサイト | Bootstrap Icons | Bootstrap と一緒に設計、MIT |
| ブランドや SNS のロゴ | Simple Icons、SVG Logos | 単色とフルカラーのロゴ、CC0 |
| 技術スタックの紹介 | Devicon、VS Code Icons | 言語、フレームワーク、ファイル形式 |
| 絵文字 | Noto Emoji、Twitter Emoji | 絵文字を網羅、Apache 2.0 / CC BY 4.0 |
| 国の選択 | Circle Flags、Flag Icons | 円形または長方形の国旗、MIT |
まだ迷っているなら、候補を 2 つ並べて開き、重要なアイコン 10 個を両方で検索し、製品の実際の画面に置いてみましょう。たいてい数分でどちらが良いかがはっきりします。決まったら、SVG アイコンの使い方ガイドで HTML、React、Vue への追加方法を確認してください。