# Iconografía

> Cuándo y cómo usar Solar Icons: familias, tamaños, color, accesibilidad y catálogo.

Categoría: Base · Solar v0.8.0

Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html).

## Guía: Familias

Solar Icons trae seis variantes por ícono. Solar usa cuatro, repartidas en dos familias según el lugar donde van.

    Íconos de interfaz
Acompañan una acción o un dato

    Botones, menús, listas, alertas, badges y controles. Van junto a un texto, del mismo color y tamaño que él. De 12 a 24 px.

    Bold

Outline

    Hasta 16 px solo Bold. Desde 20 px puedes elegir Bold u Outline, pero usa una sola por pantalla.
Si usas Outline, el ítem activo (la pestaña o el enlace de navegación donde estás) va en Bold. Los íconos de estado de Alertas y Modal & Toast, los de los badges y el check de «incluido» en una tabla van siempre en Bold.

Por qué: Bold es la única variante que mantiene la silueta nítida en tamaños chicos.

    Íconos de contenido
Ilustran una idea

    Cards, banners, estados vacíos y secciones de beneficios. Se ven solos y a mayor tamaño: 32 px o más. Aquí valen las cuatro variantes.

    Bold duotone

Line duotone

Bold

Outline

    Los duotone no se usan junto a texto ni en tamaños chicos (listas, botones).

Por qué: Su segunda capa, al 50 %, se pierde.

Linear y Broken no se usan en Solar. No las pidas en los componentes. Linear existe y sirve para editar el ícono en Figma, Illustrator o Adobe XD.

Por qué: Linear se parece a Outline, pero su trazo es editable, por eso sirve en programas vectoriales. Broken se descartó.

## Guía: Tamaños

Una escala fija: elige el tamaño más cercano de la tabla, sin escalar a tamaños intermedios.

Por qué: Los íconos no llevan relleno propio; el espacio lo da el contenedor.

Tamaño | Muestra | Familia | Variante | Uso

12 px |  | Interfaz | Bold | Badge pequeño, chevrón, validación
14 px |  | Interfaz | Bold | Badge mediano
16 px |  | Interfaz | Bold | Texto de 14 px, botón mediano, lista
20 px |  | Interfaz | Bold u Outline | Botón grande, menú, sidebar
24 px |  | Interfaz | Bold u Outline | Solo ícono, barra de navegación
32 px |  | Contenido | Las cuatro | Card, ítem de beneficios
48 px |  | Contenido | Las cuatro | Banner, estado vacío, encabezado de sección

Área para pulsar. Un ícono que se pulsa necesita al menos 24 × 24 px. Un ícono de 24 px dentro de un botón de 40 px (w-10 h-10) cumple. En pantallas táctiles apunta a 44 px.

Por qué: Criterio 2.5.8 de WCAG 2.2 (tamaño mínimo del objetivo).

## Guía: Cuándo usar un ícono

El ícono apoya al texto y no lo reemplaza.

Por qué: Ayuda a escanear, reforzar un estado o ahorrar espacio, pero casi no hay íconos que todos entiendan sin texto: solo casa, imprimir y lupa tienen reconocimiento amplio.

  Úsalos cuando

- El significado es conocido (buscar, cerrar, menú, editar).
- Hay varios datos o ítems y el ícono ayuda a encontrarlos.
- Refuerza un estado que ya dice el texto.
- Necesitas ahorrar espacio o agrandar el área táctil.

  Evítalos cuando

- Solo agregan ruido: un texto basta.
- No hay un ícono claro para el concepto, o no lo hay para todos los ítems de una lista.
- Es un ícono nuevo o inventado.
- Serían lo único que comunica algo, o dependen de un tooltip.

Siete usos

Cada uso cambia la regla de etiqueta y de accesibilidad.

Uso | Ejemplo | Etiqueta | Accesibilidad | Familia

Acción con etiqueta | Botón, ítem de menú | Texto visible | Decorativo | Interfaz
Acción sola | Botón solo ícono | Nombre accesible y tooltip | Nombre en el botón | Interfaz, 24 px
Concepto o dato | Teléfono, correo, dirección | El propio dato | Decorativo | Interfaz
Estado | Éxito, advertencia, error, info | Texto siempre | Decorativo, con texto | Interfaz
Navegación | Menú, sidebar, tabs | Etiqueta visible | Decorativo | Interfaz
Control interno | Chevrón, check, cerrar un badge | Ninguna | Decorativo (con nombre si se pulsa) | Interfaz, 12 a 16 px
Destacado | Card, banner, estado vacío | Titular propio | Decorativo | Contenido

