Projetar uma linguagem de ícones e ilustração

Um ícone Lucide ao lado de uma engrenagem de outra família denuncia um site montado às pressas em três segundos de olhar. Uma família de ícones só, uma ilustração na paleta exata da marca e a fonte servida do próprio site separam esse site de uma marca reconhecível.

Quem monta o cabeçalho e o estado vazio do produto ganha o pedido certo para as três peças e o fluxo de licença que evita retirada de imagem.

O Lucide oferece ícones em SVG com licença ISC, e parte do acervo derivado do Feather também traz aviso MIT. Preserve os avisos de licença na distribuição. A interface não precisa exibir um crédito em cada botão. Controle tamanho, espessura e cor com size, strokeWidth e color.

As duas regras do hub de design: uma família por projeto, e cor por token ou por currentColor, nunca hexadecimal fixo. Token é o valor guardado com nome, como a etiqueta na lata de tinta. currentColor é a cor herdada do texto ao redor, e resolve o passar do mouse e o desabilitado sem variável extra.

#1a1a1a cravado vira preto sobre preto no tema escuro, e quem revisa só no claro nunca vê. Troque de família só por identidade, e troque inteira: Phosphor com seis pesos, Heroicons, Tabler, Material Symbols em fonte variável, Radix Icons, Iconoir, Remix Icon e Hugeicons. O Iconify agrega mais de 200 conjuntos e entra só para o símbolo que falta.

Sino do Lucide ao lado de engrenagem alheia tem traço e proporção diferentes; a barra parece montada às pressas. O tooltip (a dica que aparece ao passar o mouse) prende-se ao ícone por anchor positioning, visto na aula sobre menu sem script. Peça o ícone com quatro amarras: família, tamanho em pixels, espessura do traço e cor por token.

O laboratório abaixo monta a barra do cabeçalho com cinco ícones do Lucide e um sexto símbolo que a família não tem, entregue pelo Iconify. Mude tamanho e espessura: o símbolo de fora acompanha o traço dos vizinhos, porque o mesmo strokeWidth vale para todos. Troque a cor do texto ao redor e os seis mudam juntos: currentColor em ação.

Quando o Icon do Iconify recebe só o nome de um conjunto público, como mdi:home, ele busca o desenho em api.iconify.design a cada visitante. O símbolo do laboratório foi registrado no build, a montagem do site antes de publicar, com addIcon. O addCollection faz o mesmo a partir de um pacote @iconify-json, e nenhuma chamada a terceiro sai da página.

A auditoria fecha a volta. O botão Auditar nomes acessíveis diz, para cada botão da barra, se há texto visível, aria-label ou nada. Ligue o exemplo de erro e ele aponta o sétimo botão, sem nome de propósito. Ícone ao lado de texto leva aria-hidden; ícone sozinho exige aria-label no botão, e o alvo de toque mede 44 por 44 pixels.

Ilustração vetorial vem de catálogo aberto antes de vir de encomenda. unDraw (licença própria, com cor personalizável) e Storyset, nos estilos Rafiki, Bro, Amico e Pana, cobrem cena e personagem. Humaaans, Open Peeps, Open Doodles, DrawKit, Blush, Ouch! e SVG Repo completam o acervo. DiceBear e Boring Avatars geram avatar por nome, sem foto de terceiro.

O fluxo de licença tem três degraus. O primeiro é o CC0, que dispensa a atribuição de direitos autorais, preservados os outros. Depois vem a atribuição obrigatória, e por fim as proibições de cada catálogo.

Logotipo e revenda são as proibições mais comuns. Guarde o link da licença junto do arquivo; a retirada de imagem chega meses depois, quando ninguém lembra de onde veio.

Fundo e padrão têm gerador próprio: Haikei e BGJar produzem SVG generativo, Hero Patterns e Pattern Monster dão padrão repetido, Shape Divider corta a divisa. Foto vem de Unsplash e Pexels. Para mover a ilustração, LottieFiles tem catálogo e editor, Rive faz peça interativa e SVGator anima um SVG sem código. O critério de movimento fica na aula sobre animação.

