Iconos

Usamos Lucide React como librería de iconos. Consistente, accesible y tree-shakeable.

Librería

Lucide React es nuestra librería estándar. Ofrece +1500 iconos con estilo stroke consistente y pesa ~0.5KB por icono gracias a tree-shaking.

Tamaños

16px (sm)
20px (md)
24px (lg)
32px (xl)
40px (2xl)

Colores

Success
Error
Warning
Info
Default
Brand

Catálogo

Navegación

Acciones

Estado & Feedback

Usuarios & Comunicación

Data & Contenido

Tech & Desarrollo

Dispositivos & UI

Click en cualquier icono para copiar el código de uso. Catálogo completo en lucide.dev/icons

Instalación

pnpm add lucide-react

Uso

import { ArrowRight, Check, AlertCircle } from 'lucide-react';

// Tamaños estándar
<ArrowRight className="h-4 w-4" strokeWidth={1.5} />  {/* sm */}
<ArrowRight className="h-5 w-5" strokeWidth={1.5} />  {/* md */}
<ArrowRight className="h-6 w-6" strokeWidth={1.5} />  {/* lg */}
<ArrowRight className="h-8 w-8" strokeWidth={1.5} />  {/* xl */}

// Con color semántico
<Check className="h-5 w-5 text-green-400" />
<AlertCircle className="h-5 w-5 text-red-400" />
<AlertTriangle className="h-5 w-5 text-yellow-400" />

Ejemplos en contexto

Botones con iconos

Inputs con iconos

Indicadores de estado

Deployment exitoso
Build fallido
3 warnings encontrados
Procesando...

Navegación con iconos

Lineamientos

  • • Siempre usar strokeWidth={1.5} para consistencia con el estilo Codeway
  • • Siempre incluir aria-hidden="true" en iconos decorativos
  • • Tamaño por defecto en botones: h-4 w-4
  • • No usar iconos de otras librerías sin aprobación del equipo de diseño
  • • Siempre importar iconos individuales para tree-shaking óptimo

Accesibilidad

{/* Icono decorativo (tiene texto acompañante) */}
<button>
  <ArrowRight className="h-4 w-4" aria-hidden="true" />
  Siguiente
</button>

{/* Icono como único contenido (necesita label) */}
<button aria-label="Cerrar menú">
  <X className="h-5 w-5" />
</button>