## Guía: Íconos de interfaz

Las reglas de cada ejemplo de abajo.

  Ícono con texto
Va a la izquierda, mide 16 px junto a un texto de 14 px, hereda el color del texto (currentColor) y es decorativo (aria-hidden="true"). Si va a la derecha, es una flecha o un chevrón que indica dirección. Con Outline a 20 px, el texto es de 16 px. No mezcles las dos en la misma pantalla.

  Solo ícono
Solo para acciones que todos conocen. Siempre lleva aria-label, tooltip y un área de 40 px o más.

Por qué: El tooltip no reemplaza al texto en pantallas táctiles. Un marcador, un reloj o una estrella solos no se entienden: escribe el texto (“Guardar para después”, “Ver historial”, “Marcar como favorito”).

  Dato con ícono
Un ícono antes de un dato (teléfono, correo, dirección, horario). Es decorativo. Úsalo en listas de dos o más datos. Va en 20 px, con el color de acento.

Por qué: Ayuda a encontrar el dato cuando hay varios. El dato se entiende solo, así que en uno aislado el ícono solo agrega ruido.

  Ítem de navegación
El ítem activo se marca con el ícono en Bold y el color de acento; los demás van en Outline.

Por qué: Así se distingue sin depender solo del color.

## Ícono con texto

```html
<div class="space-y-6">
  <div class="flex flex-wrap items-center gap-3">
    <button type="button" class="inline-flex items-center gap-2 h-10 px-4 text-sm rounded-ccs bg-ccs-blue text-white font-medium hover:bg-ccs-blue-mid transition shadow-ccs-sm dark:bg-ccs-blue-mid dark:hover:bg-ccs-blue focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:file-download-bold" class="shrink-0 text-[16px]" aria-hidden="true"></iconify-icon>Descargar informe</button>
    <button type="button" class="inline-flex items-center gap-2 h-10 px-4 text-sm rounded-ccs border border-ccs-blue text-ccs-blue font-medium hover:bg-ccs-blue hover:text-white transition dark:border-ccs-dark-text dark:text-ccs-dark-text dark:hover:bg-ccs-blue-mid dark:hover:border-ccs-blue-mid dark:hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:add-circle-bold" class="shrink-0 text-[16px]" aria-hidden="true"></iconify-icon>Nuevo socio</button>
    <button type="button" class="inline-flex items-center gap-2 h-10 px-4 text-sm rounded-ccs border border-ccs-blue text-ccs-blue font-medium hover:bg-ccs-blue hover:text-white transition dark:border-ccs-dark-text dark:text-ccs-dark-text dark:hover:bg-ccs-blue-mid dark:hover:border-ccs-blue-mid dark:hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100">Siguiente<iconify-icon icon="solar:arrow-right-bold" class="shrink-0 text-[16px]" aria-hidden="true"></iconify-icon></button>
  </div>
  <div class="grid gap-6 sm:grid-cols-2">
    <ul class="space-y-2 text-sm font-medium text-ccs-ink dark:text-ccs-dark-text"><li class="flex items-center gap-2"><iconify-icon icon="solar:magnifier-bold" class="shrink-0 text-[16px]" aria-hidden="true"></iconify-icon>Buscar socio</li><li class="flex items-center gap-2"><iconify-icon icon="solar:bell-bold" class="shrink-0 text-[16px]" aria-hidden="true"></iconify-icon>Notificaciones</li><li class="flex items-center gap-2"><iconify-icon icon="solar:lock-bold" class="shrink-0 text-[16px]" aria-hidden="true"></iconify-icon>Acceso socios</li></ul>
    <ul class="space-y-2 text-base font-medium text-ccs-ink dark:text-ccs-dark-text"><li class="flex items-center gap-2"><iconify-icon icon="solar:magnifier-outline" class="shrink-0 text-[20px]" aria-hidden="true"></iconify-icon>Buscar socio</li><li class="flex items-center gap-2"><iconify-icon icon="solar:bell-outline" class="shrink-0 text-[20px]" aria-hidden="true"></iconify-icon>Notificaciones</li><li class="flex items-center gap-2"><iconify-icon icon="solar:lock-outline" class="shrink-0 text-[20px]" aria-hidden="true"></iconify-icon>Acceso socios</li></ul>
  </div>
</div>
```

