Saltar al contenido principal
Gob.cl

Pictogramas

Recursos visuales que representan conceptos y categorías de información de forma simple y reconocible, facilitando la comprensión y orientación de las personas dentro de las interfaces.

Selección de pictogramas que representan personas, servicios y actividadesSelección de pictogramas que representan personas, servicios y actividades
Guía de uso
Uso en código
Galería

Hay dos formas de usar un pictograma. En ambas necesitas el CSS del kit cargado una sola vez en la página (import '@gobdigital-cl/vanilla/styles.css'): ahí viven los tokens de color (--color-icon-utility-pictogram-element y --color-icon-utility-pictogram-decoration) que pintan el glifo. Sin ese CSS, el pictograma se ve sin color en cualquiera de las dos formas.

Los pictogramas no son íconos: los íconos usan data-icon + .cl-icon; los pictogramas usan data-pictogram + .cl-pictogram.

Declarativo

Un placeholder que el kit hidrata con JS:

Ese <span> queda vacío hasta que algo lo hidrata. initComponents() de @gobdigital-cl/vanilla/auto ya monta los [data-pictogram] (igual que los íconos), así que no necesitas llamar initPictograms() aparte:

import { initComponents } from '@gobdigital-cl/vanilla/auto'

initComponents({ root: document.body, observe: true })

observe: true deja un MutationObserver corriendo, así que un pictograma insertado después (contenido dinámico, una SPA) también se hidrata solo, sin volver a llamar la función.

Clases de tamaño

Sin modificador, el pictograma mide 120px (lg). Usa .cl-pictogram--md (80px), .cl-pictogram--sm (64px) o .cl-pictogram--xs (48px) para los demás tamaños.

Accesibilidad

Un pictograma decorativo no lleva title y queda aria-hidden. Si comunica algo, pásale un title: se expone como role="img" con ese aria-label.

<span class="cl-pictogram" data-pictogram="archivo" title="Archivo"></span>

Programático

renderPictogram() devuelve el markup como string, sin necesidad de DOM:

import { renderPictogram } from '@gobdigital-cl/core/pictograms'

el.innerHTML = renderPictogram('archivo', { title: 'Archivo' })

Los nombres válidos están en pictogramNames (@gobdigital-cl/core/pictograms) y en @gobdigital-cl/core/pictograms/manifest.

Estático

El mismo resultado ya expandido, sin inicialización:

Se pega y se ve sin correr ningún JS del kit. Pero como el color sigue viniendo de los mismos tokens CSS, igual necesita que el CSS del kit esté cargado; "estático" es solo "sin JS", no "sin CSS".

Última actualización: Septiembre de 2026