Como criar um ícone quando nenhum serve: o caso da LGPD
Você já passou horas procurando um ícone que represente uma função do seu projeto e terminou com uns cinco candidatos, cada um com algo que falta no outro? Foi o que aconteceu comigo ao procurar um ícone para uma ferramenta de LGPD. Este texto conta o caminho até um resultado que me deixou satisfeito, e o que aprendi sobre ícones no processo.
O problema
Desenvolvi uma ferramenta que localiza e classifica atributos em bancos de dados de diferentes SGBDs, em conformidade com a LGPD (Lei Geral de Proteção de Dados). Ela percorre tabelas e colunas, faz uma amostragem aleatória de mil registros, identifica onde há dados pessoais e classifica o nível de criticidade de cada um. Faltava apenas um ícone para ela — e parecia uma tarefa de cinco minutos.
Para minha surpresa, não foram cinco minutos. Pesquisei diversas referências, explorei associações de palavras, imagens e símbolos, mas nada me convencia de que havia encontrado a solução ideal. Testei várias abordagens e tentei juntar ideias, mas as bibliotecas de ícones costumam desenhar um único conceito por vez. Estes eram os candidatos mais próximos:
- database-search (Lucide)
- database-lock (Bootstrap)
- shield-user (Lucide)
- tags (Lucide)
- scale (Lucide)
| Ideia | Candidato | O que falta |
|---|---|---|
| Busca em banco de dados | database-search | Não diz que são dados pessoais |
| Banco de dados protegido | database-lock | Não mostra a busca nem a classificação |
| Pessoa protegida | shield-user | Não diz que é um banco de dados e lembra segurança de conta |
| Classificação | tags | Sozinho, não diz nada sobre privacidade |
| Lei | scale | Parece “jurídico” em geral |
Cada candidato acertava uma parte. Nenhum dizia, ao mesmo tempo, que se trata de dados pessoais, de proteção e de uma lei brasileira.
Primeira tentativa: combinar formas
Criei duas versões no editor da Icon Library, as duas partindo de um escudo:
- Escudo, pessoa, linhas e ✓
- Escudo e pessoa no círculo
A primeira conta bem a história em 48 px: dados pessoais verificados. Em 16 e 24 px, porém, as linhas e o ✓ viram um borrão. A segunda continua legível pequena, mas fica genérica, porque poderia representar a segurança de uma conta ou um login.
Foi a primeira lição: um ícone cheio de detalhes precisa de uma versão simplificada, e o ícone que funciona em qualquer tamanho quase sempre diz menos.
Mudando a pergunta
Até ali eu procurava um desenho para o que a ferramenta faz. A virada foi perguntar o que a LGPD protege: a pessoa. Daí veio a ideia da pessoa-fechadura, em que a cabeça e o corpo de alguém formam o buraco de uma fechadura. O dado pessoal é a própria pessoa, e ele está guardado.
- Pessoa-fechadura
- Na bolha de privacidade
Nessa etapa usei um assistente de IA (Claude Opus 5.5) para gerar variações e compará-las lado a lado em vários tamanhos e nos dois temas. Ver dez propostas na mesma tela, de 16 a 96 px, ajudou a descartar rápido o que só funcionava grande. Os desenhos seguem as regras do Lucide: grade de 24, traço de 2 unidades, pontas arredondadas e 2 px de margem, para não parecerem maiores que os ícones ao lado.
A palavra do assistente. André me convidou a comentar a minha parte, então aqui vai. Gerei alternativas rápido, mostrei todas lado a lado nos tamanhos e temas reais e cuidei de detalhes técnicos: simplificar o mapa, corrigir o traço que saía do quadro e abrir o furo do globo pelo sentido do desenho. A pessoa-fechadura surgiu numa dessas rodadas.
As decisões que deram identidade ao ícone foram dele: trazer o Brasil para o desenho, juntar o mapa ao losango, preencher a bandeira e criar a versão colorida. Ele também deixou de lado propostas que eu tinha recomendado, e o resultado ficou melhor por isso. Na minha visão, é assim que esse tipo de ferramenta ajuda mais: acelera a exploração, mas o critério continua com quem conhece o projeto.
— Claude Opus 5.5, assistente de IA da Anthropic
Trazendo o Brasil para o desenho
A LGPD é uma lei brasileira, e eu queria que isso aparecesse. O contorno do mapa veio dos dados do Natural Earth, que são de domínio público. O contorno original tem 1.648 pontos. Simplificado com o algoritmo de Douglas-Peucker, ficou com 20, o suficiente para reconhecer o Brasil em 16 px sem que o traço fique serrilhado.
- Mapa com 20 pontos
- Mapa e pessoa-fechadura
- Losango e globo
O losango e o globo lembram a bandeira, com a pessoa-fechadura no lugar da faixa. No fim juntei os dois: o mapa ao fundo e o losango na frente. A decisão que mais pesou foi preencher o losango. Em contorno, losango, globo e fechadura viravam três linhas encostadas em 24 px. Com a área cheia e o globo vazado, o conjunto continua claro até em 16 px.
Uma família de três versões
Um ícone só não serve para tudo. Fiquei com três versões em preto, que acompanham a cor do texto, e uma colorida:
- Selo
- Contorno
- Mínimo
- Colorida
| Versão | Onde usar |
|---|---|
| Selo | Logo, cabeçalho, selo de conformidade e impressão em uma cor |
| Contorno | Menus e botões, ao lado de ícones do Lucide ou do Feather |
| Mínimo | Favicon, aba do navegador e qualquer lugar em 16 px |
| Colorida | Apresentações e a página da própria ferramenta |
Nos tamanhos reais, de 16 a 48 px, o selo e o mínimo ficam assim:
O que aprendi no caminho
- Teste nos tamanhos reais. Um ícone bonito em 96 px pode virar um borrão em 16. Olhe sempre em 16, 24 e 48 px, nos temas claro e escuro.
- Respeite a margem do conjunto. Os ícones do Lucide deixam cerca de 2 px livres em volta. Meu primeiro mapa ia até a borda: além de parecer maior que os vizinhos, metade do traço ficava fora do quadro.
- Use traços diferentes de propósito. Contorno externo com 2 px e detalhes internos com 1,5 px funcionam bem, desde que a diferença pareça intencional.
-
Furos dependem do sentido do desenho. Para vazar o globo dentro
do losango preenchido, o círculo é desenhado no sentido contrário ao do
losango. Com a regra de preenchimento padrão do SVG (
nonzero), isso abre o furo sem nenhum atributo extra. - Cuidado com símbolos nacionais. A Lei 5.700/1971 regula o uso da bandeira e proíbe alterá-la. O ícone é uma referência estilizada às formas e cores, não a bandeira, e por isso evitei a faixa "Ordem e Progresso". Para registrar um desenho assim como marca, vale consultar um especialista.
Como fazer o mesmo na Icon Library
- Procure o ícone mais próximo da ideia e clique no lápis para abrir o editor.
- Use Ícone por cima para trazer um segundo ícone e ajuste o tamanho e a posição.
- Selecione as formas que andam juntas e use Agrupar. Ver camadas mostra cada forma numa cor.
- Para uma área cheia, feche a linha com Unir e use Preencher.
- Use Copiar SVG, ou publique o ícone para que outras pessoas o encontrem.
O código das três versões
Estes são os SVGs que uso hoje, para quem quiser estudar como foram montados.
Selo
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6.88 10.9L5.83 9.15L3.52 10.82L2.07 9.85L1.27 8.1L3.41 6.32L3.47 3.01L5.07 3.27L8.4 1.08L9.35 3.29L13.17 1.16L13.65 3.1L12.66 4.8L15.54 4.3L22.34 7.44L19.45 16.13L15.59 18.54L12.27 22.52L10.28 20.47L11.53 18.65L11.05 17.23" stroke-width="1.75"/><path d="M12.19 4.54L19.47 11.81L12.19 19.08L4.69 12ZM16.97 11.71a4.78 4.78 0 1 0-9.56 0a4.78 4.78 0 1 0 9.56 0Z" stroke-width="1.5" fill="currentColor"/><path d="M11.63 11.67A1.25 1.25 0 1 1 12.75 11.67L13.38 13.85H11Z" stroke-width="1" fill="currentColor"/></svg>Contorno
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6.88 10.9L5.83 9.15L3.52 10.82L2.07 9.85L1.27 8.1L3.41 6.32L3.47 3.01L5.07 3.27L8.4 1.08L9.35 3.29L13.17 1.16L13.65 3.1L12.66 4.8L15.54 4.3L22.34 7.44L19.45 16.13L15.59 18.54L12.27 22.52L10.28 20.47L11.53 18.65L11.05 17.23" stroke-width="1.75"/><path d="M12.19 4.54L19.47 11.81L12.19 19.08L4.69 12Z" stroke-width="1.5"/><path d="M11.49 11.88A1.55 1.55 0 1 1 12.89 11.88L13.66 14.6H10.72Z" stroke-width="1.5"/></svg>Mínimo
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1.5L22.5 12L12 22.5L1.5 12ZM18.2 12a6.2 6.2 0 1 0-12.4 0a6.2 6.2 0 1 0 12.4 0Z" stroke-width="1.5" fill="currentColor"/><path d="M11.21 12.36A1.75 1.75 0 1 1 12.79 12.36L13.66 15.43H10.34Z" stroke-width="1" fill="currentColor"/></svg>