Workbeat Design System

InicioFundamentosComponentesPatronesEjemplosReferenciaGuíasChangelogAgentes IA

Iconografía

BoxIcon y lucide-react: cuándo usar cada uno.

BoxIcon

Iconografía oficial de la plataforma (Boxicons 3). Úsala para identidad de módulos y del menú de aplicaciones; el host carga las hojas de Boxicons en el root.

bx-home
bx-user
bx-cog
bx-calendar
bx-bell
bx-search
bx-briefcase
bx-building
bx-file
bx-chart
bx-message
bx-lock
Contorno Relleno (filled)
tsx
import { BoxIcon } from "@/design-system/components/icons/BoxIcon";

<BoxIcon name="bx-cog" size="20px" />
<BoxIcon name="bx-star" filled />

lucide-react

Iconos de interfaz dentro de componentes (botones, inputs, estados). Los patrones del DS aceptan cualquier componente lucide en props como `icon`.

Users
Calendar
Bell
Search
Settings
tsx
import { Users } from "lucide-react";
import { KpiCard } from "@/design-system/components/patterns/kpi-card";

<KpiCard icon={Users} label="Headcount" value="1,248" />