---
title: "アイコン"
description: "アイコンセットはデザインシステムごとに 1 つ、太さも 1 つ、規則も 1 つ。未選択は線、選択中は塗り。"
url: "https://tanrei.chnotchy.com/ja/foundations/icons/"
last_updated: 2026-10-26T22:31:27.000Z
---

# アイコン

> アイコンセットはデザインシステムごとに 1 つ、太さも 1 つ、規則も 1 つ。未選択は線、選択中は塗り。

Tanrei の既定のアイコンは [Material Symbols](https://fonts.google.com/icons) の **Rounded**、**太さ 300** です。文字用の書体と同じく、フォントは名前で参照するだけで同梱しません。読み込むのはプロダクトの役目です。

アイコンの描き方は、少数のトークンで決まります。アイコンの枠は `sys.icon.small`・`medium`・`large` の 3 サイズ（既定では 16・20・24px）で、フォントのオプティカルサイズは枠の大きさに追従します。

- **`ref.typeface.icon`**: The icon font. Material Symbols Rounded: a variable font whose weight and fill are set from sys.icon.
- **`sys.icon.family`**: The icon font by selection. A variable icon font (Material Symbols) is one family and tells selected from unselected with its FILL axis; a static icon font tells them apart with two families (Material Icons Outlined / Material Icons). Both default to ref.typeface.icon.
- **`sys.icon.weight`**: The stroke weight of every icon (the \`wght\` axis of the icon font).
- **`sys.icon.fill`**: The fill of an icon by selection (the \`FILL\` axis of the icon font): 0 is outlined, 1 is filled.

生成元 `tokens/ref/typeface.tokens.json`, `tokens/sys/measure.tokens.json`

## 塗りの規則

**未選択は線。選択中は塗り。例外はありません。** ナビゲーション項目、タブ、トグル、チップ、お気に入り。どれもグリフは同じまま、状態に応じて塗りだけが変わります。装飾のために線と塗りを混ぜることはなく、塗りを手で選ぶこともありません。Web では、アイコンが置かれたコントロールの状態に塗りが自動で追従します。

```js
import '@tanrei/web/icons.css';
```

```html
<button aria-pressed="true"><span class="tanrei-icon" aria-hidden="true">favorite</span> お気に入り</button>
```

`.tanrei-icon` は、祖先要素の `aria-pressed`・`aria-selected`・`aria-checked`・`aria-current`（これらを `data-aria-*` に移す Tanrei のコントロールでは `data-aria-pressed`・`data-aria-selected`・`data-aria-checked`・`data-aria-current`）、またはアイコン自身か祖先の `data-selected` を読み取ります（`data-selected="false"` を付けると、そのアイコンだけ対象から外せます）。隣のテキストが同じ内容を伝えているならアイコンに `aria-hidden="true"` を付け、そうでないならコントロールにアクセシブルネームを付けてください。

名前は `data-icon` で渡すこともできます。その場合、要素の中身は空にします。

```html
<span class="tanrei-icon" data-icon="folder"></span>
```

描かれるグリフは同じですが、名前がページのテキストになりません。`textContent` や `innerText` にも、コピーした文字列にも、周りのコントロールのアクセシブルネームにも入りません。メニューやリストの行、表のセル、テストで文字列を比べる箇所など、名前がテキストとして読まれてしまう場所で使ってください。サイズ、選択状態、右から左のレイアウトでの反転は、テキストで書いた場合とまったく同じように働きます。隣のテキストが同じ内容を伝えている場合は、この形でも `aria-hidden="true"` を付けてください。Firefox 127 以前は、この名前をアクセシブルネームに含めて読み上げます。

ネイティブの各プラットフォームでは、同じ値がデザインシステムと一緒に届きます（`system.icon`）。あわせて、「選択中かどうか」とサイズから、フォントに渡す設定を返す小さなヘルパーがあります。アイコンコンポーネントはまだ提供していません。

## デザインシステムごとのアイコンセット

アイコンセットはデザインシステムに属するものなので、[レイヤ](https://tanrei.chnotchy.com/ja/foundations/design-systems/)で変えられます。同梱システムでの解決値は次のとおりです。

| デザインシステム | `family.unselected` | `family.selected` | `weight` | `fill.unselected` | `fill.selected` |
| --- | --- | --- | --- | --- | --- |
| `tanrei` | Material Symbols Rounded | Material Symbols Rounded | 300 | 0 | 1 |
| `cupertino` | Material Symbols Rounded | Material Symbols Rounded | 300 | 0 | 1 |
| `m3-expressive-like` | Material Symbols Outlined | Material Symbols Outlined | 400 | 0 | 1 |
| `m3-like` | Material Symbols Outlined | Material Symbols Outlined | 400 | 0 | 1 |

生成元 `tokens/systems/*.system.json`, `design/tokens/<system>/tanrei.light.tokens.json`

アイコンフォントが選択中と未選択を描き分ける方法は 2 通りあり、トークンはその両方に対応しています。選択中のアイコンには、常に `family.selected` と `fill.selected` の**両方**が適用されます。実際に見た目を変えるのがどちらになるかは、セット次第です。

### バリアブルフォント 1 ファミリー

Material Symbols のようなバリアブルのアイコンフォントは、`FILL` 軸を持つ 1 つのファミリーです。ファミリーのトークンは既定でどちらも `ref.typeface.icon` を指しているので、このトークン 1 つを差し替えればセットが変わり、状態の描き分けは `fill.unselected` / `fill.selected` が受け持ちます。`m3-like` が書いているのはこれだけです。

```json
"tokens": {
  "tanrei.ref.typeface.icon": { "$value": ["Material Symbols Outlined"], "reason": "Material Design 3 draws Material Symbols in the Outlined style." },
  "tanrei.sys.icon.weight":   { "$value": 400, "reason": "Material Symbols default weight in Material Design 3." }
}
```

### スタティックフォント 2 ファミリー

スタティックなアイコンフォントには軸がありません。線の絵と塗りの絵が別々のファミリーとして配布されているので、レイヤでは状態ごとにファミリーを指定します。

```json
"tokens": {
  "tanrei.sys.icon.family.unselected": { "$value": ["Material Icons Outlined"], "reason": "Acme uses the static Material Icons set: outlined when unselected." },
  "tanrei.sys.icon.family.selected":   { "$value": ["Material Icons"], "reason": "Acme uses the static Material Icons set: filled when selected." },
  "tanrei.sys.icon.weight":            { "$value": 400, "reason": "A static icon font has one weight; 400 is what Material Icons is drawn at." }
}
```

塗りと太さのトークンはそのままで構いません。スタティックフォントは軸を無視するので害はなく、コンポーネントはどちらの種類のセットが有効かを知る必要がありません。このレイヤは、リポジトリ自身のテスト用フィクスチャ（`packages/tokens-build/test/fixtures/acme.system.json`）です。

### アイコンの名前はプロダクトが決める

Tanrei が決めるのはアイコンの「描き方」であって、「どのアイコンがあるか」ではありません。グリフの名前はセットごとに違い、あるセットにあるグリフが別のセットに無いこともあります。アイコンセットを変えるプロダクトは、自分が使っている名前を確認してください。なお、SF Symbols のようにフォントではないシンボルセットは、ファミリーのトークンでは指定できません。これは mimicry-gaps 台帳に `platform-symbol-sets` として登録しています。

### React Native

React Native の `<Text>` はフォントのバリエーション軸を設定できません。そのためバリアブルのアイコンフォントでは `FILL` がグリフに届かず、アイコンはどちらの状態でも同じ見た目になります。React Native で塗りの規則を守るには、上のようにスタティックフォント 2 ファミリーを使うか、アイコンを SVG で描いてください。

ネイティブ 4 パッケージのアイコンヘルパーは、いま「状態ごとのファミリー」モデルへ移行しているところです。各パッケージの README にその記載が載るまでは、そのパッケージは単一のファミリーを読むものと考えてください。