Copiado ✓
Parte II — Identidade Visual · Capítulo 12
SDARM Brand Book · 2026
12
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
Neste capítulo
12.1
Princípios
O que define um ícone SDARM
12.2
Estilo e construção
Stroke-only · grid · proporções
12.3
Biblioteca interativa
56 ícones · busca · filtro · copiar SVG
12.4
Tamanhos e escala
De 16px a 96px
12.5
Cores e fundos
Combinações aprovadas
12.6
Sinalização
18 ícones para igrejas
12.7
Uso correto e incorreto
O que nunca fazer
12.8
Produção e exportação
SVG · PNG · PDF
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.

Ícones vs. emoji
Emojis nunca são usados em materiais institucionais — em nenhum contexto. Ícones SVG do sistema oficial substituem qualquer emoji em posts, banners, documentos e sinalização. A única exceção é em comunicações informais de grupos internos — nunca em material publicado.
Seção 12.1 · Princípios de iconografia
"Cinematic close-up of minimal line icons printed on cream paper sheets on a desk, pencil sketches beside them, warm window light, film grain, low saturation, no text visible, 4:3"
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
Comportamento em escala
16px
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
Seção 12.3 · Biblioteca de ícones
"Documentary overhead photo of printed icon sheets arranged in a neat grid on a wooden table, hands sorting them, modest long sleeves, warm light, film grain, low saturation, no text visible, 16:9"
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
Stroke-width em escala
O Lucide Icons usa stroke-width="2" no viewBox 24x24px. Ao escalar via CSS width/height, o stroke escala proporcionalmente — não é necessário recriar o ícone. Para impressão offset acima de 100mm, o traço já tem espessura suficiente.
Seção 12.4 · Tamanhos e escala
"Close-up of a printed sheet showing the same simple line icon at increasing sizes, ruler beside it, warm side light, shallow depth of field, film grain, low saturation, no text visible, 4:5"
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
Nenhuma outra cor
Os ícones nunca aparecem em outras cores da paleta — nem nas cores departamentais, nem verde ou vermelho, exceto em contextos editoriais de correto/incorreto. Ícones regulatórios de emergência seguem norma local — única exceção permitida.
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.
Auditório
Esc. Sabatina
Crianças
Jovens
Recepção
Secretaria
Cantina
Sala Oração
Biblioteca
Primeiros S.
Wi-Fi
Pastório
Localização
Regra de sinalização
Em sinalização de igreja, o ícone nunca aparece sozinho — sempre acompanhado de texto em Noto Sans Medium 14pt mínimo. Padrão: fundo azul #0F3999 com ícone e texto brancos. Alternativa aprovada: fundo branco com ícone azul e texto azul profundo.
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
Igreja
Cor oficial · stroke padrão · com label
Ícone Lucide oficial, cor aprovada (#0F3999), acompanhado de texto, tamanho adequado para o contexto de uso.
Proibido
Mesma igreja
Cor 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 ícone
Substituição inaceitável
Emojis nunca substituem ícones do sistema em materiais institucionais — em nenhum contexto publicado.
Correto — tamanho inline
Culto aos sábados às 9h
16px inline no texto — o ícone acompanha o texto sem dominar, na mesma altura de linha.
Proibido — escala errada
Culto aos sábados às 9h
Ícone de sinalização (48px) no meio de texto corrido. Escala incorreta — interrompe a leitura e quebra a hierarquia visual.
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
Parâmetros de ajuste para SDARM
Os ícones Lucide usam stroke-width="2" por padrão em viewBox 24×24px. Para aplicações da SDARM, reduzir para stroke-width="1.5" mantém o traço mais leve e elegante, coerente com o tom visual da marca. Em Figma, selecionar o componente e ajustar o stroke no painel de propriedades. Em CSS: stroke-width: 1.5 aplicado ao elemento ou via classe global.
Ícones são o silêncio
entre as palavras.
Função, não decoração
Cada ícone resolve um problema de comunicação. Se não está servindo a uma função clara — informar, direcionar, categorizar — ele não deve estar na peça.
Consistência global
Os mesmos ícones Lucide em São Paulo, Lagos e Berlim. A consistência iconográfica é o que faz um sistema parecer pensado — e não assemblado de fontes diferentes.
Stroke como identidade
O traço stroke-only da Lucide garante funcionamento em qualquer escala, cor e suporte — sem exceção. 1.400+ ícones com o mesmo padrão visual rigoroso.
Nota do Brand Manager
"Um conjunto de ícones bem feito é invisível — o usuário simplesmente entende. Quando alguém precisa parar para interpretar um ícone, o sistema falhou. Com a Lucide, temos 1.400 ícones profissionais, gratuitos, com o mesmo DNA visual — prontos para uso imediato em qualquer suporte."
Hugo Cibalde
Brand Manager
Seventh Day Adventist Reform Movement
General Conference · 2026
← Cap. 11 — Fotografia
Próximo capítulo
13 — Padrões & Texturas →
SDARM Brand Book · Cap. 12 · Parte II — Identidade Visual · 2026