アイコンサイズのrem変換（16px、20px、24px、32px）

標準アイコンサイズ：pxからrem

アイコンは基本的なUI要素です。主要なアイコンシステムで使用される標準サイズを紹介します：

アイコンサイズ変換テーブル

px	rem	用途
12	0.75	インラインマイクロアイコン（キャレット、ドット）
14	0.875	小さいインラインアイコン（外部リンク矢印）
16	1	インラインテキストアイコン、小さいボタン
20	1.25	一部システムのデフォルト（Heroicons）
24	1.5	標準デフォルト（Material、Lucide）
32	2	中サイズ機能アイコン、ナビゲーション
40	2.5	大きな機能アイコン、空状態
48	3	ヒーローアイコン、マーケティングセクション
64	4	特大イラストレーション

アイコンシステムのデフォルト

アイコンシステム	デフォルトサイズ	rem
Material Icons	24px	1.5rem
Lucide React	24px	1.5rem
Heroicons	20px / 24px	1.25 / 1.5rem
Font Awesome	16px（1em）	1rem
Phosphor Icons	24px	1.5rem

アイコンにremとemのどちらを使うか

• rem — アイコンサイズがルートに対して相対的。ページ全体で一貫性あり。
• em — アイコンサイズが親のフォントサイズに対して相対的。近くのテキストに合わせてスケーリング。

スタンドアロンアイコン（ナビゲーション、ツールバー）にはremが一貫性のために好まれます。テキスト横のインラインアイコン（ラベル横のリンクアイコンなど）にはemを使うとテキストサイズに合わせてスケーリングされます：

.icon-inline {
  width: 1em;
  height: 1em;
}

.icon-standalone {
  width: 1.5rem;  /* 24px */
  height: 1.5rem;
}

視覚的な整列

アイコンはテキストと視覚的に整列するために微調整が必要な場合があります。16pxテキスト横の24pxアイコンは大きすぎるように見えることがあります。一般的なアプローチ：

.button-icon {
  width: 1.25rem;  /* 20px — 24pxデフォルトより少し小さい */
  height: 1.25rem;
  margin-right: 0.5rem; /* 8pxの間隔 */
}

タッチターゲットの考慮

視覚的なアイコンが24px（1.5rem）であっても、WCAG 2.5.8に基づきクリック可能な領域は最低44px x 44px（2.75rem）であるべきです。パディングでタッチターゲットを拡張してください：

.icon-button {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.625rem; /* (44 - 24) / 2 = 10px */
}