Iconografía

Íconos de línea de Lucide, en siete tamaños y con color por token.

Qué es y cómo se usa

Orali usa la librería Lucide (lucide-react): íconos de línea, de trazo uniforme y esquinas redondeadas, que combinan con Montserrat. No hay íconos propios salvo el logotipo.

Tamaños

Se eligen con una clase, nunca con utilidades de Tailwind (w- / h-). Cada tamaño sale de la escala de spacing.

Muestra	Clase	Tamaño	Dónde se usa
	icon-xs		Junto a texto chico, como avisos y badges
	icon-sm		Dentro de botones y links
	icon-md		Tamaño base: listas, features, botones grandes
	icon-lg		Íconos de acción: cerrar, buscar, carrito
	icon-xl		Íconos de apoyo en cards
	icon-2xl		Íconos dentro de Icon badge
	icon-3xl		Estados vacíos y pantallas de confirmación

Color

Los íconos heredan el color del texto (currentColor). Cuando necesitan uno propio, usan estos tokens:

Muestra	Token	Valor	Para qué
		#525252	Íconos de interfaz
		#6b6b6b	Íconos secundarios o deshabilitados
		#e30613	Íconos de marca y de énfasis
		#ffffff	Íconos sobre fondos oscuros o foto

Reglas

Decorativo por defecto. Un ícono que acompaña a un texto lleva aria-hidden: el significado lo da el texto.
Solo ícono, con nombre. Si no hay texto, el botón necesita aria-label (ver Icon button).
Un ícono, un significado. Usá el mismo ícono para la misma acción en todo el sitio.
No los uses solos para comunicar estado. Sumá texto o color con contraste suficiente.
Área táctil. Un ícono clickeable tiene al menos 44 px de área, aunque se dibuje más chico.

Ejemplo

import { ShoppingCart } from "lucide-react"

<Button><ShoppingCart className="icon-sm" aria-hidden />Agregar</Button>