---
title: "アイコンギャラリー — zenit Zig UI ドキュメント"
description: "zenit の公開アイコンを検索・プレビュー・コピーし、静的定数、動的 registry、セマンティックレイヤーの役割分担を理解します。"
url: https://zenit.z.express/ja/docs/guide/icons
language: ja
alternate_en: https://zenit.z.express/docs/guide/icons.md
alternate_zh: https://zenit.z.express/zh/docs/guide/icons.md
alternate_es: https://zenit.z.express/es/docs/guide/icons.md
alternate_ko: https://zenit.z.express/ko/docs/guide/icons.md
alternate_fr: https://zenit.z.express/fr/docs/guide/icons.md
alternate_de: https://zenit.z.express/de/docs/guide/icons.md
project: zenit v0.1.0-alpha (Zig 0.15.2, macOS)
source: https://github.com/version-next/zenit
---

# Icon Gallery

zenit の公開アイコンを検索・プレビュー・コピーし、静的定数、動的 registry、セマンティックレイヤーの役割分担を理解します。

## 2 つのエントリポイント

公開ビルドには Lucide（`lucide-static` v1.31.0）が同梱されています。provider の完全なカタログは `ui.icons` にあり、**2,026** 個の名前を持ちます。上流の SVG 2,025 個に、互換エイリアス `hand-pointing`（上流の `pointer.svg` とバイト単位で同一）を加えたものです。`ui.system_icons` は provider に依存しない 45 個のセマンティックロールを提供します。zenit 自身のコンポーネントはこちらだけに依存するため、ベンダー名が公開コンポーネントの契約に漏れることはありません。

| エントリポイント | 用途 |
| --- | --- |
| `ui.system_icons` | 45 個の安定したセマンティックロール（close、search、alert、pointer…）。どの provider でもコンパイルできる必要がある、再利用可能なフレームワーク / パッケージのコード向け |
| `ui.icons` | 2,026 個の Lucide 名。プロダクト UI と動的な設定向け |
| `ui.assets.common` | 17 個の旧互換アイコン。新しいコードでは推奨されません |

ICON PATH

セマンティックロール → provider の対応付け → Asset → アイコン描画パス。provider を替えても差し替わるのは対応付けモジュールだけです。

