Íconos

La mayoría de las imágenes forman parte de tu contenido, pero los íconos forman parte de tu interfaz de usuario. Deben adaptarse y cambiar de tamaño de la misma manera que el texto de la IU.

Gráficos vectoriales escalables

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

Tanto los PNG como los SVG son buenos para trabajar con áreas de color plano y permiten que tus imágenes tengan fondos transparentes. Si usas un PNG, probablemente deberás crear varias versiones de la imagen en diferentes tamaños y usar el atributo srcset en el elemento img para hacer que la imagen sea responsiva. Si usas un SVG, será responsivo de forma predeterminada.

Los archivos 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 SVG, la información se almacena como instrucciones de dibujo. Cuando el navegador lee el archivo SVG, las instrucciones se convierten en píxeles. Y lo mejor de todo es que estas instrucciones son relativas. Independientemente de las dimensiones que uses para describir líneas y formas, todo se renderiza con la nitidez adecuada. En lugar de crear varios archivos 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">

Se usa XML para escribir las instrucciones en un archivo SVG. Este 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 de esa manera, el navegador tendrá que realizar una solicitud menos. No habrá que esperar a que se descargue la imagen, ya que llega con el código HTML… en el código HTML. Además, como verás pronto, incorporar archivos SVG de esta manera te brinda más control sobre su diseño.

Íconos y texto

Las imágenes de íconos suelen incluir formas simples sobre un fondo transparente. El formato SVG es ideal para los íconos.

Si tienes un botón o un vínculo con texto y un ícono dentro, el ícono es de presentación. Lo importante es el texto. Cuando se usa un elemento img, un atributo alt vacío indica que la imagen es de presentación.

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

Dado que CSS es para la presentación, puedes colocar el ícono en tu CSS como una 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 de tu 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 vínculos si quieres que su propósito sea claro. Puedes usar un ícono sin texto, pero no supongas que todos entienden el significado de un ícono en particular. En caso de duda, realiza pruebas con usuarios reales.

Si decides usar un ícono sin texto acompañante, el ícono ya no será meramente ilustrativo. Una imagen de fondo en CSS no es una forma adecuada de mostrar el ícono. El ícono debe tener un nombre de accesibilidad en HTML.

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

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

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

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

Si colocas el SVG dentro de tu código HTML, usa el atributo aria-label en el vínculo o botón para darle un nombre de accesibilidad 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>

Íconos de diseño

Si incorporas tus íconos SVG directamente en tu HTML, puedes aplicarles un diseño a partes de ellos como a cualquier otro elemento de tu página. No puedes hacerlo 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 diseños del texto del botón.

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

También puedes aplicar estilos hover y focus.

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

Recursos

• Si necesitas aplicar un diseño a los archivos 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 archivos SVG, usa SVGOMG para optimizar el resultado.

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

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre íconos