Saltar al contenido principal
Gob.cl

Icons

Revisa y prueba el componente en código

Observa los componentes y sus propiedades para adaptarlos a tus necesidades específicas.

Ver en Storybook

Sistema de iconografía del kit. Usa data-icon sobre elementos con clase .cl-icon.

Uso individual

<span class="cl-icon" data-icon="add-circle" aria-hidden="true"></span>

Tamaños

<span class="cl-icon" data-icon="search" style="font-size: 16px;" aria-hidden="true"></span>
<span class="cl-icon" data-icon="search" style="font-size: 24px;" aria-hidden="true"></span>
<span class="cl-icon" data-icon="search" style="font-size: 32px;" aria-hidden="true"></span>

Uso semántico

<button class="cl-button" type="button">
  <span class="cl-icon" data-icon="add-circle" aria-hidden="true"></span>
  <span class="cl-button__label">Agregar</span>
</button>