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.
Usa pictogramas para representar conceptos
Utilízalos para comunicar categorías, servicios o ideas de forma visual y facilitar su reconocimiento.
Complementa el contenido
El pictograma debe apoyar la comprensión, no reemplazar información esencial ni funcionar como único medio para comunicar una acción.
Mantén la consistencia
Usa pictogramas del mismo estilo, proporción y nivel de detalle dentro de una misma interfaz.
Evita usos ambiguos
Selecciona representaciones fáciles de asociar con el concepto. Si un pictograma puede tener más de una interpretación, acompáñalo con texto.
Busca pictogramas en la galería disponible
Anatomía y aspecto de los pictogramas
Si no encuentras el pictograma que necesitas, puedes diseñarlo respetando las siguientes características.
Trazos outline, sin rellenos
Terminaciones round
Esquinas round
Segmentos y puntos decorativos
2px (3,1%)Trazo de 2px en contenedor de 64px.
3,1% del tamaño del contenedor.
Tamaños
- 120px
- 80px
- 64px
- 48px
Colores
Los pictogramas utilizan tokens de color para adaptarse automáticamente a los modos light y dark del sistema. Para aplicar estos tokens, utiliza los pictogramas como SVG inline, permitiendo que sus propiedades de color hereden los valores definidos por el sistema.
| Token | Claro | Oscuro |
|---|---|---|
--color-icon-utility-pictogram-element | navy blue 1200 | navy blue 200 |
--color-icon-utility-pictogram-decoration | red 700 | red 700 |
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:
<span data-pictogram="archivo"></span>
<span class="cl-pictogram cl-pictogram--md" data-pictogram="cedula"></span>
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:
<span class="cl-pictogram" role="img" aria-label="Accesibilidad">
<svg class="cl-pictogram__glyph" viewBox="0 0 64 64" focusable="false" aria-hidden="true">
<g transform="translate(13.9673 6.7500) scale(1.00000000 1.00000000) translate(0 0)">
<g id="content">
<path id="Vector" d="M35.07 44.42C34.75 44.42 34.45 44.27 34.26 44.01L26.46 33.35C25.9 32.58 24.99 32.12 24.04 32.12H16.62C14.14 32.12 12.06 30.35 11.68 27.9L10.81 22.41C10.77 22.16 10.75 21.89 10.75 21.62C10.75 18.87 12.99 16.63 15.75 16.63H21.23C21.78 16.63 22.23 17.08 22.23 17.63C22.23 18.18 21.78 18.63 21.23 18.63H15.75C14.1 18.63 12.75 19.97 12.74 21.62C12.74 21.77 12.76 21.93 12.79 22.1L13.65 27.59C13.88 29.06 15.13 30.12 16.62 30.12H24.04C25.62 30.12 27.13 30.89 28.07 32.17L35.87 42.83C36.2 43.28 36.1 43.9 35.66 44.23C35.48 44.36 35.28 44.42 35.07 44.42Z" fill="var(--color-icon-utility-pictogram-element)"/>
<path id="Vector_2" d="M26.23 18.63C26.7823 18.63 27.23 18.1823 27.23 17.63C27.23 17.0777 26.7823 16.63 26.23 16.63C25.6777 16.63 25.23 17.0777 25.23 17.63C25.23 18.1823 25.6777 18.63 26.23 18.63Z" fill="var(--color-icon-utility-pictogram-decoration)"/>
<path id="Vector_3" d="M16.43 50.5C14.52 50.5 12.64 50.17 10.84 49.52C9.68 49.1 8.57 48.55 7.55 47.89C7.09 47.59 6.96 46.97 7.25 46.51C7.54 46.06 8.18 45.92 8.64 46.21C9.54 46.79 10.51 47.27 11.52 47.64C13.45 48.33 15.51 48.61 17.51 48.46C19.56 48.3 21.51 47.73 23.32 46.75C25.12 45.77 26.67 44.45 27.91 42.82C28.24 42.39 28.88 42.3 29.31 42.63C29.75 42.96 29.83 43.59 29.5 44.03C28.09 45.88 26.33 47.39 24.27 48.51C22.23 49.62 20 50.28 17.66 50.46C17.22 50.48 16.82 50.5 16.43 50.5Z" fill="var(--color-icon-utility-pictogram-element)"/>
<path id="Vector_4" d="M4.4 44.72C4.09 44.72 3.81 44.58 3.61 44.34C3.27 43.92 3.34 43.28 3.77 42.94C4.18 42.61 4.84 42.68 5.17 43.09C5.52 43.52 5.45 44.15 5.02 44.5C4.84 44.64 4.62 44.72 4.4 44.72Z" fill="var(--color-icon-utility-pictogram-decoration)"/>
<path id="Vector_5" d="M1.95 40.39C1.53 40.39 1.15 40.12 1.01 39.73C0.34 37.91 0 36.01 0 34.07C0 33.87 0 33.61 0.02 33.35C0.12 31.01 0.71 28.77 1.76 26.68C2.81 24.59 4.26 22.79 6.08 21.32C6.49 20.98 7.15 21.05 7.48 21.46C7.65 21.67 7.73 21.92 7.7 22.19C7.67 22.46 7.54 22.7 7.33 22.87C5.77 24.14 4.45 25.77 3.55 27.58C2.62 29.42 2.11 31.39 2.02 33.44C2 33.66 2 33.88 2 34.07C2 35.77 2.3 37.44 2.89 39.04C2.98 39.3 2.97 39.56 2.86 39.8C2.74 40.05 2.55 40.23 2.29 40.32C2.18 40.37 2.07 40.39 1.95 40.39Z" fill="var(--color-icon-utility-pictogram-element)"/>
<path id="Vector_6" d="M11.58 11.7C8.35 11.7 5.73 9.08 5.73 5.85C5.73 2.62 8.35 0 11.58 0C14.81 0 17.42 2.63 17.42 5.85C17.42 9.07 14.8 11.7 11.58 11.7ZM11.58 2C9.46 2 7.73 3.73 7.73 5.85C7.73 7.97 9.46 9.7 11.58 9.7C13.7 9.7 15.42 7.97 15.43 5.85C15.43 3.73 13.69 2 11.58 2Z" fill="var(--color-icon-utility-pictogram-element)"/>
</g>
</g>
</svg>
</span>
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".
Accesibilidad
Advertencia
Aluvion
Archivo
Arte
Atencion
Calculadora
Calculo funciones
Calendario
Carpeta
Cedula
Ciencia adn
Ciencia atomo
Ciencia microscopio
Ciencia telescopio
Ciencia vial
Comercio
Compra
Comunicaciones
Container
Conversacion
Copihue
Correo
Deporte basquetbol
Deporte futbol
Dispositivo
Documento
Documento anadir
Documento editar
Documento error
Documento informacion
Documento pendiente
Educacion
Educacion birrete
Educacion cabeza
Emprendimiento
Emprendimiento idea
Envio
Evento
Exportaciones
Factura
Fallecimiento
Finanzas
Frutas
Geografia
Grafico
Hombre
Incendio
Infancia
Informacion
Internet
Lectura
Lista
Lluvias
Mamadera
Matrimonio
Medicion
Mensaje
Mineria
Mujer
Multimedia
Musica
Nadador
Pago
Pantalla
Pasaporte
Personas amor
Personas duo
Personas dupla
Personas grupo
Personas singular
Pluma
Premio
Presentacion
Presentacion check
Prohibicion
Salmon
Salud
Seguridad
Senal
Solidaridad
Tecnologia
Telefono
Terremoto
Transporte
Ubicacion
Ubicacion ruta
Vacaciones
Vacunas
Verificacion
Virus
Volantin
Última actualización: Septiembre de 2026