Esta sección agrupa iconografía y micro-componentes que aparecen en toda la interfaz: estados, etiquetas, toggles, tooltips, breadcrumbs o paginación. Son piezas pequeñas, pero definen la personalidad del producto.
Iconografía & micro-UI
Iconografía & componentes varios
Iconos de sistema, chips, badges, toggles, tooltips y elementos de navegación que completan tu interfaz. Organizados por tendencias visuales para integrarlos rápido en productos reales.
Cómo usarlo
Un lenguaje visual consistente de micro-componentes
Tendencias de iconografía
Icon sets por estilo visual
Ejemplos de cómo se adapta la iconografía a distintas tendencias: minimal, glass, neobrutalista, pixel, corporativa o neon techno, manteniendo la misma semántica.
Clean minimal
Iconos lineales, sin rellenos, con golpes finos y geometría limpia. Pensados para productos sobrios, SaaS y herramientas internas.
Home
Menú
Buscar
Ajustes
Úsalos con tamaños entre 16–24px y asegúrate de que el stroke no pierda legibilidad en pantallas pequeñas.
Glassmorphism suave
Iconos ligeramente rellenados o con fondos circulares translúcidos sobre tarjetas glass. Ideales para dashboards y productos visualmente más “premium”.
Destacado
Cloud
Inbox
Hecho
Mantén sombras suaves y bordes definidos para que el icono no se pierda en fondos muy iluminados o con degradados.
Neobrutalista
Iconos con bloques de color, contornos marcados y geometría simple. Funcionan muy bien en landings creativas y portfolios de diseño.
Alert
Link
Usuario
Combínalos con fondos planos y tipografía bold. El contraste alto es parte del lenguaje visual.
Pixel UI
Iconos pixelados, con esquinas duras y estética retro. Perfectos para productos inspirados en videojuegos o interfaces nostálgicas.
Play
Stop
Vida
Respeta una rejilla de píxeles fija y evita el antialiasing excesivo para mantener el efecto retro.
Corporate UI
Iconos sobrios, con esquinas suavemente redondeadas y rellenos mínimos. Ajustados a productos corporativos, banca, legal o SaaS B2B.
Datos
Informes
Cliente
Mantén una paleta contenida (azules, grises, toques de accent) y evita iconos excesivamente ilustrativos.
Neon techno
Iconos brillantes sobre fondos oscuros, con efecto glow y guiños a la estética ciberpunk o de panel de control.
Live
Loop
Node
Úsalos en dosis pequeñas para no saturar la interfaz y reserva el glow para acciones clave o estados activos.
Componentes varios
Chips, toggles, tooltips y navegación
Micro-componentes que conectan contenido, interacción y estados. Pensados para ser reutilizados entre distintas pantallas y tendencias visuales.
Chips & badges de estado
Etiquetas pequeñas que resumen estados o categorías. Funcionan en listados, cards, tablas o paneles de control.
En línea
Estable
Pendiente revisión
Error crítico
Toggles accesibles
Interruptores binarios para activar o desactivar funciones. Su estado debe ser comprensible más allá del color.
Modo oscuro
Notificaciones de nuevos recursos
Mostrar etiquetas avanzadas de accesibilidad
Tooltips & ayuda contextual
Mensajes breves que aclaran iconos o acciones. Añaden contexto sin saturar la interfaz principal.
AA indica que el contraste cumple las pautas de accesibilidad
suficientes para la mayoría de textos y tamaños estándar.
Breadcrumb & paginación
Componentes que ayudan a ubicarse y navegar entre listados largos o secciones anidadas de recursos.
Estados & feedback
Mensajes breves, claros y consistentes
Banners y mensajes compactos para informar sobre éxitos, avisos o errores. Cada estado combina iconografía, color y texto para ser reconocible al instante.
Recurso guardado correctamente
El kit se ha añadido a tu colección. Puedes volver a descargarlo cuando quieras.
Nueva versión disponible
Hay una versión actualizada de este componente con mejoras de accesibilidad.
Revisa el contraste antes de publicar
Algunos colores de tu interfaz podrían no cumplir AA. Ajusta la paleta antes de lanzar.