Como escolher uma coleção de ícones para o seu projeto

Uma coleção de ícones consistente faz uma interface parecer projetada; uma mistura de três coleções faz ela parecer montada às pressas. Com centenas de coleções gratuitas disponíveis, o desafio não é encontrar ícones, e sim achar a coleção que cobre suas necessidades, combina com seu estilo e tem uma licença que você pode aceitar. Veja um jeito rápido de decidir.

1. Confira primeiro a cobertura

Liste os 15 a 20 ícones de que seu produto mais precisa (início, busca, configurações, usuário, upload, lixeira, editar, fechar, chevrons, alertas…) e mais alguns específicos da sua área, como fatura, estetoscópio ou branch do git. Depois procure cada um na coleção candidata. Uma coleção sem dois dos seus ícones principais vai obrigar você a misturar outra mais tarde, e ícones que não combinam são a inconsistência visual mais comum em interfaces.

O tamanho ajuda, mas não é tudo: Material Design Icons tem 7.447 ícones e Fluent UI System Icons tem 19.850, enquanto Heroicons tem 1.288 cuidadosamente escolhidos. Para um site de marketing, uma coleção pequena pode bastar; para um painel complexo, você vai valorizar a profundidade.

2. Escolha um estilo: contorno, preenchido ou duotone

• Ícones de contorno (traço) parecem leves e modernos e servem para a maioria das interfaces. Exemplos: Lucide, Tabler Icons.
• Ícones preenchidos (sólidos) são mais legíveis em tamanhos pequenos e em estados ativos. Exemplos: Material Design Icons, Bootstrap Icons (que também tem versões de contorno).
• Coleções com várias espessuras permitem usar contorno no estado inativo e preenchido no selecionado, sem trocar de família. Phosphor tem seis espessuras, de fina a duotone. Material Symbols oferece estilos contornado, arredondado e reto. Heroicons e Fluent combinam contorno e preenchido.
• Ícones multicoloridos dão personalidade a ilustrações, telas de onboarding e estados vazios, mas são mais difíceis de adaptar a temas. Veja os ícones de interface multicoloridos.

Combine o estilo dos ícones com a tipografia. Traços finos combinam com fontes leves e geométricas, e ícones mais pesados, com textos de interface em negrito.

3. Ajuste a grade e a espessura do traço

Ícones são desenhados em uma grade, quase sempre de 24×24 pixels. Eles ficam mais nítidos no tamanho da grade ou em um múltiplo dela, então escolha uma coleção feita para o tamanho que você realmente usa:

• Coleções UI de 24px servem para botões, menus e navegação, o caso mais comum.
• Coleções de 16px e 32px servem, respectivamente, para ferramentas densas e para áreas de toque grandes.

A página de cada coleção mostra o tamanho da grade. Se você combina ícones com texto, confira também a espessura do traço: um traço de 1,5px ao lado de texto com peso normal fica equilibrado, e um de 2px combina com texto médio ou em negrito.

4. Confira a licença

A maioria das coleções permite uso comercial, mas as condições variam. MIT, ISC e Apache 2.0 só pedem que você inclua o texto da licença, enquanto a CC BY exige um crédito visível. Algumas poucas coleções proíbem totalmente o uso comercial. Cada página de categoria tem uma tabela de licenças, e o guia de licenças de ícones explica cada uma.

5. Prefira coleções com manutenção

Uma coleção com manutenção ativa ganha ícones novos conforme surgem necessidades (novas marcas, novos padrões de interface) e correções nos existentes. Coleções da categoria arquivo sem manutenção continuam funcionando, mas você estará por conta própria quando precisar de um ícone novo. Veja também o ecossistema: coleções populares têm pacotes oficiais para React, Vue e outros frameworks, além de arquivos de design para o Figma.

Recomendações por caso de uso

Ainda em dúvida? Abra duas candidatas lado a lado, procure nas duas seus dez ícones mais importantes e coloque-os em uma tela real do seu produto. A melhor escolha costuma ficar clara em poucos minutos. Quando decidir, o guia de uso de ícones SVG mostra como adicioná-los em HTML, React ou Vue.