Iconografía
Lucide como set oficial de íconos — criterios de selección, personalización y reglas de uso.
El sistema de íconos de IA Book usa Lucide, una librería open-source de íconos SVG con trazo uniforme, sin relleno y geométricamente limpios. Lucide ya está integrado en el portal vía Fumadocs y no requiere instalación adicional.
Por qué Lucide
Lucide se alinea con la personalidad visual de la marca en tres ejes:
- Trazo uniforme, sin relleno. Outline-only por diseño. No compite con el contenido ni satura la interfaz — respeta el principio de espacio generoso y función clara.
- Geométrico y sobrio. Formas limpias, sin ornamentos, sin personalidad propia que choque con la voz editorial. Son herramientas visuales, no decoración.
- Amplio y consistente. Más de 1500 íconos con la misma lógica formal. No hace falta mezclar sets ni improvisar cuando falta uno.
Personalización
Lucide expone tres propiedades que permiten ajustar los íconos al contexto:
| Propiedad | Default | Uso en la marca |
|---|---|---|
size | 24 | Sidebar: 16–18. Inline con texto: igualar al line-height. Cards o features: 24–32. |
strokeWidth | 2 | Mantener en 2 como default. En tamaños grandes (32+), bajar a 1.5 para que no pese. |
color | currentColor | Hereda del contexto. Para íconos sueltos: --accent, --ink o --stone según jerarquía. |
En la sidebar del portal
Los íconos de la sidebar se configuran desde meta.json (por sección) o desde el frontmatter icon (por página). El plugin lucideIconsPlugin() los renderiza automáticamente. No hace falta importar ni dimensionar a mano.
Criterios de selección
No todos los íconos de Lucide sirven. Al elegir uno:
- Que sea reconocible a 16px. Si a ese tamaño no se distingue qué representa, descartalo. Los íconos de la sidebar se ven chicos.
- Que sea literal antes que metafórico.
Palettepara color,Typepara tipografía,Flagpara manifiesto. Evitá abstracciones que necesiten explicación. - Que no se repita. Cada ícono aparece una sola vez en un mismo árbol de navegación. Si dos secciones podrían usar el mismo, uno de los dos necesita otro ícono.
- Que no decore. Un ícono sin función informativa es ruido. Si el título ya es claro sin ícono, probablemente no lo necesite.
Colores válidos para íconos
Los íconos heredan currentColor por default. Cuando se usan fuera de la sidebar (cards, features, callouts), aplicá la misma lógica que con cualquier elemento de marca:
| Contexto | Color recomendado |
|---|---|
| Navegación, sidebar, breadcrumb | currentColor (hereda del texto) |
| Acento funcional (CTA, highlight) | --accent |
| Secundario, soporte | --stone |
| Sobre fondo oscuro | --cream o --accent-light |
Fuera de paleta
No uses colores fuera del sistema de marca para íconos. Nada de neón, gradientes, ni colores por categoría tipo "rojo para errores, verde para éxito" salvo en callouts que ya tienen su propio sistema cromático.
Íconos en uso
Referencia de los íconos asignados actualmente en el manual de marca:
SECCIONES
| Sección | Ícono | Razón |
|---|---|---|
| Identidad | FingerprintPattern | Lo que hace única a la marca. |
| Sistema | Layers | Capas del sistema visual. |
| Voz | MessageSquareText | Comunicación con contenido. |
| Aplicación | LayoutTemplate | La marca puesta en piezas reales. |
ARTÍCULOS
| Artículo | Ícono | Razón |
|---|---|---|
| Introducción | BookMarked | Punto de entrada al manual. |
| Wordmark | Type | Marca tipográfica. |
| Isotipo | Shapes | Símbolo gráfico. |
| Lockups | Group | Agrupación de elementos. |
| Color | Palette | Paleta cromática. |
| Tipografía | ALargeSmall | Escala tipográfica. |
| Iconografía | Signpost | Señalización visual. |
| Auxiliares | Puzzle | Piezas complementarias. |
| Manifiesto | Flag | Declaración fundacional. |
| Tono de voz | AudioLines | Modulación del mensaje. |
| Mensajes y taglines | Quote | Frases clave de la marca. |
| Portadas | Image | Dirección visual de portadas. |
| Social media | Share2 | Distribución en redes. |
| Producto | Package | Piezas de producto y papelería. |
Reglas de uso
- Los íconos en la sidebar son opcionales. Asignalos solo donde aportan orientación — no hace falta que cada página tenga uno.
- Mantené
strokeWidth: 2en todo el portal. Un ícono con trazo distinto se siente de otro sistema. - Si un ícono de Lucide no existe para tu concepto, no inventes uno custom: buscá una alternativa literal en el catálogo o dejá la página sin ícono.
- En piezas fuera del portal (social, impresión, presentaciones), los íconos de Lucide pueden usarse como recurso gráfico siempre que respeten la paleta de marca.