Iconografía
Los iconos apoyan al texto, no lo reemplazan. Usamos Phosphor y un grupo de iconos con significado fijo que se lee igual en todos los productos.
Librería y peso
La base de Konfront usa Phosphor (@phosphor-icons/react) en peso Regular. El peso Fill se reserva para estados: check de terminado, bandera de alerta, candado de bloqueo y estrella.
Un botón con solo icono lleva aria-label y Tooltip. Si el icono acompaña a un texto, se marca aria-hidden.
Tamaños
Iconos con significado fijo
Estos iconos tienen un solo significado en todo Konfront. No los reasignes ni los uses para otra cosa. En código se usan por su nombre: <Icon name="milestone" />.
- Entregable
deliverableFileText - Prueba
testFlask - Hito
milestoneFlag - Automático
automaticLightning - Generado por IA
generatedSparkle - Interno
internalLockSimple - Compartible
shareableEye - Ciclo de sprint
cycleArrowsClockwise - Bloqueo
blockedLock (Fill) - Simulación
simulationMagicWand
Así se ven dentro de los badges de producto, a 14 px.
Estados de paso del Checklist
El color nunca comunica solo: cada estado tiene una forma distinta. Atrasado no es un estado; es una bandera Flag (Fill) en --danger sobre cualquier paso con fecha vencida.
| Estado | Icono Phosphor | Color | Regla |
|---|---|---|---|
| Sin empezar | Circle | --muted-foreground | — |
| En proceso | CircleHalf | --warning | — |
| Terminado | CheckCircle (Fill) | --success | — |
| Bloqueo | Lock (Fill) | --warning | Comentario obligatorio |
| No entregado | XCircle | --danger | — |
| NA | MinusCircle | --placeholder | Justificación obligatoria; no cuenta en el avance |
Temas de cliente
El tema de un cliente puede cambiar la librería a Lucide, Tabler, Hugeicons o Remix Icon. El mapa de significados se mantiene: milestone sigue siendo el hito, solo cambia el dibujo. Configúralo en Temas por cliente.
Migración desde Tabler
El UI kit de Figma todavía usa Tabler. Al llevar una pantalla a código, usa esta equivalencia.
| Tabler | Phosphor |
|---|---|
| search | MagnifyingGlass |
| flag-3-filled | Flag (Fill) |
| users | Users |
| files | Files |
| building-warehouse | Warehouse |
| rocket | Rocket |
| logout | SignOut |
| plus | Plus |
| chevron-down | CaretDown |
| layout-sidebar-left-collapse-filled | SidebarSimple |
| message-report-filled | ChatCircleText (Fill) |