Iconografía
El sistema usa la librería Solar Icons con adaptaciones propias. Existen 2 estilos primarios (Fill y Outline) más Duotone para casos ilustrativos. Los 335 componentes de icono están disponibles en Figma con la estructura Icon/[Tamaño]/[Estilo]/[Nombre].
335
Componentes en Figma
166
Íconos únicos
3
Estilos (Fill · Outline · Duotone)
24px
Tamaño medium base
Nomenclatura en Figma
Prefijo
Icon
Constante — permite filtrar en Figma
Tamaño
Medium
Medium = 24px · Small = 16px
Estilo
Fill · Outline · Duotone
El estilo visual del icono
Nombre
Home, Bell, User…
Concepto semántico del ícono
Estilos de icono
Fill
ExtraídoÉnfasis máximo — acciones primarias, estado activo, íconos sobre superficies de color.
Cuándo usar
Botones primarios, nav activa, alertas críticas
Outline
ExtraídoUso general — la mayoría de casos. Íconos sobre fondo blanco o neutro.
Cuándo usar
Iconos decorativos, labels, estados inactivos
Duotone
InferidoSolo ilustrativo — onboarding, estados vacíos, coach marks. No usar en UI funcional.
Cuándo usar
Empty states, onboarding, coach marks
Catálogo por categoría
166 íconos únicos organizados por dominio semántico. Cada uno disponible en Fill y Outline.
Navegación
~24 íconosAcciones
~28 íconosUsuarios & Personas
~14 íconosComunicación
~17 íconosFinanzas & Cobranza
~18 íconosUI & Status
~32 íconosDatos & Archivos
~22 íconosMisc
~11 íconosReglas de uso
Usa Outline para la mayoría de contextos sobre fondo blanco o gris
Usa Fill en superficies de color o para indicar estado activo
Mantén un solo estilo por pantalla — no mezcles Fill y Outline en la misma vista
Área táctil mínima de 40×40px aunque el ícono mida 24px (WCAG 2.5.5)
Siempre acompaña el ícono con texto visible o aria-label
No uses Duotone para elementos interactivos — solo ilustrativo
No escales íconos a tamaños no estándar (ej. 18px, 20px, 28px)
No uses íconos sin mínimo de área táctil en pantallas móviles
No añadas íconos de otras librerías sin aprobación del Design Lead
No uses íconos con solo color para comunicar estado (WCAG 1.4.1)
Patrones de accesibilidad
Ícono decorativo (solo visual)
<svg aria-hidden="true" focusable="false">…</svg>Ícono en botón sin texto
<button aria-label="Cerrar"><svg aria-hidden="true">…</svg></button>Ícono con texto visible
<span><svg aria-hidden="true">…</svg> Guardar</span>Ícono de estado semántico
<svg role="img" aria-label="Error"><title>Error</title>…</svg>Implementación
/* Tamaños estándar */
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 24px; height: 24px; } /* default */
/* Hereda color del texto contenedor */
.icon { color: currentColor; fill: currentColor; }
/* Área táctil mínima (WCAG 2.5.5) */
.icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--ds-spacing-size-40); /* 40px */
min-height: var(--ds-spacing-size-40);
}
/* React — Solar Icons (ejemplo) */
import { HomeIcon, BellIcon } from '@solar-icons/react'
// Ícono decorativo
<HomeIcon size={24} iconStyle="outline" aria-hidden />
// Botón con ícono
<button aria-label="Notificaciones" className="icon-button">
<BellIcon size={24} iconStyle="outline" aria-hidden />
</button>