Ícones

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

Quando se trata de imagens fotográficas, há muitas opções de formato de imagem: JPG, WebP e AVIF. Para imagens não fotográficas, é possível escolher entre o formato Portable Network Graphics (PNG) e o formato Scalable Vector Graphics (SVG).

PNGs e SVGs são bons para lidar com áreas de cor lisa e permitem que suas imagens tenham fundos transparentes. Se você usar um PNG, provavelmente precisará criar várias versões da sua 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 em 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, estas instruções são relativas. Independentemente das dimensões usadas para descrever linhas e formas, tudo é renderizado com a nitidez correta. Em vez de criar vários SVGs de tamanhos diferentes, é possível fazer um SVG 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 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>

Rosto sorridente

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 como esse, o navegador precisará fazer uma solicitação a menos. Não há como esperar o download da imagem porque ela chega com o HTML ... no HTML. Além disso, como você logo descobrirá, a incorporação de SVGs como essa proporciona mais controle sobre o estilo deles.

Ícones e texto

As imagens de ícones geralmente apresentam formas simples em um plano de 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 é de apresentação. O texto que importa. 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 CSS é para apresentação, você pode colocar o ícone em seu 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 o propósito seja claro. Você pode usar um ícone sem texto, mas não presuma que todos entendem o significado de um ícone específico. Em caso de dúvida, teste com usuários reais.

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

Se você usar um elemento img, o ícone 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 link ou botão em si 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 seu HTML, use o atributo aria-label no link ou botão para dar um nome acessível a ele 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>

Como definir o estilo de ícones

Se você incorporar os ícones SVG diretamente no seu HTML, poderá estilizar partes deles como qualquer outro elemento da sua página. Não é possível fazer isso se você usa um elemento img para mostrar os í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 os estilos hover e focus.

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

Recursos

Os ícones são uma parte importante da marca do seu site. A seguir, você descobrirá como tornar outros aspectos do seu branding responsivos com o poder dos temas.

Teste seu conhecimento

Teste seus conhecimentos sobre ícones

O SVG pode lidar com qualquer densidade de pixel com um único arquivo ou bloco de código <svg>.

Falso
Verdadeiro

O código SVG diretamente no HTML tem quais vantagens?

Estilo com base em CSS
Tem tema claro ou escuro sem um novo recurso.
Carregamento lento por padrão.
Menos uso de CPU.
Não é necessário fazer download.