Iconos

This content is not available in your language yet.

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.