## Solo ícono

```html
<div class="flex flex-wrap items-start gap-4"><div class="flex flex-col items-center gap-2"><button type="button" aria-label="Buscar" class="w-10 h-10 rounded-lg border border-ccs-line-strong bg-white text-ccs-ink grid place-items-center hover:border-ccs-blue hover:text-ccs-blue transition dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-accent dark:hover:text-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:magnifier-bold" class="shrink-0 text-[20px]" aria-hidden="true"></iconify-icon></button><span class="mono text-xs text-ccs-slate dark:text-ccs-dark-text-2">Buscar</span></div><div class="flex flex-col items-center gap-2"><button type="button" aria-label="Cerrar" class="w-10 h-10 rounded-lg border border-ccs-line-strong bg-white text-ccs-ink grid place-items-center hover:border-ccs-blue hover:text-ccs-blue transition dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-accent dark:hover:text-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:close-circle-bold" class="shrink-0 text-[20px]" aria-hidden="true"></iconify-icon></button><span class="mono text-xs text-ccs-slate dark:text-ccs-dark-text-2">Cerrar</span></div><div class="flex flex-col items-center gap-2"><button type="button" aria-label="Menú" class="w-10 h-10 rounded-lg border border-ccs-line-strong bg-white text-ccs-ink grid place-items-center hover:border-ccs-blue hover:text-ccs-blue transition dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-accent dark:hover:text-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:hamburger-menu-bold" class="shrink-0 text-[20px]" aria-hidden="true"></iconify-icon></button><span class="mono text-xs text-ccs-slate dark:text-ccs-dark-text-2">Menú</span></div><div class="flex flex-col items-center gap-2"><button type="button" aria-label="Editar" class="w-10 h-10 rounded-lg border border-ccs-line-strong bg-white text-ccs-ink grid place-items-center hover:border-ccs-blue hover:text-ccs-blue transition dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-accent dark:hover:text-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:pen-bold" class="shrink-0 text-[20px]" aria-hidden="true"></iconify-icon></button><span class="mono text-xs text-ccs-slate dark:text-ccs-dark-text-2">Editar</span></div><div class="flex flex-col items-center gap-2"><button type="button" aria-label="Eliminar" class="w-10 h-10 rounded-lg border border-ccs-line-strong bg-white text-ccs-ink grid place-items-center hover:border-ccs-blue hover:text-ccs-blue transition dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-accent dark:hover:text-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:trash-bin-trash-bold" class="shrink-0 text-[20px]" aria-hidden="true"></iconify-icon></button><span class="mono text-xs text-ccs-slate dark:text-ccs-dark-text-2">Eliminar</span></div></div>
```

## Dato con ícono

```html
<ul class="grid gap-5 sm:grid-cols-2"><li class="flex items-start gap-3"><iconify-icon icon="solar:phone-bold" class="shrink-0 text-[20px] mt-0.5 text-ccs-blue dark:text-ccs-dark-accent" aria-hidden="true"></iconify-icon><div><div class="text-sm font-medium text-ccs-ink dark:text-ccs-dark-text">+56 2 2777 7777</div><div class="text-sm text-ccs-slate dark:text-ccs-dark-text-2">Atención a socios</div></div></li><li class="flex items-start gap-3"><iconify-icon icon="solar:letter-bold" class="shrink-0 text-[20px] mt-0.5 text-ccs-blue dark:text-ccs-dark-accent" aria-hidden="true"></iconify-icon><div><div class="text-sm font-medium text-ccs-ink dark:text-ccs-dark-text">contacto@ejemplo.cl</div><div class="text-sm text-ccs-slate dark:text-ccs-dark-text-2">Respuesta en 24 horas</div></div></li><li class="flex items-start gap-3"><iconify-icon icon="solar:map-point-bold" class="shrink-0 text-[20px] mt-0.5 text-ccs-blue dark:text-ccs-dark-accent" aria-hidden="true"></iconify-icon><div><div class="text-sm font-medium text-ccs-ink dark:text-ccs-dark-text">Monjitas 392, Santiago</div><div class="text-sm text-ccs-slate dark:text-ccs-dark-text-2">Metro Santa Lucía</div></div></li><li class="flex items-start gap-3"><iconify-icon icon="solar:clock-circle-bold" class="shrink-0 text-[20px] mt-0.5 text-ccs-blue dark:text-ccs-dark-accent" aria-hidden="true"></iconify-icon><div><div class="text-sm font-medium text-ccs-ink dark:text-ccs-dark-text">Lunes a viernes</div><div class="text-sm text-ccs-slate dark:text-ccs-dark-text-2">9:00 a 18:00</div></div></li></ul>
```

