UIデザインのためのSVGアイコン：2026年完全ガイド
UIデザインのSVGアイコン完全ガイド：24×24グリッド、ストロークの一貫性、アクセシビリティ、ダークモード、SVGスプライト、Figmaエクスポートワークフロー。
Founder of VectoSolve
Self-taught developer, founder and sole developer of VectoSolve since 2024. He builds the conversion engine and the cutting, embroidery and 3D printing exports.
How this article was made: drafted with AI assistance, then edited and fact-checked before publication. About the author
Key Takeaways
- すべてのSVGアイコンを24×24ピクセルグリッド上で一貫した2 pxストロークで設計し、コンポーネントライブラリ全体の光学的調和を保証
- SVGスプライトシートとReactラッパーコンポーネントはアイコンフォントをスケーラビリティ、アクセシビリティ、テーマ設定で上回る
-
aria-label、role="img"、<title>の正しい使用でアイコンを支援技術のための意味のあるインターフェース語彙に変換 -
CSSカスタムプロパティ（
--icon-color、--icon-size）でダークモードとマルチブランドテーマを単一トークン変更に - Figma-SVGエクスポートパイプラインとSVGO最適化で各アイコンを500バイト以下に
SVGアイコンがプロダクションUIの唯一の本格的選択肢である理由
アイコンフォントの時代は終わりました。PNGスプライトも同様です。どちらもブレークポイント、カラーテーマ、アクセシビリティ要件にわたってスケールする必要があるデザインシステムの弱点です。SVGアイコンは唯一のアーキテクチャ的に健全な選択肢です。
SVGアイコンはファーストクラスのDOMノードです。CSSカスタムプロパティに応答し、アクセシビリティツリーに参加し、品質損失なくスケールし、標準CSSトランジションでアニメーションできます。
「アイコンはユーザーインターフェースの語彙です。語彙を間違えれば、製品が発する全ての文章が混乱します。」- Wilson Miner
アイコンデザイン原則：グリッド、ストローク、光学的一貫性
24×24グリッド標準
一貫したシステムの全アイコンは同じキャンバスで始まります。24×24ピクセルグリッドは一般的なサイズ（12、16、20、48）に均等に分割されます。
Pro Tip: 全アイコンを24×24グリッド、2 pxストローク幅、2 pxパディング（セーフゾーン）、丸いラインキャップ/ジョインで設計。この単一の制約が異なるソースのアイコン混在時の光学的不一致の90%を排除します。
ストロークの一貫性と視覚的ウェイト
24×24での2 pxストロークは予測可能にスケール：16 pxで~1.33 px、48 pxで4 px。
- セットごとに1つのストローク幅。 1.5 pxまたは2 pxを選びグローバルに適用。
- 一貫したキャップとジョインスタイル。 ラウンドキャップはラウンドジョインと。混在禁止。
- 曲線の光学補正。 20 pxの円は20 pxの正方形より小さく見える — 20.5 pxに調整。
Warning: 一貫性のないアイコンスタイルはUI品質を静かに破壊します。アウトラインとフィルアイコンの混在、ストローク幅の変動、角丸と角張りの組み合わせは、製品が丁寧に設計されていないことをユーザーに示します。
SVGアイコンシステムアーキテクチャ
| 基準 | アイコンフォント | SVGスプライト | インラインSVG | Reactコンポーネント |
|---|---|---|---|---|
| スケーラビリティ | 良い | 完璧 | 完璧 | 完璧 |
| マルチカラー | 不可 | 可能 | 可能 | 可能 |
| CSSテーマ | 限定的 | 完全 | 完全 | 完全 |
| アクセシビリティ | 不良 | 良い | 優秀 | 優秀 |
| Tree-shaking | 不可 | 不可 | N/A | 可能 |
| アニメーション | なし | 限定的 | 完全 | 完全 |
| バンドル影響 | ~50-200 KB | ~10-80 KB | ~0.3-1 KB各 | ~0.5-1.5 KB各 |
| ダークモード | 脆弱 | 堅牢 | 堅牢 | 堅牢 |
SVGスプライトパターン
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
<symbol id="icon-check" viewBox="0 0 24 24">
<polyline points="20,6 9,17 4,12" fill="none"
stroke="currentColor" stroke-width="2"/>
</symbol>
</svg>
<svg width="24" height="24" aria-hidden="true">
<use href="#icon-check"/>
</svg>Reactコンポーネントパターン
interface IconProps extends React.SVGProps<SVGSVGElement> {
size?: number;
label?: string;
}
export function CheckIcon({ size = 24, label, ...props }: IconProps) {
return (
<svg width={size} height={size} viewBox="0 0 24 24"
fill="none" stroke="currentColor" strokeWidth={2}
role={label ? 'img' : undefined}
aria-label={label} aria-hidden={label ? undefined : true}
{...props}>
<polyline points="20,6 9,17 4,12" />
</svg>
);
}A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual Dealアクセシビリティ要件
全SVGアイコンは装飾的か意味的のいずれか。
装飾的（表示テキストの隣 — スクリーンリーダーから隠す）：
<button>
<svg aria-hidden="true" focusable="false"><!-- アイコン --></svg>
ドキュメントを保存
</button>意味的（唯一のインタラクティブ要素 — 自身をアナウンスする必要あり）：
<button aria-label="ダイアログを閉じる">
<svg role="img" aria-labelledby="close-title" focusable="false">
<title id="close-title">閉じる</title>
<path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2"/>
</svg>
</button>role="img"属性は支援技術にSVGを子ノードを走査せず単一画像として扱うよう指示します。<title>要素を指すaria-labelledbyと組み合わせて最大互換性を実現。レガシーブラウザでのファントムタブストップ防止に常にfocusable="false"を追加。
ダークモードとCSSカスタムプロパティによるテーマ設定
:root {
--icon-color-primary: #1a1a2e;
--icon-color-success: #059669;
--icon-size-md: 24px;
--icon-stroke: 2px;
}
@media (prefers-color-scheme: dark) {
:root {
--icon-color-primary: #e5e7eb;
--icon-color-success: #34d399;
}
}
.icon {
width: var(--icon-size-md);
height: var(--icon-size-md);
stroke: var(--icon-color-primary);
stroke-width: var(--icon-stroke);
transition: stroke 0.2s ease;
}ダークモードへの切り替えはアイコンコード変更ゼロ。トークンが更新され、全アイコンが追従します。
パフォーマンス最適化
コミット前に全アイコンをVectoSolve SVGオプティマイザーまたはSVGOで処理。典型的な24×24アイコンは最適化後200〜500バイトに。
- インラインSVG：ATFの重要アイコン用。ネットワークオーバーヘッドゼロ。
- 外部スプライトシート：BTFアイコン用。1リクエスト、長期キャッシュ。
- 動的
import()：まれに表示されるアイコン用。
CLSを防ぐためSVG要素に常に明示的なwidthとheightを設定。
Free SVG Tools for Crafters
Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG
Check Your SVG FreeFigma-SVGエクスポートワークフロー
- Figmaで整理。
icon/check、icon/alert-triangle等の24×24フレーム。 - フラット化とアウトライン化。 ブーリアングループをフラット化、ストロークをアウトライン化。
- SVGとしてエクスポート。 "Outline text"オン、"Include id"オフ。
- 最適化。 VectoSolveオプティマイザーでメタデータ削除と精度削減。
- 検証。 16、24、48 pxで正しくレンダリングされることを確認。
- コンポーネント生成。 SVGRまたはカスタムスクリプトでフレームワークコンポーネントに変換。
アイコンアニメーションとマイクロインタラクション
ストローク描画アニメーション
.icon-check polyline {
stroke-dasharray: 24;
stroke-dashoffset: 24;
transition: stroke-dashoffset 0.25s cubic-bezier(0.65, 0, 0.35, 1);
}
.checkbox:checked + .icon-check polyline {
stroke-dashoffset: 0;
}回転とモーフィング
.icon-loading { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }Pro Tip: アイコンアニメーションは300 ms以内に保ち、状態変化の瞬間に限定。前庭障害のあるユーザーへの配慮として常にprefers-reduced-motionメディアクエリでラップ。
今日からアイコンシステムを構築
VectoSolveはラスターからベクターへの変換からSVG最適化、ライブSVG編集まで、あらゆる段階でSVGアイコンを変換・最適化・編集するツールを提供します。
| 統合方法 | メリット | デメリット |
|---|---|---|
| インラインSVG | CSS/JS完全制御、追加リクエストなし | 多用するとHTMLが肥大化 |
| SVGスプライトシート | 1 HTTPリクエスト、キャッシュ可能 | 一部ケースで外部CSSスタイル不可 |
| Reactコンポーネント（SVGR） | Tree-shakeable、型付きprops | ビルドステップ必要 |
| アイコンフォント | 使いやすい、広くサポート | アクセシビリティ不良、マルチカラー不可 |
| <img>タグ | シンプル、キャッシュ可能 | CSS/JS制御不可、アニメーション不可 |
A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual Deal参考資料
- MDN Web Docs: SVG Icons — SVG要素、ARIAロール、アクセシブルなアイコンマークアップの技術リファレンス
- CSS-Tricks: SVG Icon Systems — SVGスプライトシートとアイコンコンポーネントライブラリ構築の完全ガイド
- web.dev: Web Performance — アイコンアセットの効率的な読み込みとレンダリングのGoogleベストプラクティス
- Smashing Magazine: Icon Design — 一貫した pixel-perfectアイコンシステムのためのUIデザイン原則