Quando o catálogo mais próximo fica a dois tons da paleta, chegou a hora do SVG inline sob medida. O caso típico é o estado vazio, a tela sem dado que todo cliente novo vê primeiro.

Peça a cor por variável em cada caminho do desenho e confira a herança de fill, porque atributo fixo no elemento impede a cor esperada. Peça também role="img" com um <title> que descreva a cena, para quem usa leitor de tela.

A fonte da marca é a terceira peça própria: variável, servida pelo Fontsource com font-display: swap, sem chamada ao Google Fonts, como na aula sobre tokens. Sem o swap, o texto fica invisível enquanto a fonte carrega, e no celular fraco isso dura segundos.

Geração por IA entra para explorar e para o primeiro rascunho. O critério profissional de 2026 pede SVG limpo, consistência de estilo entre as peças do mesmo conjunto e licença comercial clara. Adobe Firefly, integrado ao Illustrator e ao Photoshop, Iconify AI e SVGMaker têm esse perfil. Os termos variam por plano, então leia antes de publicar.

A titularidade varia por plataforma (OpenAI, Midjourney, Firefly), e o vácuo da Lei 9.610 persiste: obra gerada sem autoria humana não tem dono claro no Brasil. Adote o C2PA, os Content Credentials (o selo de procedência gravado no arquivo, como a nota fiscal da imagem), na geração e verifique o selo antes de publicar.

Para uma peça de arte própria, as skills canvas-design e algorithmic-art do repositório anthropics/skills dão dois caminhos. O pôster estático e a arte generativa em p5.js, a biblioteca de desenho por código cuja versão 2.0 vira padrão do editor após agosto de 2026. Servem ao cabeçalho da campanha e à capa do relatório, sem licença de terceiro.

Numa academia com aplicativo de treino, o cabeçalho tem três ícones, agenda, notificações e perfil, pedidos juntos com 20px, strokeWidth de 1,75 e currentColor. O estado vazio de nenhum treino é um SVG inline na cor da marca. A ilustração da página de planos, gerada por IA, só entra depois de o selo C2PA ser conferido.

Peça os ícones do cabeçalho numa frase só, com as quatro amarras juntas. Pedido um a um é o jeito mais fácil de o traço variar sem ninguém perceber. Antes de publicar uma imagem gerada por IA, verifique o Content Credentials e leia a licença do plano. Sem selo ou sem licença comercial, a peça não sobe.

Guia prático: logo oficial, mascote consistente e o "quando não usar" de cada peça

Quando a página cita outra marca, como uma ferramenta integrada, um parceiro ou um meio de pagamento, o agente tende a desenhar um logo parecido. O curso de edição estudado em 07/10/2026 tem uma regra simples: logo de terceiro entra oficial, em SVG, e nunca redesenhado. As origens indicadas são o próprio site da marca (o favicon em SVG ou o logo do cabeçalho), o Wikimedia Commons e o Simple Icons, um acervo com mais de 3.400 ícones de marcas em SVG, com licença CC0 e um aviso legal que pede leitura antes do uso.

O SVG às vezes precisa virar imagem, para um e-mail ou uma prévia de compartilhamento. O material rasteriza no próprio navegador, com escala 2, porque o conversor de imagem comum errava máscara e degradê. Rasterizar no tamanho exato em que a peça aparece, em dobro para telas densas, evita logo borrado.

O mascote tem duas receitas no material. Na primeira, ele é desenhado em código, com uma paleta fixa de quatro cores, e aparece em todo plano, sempre na borda, longe do conteúdo. Na segunda, é gerado por IA a partir de uma imagem de referência, com duas ou três variações para escolher, e a mesma referência volta em toda cena nova. Nos dois casos, a consistência vem de fixar a referência, não de descrever de novo a cada pedido.

Cada peça de identidade do material diz quando não usar: o modelo com mascote não serve quando não há uma ferramenta concreta para mostrar. Nos templates, o descuido aparece no básico: 20 dos 51 não declaram favicon próprio, e os 12 premium usam o ícone padrão do Vite. Nos componentes, o lucide aparece em 338 dos 1.451; nos templates, 34 buscam ícones numa API externa a cada visita.

Aplicar os recursos ao projeto