アイコンシステム設計:50シンボルを超えても破綻しないアイコノグラフィの作り方
現場のデザイナーのためのアイコンシステム実践ガイド。グリッド、ウェイト、オプティカル補正、命名、ガバナンス、そして3人目のデザイナーが触ってもアイコンライブラリを腐らせないルールを解説します。
プロダクトのアイコンライブラリは、たいてい腐ります。最初のデザイナーは、きれいな40個のセットを出荷します。2人目のデザイナーは3つ追加が必要になり、間違ったストローク幅でフリーハンドのトレースをします。3人目のデザイナーは、金曜日に機能を出すために無料パックからダウンロードします。プロダクトが2年目に入る頃には、すべての画面のアイコン列が、4つの別ブランドを1本のナビゲーションに縫い合わせたように見えています。
このペーパーは実践版です。グリッド、ウェイト、オプティカル補正、命名、ガバナンス、そしてアイコンシステムを50シンボルを超えても一貫させる、ごく少数のルール。今週のアイコン自慢も、システムのふりをしたテンプレートもありません。本物のチームで本物のライブラリを生き残らせる意思決定だけを扱います。
アイコンシステムとは実際に何か
アイコンシステムとは、共通のルールで統治された、一貫したピクトグラムの集合です。 グリッドサイズ、ストローク幅、角丸、オプティカルな整列、命名、そして新しいアイコンを追加するためのプロセス。目的はSVGのフォルダを作ることではありません。目的は、どのデザイナーやエンジニアでも、プロダクトの視覚的リズムを壊さずに拡張できるシステムです。
アイコンの山はシステムではありません。ルールのない200シンボルのFigmaファイルもシステムではありません。システムには制約があり、名前の付いた意思決定があり、まだ存在しないアイコンが必要になったときの手順が文書化されています。
アイコンが住む、より広いシステムについてはデザインシステムガイドで扱っています。このペーパーでは、アイコノグラフィのレイヤーに絞って深掘りします。
アイコンは見た目以上に重要
アイコンは、あらゆるプロダクトのUIで最も密度の高い要素です。24x24ピクセルのアイコン1つが、画面上のどの要素よりも1平方インチあたりの情報量を担っています。システムを正しく作れば、プロダクトはひとつのものとして読まれます。間違えれば、ユーザーが言葉にできないまま、すべての画面がどこかおかしく感じられます。
アイコンはスケールのしかたも奇妙です。2つの画面の間の書体のズレは簡単に見つかります。アイコンのズレは名指ししにくいのに、感覚へのノイズは大きい。脳はピクトグラムをテキストより速く処理するので、コピーの不統一よりアイコンの不統一を速く処理します。
アイコンを一貫したシステムとして出荷するプロダクトは、ほかの仕事が粗くても洗練されて見えます。アイコンを野放しで出荷するプロダクトは、ほかの仕事が鋭くても安っぽく見えます。
グリッドこそがシステム
一貫したアイコンライブラリは、必ずグリッドから始まります。グリッドは、すべてのアイコンがスナップする見えない足場です。これがなければ、アイコンはサイズ、ウェイト、オプティカルバランスがバラバラになり、コードレビューで一貫性を強制する手段もありません。
ベースグリッド
ベースグリッドのサイズを1つ選び、その中で生きましょう。2026年に通用するデフォルトは2つです。
- プロダクトUIアイコンには24ピクセルグリッド。最近のほとんどのインターフェースの標準サイズです。
- 高密度のデータUI、ダッシュボード、管理ツールには20ピクセルグリッド。
グリッドは単なるキャンバスサイズではありません。キャンバスの内側で、アイコンが実際に収まるライブエリアでもあります。24ピクセルグリッドには、左右上下2ピクセルのパディングを取った20ピクセルのライブエリアがあります。このパディングがアイコンに呼吸する余白を与え、隣の要素に対して窮屈に見えるのを防ぎます。
グリッド内のキーライン
ライブエリアには、形状を統治する内部のキーラインがあります。20ピクセルのライブエリアには、4つのキーライン形状があります。
| 形状 | サイズ | 用途 |
|---|---|---|
| 正方形 | 18x18 px | ほとんどの四角いアイコン(フォルダ、ドキュメント) |
| 円 | 20x20 px | 丸いアイコン(太陽、インフォ、アバター) |
| 縦長の長方形 | 16x20 px | 縦型のアイコン(バッテリー、電話) |
| 横長の長方形 | 20x16 px | 横型のアイコン(検索、メッセージ) |
各キーラインは、同じサイズで視覚的にバランスの取れたアイコンを生み出します。人間の目は円を小さく読むので、18ピクセルで描いた円は18ピクセルの正方形より小さく見えます。キーラインは、この知覚上のクセを補正します。
トークンとしてのストローク幅
ストローク幅は1つ選んで、貫きましょう。多くのプロダクトのアイコンシステムは、24ピクセルグリッドで1.5ピクセルか2ピクセルのストロークを使います。選ぶ基準はブランドボイスです。
1.5ピクセルのストロークは、軽く、技術的で、モダンに読めます。2ピクセルのストロークは、自信があり、親しみやすく、とっつきやすく読めます。3ピクセルのストロークは、力強く、子ども向けか、印刷物のスタイルに読めます。1つ選び、トークンとして文書化し、別のウェイトを使ったアイコンの投稿はすべて却下してください。
ストローク幅が、より広いトークン設計のどこに収まるかについては、デザイントークンの用語集で扱っています。
差を生むのはオプティカル補正
数学的な整列は、視覚的な整列ではありません。グリッドに完璧にスナップしたアイコンが、間違って見えることはよくあります。人間の目はピクセルを測らず、知覚された重さとバランスを測るからです。
なぜオプティカル補正が存在するのか
20x20ピクセルの円と、20x20ピクセルの正方形は、同じ大きさには読めません。正方形はバウンディングボックスを完全に埋めるので、視覚的な質量が大きい。円は四隅に空白があり、目はそれを小さな物体として認識します。
対処法は、円をバウンディングボックスよりわずかに大きく、ときには1〜2ピクセル大きく描くことです。計算は間違いと言い、目は正解と言う。常に目を信じてください。
よくあるオプティカル補正
5つの補正で、ほとんどのアイコン作業をカバーできます。
- 円は正方形より大きく見える。 円のキーラインを1〜2ピクセル上げます。
- 三角形は正方形より小さく見える。 三角形のキーラインを2〜3ピクセル上げます。
- 斜線は水平線より細く見える。 斜線に0.25〜0.5ピクセルのウェイトを足します。
- 非対称なアイコンの中心はズレる。 再生ボタン、矢印、シェブロンは、バウンディングボックスではなく目で光学的に中心を取ります。
- 鋭い角は小さく読める。 内側の角を少し丸め、外側の角の知覚上の重さに合わせます。
これらの補正は意見ではありません。どのアイコンでも、数学的に正確なバージョンとオプティカル補正済みのバージョンを、小さなサイズで並べてテストしてください。オプティカル補正版が必ず勝ちます。必ず。
積み重なるスタイルの決定
グリッドとウェイトが決まったら、ほかのスタイル上の決定もすべて、一度だけ下してあらゆる場所に適用する必要があります。このどれか1つでも不統一があると、ライブラリに手を入れた人が多すぎたように読まれます。
角丸
外側の角丸を1つ、内側の角丸を1つ選びます。この2つはペアで機能します。
外側1ピクセル、内側0.5ピクセルの角丸は、シャープでモダンに読めます。外側2ピクセル、内側1ピクセルの角丸は、親しみやすく丸い印象になります。角丸のない角張ったセットは、建築的で真面目な印象になります。
間違いなのは、同じライブラリ内で角丸を混ぜることです。ほかより角がシャープなアイコンが1つあるだけで、別のセットから借りてきたように見えます。
エンドキャップとジョイン
ストロークには端があります。エンドキャップはスクエア、ラウンド、プロジェクティングのいずれかです。ストローク同士のジョインは、マイター(鋭角)、ラウンド、ベベル(面取り)のいずれかです。それぞれ1つずつ選び、システム全体に適用してください。
ラウンドキャップとラウンドジョインは、親しみやすく近づきやすいアイコンセットになります。スクエアキャップとマイタージョインは、精密で技術的なセットになります。同じライブラリでエンドキャップが混在すると、作りかけに見えるセットになります。
塗りとアウトライン
最近のアイコンシステムの多くは、すべてのアイコンを2つのバリアントで出荷します。非アクティブ状態用のアウトライン版と、アクティブ状態用の塗り版です。アウトライン版はストロークを使います。塗り版は、同じ形で内側を塗りつぶします。
2つのバリアントは視覚的にバランスが取れていなければなりません。同じサイズの塗り版は、アウトラインより重く、支配的に読まれがちです。対処法は、塗り版のフットプリントを1〜2ピクセル少し小さくして、同じスケールでの視覚的な重さをアウトラインに合わせることです。
アウトラインから塗りへの切り替えが、より広いインタラクション状態の設計にどう収まるかは、フォーカス状態の用語集で扱っています。
命名はシステムの半分
誰も見つけられない200個のよく描かれたアイコンのライブラリは、誰にも使われないライブラリです。命名は発見性のレイヤーであり、悪い命名は、悪い描画よりも速く採用を殺します。
スケールする命名パターン
メタファー優先ではなく、オブジェクト優先で命名します。虫眼鏡のアイコンは search か magnifier であり、find や look ではありません。オブジェクトは安定していますが、メタファーは文脈で変わります。
複数語のアイコンにはkebab-caseを使います。arrow-left、chevron-down、cloud-upload のように。ケースが一貫していれば、エンジニアはライブラリをgrepでき、IDEで補完でき、タイポなしで出荷できます。
方向のサフィックスは必要なときだけ使います。arrow だけでは足りません。arrow-left、arrow-right、arrow-up、arrow-down が最小セットです。シェブロン、キャレット、その他の方向性のあるピクトグラムも同様です。
バリアントの命名
アイコンに複数のバリアント(アウトライン、塗り、デュオトーン)がある場合は、バリアントをサフィックスとして付けます。
search(デフォルトのアウトライン)search-filledsearch-duotone
このパターンなら、エンジニアは別フォルダを掘り返さずに search-filled をボタンに取り込めます。予測できる命名は、完璧な整理より速いのです。
シノニムマップ
最大の命名の失敗は、デザイナーが間違った単語で検索したせいで見つけられないアイコンです。ライブラリと並行してシノニムマップを作りましょう。cart は bag、shopping にもマッチさせる。home は house、dashboard にも。delete は trash、remove、bin にも。
最近のアイコン検索ツール(Iconify、Lucide、Phosphor)の多くは、検索UIにシノニムマップを組み込んでいます。社内ライブラリにも同じものを作るか、既存のアイコンが見つからないせいでデザイナーが重複アイコンを追加し続けるのを受け入れるか、どちらかです。
ガバナンスがシステムを生かし続ける
上記の技術的な決定は、有能なデザイナーなら誰でも再現できます。ガバナンスの決定こそが、生きるシステムと2年目に死ぬシステムを分けます。
唯一の信頼できる情報源
アイコンを置く場所を1つ選びます。Figmaライブラリ、SVGを入れたコードリポジトリ、Iconifyのようなホスティングサービス。1つだけ選びます。ライブラリはそこにあります。すべてのデザイナーがそこから取得します。すべてのエンジニアもそこから取得します。
信頼できる情報源が2つあるシステムは、信頼できる情報源がゼロのシステムです。Figmaライブラリとコードライブラリは3週目までにズレ、それ以降はすべての画面が、システムと合わないアイコンを出荷することになります。
コントリビューションのプロセス
新しいアイコンを追加するプロセスを文書化します。プロセスには次を含めてください。
- まず検索する。 そのアイコンが、別の名前ですでに存在しないことを確認します。
- 追加を正当化する。 アイコンが何を表し、どこで使われるのかを1文で書きます。
- 仕様どおりに描く。 既存ライブラリのグリッド、ストローク幅、角丸、エンドキャップ、ジョインに合わせます。
- オプティカルレビュー。 別のデザイナーが、16、20、24ピクセルのサイズで視覚的バランスを確認します。
- 命名して出荷する。 名前は命名パターンに従います。同じPRでFigmaとコードの両方に出荷します。
コントリビューションのプロセスがないシステムは、迂回されるシステムです。デザイナーがアイコンを急ぎで必要としたとき、無料パックからダウンロードして、聞かずに出荷します。それ以降、ライブラリにはフォークができています。
廃止のプロセス
アイコンは廃止されます。リデザインで古いスタイルが引退し、機能がカットされ、ブランドリフレッシュでビジュアル言語が変わる。アイコンがどう入ってくるかだけでなく、どう出ていくかも文書化してください。
廃止予定のアイコンには、ライブラリ内で目に見えるラベルを付けます。既存の画面が移行できるよう、90日間は使えるままにします。その後で削除します。アイコンを一度も削除しないライブラリは博物館になり、博物館は無視されます。
アイコンをコードに出荷する方法
デザインとコードの間のハンドオフは、ほとんどのアイコンシステムが壊れる場所です。Figmaライブラリは完璧でも、コードライブラリはバラバラなSVGの墓場で、エンジニアはどちらも信頼しなくなります。
フォーマットはSVG
アイコンはSVGで出荷します。PNGでも、アイコンフォントでもありません。SVGはベクターで、劣化なしにどんなサイズにもスケールし、current colorの継承で簡単にテーマ化でき、コンポーネントにインライン化できるほど小さく出荷できます。
各SVGには、グリッドに合ったviewBox(24x24か20x20)があり、ストロークと塗りには currentColor を使い、冗長なtransformやstyleを含めません。きれいなSVGは1 KB未満です。ほとんどのアイコンライブラリは3〜5 KBのアイコンを出荷していますが、それはデフォルト設定でエクスポートされ、誰も必要としないメタデータ、transform、インラインスタイルが埋め込まれているからです。
最適化は譲れない
すべてのSVGは、コードリポジトリに入る前にSVGOに通します。SVGOはメタデータを取り除き、パスを単純化し、冗長な属性を削除し、平均で60〜80%ファイルサイズを削減します。
200アイコンのライブラリなら、最適化前と後の差は、たいてい毎ページロードで400 KBです。それはLighthouseのスコア低下であり、コアウェブバイタルの悪化であり、理由もなくモバイル体験を遅くします。
コンポーネントラッパー
各SVGを、型付きコンポーネント(React、Vue、Svelte)でラップします。コンポーネントはサイズ、色、アクセシビリティのpropsを受け取ります。エンジニアは生のSVGを決してインポートしません。<Icon name="search" size={20} /> をインポートすれば、あとはシステムが処理します。
このパターンなら、アイコンライブラリは、利用側のコードに触れずに、内部のエクスポート形式(SVG、スプライト、アイコンフォント)を変更できます。コンポーネントがAPIで、SVGは実装です。
より広いハンドオフの規律については、デザインハンドオフの用語集で扱っています。アイコンは、デザイナーとエンジニアが本当に責任を共有する数少ないケースの1つです。
アイコンシステムのよくある失敗
アイコンの監査では、毎回同じ失敗が見つかります。システムにこのどれかがあるなら、そのライブラリは次のリデザインで全面書き直しになる寸前です。
1つのライブラリに3種類のストローク幅。 ほぼ確実に、複数の無料パックから寄せ集められたライブラリです。対処法は、セット全体を1つのウェイトで強制的に描き直すことです。
塗りとアウトラインのバリアントでスケールが違う。 知覚上の重さを誰も補正しなかったため、塗り版がアウトラインより大きく読まれます。対処法は、2つが同じサイズに読めるまで、塗り版を1〜2ピクセル縮めることです。
角丸の不統一。 半分のアイコンは角が丸く、半分は角張っている。ほぼ確実に、2人のデザイナーが文書化されたルールなしに貢献したからです。対処法は、角丸を1つ定義してリファクタリングすることです。
メタファーによる命名。 描かれているオブジェクトではなく、find、look、discover と名付けられたアイコン。デザイナーには見つけられません。対処法は、オブジェクト優先の規約にリネームすることです。
廃止プロセスがない。 ライブラリには350個のアイコンがあり、うち80個は未使用か置き換え済み。肥大化が検索を遅くし、新しいデザイナーを混乱させます。対処法は、四半期ごとの監査と90日の廃止サイクルです。
2026年の条件下でのアイコンシステム
アイコンシステムの作り方を変えた変化が3つあります。システムはそれらを生き延びなければなりません。
可変アイコンフォントは現実になった。 新しいフォーマットでは、1つのアイコンファイルが、滑らかに補間される複数のウェイト、塗り、オプティカルサイズを持てます。技術的な利点は巨大ですが、デザイン上のリスクは、できるからといってチームがすべての画面にすべてのバリアントを出荷してしまうことです。出荷するバリアントを選び、残りは切り捨てましょう。
AIツールは数秒でアイコンを生成する。 Midjourney、DALL-E、ChatGPTは、1回のプロンプトでそれなりのアイコンを作れます。リスクは、デザイナーがアイコンを描かなくなりプロンプトするようになることで、プロンプトごとにスタイルが少しずつ違うため、システムの一貫性が死にます。AIは最初のドラフトに使い、すべての出力をシステムに合わせてリファクタリングしてください。
Lucide、Phosphor、Heroiconsがベースラインを作った。 これらのオープンライブラリは、一貫したグリッド、ウェイト、命名で1500個以上のアイコンを出荷しています。ほとんどのプロダクトでは、どれか1つから始めてカスタマイズするほうが、ゼロから作るより速くて良い結果になります。カスタムアイコンは、オープンライブラリがカバーしていない、プロダクト固有のコンセプトにだけ描きましょう。
アイコンのコントラストとラベル付けを統治するアクセシビリティの基準については、WCAGの用語集で扱っています。インタラクティブな要素の中のアイコンには、視覚的なラベルだけでなく、アクセシブルな名前が必要です。
FAQ
アイコンシステムには、どのサイズのグリッドを使うべきですか?
一般的なプロダクトUIには24ピクセルグリッド、高密度のデータUIには20ピクセルグリッドです。グリッドには左右上下2ピクセルのパディングがあり、アイコンが実際に収まるライブエリアは20か16ピクセルになります。1つ選び、ライブラリ全体でその中に留まりましょう。
アイコンのストロークはどれくらいの太さにすべきですか?
24ピクセルグリッドで1.5〜2ピクセルです。1.5ピクセルは軽く技術的に、2ピクセルは自信があり親しみやすく読めます。ウェイトを1つ選び、トークンとして文書化し、別のウェイトを使った投稿はすべて却下してください。
アイコンデザインにおけるオプティカル補正とは何ですか?
数学的には整列していても、バランスが取れて見えるようにアイコンを調整する実践です。円は正方形より大きく見え、三角形は小さく見え、斜線は水平線より細く見えます。オプティカル補正は、こうした知覚上のクセを補います。バウンディングボックスより、常に目を信じてください。
アイコンは塗りとアウトライン、どちらにすべきですか?
最近のシステムの多くは両方を出荷します。非アクティブ状態にはアウトライン、アクティブ状態には塗り。2つのバリアントは視覚的にバランスが取れている必要があり、通常は、知覚上の重さを合わせるために塗り版をアウトラインより1〜2ピクセル小さくすることを意味します。
デザインシステムでアイコンはどう命名すべきですか?
オブジェクト優先、kebab-case、必要に応じて方向のサフィックスを付けます。findではなくsearch。backではなくarrow-left。デザイナーが別の単語でも検索できるよう、シノニムマップを使います。エンジニアが1回のインポートで適切なバリアントを取れるよう、バリアントのサフィックス(filled、duotone)を付けましょう。
カスタムアイコンを作るべきなのは、いつですか。オープンライブラリを使うべきなのは、いつですか?
オープンライブラリ(Lucide、Phosphor、Heroicons)をベースに使います。それらがカバーしない、プロダクト固有のコンセプトだけをカスタムで描きます。2026年に300個のアイコンセットをゼロから作るのは、ほぼ確実に無駄な労力です。オープンなベースをカスタマイズし、追加分を文書化して、出荷しましょう。
システムは元が取れる
一貫したアイコンライブラリは、プロダクトを洗練されて見せる最も安い方法です。ズレていくアイコンライブラリは、プロダクトを安っぽく見せる最も速い方法です。システムを作るコストは、規律ある作業の1〜2週間。作らないコストは、プロダクトが出荷するすべての画面にかかる、永遠の視覚的な税金です。
グリッドを選ぶ。ウェイトを選ぶ。角丸を選ぶ。命名パターンを選ぶ。コントリビューションと廃止のプロセスを書く。SVGを最適化する。型付きコンポーネントでラップする。そして、そのすべてをコードレビューで徹底する。
すべての画面のアイコン列は、プロダクトの品質を示す最も密度の高いシグナルの1つです。一度正しく作れば、残りのデザインを支えてくれます。
より広いデザインシステムのハンドオフの一部としてアイコンシステムを作るチームが必要なら、Brainyに依頼してください。グリッド、ガバナンス、コードを1つのプロジェクトで。最後に後付けすることは決してありません。
関連記事
Want an icon library that holds up across 200 screens and four designers? Brainy ships icon systems built into the design system, with grid, governance, and code in one handoff.
Get Started
