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

Elementos gráficos vetoriais escaláveis

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>

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

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

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