---
title: "Galerie d'icônes — Docs zenit Zig UI"
description: "Recherchez, prévisualisez et copiez les icônes publiques de zenit, et voyez comment constantes statiques, registry dynamique et couche sémantique se…"
url: https://zenit.z.express/fr/docs/guide/icons
language: fr
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_ja: https://zenit.z.express/ja/docs/guide/icons.md
alternate_ko: https://zenit.z.express/ko/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

Recherchez, prévisualisez et copiez les icônes publiques de zenit, et voyez comment constantes statiques, registry dynamique et couche sémantique se répartissent le travail.

## Deux points d’entrée

Les builds publiques embarquent Lucide (`lucide-static` v1.31.0). Le catalogue complet du provider est `ui.icons`, avec **2,026** noms : 2,025 SVG upstream plus l’alias de compatibilité `hand-pointing` (identique octet pour octet au `pointer.svg` upstream). `ui.system_icons` propose 45 rôles sémantiques indépendants du provider ; les composants de zenit ne dépendent que de ceux-ci, si bien qu’aucun nom de fournisseur ne fuit dans le contrat public des composants.

| Point d’entrée | À utiliser pour |
| --- | --- |
| `ui.system_icons` | 45 rôles sémantiques stables (close, search, alert, pointer…) ; pour le code réutilisable de framework / paquet qui doit compiler avec n’importe quel provider |
| `ui.icons` | 2,026 noms Lucide ; pour l’UI produit et la configuration dynamique |
| `ui.assets.common` | 17 icônes héritées de compatibilité ; déconseillées pour le nouveau code |

ICON PATH

Rôle sémantique → mapping du provider → Asset → chemin de rendu de l’icône. Changer de provider ne remplace que le module de mapping.

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

La story des icônes sémantiques dans le vrai zenit Storybook : un curseur virtuel parcourt rôles, tailles et teintes ; le catalogue complet du provider se trouve dans la liste web ci-dessous. [/components/icons](https://zenit.z.express/fr/components/icons)

## Les 2,026 icônes

Tapez pour filtrer instantanément ; les icônes se chargent par 180 afin que la page ne crée jamais deux mille nœuds DOM d’un coup. Cliquez sur une icône pour obtenir un appel `ui.iconTint` prêt à coller ; les noms qui doivent être échappés (comme `ui.icons.@"type"`) suivent les règles du générateur.

180 / 2,026

## Rendu et teinte

Au build, `gen-icons` transforme chaque icône en géométrie aplatie (chaque Asset porte un `icon_id` et des `reps` par taille). À l’exécution, `ui.iconTint` choisit la rep la plus proche de la taille logique et l’écrit dans le nœud — aucun moteur SVG ne tourne dans la fenêtre ; seul un Asset sans géométrie pré-aplatie se rabat sur la rastérisation `svgTint`. Quand largeur / hauteur ne sont pas des pixels fixes, la taille par défaut de l’Asset s’applique (24 pour Lucide).

`ui.iconTint` est le meilleur choix pour des couleurs qui suivent le thème ; un même Asset se réutilise à toute taille et en toute couleur. `ui.icon` ne prend pas de teinte et dessine en blanc : sur fond clair, préférez `iconTint`. Utilisez `ui.iconTintStyled` quand vous avez besoin de champs BoxStyle comme l’opacité. Pour recolorer une icône déjà montée (hover, état sélectionné), appelez `node.setTint(color)` : il gère à la fois le stockage de la table d’icônes et le stockage d’image du repli `svgTint`, et renvoie false si le nœud n’a ni l’un ni l’autre.

`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});
}
```

## Le contrat des icônes sémantiques

Le code des composants devrait écrire `ui.system_icons.close` plutôt que se lier au nom d’un fournisseur. Le profil Lucide mappe les 45 rôles vers des Assets concrets dans `src/ui/system_icons_lucide.zig` ; changer de provider avec `-Dicon-set` laisse l’API des composants inchangée.

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

Rôles dont le nom Lucide diffère :

| ui.system\_icons | Nom source 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";
```

## Noms, mises à jour et licence

-   **Deux graphies.** Les recherches dans le registry utilisent le nom source Lucide en kebab-case (`ui.icons.get("circle-alert")`) ; les constantes Zig remplacent les tirets par des underscores (`ui.icons.circle_alert`).
    
-   **Échappement automatique.** Les constantes qui entrent en collision avec des mots-clés Zig ou des noms de types primitifs (y compris `iN` / `uN`), ou qui commencent par un chiffre, sont échappées par le générateur — par exemple `ui.icons.@"type"` ; le `get` dynamique n’est pas concerné.
    
-   **Énumérable.** `ui.icons.all` est un tableau d’entrées `{ name, asset }` trié par nom ; `get` y effectue une recherche dichotomique.
    
-   **Identiques à l’upstream.** Les fichiers SVG sont identiques octet pour octet à l’upstream, pour des mises à jour et des audits de licence propres ; supprimez les anciens fichiers avant de copier afin que les icônes renommées ne subsistent pas.
    
-   **Licence distincte.** Lucide est sous licence ISC (`src/ui/icons_oss/LICENSE`) et n’est pas couvert par la licence GPL-3.0-only à la racine de zenit.
    

```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
> 
> **Les boutons icône seule ont quand même besoin de mots.** Un nom d’icône n’est pas un libellé lisible par un humain. Le `.label` d’un Button est à la fois son texte visible et son nom accessible ; pour un Button icône seule sans texte, définissez `node.behavior.interaction.a11y.label` après le montage afin que le visuel, la zone de hit et l’action d’assistance désignent la même opération.