Ícones

A maioria das imagens faz parte do seu conteúdo, mas os ícones fazem parte da interface do usuário. Eles precisam ser dimensionados e adaptados da mesma forma que o texto da sua interface.

elementos gráficos vetoriais escaláveis

Quando se trata de imagens fotográficas, há muitas opções de formato: JPG, WebP e AVIF. Para imagens não fotográficas, você pode escolher entre o formato Portable Network Graphics (PNG) e o formato elementos gráficos vetoriais escaláveis (SVG).

Os formatos PNG e SVG são bons para lidar com áreas de cores planas e permitem que as imagens tenham fundos transparentes. Se você usar um PNG, provavelmente vai precisar criar várias versões da imagem em tamanhos diferentes e usar o atributo srcset no elemento img para tornar a imagem responsiva. Se você usar um SVG, ele será responsivo por padrão.

PNGs (e JPGs, WebP e AVIF) são imagens bitmap. As imagens bitmap armazenam informações como pixels. Em um SVG, as informações são armazenadas como instruções de desenho. Quando o navegador lê o arquivo SVG, as instruções são convertidas em pixels. E o melhor de tudo é que essas instruções são relativas. Independente das dimensões usadas para descrever linhas e formas, tudo é renderizado com a nitidez certa. Em vez de criar vários SVGs de tamanhos diferentes, você pode fazer um que funcione em todos os tamanhos. Não é necessário usar o 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">

O XML é usado para escrever as instruções em um arquivo SVG. Essa é uma linguagem de marcação, como o 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>

Você pode até mesmo 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>

Se você incorporar um SVG assim, será uma solicitação a menos que o navegador precisará fazer. Não é preciso esperar o download da imagem porque ela chega com o HTML… no HTML! Além disso, como você vai descobrir em breve, incorporar SVGs como este oferece mais controle sobre o estilo deles.

Ícones e texto

As imagens de ícones geralmente apresentam formas simples em um fundo transparente. O SVG é ideal para ícones.

Se você tiver um botão ou um link com texto e um ícone dentro dele, o ícone será de apresentação. O que importa é o texto. Ao usar um elemento img, um atributo alt vazio indica que a imagem é de apresentação.

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

Como o CSS é para apresentação, você pode colocar o ícone no CSS como uma imagem de plano de fundo.

<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;
}

Se você colocar o SVG no HTML, use o atributo aria-hidden para ocultá-lo da tecnologia adaptativa.

<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>

Ícones independentes

Use texto dentro dos botões e links se quiser que a finalidade deles seja clara. Você pode usar um ícone sem texto, mas não presuma que todos entendam o significado de um ícone específico. Em caso de dúvida, teste com usuários reais.

Se você decidir usar um ícone sem texto acompanhante, ele não será mais de apresentação. Uma imagem de plano de fundo em CSS não é uma maneira adequada de mostrar o ícone. O ícone precisa receber um nome acessível em HTML.

Se você usar um elemento img, o ícone vai receber o nome acessível do atributo alt.

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

Outra opção é colocar o nome acessível no próprio link ou botão e declarar que a imagem é de apresentação. Use o atributo aria-label para fornecer o nome acessível.

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

Se você colocar o SVG dentro do HTML, use o atributo aria-label no link ou botão para dar a ele um nome acessível e use o atributo aria-hidden no ícone.

<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>

Ícones de estilo

Se você incorporar os ícones SVG diretamente no HTML, poderá estilizar partes deles como qualquer outro elemento na página. Isso não é possível se você usar um elemento img para mostrar seus ícones.

No exemplo a seguir, os elementos rect dentro do SVG têm um valor fill de blue para corresponder aos estilos do texto do botão.

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

Também é possível aplicar estilos hover e focus.

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

Recursos

• Se você precisar estilizar SVGs que são imagens de plano de fundo no seu CSS, leia o artigo de Una sobre colorir planos de fundo SVG.
• Sara Soueidan escreveu sobre botões de ícone acessíveis.
• Scott O'Hara escreveu sobre marcação contextual de imagens acessíveis e SVGs.
• Se você estiver usando uma ferramenta de design gráfico para exportar SVGs, use o SVGOMG (link em inglês) para otimizar a saída.

Os ícones são uma parte importante da marca do seu site. Em seguida, você vai descobrir como tornar outros aspectos da sua marca responsivos com o poder da aplicação de temas.

Teste seu conhecimento

Teste seus conhecimentos sobre ícones