---
summary: アクションやオブジェクトの意味をアイコンで補う
---

# Icon

inhouse のアイコンフォントを使って、アクションやファイルなどの意味を補うアイコンを表示するコンポーネントです。アイコン用の素の `<span>` や `<img>`、SVG を直接書く代わりに使います。ユーザーのプロフィール画像には Avatar を、押して操作するアイコンには Button と組み合わせて使います。

## 基本の使い方

```tsx
import { Icon } from 'wip-ui'

<Icon name="home" aria-hidden="true" />
```

## 使う場面

- ボタンやナビゲーションで、アクションの意味をアイコンで補強したいとき
- リストの項目やテキストの横で、内容の種類をアイコンで示したいとき

## 使い方

### アイコンの選び方

- name に指定できる名前の一覧は、Storybook の Foundations/Icons で確認できる
- [avoid] 文言や UI で意味が伝わる場合に、アイコンを足さない。アイコンは認識を補助するためのもの

### サイズ

| size | 用途 |
|---|---|
| s | インラインテキスト、ラベル内 |
| m | ボタン、リスト項目 |
| l | ヘッダー、強調表示 |

- [should] 上の表の用途に合う size を選ぶ
- size を指定しない場合は、親要素の文字の大きさで表示される

### 色

- color を指定しない場合、アイコンは親要素の文字色で表示される
- [should] 色を変えたい場合は、Typography の color など、親要素の文字色で指定する
- [avoid] color に色コード（#FFD700 など）を直接書かない

### 操作

- Icon 自体は、クリックなどの操作を受け付けない
- [should] 押せるアイコンにしたい場合は、Button の中に置く

## アクセシビリティ

- [should] 隣にテキストがあるなど、装飾として置くアイコンには aria-hidden="true" を指定する
- [must] テキストがなく、アイコンだけで意味を伝える場合は、意味が分かるラベルを付ける
- [must] アイコンだけのボタンにする場合は、Button に iconOnly と aria-label を指定する

## 実装

- [must] Icon に onClick を付けない。押せるアイコンは、Button の leading・trailing、または iconOnly の中身として使う
- [should] アイコンだけで意味を伝える場合は、role="img" と aria-label を指定する

## Props（自動生成）

型定義から生成した props の一覧です。react-aria-components から引き継いだ props の説明は英語です。DOM の汎用的な属性・イベントは省略しています。

### Icon

| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
| name（必須） | "apple" \| "arrow_cross" \| "arrow_down" \| "arrow_drop_down" \| "arrow_drop_left" \| "arrow_drop_right" \| "arrow_drop_up" \| "arrow_left" \| "arrow_order" \| "arrow_right" \| "arrow_right_left" \| "arrow_up" \| "balloon" \| "bell" \| "bill" \| "bullet_circle" \| "calendar" \| "camera" \| "cart" \| "check" \| "check_on_circle" \| "chevron_double" \| "chevron_down" \| "chevron_left" \| "chevron_right" \| "chevron_up" \| "circle" \| "clip" \| "clock" \| "code" \| "copy" \| "cross" \| "cross_on_circle" \| "discord" \| "download" \| "drag_handle" \| "ellipsis_horizontal" \| "ellipsis_horizontal_on_circle" \| "ellipsis_vertical" \| "exclamation_on_triangle" \| "facebook" \| "figma" \| "first_page" \| "folder" \| "funnel" \| "garbage_can" \| "gear" \| "github" \| "hatena_bookmark" \| "heart" \| "heart_border" \| "home" \| "image" \| "in" \| "info_on_circle" \| "instagram" \| "last_page" \| "launch" \| "line" \| "location_pin" \| "lock" \| "magnifying_glass" \| "mail" \| "megaphone" \| "menu" \| "mic" \| "minus" \| "minus_on_circle" \| "misskey" \| "multi_pane" \| "node" \| "note" \| "notion" \| "out" \| "outside" \| "parameters" \| "pencil" \| "people" \| "pepapon" \| "person" \| "person_plus" \| "phone" \| "plus" \| "plus_on_circle" \| "podcast" \| "qr_code" \| "qr_code_scanner" \| "question_on_circle" \| "receipt" \| "roller" \| "rss_feed" \| "share" \| "spotify" \| "star" \| "tiktok" \| "upload" \| "x" \| "youtube" | - | 表示するアイコンの名前 |
| size | "s" \| "m" \| "l" | - | アイコンのサイズ。s=16px, m=24px, l=32px |
| color | string | - | アイコンの色。CSSカラー値を指定 |