Iconografía

30 iconos

El DS Torre de Control incluye una biblioteca de 30 iconos 3D para enriquecer interfaces, estados vacíos, onboarding y puntos de contacto con el usuario.

Biblioteca de iconos 3D

Iconos renderizados en 3D isométrico con paleta de color vibrante. Se usan para dar personalidad y contexto visual a flujos clave: cotización, gestión de pólizas, canales de atención y estados del sistema.

Moto

Casco

Viaje

Móvil

Teléfono

Llamada

Mensaje

Auriculares

Robocall

Alerta

Alerta 2

Cancelar

Check

Doc. alerta

Sin confirmación

Negativo

Zoom

Dinero

Bolsa

Estufa

Carpeta

Solicitudes

Gráfico

Calendario

Usuario

Medalla

Trofeo

Estrella

Acciones

Mostrando 30 de 30 iconos

Tamaños

Los iconos 3D se usan en tamaños grandes — nunca por debajo de 32px donde el detalle 3D se pierde. El tamaño por defecto es 64px (md).

32px

xs

48px

sm

64px

md

96px

lg

128px

xl

Escala	px	Token	Uso recomendado
xs	32px	`--icon-size-xs`	Indicadores inline, tablas compactas
sm	48px	`--icon-size-sm`	Listas, chips, elementos secundarios
md	64px	`--icon-size-md`	Cards, secciones, CTAs principales
lg	96px	`--icon-size-lg`	Pantallas vacías (empty states)
xl	128px	`--icon-size-xl`	Onboarding, pantallas hero

Preview de tamaños

Selecciona un tamaño para previsualizar todos los iconos en esa escala.

Reglas de uso

✓ Do

Usar a partir de 48px para preservar el detalle 3D.
Usar sobre fondos claros o blancos — el efecto de sombra requiere contraste.
Elegir el icono que mejor represente semánticamente el contexto (ej. trophy para logros, no para navegación).
Mantener consistencia de tamaño dentro de la misma vista o sección.
Añadir siempre aria-label descriptivo cuando se use como decoración informativa.

✕ Don't

No usar iconos 3D como iconos de acción dentro de botones — para eso usar los iconos 2D del sistema.
No mezclar iconos 3D con iconos 2D en el mismo bloque visual.
No escalar por debajo de 32px — el detalle se pierde completamente.
No aplicar filtros CSS ni cambiar la opacidad — el color es parte integral del icono.
No rotar ni invertir los iconos — la perspectiva 3D es fija.

Contextos de uso

Los iconos 3D están diseñados para momentos de alto impacto visual. Aquí los principales contextos donde aplican.

Empty states

Pantallas sin datos o resultados vacíos para guiar al usuario al siguiente paso.

Onboarding

Introducción a funcionalidades nuevas, tutoriales y pantallas de bienvenida.

Confirmaciones

Pantallas de éxito tras completar una acción crítica: cotización, pago, registro.

Errores y alertas

Estados de error de sistema, sesión expirada o acceso denegado.

Dashboard hero

Métricas o KPIs destacados en cabecera de dashboards para asesores.

Recordatorios

Notificaciones proactivas de vencimiento, renovación o próximas citas.

Accesibilidad

aria-label obligatorio

Añadir aria-label descriptivo a cada icono cuando transmite información (no puramente decorativo).

<div role="img" aria-label="Cotización aprobada" … />

Iconos decorativos → aria-hidden

Si el icono acompaña a texto que ya lo describe, ocultarlo con aria-hidden="true".

<div role="img" aria-hidden="true" … />

No usar como único indicador de estado

Siempre acompañar el icono con texto o una etiqueta visible que comunique el estado.

Contraste de fondo

Los iconos incluyen sombra y transparencia — usar siempre sobre fondo blanco o var(--surface-page) para garantizar la legibilidad.

Referencia Figma

DS — Torre de controlPágina: ↳ Icons · Component Set: 3D Icon · Nodo: 14091:8366

Abrir en Figma