Fontes de Ícone 101

Fontes de ícone são tipos de letra nos quais os glifos — normalmente letras e números — são substituídos por símbolos pictográficos. Em vez de renderizar a letra "A", uma fonte de ícone renderiza um ícone de casa, uma lupa de busca ou um carrinho de compras.

Como os ícones ficam dentro de um arquivo de fonte, eles se comportam exatamente como texto. Você pode dimensioná-los para qualquer tamanho com font-size, alterar sua cor com color, adicionar sombras de texto, aplicar transições CSS e até animá-los — tudo sem tocar em um único arquivo de imagem.

Essa abordagem oferece vários benefícios práticos:

• Independência de resolução — os contornos vetoriais escalam nitidamente em qualquer densidade de tela
• Carga pequena — um arquivo de fonte comprimido substitui dezenas de ativos de imagem individuais
• Controle CSS — cor, tamanho, sombra, opacidade e estados de hover vêm gratuitamente com o estilo de texto
• Requisição HTTP única — todo o conjunto de ícones carrega em uma única viagem de rede

Na web primitiva, os desenvolvedores dependiam de imagens individuais ou sprites de imagem CSS — grandes imagens compostas onde cada ícone ocupava uma região retangular fixa. Os sprites reduziam as requisições HTTP, mas eram frágeis: adicionar ou redimensionar um ícone significava regenerar toda a folha de sprite e atualizar manualmente os deslocamentos de pixel.

Por volta de 2012, projetos como Font Awesome e IcoMoon popularizaram uma alternativa mais limpa: empacotar ícones como glifos de fonte mapeados para a Área de Uso Privado do Unicode. Os designers podiam trocar um conjunto inteiro de ícones alterando apenas uma declaração @font-face, e os desenvolvedores podiam estilizar ícones com o mesmo CSS que já usavam para texto. A técnica se espalhou rapidamente e continua sendo uma escolha confiável e de baixa sobrecarga para sistemas de design que usam iconografia monocromática.

O debate "fontes de ícone vs SVG inline" tem sido um tema recorrente nas discussões de front-end por mais de uma década. Ambas as abordagens são válidas — a escolha certa depende dos requisitos do seu projeto.

Fontes de Ícone

• Requisição HTTP única — um arquivo de fonte entrega todos os ícones
• Estilo CSS muito simples — mude color, font-size e text-shadow como qualquer texto
• Apenas monocromático — cada glifo suporta uma única cor de preenchimento
• Fácil de adicionar — adicione um link de folha de estilos, use uma classe CSS, pronto

SVG Inline

• Multicor — cada caminho pode ter seu próprio fill, stroke ou gradiente
• Acessível por padrão — <title> e aria-label fornecem semântica real para leitores de tela
• Cacheável individualmente — ícones não utilizados nunca são baixados
• Controle granular — anime caminhos individuais, aplique filtros por elemento

Sprites SVG

• Combine múltiplos SVGs em uma única folha de sprite <symbol>
• Referência ícones com <use href="#icon-name">
• Oferece os benefícios de ambos — requisição única, multicor, acessível — mas requer um pipeline de compilação mais elaborado

As fontes de ícone podem ser empacotadas em cinco formatos de arquivo, cada um com compressão, suporte de navegadores e casos de uso diferentes. Veja como eles se comparam de relance:

Não sabe quais formatos incluir? Use este guia de decisão prático:

• Se você escolher apenas um — envie WOFF2. Ele oferece a melhor compressão (Brotli) e cobre 97%+ dos navegadores.
• Se você precisar de suporte ao IE 11 — envie WOFF2 + WOFF. O WOFF lida com os navegadores restantes que não possuem decodificação Brotli.
• Se você precisar de suporte ao IE 8 — envie WOFF2 + WOFF + EOT. O EOT é o único formato compreendido pelo Internet Explorer 6-8.
• Para aplicativos desktop — use TTF. É o formato nativo para renderização de fontes no sistema operacional no Windows, macOS e Linux.
• Para depurar problemas de fonte — inspecione a SVG Font. Sua estrutura XML é legível por humanos, tornando fácil verificar caminhos de glifos e metadados.

Aprofunde-se em cada formato para entender seus aspectos internos, compatibilidade com navegadores e boas práticas:

Aprenda a usar esses formatos em seus projetos: