Íconos

La mayoría de las imágenes forman parte de tu contenido, pero los iconos forman parte de tu interfaz de usuario. Deben escalarse y adaptarse de la misma manera en que el texto de la IU se escala y se adapta.

Gráficos vectoriales escalables

Cuando se trata de imágenes fotográficas, hay muchas opciones para el formato de imagen: JPG, WebP y AVIF. En el caso de las imágenes no fotográficas, puedes elegir entre el formato de Gráficos de red portátiles (PNG) y el de Gráficos vectoriales escalables (SVG).

Tanto los PNG como los SVG son buenos para tratar con áreas de color plano y ambos permiten que las imágenes tengan fondos transparentes. Si usas un archivo PNG, es probable que debas crear varias versiones de tu imagen en diferentes tamaños y usar el atributo srcset en el elemento img para que la imagen sea responsiva. Si usas un archivo SVG, es responsivo de forma predeterminada.

Los PNG (y JPG, WebP y AVIF) son imágenes de mapa de bits. Las imágenes de mapa de bits almacenan información como píxeles. En un archivo SVG, la información se almacena como instrucciones de dibujo. Cuando el navegador lee el archivo SVG, las instrucciones se convierten en píxeles. Lo mejor de todo es que estas instrucciones son relativas. Independientemente de las dimensiones que utilices para describir líneas y formas, todo se renderiza con la nitidez adecuada. En lugar de crear varios SVG de diferentes tamaños, puedes crear uno que funcione en todos los tamaños. No es necesario usar el atributo srcset.

<img src="image.svg" alt="A description of the image." width="25" height="25">
<img src="image.svg" alt="A description of the image." width="250" height="250">

XML se usa para escribir las instrucciones en un archivo SVG. Es un lenguaje de marcado, como HTML.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
  <title>Smiling face</title>
  <circle r="20" fill="yellow" stroke="black"/>
  <ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
  <ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
  <path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
</svg>

Incluso puedes colocar SVG dentro de HTML.

<figure>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
    <title>Smiling face</title>
    <circle r="20" fill="yellow" stroke="black"/>
    <ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
    <ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
    <path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
  </svg>
  <figcaption>
  A description of the image.
  </figcaption>
</figure>

Si incorporas un SVG como ese, no necesitas hacer una solicitud menos que el navegador debe hacer. No habrá espera para que la imagen se descargue porque llega con el HTML... en el HTML. Además, como verás pronto, incorporar SVG como este te da más control sobre su estilo también.

Íconos y texto

Las imágenes de iconos a menudo presentan formas simples sobre un fondo transparente. SVG es ideal para íconos.

Si tienes un botón o un vínculo con texto y un ícono en su interior, el ícono es presentacional. Lo que importa es el texto. Cuando se usa un elemento img, un atributo alt vacío indica que la imagen es presentacional.

<button>
<img src="hamburger.svg" alt="" width="16" height="16">
Menu
</button>

Dado que CSS se usa solo para la presentación, puedes colocar el ícono en tu CSS como imagen de fondo.

<button class="menu">
Menu
</button>

.menu {
  background-image: url(hamburger.svg);
  background-position: 0.5em;
  background-repeat: no-repeat;
  background-size: 1em;
  padding-inline-start: 2em;
}

Si colocas el SVG dentro del código HTML, usa el atributo aria-hidden para ocultarlo de la tecnología de accesibilidad.

<button class="menu">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
    <rect width="100" height="20" />
    <rect y="30" width="100" height="20"/>
    <rect y="60" width="100" height="20"/>
  </svg>
  Menu
</button>

Íconos independientes

Usa texto dentro de los botones y los vínculos si deseas que su propósito sea claro. Puedes usar un ícono sin texto, pero no supongas que todos comprenden el significado de un ícono en particular. Si tienes dudas, realiza pruebas con usuarios reales.

Si decides usar un ícono sin texto que lo acompañe, este ya no será de presentación. Una imagen de fondo en CSS no es una forma adecuada de mostrar el ícono. El ícono debe tener un nombre accesible en HTML.

Si usas un elemento img, el ícono obtiene su nombre accesible del atributo alt.

<button>
<img src="hamburger.svg" alt="Menu" width="16" height="16">
</button>

Otra opción es poner el nombre de accesibilidad en el vínculo o botón en sí y declarar que la imagen es de presentación. Usa el atributo aria-label para proporcionar el nombre accesible.

<button aria-label="Menu">
<img src="hamburger.svg" alt="" width="16" height="16">
</button>

Si colocas el SVG dentro de tu HTML, usa el atributo aria-label en el vínculo o botón para asignarle un nombre accesible y usa el atributo aria-hidden en el ícono.

<button aria-label="Menu">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
    <rect width="100" height="20" />
    <rect y="30" width="100" height="20"/>
    <rect y="60" width="100" height="20"/>
  </svg>
</button>

Cómo aplicar estilos a íconos

Si incorporas tus íconos SVG directamente en tu HTML, puedes aplicar ajustes de estilo a sus partes del mismo modo que a cualquier otro elemento de tu página. No puedes hacer eso si usas un elemento img para mostrar tus íconos.

En el siguiente ejemplo, los elementos rect dentro del SVG tienen un valor fill de blue para que coincida con los estilos del texto del botón.

button {
 color: blue;
}
button rect {
  fill: blue;
}

También puedes aplicar los estilos hover y focus.

button:hover,
button:focus {
  color: red;
}
button:hover rect,
button:focus rect {
  fill: red;
}

Recursos

• Si necesitas aplicar ajustes de estilo a SVG que son imágenes de fondo en tu CSS, lee el artículo de Una sobre cómo colorear fondos SVG.
• Sara Soueidan escribió sobre los botones de íconos accesibles.
• Scott O'Hara escribió sobre el marcado contextual de imágenes y SVG accesibles.
• Si usas una herramienta de diseño gráfico para exportar SVG, usa SVGOMG para optimizar el resultado.

Los iconos son una parte importante del desarrollo de la marca de tu sitio. A continuación, descubrirás cómo hacer que otros aspectos del desarrollo de la marca sean responsivos mediante el poder de los temas.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre íconos