## Ítem de navegación

```html
<nav aria-label="Menú de ejemplo" class="max-w-xs"><ul class="space-y-1"><li><a href="#" aria-current="page" class="flex items-center gap-3 h-10 px-3 rounded-ccs bg-ccs-bg text-sm font-semibold text-ccs-blue dark:bg-ccs-dark-bg dark:text-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg transition active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:home-2-bold" class="shrink-0 text-[20px]" aria-hidden="true"></iconify-icon>Inicio</a></li><li><a href="#" class="flex items-center gap-3 h-10 px-3 rounded-ccs text-sm font-medium text-ccs-ink dark:text-ccs-dark-text hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg transition active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:folder-outline" class="shrink-0 text-[20px]" aria-hidden="true"></iconify-icon>Documentos</a></li><li><a href="#" class="flex items-center gap-3 h-10 px-3 rounded-ccs text-sm font-medium text-ccs-ink dark:text-ccs-dark-text hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg transition active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:bell-outline" class="shrink-0 text-[20px]" aria-hidden="true"></iconify-icon>Avisos</a></li><li><a href="#" class="flex items-center gap-3 h-10 px-3 rounded-ccs text-sm font-medium text-ccs-ink dark:text-ccs-dark-text hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg transition active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:settings-outline" class="shrink-0 text-[20px]" aria-hidden="true"></iconify-icon>Ajustes</a></li></ul></nav>
```

## Guía: Íconos de contenido

Se usan para destacar una idea en cards, banners, estados vacíos y secciones de beneficios. Van solos o sobre un titular, a 32 px o más.

- Las cuatro variantes son válidas: Bold duotone, Line duotone, Bold y Outline. Elige según el carácter de la pieza y mantén una por conjunto.

- Color de acento (text-ccs-blue) o de estado. En duotone, la segunda capa queda al 50 % del color.

- Line duotone luce mejor con colores claros o de acento vivo; en tonos oscuros su segunda capa casi no se nota.

- Nunca junto a un texto corrido ni en tamaños de interfaz.

- Decorativos (aria-hidden="true"): el titular que los acompaña da el significado.

## Mosaico de íconos

```html
<div class="grid grid-cols-2 gap-6 sm:grid-cols-4"><div class="flex flex-col items-center gap-2 text-center"><div class="grid h-16 w-16 place-items-center rounded-ccs bg-ccs-bg dark:bg-ccs-dark-bg text-ccs-blue dark:text-ccs-dark-accent"><iconify-icon icon="solar:shield-check-bold-duotone" class="shrink-0 text-[32px]" aria-hidden="true"></iconify-icon></div><span class="text-sm font-medium text-ccs-ink dark:text-ccs-dark-text">Bold duotone</span></div><div class="flex flex-col items-center gap-2 text-center"><div class="grid h-16 w-16 place-items-center rounded-ccs bg-ccs-bg dark:bg-ccs-dark-bg text-ccs-blue dark:text-ccs-dark-accent"><iconify-icon icon="solar:shield-check-line-duotone" class="shrink-0 text-[32px]" aria-hidden="true"></iconify-icon></div><span class="text-sm font-medium text-ccs-ink dark:text-ccs-dark-text">Line duotone</span></div><div class="flex flex-col items-center gap-2 text-center"><div class="grid h-16 w-16 place-items-center rounded-ccs bg-ccs-bg dark:bg-ccs-dark-bg text-ccs-blue dark:text-ccs-dark-accent"><iconify-icon icon="solar:shield-check-bold" class="shrink-0 text-[32px]" aria-hidden="true"></iconify-icon></div><span class="text-sm font-medium text-ccs-ink dark:text-ccs-dark-text">Bold</span></div><div class="flex flex-col items-center gap-2 text-center"><div class="grid h-16 w-16 place-items-center rounded-ccs bg-ccs-bg dark:bg-ccs-dark-bg text-ccs-blue dark:text-ccs-dark-accent"><iconify-icon icon="solar:shield-check-outline" class="shrink-0 text-[32px]" aria-hidden="true"></iconify-icon></div><span class="text-sm font-medium text-ccs-ink dark:text-ccs-dark-text">Outline</span></div></div>
```

