アイコン

考え方

web-ui はアイコンセットを同梱しません。Icon は任意の <svg> 要素を children で受け取り、サイズと色だけを統一するラッパーです。

<Icon size={24} ariaLabel="削除">
  <TrashSvg />
</Icon>

同梱しない理由は、アイコンの選定（Material Symbols / Heroicons / 独自デザインなど）を利用側のプロダクトに委ね、ライブラリのバンドルサイズを増やさないためです。React Native 版の rn-ui とテーマ構造・デフォルト値を共有する設計とも整合します（プラットフォームごとにアイコン実装は異なるため）。

一覧

Icon が制御するのはサイズと色の2点だけです。

props	既定値	説明
`size`	`24`	一辺の px。`IconRoot` が `width`/`height` を強制する
`color`	`theme.semantic.icon.primary`（`disabled` 時は `icon.disabled`）	子 `<svg>` に `color: <value>` を適用し、`fill`/`stroke` に `currentColor` を使っている SVG へ伝播する

子要素の SVG 側は fill="currentColor" または stroke="currentColor" を使うことで、Icon が指定した色を継承します。fill="#000000" のように色を固定した SVG を渡すと、color props が効きません。

使い分け

サイズ: 本文中のインラインアイコン（Label2 の文字と並べる等）は16〜20px、ボタン内やスタンドアロンのアイコンは24px（既定）、強調したい場面は32px以上を検討します。サイズは呼び出し側が size で明示的に指定し、Icon 自体に「small/medium/large」のような名前付きバリアントは持たせません。
色: 単体で使うアイコンは color 省略時の既定（icon.primary）に任せます。ブランド強調・フィードバック（成功/エラー等）を示すアイコンは、対応する Semantic トークン（icon.brand / icon.error 等）を明示的に渡します。
クリック可能なアイコン: onClick を渡すと role="button" / tabIndex={0} / Enter・Space でのクリック発火が自動的に付きます（.claude/rules/verification.md のキーボード操作規約に自前で対応済み）。押せる操作の主役にしたい場合（フォームの送信操作など）は IconButton を使い、Icon の onClick は一覧行内の小さな操作など補助的な用途に留めます。

アクセシビリティ

ariaLabel を渡すと aria-label が設定され、省略すると自動的に aria-hidden="true" になります。意味を持つアイコン（削除・警告など、テキストが無く意味を伝える場合）には必ず ariaLabel を渡します。
装飾目的のアイコン（隣にテキストラベルがあり、アイコンが情報を追加しない場合）は ariaLabel を省略し、支援技術から無視されるようにします。

やってはいけないこと

<svg> に色を直接指定しない（fill="#2563EB"）。currentColor を使い、Icon の color props に委ねます。
サイズをコンポーネントの CSS 側で固定しない（width: 20px を SVG や親要素に直接書く）。size props で指定します。
意味を持つアイコンに ariaLabel を付け忘れない。スクリーンリーダー利用者には何も読み上げられません。