Capítulo · 12
Iconografia
Sistema Lucide, biblioteca de 56 ícones e variantes.
Parte II — Identidade Visual · Capítulo 12 · SDARM Brand Book · 2026
Icono- grafia
O sistema de ícones da SDARM — stroke-only, serenos, funcionais. 56 ícones em 8 categorias com biblioteca interativa, busca e cópia de SVG.
- Parte II · Cap. 12
- 56 ícones SVG
- Biblioteca interativa
12.1 — Princípios de iconografia
O que define um
ícone SDARM
Os ícones da SDARM não são decorativos. São funcionais. Cada ícone existe para comunicar uma função, localização ou ação — com clareza imediata, sem explicação adicional.
Clareza imediata Um ícone deve ser reconhecido em 0,3 segundos — o tempo médio que o olho dedica a um elemento antes de decidir se é relevante.
Consistência visual Todos os ícones compartilham o mesmo peso de traço, os mesmos cantos e a mesma lógica de construção. Um conjunto coeso parece uma família.
Neutralidade cultural Em 127 países, um ícone não pode depender de referências culturais locais. O sistema usa metáforas universais — forma, direção, contenção, abertura.
O sistema adota o estilo stroke-only (contorno) com cantos arredondados — sem preenchimentos, sem gradientes, sem sombras. Isso garante funcionamento em qualquer escala, cor de fundo e suporte.
A referência técnica é derivada do padrão Lucide Icons adaptado com os parâmetros SDARM: stroke-width de 1.5px em 20×20px, cantos com stroke-linecap: round e stroke-linejoin: round.
12.2 — Estilo e construção
Stroke-only · grid
e proporções
Cada ícone é construído num grid de 20×20px com área ativa de 16×16px e margem de 2px. Os parâmetros técnicos são fixos — não há variação entre ícones do sistema.
Grid de construção · 20×20px Canvas20 × 20px Área ativa16 × 16px Margem2px (todos os lados) Stroke width1.5px Stroke linecapround Fillnone
16px
Comportamento em escala 24px 32px 48px 64px Sobre diferentes fundos Branco Cream Azul Deep
12.3 — Biblioteca de ícones
56 ícones em 8 categorias —
busca · filtro · copiar SVG
Clique em qualquer ícone para ver detalhes e copiar o SVG. Use a busca e os filtros para encontrar rapidamente o ícone certo.
56 ícones
Ícone selecionado
—
—
Selecione um ícone para ver seus detalhes.
Categoria
— —
Canvas
20 × 20px
Stroke
1.5px · round
Uso recomendado
— —
12.4 — Tamanhos e escala
De 16px a 96px —
quando usar cada tamanho
O tamanho define a função. Um ícone de 16px está no texto. Um de 96px é protagonista da sinalização. Nunca usar escala incorreta para o contexto.
16px Inline no texto · labels · tooltips · metadados Mínimo absoluto
20px Navegação · botões · campos de busca · interface Padrão de interface
32px Posts sociais · features · cabeçalhos de seção Mais usado
48px Sinalização interna · materiais A4 · cartazes Sinalização interna
64px+ Sinalização exterior · placas de porta · banners Sinalização externa
12.5 — Cores e fundos
Combinações aprovadas
de ícone e fundo
Os ícones existem em apenas quatro versões de cor — cada uma aprovada apenas sobre fundos específicos. Não há variações além destas.
Aprovado Azul #0F3999 Sobre branco, cream ou offwhite
Aprovado Branco #FFFFFF Sobre azul ou azul profundo
Aprovado Dourado #EFD19F Somente sobre azul profundo
Apenas disabled Cinza #6D6963 Somente estados inativos
12.6 — Ícones de sinalização
Sistema para igrejas —
18 ícones de uso obrigatório
Subconjunto de 18 ícones com tamanho mínimo de 48px, sempre acompanhado de texto em Noto Sans Medium 14pt ou maior. Fundo padrão: azul #0F3999.
Entrada
Saída
Banheiros
Estacionam.
Acessibilid.
12.7 — Uso correto e incorreto
O que nunca fazer
com os ícones
Os erros mais comuns vêm de tentativas de personalização local — que destroem a consistência sem agregar valor.
Correto
IgrejaCor oficial · stroke padrão · com label Ícone Lucide oficial, cor aprovada (#0F3999), acompanhado de texto, tamanho adequado para o contexto de uso.
Proibido
Mesma igrejaCor errada · sombra · sem label Cor não aprovada, sombra adicionada, sem texto de suporte. Três violações simultâneas do sistema.
Correto — fundo azul
RecepçãoÍcone branco sobre azul Sobre fundo azul, o ícone sempre é branco. Nunca azul sobre azul — contraste insuficiente para acessibilidade.
Proibido — emoji
🏛️ Emoji como íconeSubstituição inaceitável Emojis nunca substituem ícones do sistema em materiais institucionais — em nenhum contexto publicado.
12.8 — Produção e exportação
Lucide Icons — licença · formatos
e otimização
O sistema SDARM usa Lucide Icons como biblioteca oficial. Licença MIT — gratuita para uso comercial, institucional e editorial, sem restrições.
Licença MIT License — uso gratuito em qualquer projeto, incluindo materiais comerciais e institucionais da Igreja. Não requer atribuição em materiais finais. lucide.dev · github.com/lucide-icons/lucide
Para web e HTML Via CDN ou npm. Em HTML, usar a tag <i data-lucide="nome"></i> com o script Lucide carregado. lucide.createIcons();
Para Figma e Illustrator Baixar SVGs individuais em lucide.dev ou instalar o plugin oficial Lucide no Figma. Cada ícone é um SVG limpo com stroke editável. Plugin Figma: "Lucide Icons" · gratuito na Figma Community
Catálogo
Igreja
Identificação de edifício de igreja ou local de culto.
- uso
- Sinalização exterior · mapas · materiais de evangelismo
Bíblia
Estudo bíblico, leitura devocional e catequese.
- uso
- Escola sabatina · materiais de estudo · apps
Oração
Momento de oração, devoção pessoal ou coletiva.
- id
- hands-praying
- uso
- Sala de oração · sinalização · materiais devocionais