Iconos

Cobalt utiliza Phosphor Icons como librería oficial. Los iconos se renderizan vía <co-icon> con el atributo name en kebab-case.

Uso básico

Ver código

<co-icon name="bell" size="24"></co-icon>
<co-icon name="user" size="24" weight="fill"></co-icon>
<co-icon name="magnifying-glass" size="24" weight="bold"></co-icon>

Pesos (weights)

Phosphor soporta 6 pesos: thin, light, regular (default), bold, fill, duotone.

Ver código

<co-icon name="heart" weight="thin" size="32"></co-icon>
<co-icon name="heart" weight="light" size="32"></co-icon>
<co-icon name="heart" weight="regular" size="32"></co-icon>
<co-icon name="heart" weight="bold" size="32"></co-icon>
<co-icon name="heart" weight="fill" size="32"></co-icon>
<co-icon name="heart" weight="duotone" size="32"></co-icon>

Iconos en botones

Usa <co-icon-button> para acciones icon-only o las props icon-left / icon-right en <co-button>.

Ver código

<co-icon-button icon="bell" variant="ghost"></co-icon-button>
<co-icon-button icon="gear" variant="outlined"></co-icon-button>
<co-button label="Descargar" icon-left="download" variant="primary"></co-button>
<co-button label="Siguiente" icon-right="arrow-right" variant="secondary"></co-button>

Iconos comunes en Prolibu

Nombre	Uso
magnifying-glass	Búsqueda
bell	Notificaciones
user, users	Usuario / equipo
house	Inicio
gear	Configuración
sign-out	Cerrar sesión
plus, x, check	Acciones básicas
pencil-simple, trash	Editar / eliminar
funnel, dots-three	Filtros / menú
envelope, phone	Comunicación
kanban, squares-four	Vistas
calendar, timer, folder	Tiempo / archivos

Encuentra el catálogo completo en phosphoricons.com.