# Iconografía Usa iconos para acelerar la lectura sin reemplazar las palabras. ## Sistema de iconos Lexy usa la familia **Fluent UI System Icons** de Microsoft. Es una colección de más de 4.000 iconos vectoriales con dos temas (regular y filled), pensada para interfaces densas y trabajada con principios de claridad y neutralidad. Fluent ofrece consistencia visual entre íconos pequeños (16px) y grandes (48px+) gracias a una grilla y reglas de trazo comunes, lo que permite mezclar densidades sin que la interfaz pierda coherencia. ## Temas y tamaños ### Regular y Filled Existen dos temas para acomodar distintos pesos visuales y estados de la interfaz. ### Tamaños canónicos Fluent ofrece seis tamaños diseñados pixel-perfect para no perder nitidez al escalar. En el producto, **20px** es el default para densidad media (vista de expediente, listas), **16px** para línea de texto y **24px** para navegación principal o portal del cliente, donde la legibilidad pesa más. ## Categorías de uso Las categorías agrupan los iconos por dominio del producto. Cada estudio mantiene un caso vivo que mueve documentos, plazos y comunicaciones; cada cliente quiere saber, en una mirada, dónde está su caso. Estos grupos cubren ese flujo de extremo a extremo. ## Aplicación ### Pareo con texto En la mayoría de superficies del cliente, los iconos van acompañados de etiqueta. Sólo se permiten icon-only en acciones universales (cerrar, más opciones, buscar) o en vistas densas del producto interno donde el contexto del abogado lo permite. ### Color Los iconos heredan el color del texto que acompañan. El color de marca se reserva para estados seleccionados, llamadas a la acción primarias y badges de estado de caso. Aplicar un color propio al icono solo cuando aporte significado funcional, no decoración. ### Nomenclatura Se mantiene el nombre original de Fluent (en inglés y PascalCase, p.ej. `DocumentSignature`), que describe la forma del icono y no la función. La función específica vive en la etiqueta o tooltip que lo acompaña, no en el nombre. ## Tokens Set de iconos, temas (regular/filled), tamaños canónicos y reglas de nombrado. | Token | Valor | Uso | | --- | --- | --- | | `icon.set` | `@fluentui/react-icons` | Set canónico. Lucide se usa sólo dentro de componentes shadcn UI. | | `icon.theme.regular` | `Trazo, peso visual ligero` | Por defecto para acciones e ítems de navegación. | | `icon.theme.filled` | `Relleno, peso visual alto` | Estados activos / seleccionados. | | `icon.size.16` | `16px` | Inline con texto body (14px). Toolbar densa. | | `icon.size.20` | `20px` | Botones estándar, headers de modal. | | `icon.size.24` | `24px` | Navegación principal, hero pequeño. | | `icon.size.32` | `32px` | Tarjetas con icono protagonista. | | `icon.size.48` | `48px` | Empty states, hero ilustrativo. | | `icon.naming` | `PascalCase descriptivo (DocumentSignature)` | El nombre describe la forma, no la función. |