## En una card

```html
<div class="grid gap-4 md:grid-cols-3"><div class="rounded-ccs border border-ccs-line bg-white p-6 dark:border-ccs-dark-line dark:bg-ccs-dark-surface"><div class="grid h-12 w-12 place-items-center rounded-ccs bg-ccs-bg dark:bg-ccs-dark-bg text-ccs-blue dark:text-ccs-dark-accent"><iconify-icon icon="solar:users-group-rounded-bold-duotone" class="shrink-0 text-[32px]" aria-hidden="true"></iconify-icon></div><h3 class="mt-4 text-base font-semibold text-ccs-ink dark:text-ccs-dark-text">Red de socios</h3><p class="mt-1 text-sm text-ccs-slate leading-relaxed dark:text-ccs-dark-text-2">Conecta con empresas de todo el país.</p></div><div class="rounded-ccs border border-ccs-line bg-white p-6 dark:border-ccs-dark-line dark:bg-ccs-dark-surface"><div class="grid h-12 w-12 place-items-center rounded-ccs bg-ccs-bg dark:bg-ccs-dark-bg text-ccs-blue dark:text-ccs-dark-accent"><iconify-icon icon="solar:document-text-bold-duotone" class="shrink-0 text-[32px]" aria-hidden="true"></iconify-icon></div><h3 class="mt-4 text-base font-semibold text-ccs-ink dark:text-ccs-dark-text">Documentos</h3><p class="mt-1 text-sm text-ccs-slate leading-relaxed dark:text-ccs-dark-text-2">Certificados y trámites en un solo lugar.</p></div><div class="rounded-ccs border border-ccs-line bg-white p-6 dark:border-ccs-dark-line dark:bg-ccs-dark-surface"><div class="grid h-12 w-12 place-items-center rounded-ccs bg-ccs-bg dark:bg-ccs-dark-bg text-ccs-blue dark:text-ccs-dark-accent"><iconify-icon icon="solar:calendar-bold-duotone" class="shrink-0 text-[32px]" aria-hidden="true"></iconify-icon></div><h3 class="mt-4 text-base font-semibold text-ccs-ink dark:text-ccs-dark-text">Eventos</h3><p class="mt-1 text-sm text-ccs-slate leading-relaxed dark:text-ccs-dark-text-2">Actividades y capacitaciones del año.</p></div></div>
```

## Guía: Ícono sobre degradado

Para destacar un ícono de contenido (en pasos, cards o listas de beneficios), ponlo sobre el degradado Ícono: bg-ccs-icon en claro y dark:bg-ccs-icon-dark en oscuro. El ícono va siempre blanco (text-white), centrado y de la mitad del tamaño del contenedor.

Contenedor | Ícono | Variantes | Esquinas

40 px | 20 px | Bold, Outline | rounded-lg
48 px | 24 px | Bold, Outline | rounded-lg
64 px | 32 px | Bold duotone, Line duotone, Bold, Outline | rounded-ccs

Los duotone solo desde 32 px, como en cualquier ícono de contenido. El degradado no cambia el color del ícono entre modos; solo cambia el degradado.

Por qué: Con el ícono en la mitad central del contenedor, el blanco da Lc 78 o más en claro (Lc 92 en oscuro). El degradado termina en un verde brillante abajo, donde el blanco baja a Lc 44: por eso el ícono no se acerca al borde inferior.

## Ícono sobre degradado

```html
<div class="flex flex-wrap items-center gap-4"><div class="grid h-10 w-10 shrink-0 place-items-center rounded-lg bg-ccs-icon dark:bg-ccs-icon-dark"><iconify-icon icon="solar:global-bold" class="shrink-0 text-[20px] text-white" aria-hidden="true"></iconify-icon></div><div class="grid h-12 w-12 shrink-0 place-items-center rounded-lg bg-ccs-icon dark:bg-ccs-icon-dark"><iconify-icon icon="solar:document-text-bold" class="shrink-0 text-[24px] text-white" aria-hidden="true"></iconify-icon></div><div class="grid h-16 w-16 shrink-0 place-items-center rounded-ccs bg-ccs-icon dark:bg-ccs-icon-dark"><iconify-icon icon="solar:shield-check-bold" class="shrink-0 text-[32px] text-white" aria-hidden="true"></iconify-icon></div></div>
```

