HomeCasa Guia de estilo de ícones para um design system
Cria o guia de estilo do teu conjunto de ícones: grelha e keylines, espessura do traço, cantos, tamanhos, metáfora para cada ícone, nomenclatura, exportação SVG, acessibilidade e checklist. Pensado para ChatGPT, Claude, Gemini e Microsoft Copilot. Inclui 5 variáveis personalizáveis e pode copiá-lo gratuitamente com um clique.
Intermédio · Texto · Pendente de revisão editorial
Prompt
Atua como designer de ícones e responsável por um design system.
Contexto:
- Produto: {{produto}}
- Personalidade da marca: {{personalidade}}
- Estilo dos ícones: {{estilo}}
- Grelha base: {{grelha}}
- Ícones necessários: {{icones}}
Entregáveis:
1. 3 a 5 princípios de estilo derivados da personalidade da marca, com exemplos de aplicação.
2. Grelha e keylines: tamanho da área de trabalho, área ativa, margem de segurança e formas-guia (círculo, quadrado, retângulos vertical e horizontal) com medidas.
3. Regras de construção: espessura do traço, raio dos cantos, terminações, ângulos permitidos, tratamento de espaços e detalhe mínimo.
4. Tamanhos de utilização (por exemplo 16, 20, 24, 32) e quando é necessária uma versão ajustada oticamente.
5. Tabela de metáforas para cada ícone pedido: metáfora proposta, alternativa, risco de ambiguidade ou diferenças culturais e se deve ir sempre acompanhado de texto.
6. Nomenclatura de ficheiros e componentes e regras de exportação SVG: viewBox, sem preenchimentos fixos (currentColor), traços convertidos ou não conforme o caso, otimização.
7. Acessibilidade: ícones decorativos versus informativos, aria-hidden, nome acessível em botões só com ícone, contraste mínimo de 3:1 e área de toque de 44-48 px independentemente do tamanho do ícone.
8. Checklist de revisão antes de acrescentar um novo ícone ao conjunto.
Restrições:
- Não copies nem imites conjuntos de ícones de terceiros; se sugerires partir de uma biblioteca open source, lembra-me de verificar a licença.
- Usa [PREENCHER] para decisões de marca que não estejam no contexto.
- Se a lista de ícones for ambígua, pergunta-me que ação representa cada um antes de propor metáforas.
Formato: guia com títulos, tabelas de medidas e de metáforas e checklist final.Como utilizar
- Enumera os ícones de que precisas com a ação ou o conceito que representam. 2. Valida a tabela de metáforas com utilizadores ou com a equipa de produto. 3. Cria um modelo de grelha na tua ferramenta de design com as medidas propostas.
Exemplo de utilização
Produto: app bancária · Personalidade: fiável e próxima · Estilo: contorno com preenchimento no estado ativo · Grelha: 24 px · Ícones: transferência, cartão, MB WAY, alertas.
Exemplo de resultado
Princípios de estilo
- Fiável: formas geométricas estáveis, sem traços inclinados desnecessários.
- Próxima: cantos arredondados de 2 px e terminais redondos.
- Simples: no máximo três elementos por ícone; se precisar de mais, a metáfora não funciona.
Grelha e construção (24 px)
| Elemento | Medida |
|---|---|
| Tela | 24 × 24 px |
| Área útil | 20 × 20 px (2 px de margem) |
| Círculo-guia | Ø 20 px |
| Quadrado-guia | 18 × 18 px |
| Traço | 1,5 px, terminais redondos |
| Raio dos cantos | 2 px |
| Estado ativo | Mesmo desenho com preenchimento sólido |
Tabela de metáforas
| Ícone | Metáfora | Alternativa | Risco | Sempre com etiqueta? |
|---|---|---|---|---|
| Início | Casa | Grelha | Baixo | Sim, na barra inferior |
| Transferência | Duas setas opostas | Seta para uma pessoa | Pode ler-se como «trocar» | Sim |
| Pagamentos com o telemóvel | Telemóvel com ondas | Mão com telemóvel | Ondas = Wi-Fi | Sim |
| Poupança | Mealheiro | Moeda com seta para cima | Mealheiro pouco universal | Sim |
| Alertas | Sino | — | Baixo | Botão só com ícone: nome acessível |
Exportação SVG
viewBox="0 0 24 24", sem preenchimentos fixos:stroke="currentColor".- Nomes de ficheiro:
icon-transfer-outline.svg/icon-transfer-filled.svg…
Dados-chave
- Categoria
- Design UI/UX · Design systems
- Tipo de resultado
- Texto
- Nível
- Intermédio
- Pensado para
- ChatGPT, Claude, Gemini e Microsoft Copilot
- Verificado em
- Pendente de verificação editorial
- Variáveis
- Produto, Personalidade da marca, Estilo dos ícones, Grelha base e Ícones necessários
- Idioma
- Português
- Preço
- Gratuito, sem registo
- Atualizado
- 07/11/2026
Perguntas frequentes
Que tamanho de grelha usar em ícones de interface?
A grelha de 24 px é a mais comum em interfaces, com versões de 16 ou 20 px para zonas densas. O importante é manter a mesma espessura aparente do traço em todos os tamanhos.
Os ícones precisam sempre de texto?
Nem sempre, mas os ícones menos universais devem ser acompanhados de uma etiqueta. Botões só com ícone precisam, no mínimo, de um nome acessível para leitores de ecrã.
Para que serve este prompt?
Cria o guia de estilo do teu conjunto de ícones: grelha e keylines, espessura do traço, cantos, tamanhos, metáfora para cada ícone, nomenclatura, exportação SVG, acessibilidade e checklist.
Com que ferramentas de IA funciona?
Foi pensado para ChatGPT, Claude, Gemini e Microsoft Copilot. Ainda não o verificámos nestas ferramentas, pelo que os resultados podem variar entre elas.
Como personalizo o prompt?
Clique em “Personalizar” e preencha as variáveis (Produto, Personalidade da marca, Estilo dos ícones, Grelha base e Ícones necessários). O texto atualiza-se instantaneamente e pode depois copiá-lo com um clique. Os valores ficam guardados apenas no seu navegador.
Preciso de experiência para o utilizar?
É de nível intermédio: convém conhecer o tema para fornecer bom contexto e rever o resultado com sentido crítico.
Este prompt é gratuito?
Sim. Todos os prompts do HomeCasa Prompts são gratuitos, sem registo nem subscrição. Pode também utilizá-los em projetos profissionais.
Posso confiar no resultado da IA?
Trate-o como um rascunho de qualidade: verifique sempre os dados, os números e as afirmações importantes antes de publicar ou tomar decisões.