[Video](https://zenit.z.express/media/stories/icons.mp4?v=6dffffbd52)

実際の zenit Storybook のセマンティックアイコン Story：仮想カーソルがロール、サイズ、tint をなぞります。provider の完全なカタログは下の Web 一覧にあります。[/components/icons](https://zenit.z.express/ja/components/icons)

## 全 2,026 個の一覧

名前を入力すると即座に絞り込まれます。アイコンは 180 個ずつ読み込まれるので、2,000 以上の DOM ノードを一度に作ることはありません。アイコンをクリックすると、そのまま貼り付けられる `ui.iconTint` の呼び出しが表示されます。エスケープが必要な名前（`ui.icons.@"type"` など）はジェネレーターの規則どおりに処理済みです。

180 / 2,026

## 描画と着色

ビルド時に `gen-icons` が各アイコンを平坦化ジオメトリに変換します（各 Asset は `icon_id` とサイズ別の `reps` を持ちます）。実行時には `ui.iconTint` が論理サイズに最も近い rep を選んでノードに書き込むため、ウィンドウ内で SVG エンジンは動きません。事前平坦化ジオメトリを持たない Asset だけが `svgTint` のラスタライズにフォールバックします。幅 / 高さが固定ピクセルでない場合は Asset のデフォルトサイズ（Lucide は 24）が使われます。

`ui.iconTint` はテーマに追従する色に最適で、1 つの Asset を任意のサイズと色で使い回せます。`ui.icon` は tint を受け取らず白で描画するため、明るい背景では `iconTint` を使ってください。不透明度などの BoxStyle フィールドが必要なときは `ui.iconTintStyled` を使います。マウント済みアイコンの色を変える（hover、選択状態）には `node.setTint(color)` を呼びます。icon テーブルのストレージと `svgTint` フォールバックの image ストレージの両方を扱い、どちらもないノードでは false を返します。

`icons.zig`

```zig
// Follow the theme: tint with a token color.
const settings = try ui.iconTint(
    cx,
    ui.icons.settings,
    cx.tokens.color.fg_secondary,
    .{ .width = .fixed(20), .height = .fixed(20) },
);

// Dynamic lookup by kebab-case source name (config files, user data).
const configured = ui.icons.get("circle-alert") orelse
    return error.UnknownIcon;
const warning = try ui.iconTint(cx, configured, cx.tokens.color.warning, .{
    .width = .fixed(24),
    .height = .fixed(24),
});

// Enumerate the whole registry.
for (ui.icons.all) |entry| {
    std.log.debug("{s}", .{entry.name});
}
```

## セマンティックアイコンの契約

コンポーネントのコードでは、特定ベンダーの名前に縛られず `ui.system_icons.close` と書くべきです。Lucide プロファイルは `src/ui/system_icons_lucide.zig` で 45 個のロールすべてを具体的な Asset に対応付けています。`-Dicon-set` で provider を切り替えても、コンポーネントの API は変わりません。

activity

alert

audio

check

close

search

heart

star

home

settings

notification

calendar

user

mail

trash

download

upload

edit

copy

lock

chevron\_down

chevron\_up

chevron\_left

chevron\_right

minus

plus

more\_horizontal

cursor\_default

cursor\_click

pointer

move

not\_allowed

grab

resize\_horizontal

resize\_vertical

resize\_diagonal

wait

progress

help

warning

info

chevrons\_up

pause

sun

moon

ロール名と Lucide 名が異なる対応：

| ui.system\_icons | Lucide のソース名 |
| --- | --- |
| `alert` | `circle-alert` |
| `audio` | `headphones` |
| `close` | `x` |
| `home` | `house` |
| `notification` | `bell` |
| `trash` | `trash-2` |
| `edit` | `pencil` |
| `more_horizontal` | `ellipsis` |
| `cursor_default` | `mouse-pointer-2` |
| `cursor_click` | `mouse-pointer-click` |
| `pointer` | `hand-pointing` |
| `not_allowed` | `ban` |
| `grab` | `hand` |
| `resize_horizontal` | `chevrons-left-right` |
| `resize_vertical` | `chevrons-up-down` |
| `resize_diagonal` | `expand` |
| `wait` | `hourglass` |
| `progress` | `loader-circle` |
| `help` | `circle-help` |
| `warning` | `triangle-alert` |

`semantic.zig`

```zig
// Reusable code: depend on the role, not the provider's name.
const close = try ui.iconTint(cx, ui.system_icons.close, cx.tokens.color.fg_secondary, .{
    .width = .fixed(16),
    .height = .fixed(16),
});

// Icon-only button: no visible label, so set the accessible name explicitly.
const remove = try ui.widgets.Button(.{
    .icon_only = true,
    .icon_asset = ui.system_icons.trash,
    .variant = .ghost,
}).mount(scope, cx);
remove.behavior.interaction.a11y.label = "Delete";
```

## 命名・更新・ライセンス

-   **2 つの表記。**Registry の検索には Lucide の kebab-case のソース名（`ui.icons.get("circle-alert")`）を使い、Zig 定数ではハイフンをアンダースコアに置き換えます（`ui.icons.circle_alert`）。
    
-   **自動エスケープ。**Zig のキーワードやプリミティブ型名（`iN` / `uN` を含む）と衝突する定数、または数字で始まる定数はジェネレーターがエスケープします。例：`ui.icons.@"type"`。動的な `get` には影響しません。
    
-   **列挙可能。**`ui.icons.all` は名前順に並んだ `{ name, asset }` の配列で、`get` はこれを二分探索します。
    
-   **上流と同一。**SVG ファイルは上流とバイト単位で同一なので、更新やライセンス監査が容易です。更新時は古いファイルを削除してからコピーし、改名されたアイコンが残らないようにします。
    
-   **別ライセンス。**Lucide は ISC License（`src/ui/icons_oss/LICENSE`）で提供されており、zenit ルートの GPL-3.0-only ライセンスの対象外です。
    

```sh
# Verify the Lucide profile (test-headless + storybook build); the worktree is not modified
bash scripts/switch_icon_set.sh lucide

# Regenerate the committed provider module after the SVG set changes
zig build gen-icons-lucide
zig build test-ui
```

> TIP
> 
> **アイコンだけのボタンにも言葉が必要です。** アイコン名は人が読むためのラベルではありません。Button の `.label` は表示テキストであると同時にアクセシブルネームでもあります。テキストを表示しない icon-only の Button では、mount 後に `node.behavior.interaction.a11y.label` を設定し、見た目・ヒット領域・支援技術の操作が同じ操作を指すようにしてください。