## Ícono duotone sobre degradado

```html
<div class="flex flex-wrap items-center gap-4"><div class="grid h-16 w-16 shrink-0 place-items-center rounded-ccs bg-ccs-icon dark:bg-ccs-icon-dark"><iconify-icon icon="solar:shield-check-bold-duotone" class="shrink-0 text-[32px] text-white" aria-hidden="true"></iconify-icon></div><div class="grid h-16 w-16 shrink-0 place-items-center rounded-ccs bg-ccs-icon dark:bg-ccs-icon-dark"><iconify-icon icon="solar:shield-check-line-duotone" class="shrink-0 text-[32px] text-white" aria-hidden="true"></iconify-icon></div><div class="grid h-16 w-16 shrink-0 place-items-center rounded-ccs bg-ccs-icon dark:bg-ccs-icon-dark"><iconify-icon icon="solar:shield-check-bold" class="shrink-0 text-[32px] text-white" aria-hidden="true"></iconify-icon></div><div class="grid h-16 w-16 shrink-0 place-items-center rounded-ccs bg-ccs-icon dark:bg-ccs-icon-dark"><iconify-icon icon="solar:shield-check-outline" class="shrink-0 text-[32px] text-white" aria-hidden="true"></iconify-icon></div></div>
```

## Guía: Estados

Cada estado tiene su ícono y su color de token. Siempre va con un texto que dice el estado.

Por qué: Quien no distingue colores, o ve la pantalla en gris, no puede saber el estado solo por el color. Por eso cada estado tiene además una forma de ícono distinta y un texto que lo nombra.

Muestra | Ícono | Token de color | Estado

 | solar:check-circle-bold | text-ccs-success dark:text-ccs-dark-success | Éxito
 | solar:danger-triangle-bold | text-ccs-warning dark:text-ccs-dark-warning | Advertencia
 | solar:close-circle-bold | text-ccs-error dark:text-ccs-dark-error | Error
 | solar:info-circle-bold | text-ccs-blue dark:text-ccs-dark-accent | Información

## Guía: Color en claro y oscuro

El modo oscuro solo cambia el color: la variante, el tamaño y el trazo son los mismos. Cada ícono usa currentColor y un par de tokens text-ccs-* y dark:text-ccs-dark-*.

Rol | Modo claro | Contraste | Modo oscuro | Contraste

Texto principal | text-ccs-ink | Lc 103,7 | dark:text-ccs-dark-text | Lc 94,0
Texto secundario | text-ccs-slate | Lc 86,3 | dark:text-ccs-dark-text-2 | Lc 77,5
Acento | text-ccs-blue | Lc 90,9 | dark:text-ccs-dark-accent | Lc 75,0
Éxito | text-ccs-success | Lc 64,7 | dark:text-ccs-dark-success | Lc 76,8
Advertencia | text-ccs-warning | Lc 74,0 | dark:text-ccs-dark-warning | Lc 76,4
Error | text-ccs-error | Lc 70,5 | dark:text-ccs-dark-error | Lc 76,0

Contraste medido con APCA (Lc). Los íconos de línea piden Lc 45 como mínimo; los rellenos, Lc 30. Todos los pares superan ese mínimo.

Qué evitar: El azul de acento sobre fondo claro baja a Lc 37 si se usa el tono suave (ccs-blue-light): no lo uses para íconos que informan. Evita rellenos oscuros de 27 a 28 en modo oscuro: el ícono se funde con el fondo.
En modo oscuro, el blanco puro sobre fondo muy oscuro tiende a "brillar" y se ve más grueso. Usa los tokens oscuros, que están pensados para eso.

## Guía: Accesibilidad

Tres casos cubren casi todo.

Con texto visible
El ícono es decorativo.
<button type="button" class="..."><iconify-icon icon="solar:file-download-bold" aria-hidden="true"></iconify-icon>Descargar informe</button>

