O que faz um conjunto de ícones parecer um conjunto?
Ícones combinam quando compartilham uma grade, uma espessura de traço, o tratamento dos cantos, um nível de detalhe e uma paleta. Misturar ícones de pacotes diferentes, ou gerá-los um prompt de cada vez, costuma quebrar pelo menos uma dessas coisas. O gerador de conjuntos de ícones desenha todos os ícones de um conjunto numa só folha, a partir de uma só descrição do estilo, então as decisões de desenho são tomadas uma vez para todos. Depois, cada ícone é recortado e traçado no próprio SVG.
Três dos nossos conjuntos de exemplo, cada um a partir de uma lista: um app de cafeteria em Linha, um app de exercícios em Preenchido com cantos retos e um app de viagem em Cor chapada com três cores.
Como eu crio um conjunto?
Abra o gerador de logo com IA e escolha Ícones. O título do estúdio muda para o gerador de conjuntos de ícones.
- Liste os ícones. Digite as coisas de que você precisa, separadas por vírgulas ou uma por linha:
xícara de café, croissant, pin de mapa, cartão fidelidade. Cada uma vira um chip. Um conjunto comporta até 25 ícones. - Escolha como eles são desenhados. Linha são contornos com uma só espessura, Preenchido são formas sólidas numa cor, Cor chapada são formas sólidas em até três cores, e Como esta imagem segue o visual de uma imagem que você enviar (com login) ou de um logo ou conjunto de ícones que você já criou.
- Escolha os cantos. Arredondado ou Reto.
- Descreva o estilo em palavras, se quiser. Até 300 caracteres, por exemplo "simpático e minimalista, pontas arredondadas, um toque de feito à mão". Essa frase entra no desenho de todos os ícones do conjunto.
- Envie. Cada bloco mostra o ícone sendo traçado e depois o SVG pronto.
O preço de um conjunto novo aparece no botão antes de você enviar; nada é cobrado por um conjunto que falha.
Como eu corrijo um ícone sem redesenhar o resto?
Use uma rodada. Numa rodada você pode refazer ícones com uma observação ("um tapetinho enrolado simples, sem textura") e adicionar ícones novos, até nove alterações de cada vez. Os ícones refeitos e adicionados são desenhados no estilo do conjunto, então continuam combinando. As primeiras rodadas de um conjunto estão incluídas; quando uma rodada custa créditos, o botão dela avisa antes de você começar.
Se só um detalhe estiver fora do lugar e redesenhar for exagero, abra o ícone no editor de SVG e mude o caminho ou a cor direto.
O que vem no download?
O ZIP tem três partes:
| Pasta | O que contém |
|---|---|
svg/ |
um SVG por ícone, viewBox="0 0 24 24" com 2 px de margem |
png/ |
cada ícone como PNG transparente em 16, 24, 32, 48, 64, 128, 256 e 512 px |
sprite.svg |
todos os ícones como <symbol> com o id icon-NAME |
Os PNGs pequenos (até 48 px) são desenhados no próprio tamanho, então as linhas caem em pixels inteiros em vez de serem reduzidas de uma imagem grande. Os tamanhos maiores são redimensionados a partir de 512 px.
Como eu uso os ícones num site?
Num conjunto em Linha ou Preenchido, os SVGs são desenhados em currentColor, então o ícone assume a cor do texto ao redor. Você muda a cor com CSS, em vez de editar arquivos:
<button class="icon-button">
<svg width="24" height="24" aria-hidden="true"><use href="sprite.svg#icon-cup-of-coffee"/></svg>
Order
</button>
.icon-button { color: #6b3f24; }
.icon-button:hover { color: #1f2937; }
Escolha Como foi desenhado na janela de download se preferir a cor gravada em cada arquivo. Um conjunto em Cor chapada sempre mantém as próprias cores. Marque ícones decorativos com aria-hidden="true" e dê um nome acessível a um ícone que funciona sozinho como botão.
Que tipo de lista funciona melhor?
Substantivos concretos, que dá para desenhar, funcionam melhor: "bicicleta", "cronômetro", "fechadura". Palavras abstratas ("crescimento", "confiança") não dão ao gerador nada específico para desenhar, então transforme-as primeiro num objeto ("um broto", "um aperto de mão"). Mantenha um mesmo nível de detalhe na lista toda. Um conjunto que mistura "ponto" com "horizonte de uma cidade" vai ficar irregular, seja qual for o desenho.
Antes de publicar, confira cada ícone em 16 e 24 px ao lado de texto, confira o contraste com os seus fundos e confirme que ícones parecidos continuam diferentes entre si. Um gerador não verifica se um ícone se parece com a marca de outra pessoa, então revise qualquer ícone que você pretenda registrar como marca.