---
title: "Galería de iconos — Docs de zenit Zig UI"
description: "Busca, previsualiza y copia los iconos públicos de zenit, y descubre cómo se reparten el trabajo las constantes estáticas, el registry dinámico y la capa…"
url: https://zenit.z.express/es/docs/guide/icons
language: es
alternate_en: https://zenit.z.express/docs/guide/icons.md
alternate_zh: https://zenit.z.express/zh/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_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

Busca, previsualiza y copia los iconos públicos de zenit, y descubre cómo se reparten el trabajo las constantes estáticas, el registry dinámico y la capa semántica.

## Dos puntos de entrada

Las builds públicas incluyen Lucide (`lucide-static` v1.31.0). El catálogo completo del provider es `ui.icons`, con **2,026** nombres: 2,025 SVG de upstream más el alias de compatibilidad `hand-pointing` (idéntico byte a byte al `pointer.svg` de upstream). `ui.system_icons` ofrece 45 roles semánticos independientes del provider; los componentes propios de zenit solo dependen de ellos, así que ningún nombre de proveedor se filtra al contrato público de componentes.

| Punto de entrada | Úsalo para |
| --- | --- |
| `ui.system_icons` | 45 roles semánticos estables (close, search, alert, pointer…); para código reutilizable de framework / paquetes que debe compilar con cualquier provider |
| `ui.icons` | 2,026 nombres de Lucide; para la UI del producto y la configuración dinámica |
| `ui.assets.common` | 17 iconos heredados de compatibilidad; no recomendados para código nuevo |

ICON PATH

Rol semántico → mapeo del provider → Asset → ruta de render del icono. Cambiar de provider solo reemplaza el módulo de mapeo.

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

La story de iconos semánticos en el zenit Storybook real: un cursor virtual recorre roles, tamaños y tintes; el catálogo completo del provider está en la lista web de abajo. [/components/icons](https://zenit.z.express/es/components/icons)

## Los 2,026 iconos

Escribe para filtrar al instante; los iconos se cargan de 180 en 180 para que la página nunca cree dos mil nodos DOM de golpe. Haz clic en cualquier icono para obtener una llamada a `ui.iconTint` lista para pegar; los nombres que necesitan escape (como `ui.icons.@"type"`) siguen las reglas del generador.

180 / 2,026

## Renderizado y tinte

En build, `gen-icons` convierte cada icono en geometría aplanada (cada Asset lleva un `icon_id` y `reps` por tamaño). En runtime, `ui.iconTint` elige la rep más cercana al tamaño lógico y la escribe en el nodo: no se ejecuta ningún motor SVG en la ventana; solo un Asset sin geometría preaplanada recurre a la rasterización con `svgTint`. Cuando el ancho / alto no son píxeles fijos, se aplica el tamaño por defecto del Asset (24 en Lucide).

`ui.iconTint` es lo más adecuado para colores que siguen el tema; un mismo Asset se reutiliza con cualquier tamaño y color. `ui.icon` no acepta tinte y dibuja en blanco, así que usa `iconTint` sobre fondos claros. Usa `ui.iconTintStyled` cuando necesites campos de BoxStyle como la opacidad. Para recolorear un icono ya montado (hover, estado seleccionado), llama a `node.setTint(color)`: cubre tanto el almacenamiento de la tabla de iconos como el almacenamiento de imagen del fallback `svgTint`, y devuelve false si el nodo no tiene ninguno.

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

## El contrato de iconos semánticos

El código de componentes debería usar `ui.system_icons.close` en lugar de atarse al nombre de un proveedor. El perfil de Lucide mapea los 45 roles a Assets concretos en `src/ui/system_icons_lucide.zig`; cambiar de provider con `-Dicon-set` no altera la API de los componentes.

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

Roles cuyo nombre en Lucide es distinto:

| ui.system\_icons | Nombre de origen en 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";
```

## Nombres, actualizaciones y licencia

-   **Dos grafías.** Las búsquedas en el registry usan el nombre de origen en kebab-case de Lucide (`ui.icons.get("circle-alert")`); las constantes de Zig cambian los guiones por guiones bajos (`ui.icons.circle_alert`).
    
-   **Escape automático.** Las constantes que coinciden con palabras clave de Zig o nombres de tipos primitivos (incluidos `iN` / `uN`), o que empiezan por un dígito, las escapa el generador — por ejemplo `ui.icons.@"type"`; el `get` dinámico no se ve afectado.
    
-   **Enumerable.** `ui.icons.all` es un array de entradas `{ name, asset }` ordenado por nombre; `get` hace búsqueda binaria sobre él.
    
-   **Idénticos a upstream.** Los archivos SVG son idénticos byte a byte a los de upstream para facilitar actualizaciones y auditorías de licencia; borra los archivos antiguos antes de copiar para que no queden iconos renombrados.
    
-   **Licencia aparte.** Lucide tiene licencia ISC (`src/ui/icons_oss/LICENSE`) y no está cubierto por la licencia GPL-3.0-only de la raíz 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
> 
> **Los botones solo con icono también necesitan palabras.** El nombre de un icono no es una etiqueta legible para las personas. El `.label` de un Button es a la vez su texto visible y su nombre accesible; en un Button solo con icono y sin texto, asigna `node.behavior.interaction.a11y.label` después de montarlo para que el visual, el área de impacto y la acción asistiva apunten a la misma operación.