Sin texto
El botón lleva el nombre.
<button type="button" aria-label="Buscar" title="Buscar" class="w-10 h-10 ..."><iconify-icon icon="solar:magnifier-bold" aria-hidden="true"></iconify-icon></button>

Estado
El texto dice el estado; el color y el ícono lo refuerzan.
<span class="text-ccs-success dark:text-ccs-dark-success"><iconify-icon icon="solar:check-circle-bold" aria-hidden="true"></iconify-icon></span> Pago recibido

Criterios WCAG que respalda:

- Un ícono que informa no depende solo del color (WCAG 1.4.1): la forma y el texto también lo dicen.

- El ícono necesita contraste de 3:1 con su fondo (WCAG 1.4.11).

- Un ícono que se pulsa tiene al menos 24 × 24 px de área (WCAG 2.2, 2.5.8); en Solar, 40 px.

- Una imagen o ícono con significado propio necesita alternativa de texto (WCAG 1.1.1); aquí siempre la da el texto o el aria-label.

## Guía: Catálogo

Los íconos más usados, en Bold. Pasa el cursor o el foco por un ícono para ver su nombre, y haz clic para copiarlo. El nombre se escribe solar:nombre-variante (por ejemplo solar:bell-outline). Para buscar otros, usa el buscador oficial en solar-icons.vercel.app o la lista en icon-sets.iconify.design/solar.

Acciones
solar:magnifier-boldsolar:pen-boldsolar:trash-bin-trash-boldsolar:copy-boldsolar:file-download-boldsolar:upload-boldsolar:share-boldsolar:add-circle-boldsolar:close-circle-boldsolar:check-circle-bold

Navegación
solar:home-2-boldsolar:hamburger-menu-boldsolar:arrow-left-boldsolar:arrow-right-boldsolar:alt-arrow-down-boldsolar:alt-arrow-up-boldsolar:settings-boldsolar:filter-bold

Comunicación
solar:letter-boldsolar:phone-boldsolar:chat-round-dots-boldsolar:bell-boldsolar:map-point-boldsolar:link-bold

Archivos y datos
solar:document-text-boldsolar:folder-boldsolar:calendar-boldsolar:clock-circle-boldsolar:chart-2-boldsolar:database-bold

Personas y cuenta
solar:user-boldsolar:users-group-rounded-boldsolar:user-circle-boldsolar:lock-boldsolar:login-boldsolar:logout-bold

Estado y ayuda
solar:danger-triangle-boldsolar:info-circle-boldsolar:question-circle-boldsolar:shield-check-boldsolar:eye-boldsolar:eye-closed-boldsolar:star-boldsolar:heart-bold

Solar Icons es obra de 480 Design y se publica bajo licencia CC BY 4.0.

## Guía: En producción

Este sitio carga los íconos desde la API de Iconify porque es documentación. En producción van alojados en tu proyecto, igual que Tailwind compilado y las tipografías: iconify-icon.min.js y solar-iconos.js en tu servidor, y el HTML de los componentes queda igual. Los pasos están en Instalación.

## Guía: Si falta un ícono

Si Solar Icons no tiene el ícono que necesitas, usa otra familia que mantenga el mismo grosor de línea, las esquinas redondeadas y el estilo geométrico. Se carga igual, con <iconify-icon icon="familia:nombre">.

solar:bell-bold
solar:bell-outline
ph:bell-bold
ph:bell
mingcute:notification-line
mynaui:bell

Mismo ícono (campana) en cada familia. Compara el grosor y las esquinas antes de elegir.

Familias recomendadas

Familia | Prefijo | Licencia | Notas

Phosphor | ph | MIT | Seis pesos (thin a bold) y duotone; trazo y esquinas redondeadas parecidos. La más completa como respaldo.
Hugeicons | hugeicons | MIT | Catálogo muy amplio; trazo redondeado. Revisa el grosor contra Solar.
MingCute | mingcute | Apache 2.0 | Línea y relleno con esquinas suaves; buena cobertura de íconos de negocio.
Myna UI | mynaui | MIT | Trazo fino y redondeado; sirve para Outline.

Antes de usar un ícono de otra familia: revisa que el grosor y las esquinas calcen con Solar, que la licencia permita uso comercial y que la variante (Bold u Outline) sea la que corresponde. No mezcles dos familias en una misma fila o grupo de íconos.