Iconografía

Banco de Iconos Flow

Sistema completo de iconografía para productos, presentaciones, documentos y experiencias digitales de Flow Collective Studio.

Fundamentos

Principios de Iconografía

Los iconos de Flow comunican de forma clara, limpia y consistente. Cada icono refuerza la identidad visual sin competir con el contenido.

Estilo visual

Atributo Especificación
EstiloLine icons, outline — nunca filled
Stroke1.5px consistente
EsquinasLigeramente redondeadas
ColorMonocromático — un solo color por icono
FuenteLucide Icons (primaria) / Phosphor Icons (alternativa)

Colores permitidos

Sobre fondo claro
Color: #0f2c24 (charcoal)
Sobre fondo oscuro
Color: #f0eee9 (offwhite)
Acento (uso limitado)
Color: #2fd954 (green-600)

Tokens

Especificaciones Técnicas

Tamaños, espaciado y reglas de implementación para mantener consistencia en todos los contextos.

Tamaños estándar

16px Micro
20px Small
24px Default
32px Large
48px Feature
Token Tamaño Uso
--icon-micro16 × 16 pxIndicadores inline, badges, tags compactos
--icon-sm20 × 20 pxBotones compactos, listas, inputs
--icon-default24 × 24 pxNavegación, acciones, uso general
--icon-lg32 × 32 pxCards, secciones destacadas
--icon-feature48 × 48 pxHero sections, features, landing pages

Espaciado con texto

Regla general: El gap entre icono y texto debe ser 8px para tamaños default y small, y 12px para tamaños large y feature.
Enviar mensaje — gap: 8px
Configuración — gap: 8px
Dashboard — gap: 12px

Lineamientos

Uso Correcto vs. Incorrecto

Reglas claras para mantener la coherencia visual en cualquier contexto de aplicación.

Correcto

Iconos outline con stroke 1.5px, un solo color, tamaño consistente.

Incorrecto

Iconos filled, multicolor, con sombra, diferentes grosores o estilos mezclados.

Correcto

Alinear verticalmente al centro con el texto adyacente. Respetar el gap definido.

Incorrecto

Usar iconos como decoración sin función. Mezclar familias de iconos (Lucide + Font Awesome).

Nunca usar: Iconos filled, multicolor, con sombras, clipart, emojis como sustituto de iconos, ni iconos 3D. Flow siempre es limpio y minimalista.

Código

Implementación

Cómo integrar los iconos en productos Flow con código limpio y consistente.

Instalación vía CDN

HTML <!-- Agregar antes de </body> --> <script src="https://unpkg.com/lucide@latest"></script> <script> lucide.createIcons(); </script>

Uso básico en HTML

HTML <!-- Icono inline 24px (default) --> <i data-lucide="home" style="width:24px; height:24px; color:#0f2c24; stroke-width:1.5;"></i> <!-- Icono feature 48px --> <i data-lucide="heart" style="width:48px; height:48px; color:#0f2c24; stroke-width:1.5;"></i> <!-- Modo oscuro --> <i data-lucide="users" style="width:24px; height:24px; color:#f0eee9; stroke-width:1.5;"></i>

Icono con texto (botón)

HTML <button class="flow-btn"> <i data-lucide="send"></i> Enviar </button>

CSS con variables de diseño

CSS /* Clase utilitaria para iconos Flow */ .flow-icon { width: 24px; height: 24px; color: var(--charcoal); stroke-width: 1.5; flex-shrink: 0; } .flow-icon--sm { width: 20px; height: 20px; } .flow-icon--lg { width: 32px; height: 32px; } .flow-icon--xl { width: 48px; height: 48px; } /* Modo oscuro */ .dark .flow-icon { color: var(--offwhite); } /* Acento verde (uso selectivo) */ .flow-icon--accent { color: var(--green-600); }

Accesibilidad

Regla WCAG: Los iconos decorativos deben llevar aria-hidden="true". Los iconos funcionales (sin texto acompañante) necesitan aria-label o un <span class="sr-only"> con texto descriptivo.
HTML <!-- Decorativo (con texto visible) --> <button> <i data-lucide="send" aria-hidden="true"></i> Enviar </button> <!-- Funcional (sin texto) --> <button aria-label="Cerrar"> <i data-lucide="x" aria-hidden="true"></i> </button>