---
title: "Iconos"
description: "Un conjunto de iconos por sistema de diseño, un peso y una regla: con contorno cuando no está seleccionado, con relleno cuando lo está."
url: "https://tanrei.chnotchy.com/es/foundations/icons/"
last_updated: 2026-10-26T22:31:27.000Z
---
# Iconos
> Un conjunto de iconos por sistema de diseño, un peso y una regla: con contorno cuando no está seleccionado, con relleno cuando lo está.
Los iconos predeterminados de Tanrei son [Material Symbols](https://fonts.google.com/icons), **Rounded**, con **peso 300**. Igual que los tipos de letra del texto, la fuente se referencia por su nombre y no se incluye: la carga el producto.
La manera de dibujar un icono es un pequeño grupo de tokens. La caja del icono tiene tres tamaños, `sys.icon.small`, `medium` y `large` (16, 20 y 24px de forma predeterminada), y el tamaño óptico de la fuente sigue a la caja.
- **`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.
Generado a partir de `tokens/ref/typeface.tokens.json`, `tokens/sys/measure.tokens.json`
## La regla del relleno
**Sin seleccionar, con contorno. Seleccionado, con relleno. Siempre.** Un elemento de navegación, una pestaña, un conmutador, un chip, un favorito: el icono sigue siendo el mismo glifo y solo su relleno cambia con el estado. Los iconos con relleno y con contorno nunca se mezclan para decorar ni se eligen a mano: en la web, el relleno sigue el estado del control en el que se encuentra el icono.
```js
import '@tanrei/web/icons.css';
```
```html
```
`.tanrei-icon` lee `aria-pressed`, `aria-selected`, `aria-checked` y `aria-current` en cualquier ancestro (en un control de Tanrei, que los traslada a `data-aria-*`, lee `data-aria-pressed`, `data-aria-selected`, `data-aria-checked` y `data-aria-current`), o `data-selected` en el icono o en un ancestro (`data-selected="false"` excluye un icono concreto). Dale a un icono `aria-hidden="true"` cuando el texto que tiene al lado dice lo mismo, y dale al control un nombre accesible cuando no es así.
El nombre también puede ir en `data-icon`, con el elemento vacío:
```html
```
El glifo es el mismo, pero su nombre deja de ser texto de la página: no aparece en `textContent` ni en `innerText`, ni en lo que se copia, ni en el nombre accesible del control que lo contiene. Úsalo allí donde el nombre se leería como texto, como una fila de un menú o de una lista, una celda de una tabla o un texto que compara una prueba. El tamaño, la selección y el reflejo en los diseños de derecha a izquierda funcionan igual que con el nombre escrito como texto. Mantén `aria-hidden="true"` cuando el texto de al lado ya dice lo mismo: Firefox anterior a la versión 128 sigue incluyendo el nombre en el nombre accesible.
En las plataformas nativas, los mismos valores llegan con el sistema de diseño (`system.icon`), junto con una pequeña utilidad que convierte _seleccionado_ y un tamaño en lo que necesita la fuente. Tanrei todavía no incluye un componente de icono.
## Un conjunto de iconos por sistema de diseño
El conjunto de iconos pertenece al sistema de diseño, así que una [capa](https://tanrei.chnotchy.com/es/foundations/design-systems/) puede cambiarlo. Esto es lo que resuelven los sistemas incluidos:
| Sistema de diseño | `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 |
Generado a partir de `tokens/systems/*.system.json`, `design/tokens//tanrei.light.tokens.json`
Una fuente de iconos distingue un icono seleccionado de uno sin seleccionar de una de dos maneras, y los tokens cubren ambas. Un icono seleccionado toma siempre `family.selected` **y** `fill.selected`; cuál de los dos cambia de verdad lo que se dibuja depende del conjunto.
### Una familia variable
Una fuente de iconos variable, como Material Symbols, es una sola familia con un eje `FILL`. De forma predeterminada, los dos tokens de familia apuntan a `ref.typeface.icon`, así que reorientar ese único token cambia el conjunto, y `fill.unselected` / `fill.selected` distinguen los estados. Esto es todo lo que escribe `m3-like`:
```json
"tokens": {
"tanrei.ref.typeface.icon": { "$value": ["Material Symbols Outlined"], "reason": "Material Design 3 dibuja Material Symbols en el estilo Outlined." },
"tanrei.sys.icon.weight": { "$value": 400, "reason": "El peso predeterminado de Material Symbols en Material Design 3." }
}
```
### Dos familias estáticas
Una fuente de iconos estática no tiene ejes. Distribuye los dibujos con contorno y con relleno como dos familias separadas, así que la capa nombra una para cada estado:
```json
"tokens": {
"tanrei.sys.icon.family.unselected": { "$value": ["Material Icons Outlined"], "reason": "Acme usa el conjunto estático Material Icons: con contorno cuando no está seleccionado." },
"tanrei.sys.icon.family.selected": { "$value": ["Material Icons"], "reason": "Acme usa el conjunto estático Material Icons: con relleno cuando está seleccionado." },
"tanrei.sys.icon.weight": { "$value": 400, "reason": "Una fuente de iconos estática tiene un solo peso; Material Icons está dibujado a 400." }
}
```
Los tokens de relleno y de peso se quedan como están. Una fuente estática ignora los ejes, así que no hacen ningún daño, y un componente no necesita saber qué tipo de conjunto está activo. Esta capa es el fixture de pruebas del propio repositorio (`packages/tokens-build/test/fixtures/acme.system.json`).
### Los nombres de los iconos son asunto del producto
Tanrei decide cómo se dibuja un icono, no qué iconos existen. Cada conjunto nombra sus glifos de forma distinta, y a un conjunto le puede faltar un glifo que otro sí tiene. Un producto que cambia de conjunto de iconos comprueba los nombres que usa. Un conjunto de símbolos que no es una fuente, como SF Symbols, no se puede nombrar con un token de familia; eso está anotado en el registro de lagunas de imitación como `platform-symbol-sets`.
### React Native
El `` de React Native no puede definir los ejes de variación de una fuente, así que con una fuente de iconos variable `FILL` nunca llega al glifo, y un icono se ve igual en los dos estados. Para mantener allí la regla, usa dos familias estáticas como se indica arriba, o dibuja los iconos como SVG.
Las utilidades de iconos de los cuatro paquetes nativos se están pasando ahora al modelo de una familia por estado; hasta que el README de un paquete lo describa, cuenta con que ese paquete lea una sola familia.