Í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 interface é dimensionado e adaptado.

elementos gráficos vetoriais escaláveis

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

PNGs e SVGs são bons em lidar com áreas de cor plana e ambos permitem que suas imagens tenham planos de fundo transparentes. Se você usar um PNG, provavelmente vai ser necessário 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 em bitmap. As imagens de 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. O melhor de tudo é que essas instruções são relativas. Independentemente 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 criar 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 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 do 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, será uma solicitação a menos que o navegador precisará fazer. Não será necessário aguardar o download da imagem, porque ela chega com o HTML... no HTML. Além disso, como você descobrirá em breve, incorporar SVGs como esse também dá a você mais controle sobre a estilização 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 é 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 o CSS é para apresentação, você pode colocar o ícone no 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ê inserir 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 deles fique claro. Você pode usar um ícone sem texto, mas não presuma que todos entendem o significado de um ícone específico. Na dúvida, teste com usuários reais.

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

Se você usar um elemento img, o ícone terá 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 no HTML, use o atributo aria-label no link ou no botão para dar 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>

Como definir o estilo de ícones

Se você incorporar os ícones SVG diretamente ao HTML, poderá estilizar partes deles como qualquer outro elemento da página. Não é possível fazer isso se você usar um elemento img para mostrar os ícones.

No exemplo abaixo, 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

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

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

Teste seu conhecimento

Teste seus conhecimentos sobre ícones