Iconografia
Completa
Sistema de icones, grid de construcao, variantes de estado, espacamento, regras de uso e implementacao.
Principios e Estilo
A Sysled utiliza icones no estilo outline (contorno), com tracos limpos e geometricos que refletem a identidade moderna e profissional da marca. A biblioteca oficial e a Lucide Icons, com Heroicons como alternativa compativel.
Stroke Width — Comparativo
Especificacoes Tecnicas
| Propriedade | Valor | Observacao |
|---|---|---|
| Estilo | Outline (contorno) | Nunca usar filled como padrao |
| Stroke Width | 1.5px — 2px | 1.5 para UI, 2.0 para nav/destaque |
| Stroke Caps | round | stroke-linecap e stroke-linejoin |
| Viewbox | 0 0 24 24 | Padrao Lucide/Heroicons |
| Cor padrao | currentColor | Herda a cor do elemento pai |
| Biblioteca primaria | Lucide Icons | lucide.dev |
| Biblioteca alternativa | Heroicons (outline) | heroicons.com |
Icones por Categoria
Catalogo organizado por contexto de uso. Todos os icones seguem o padrao Lucide Icons com stroke-width="1.5".
Grid e Area de Seguranca
Todo icone e construido dentro de um viewbox de 24x24px. A area de seguranca (padding) de 2px em cada lado garante alinhamento optico consistente. O conteudo do icone deve ficar dentro da area ativa de 20x20px.
Tamanhos Padrao
| Tamanho | Uso | Stroke |
|---|---|---|
16px | Dentro de badges, tags, inputs compactos | 1.5px |
20px | Botoes, inputs, tabelas | 1.5px |
24px | Navegacao, sidebar, toolbar | 1.5px — 2px |
32px | Empty states, cards de destaque | 1.5px |
48px | Ilustracoes, paginas de erro, onboarding | 1px — 1.5px |
Variantes de Estado
Icones mudam de aparencia conforme o estado do elemento em que estao inseridos. Abaixo, como cada estado se manifesta visualmente.
| Estado | Cor do Icone | Background | Extra |
|---|---|---|---|
| Default | var(--blue-primary) | rgba(43,108,176,0.06) | — |
| Hover | var(--blue-medium) | rgba(43,108,176,0.12) | transition: 0.2s |
| Active / Pressed | var(--blue-primary) | rgba(43,108,176,0.15) | scale(0.95) |
| Focused | var(--blue-primary) | — | box-shadow: 0 0 0 3px |
| Disabled | var(--gray-400) | — | opacity: 0.4 |
| Selected | #FFFFFF | var(--blue-primary) | Inversao total |
Icones com Texto e Componentes
O espacamento entre icone e texto deve ser consistente em toda a interface. Use gap via flexbox para garantir alinhamento perfeito em qualquer contexto.
Regras de Espacamento
| Contexto | Tamanho do Icone | Gap icone-texto | Alinhamento |
|---|---|---|---|
| Botao primario | 16px — 20px | 8px | align-items: center |
| Botao compacto | 14px — 16px | 6px | align-items: center |
| Input com icone | 16px | 8px | Icone a esquerda, centralizado vertical |
| Sidebar / nav | 18px — 20px | 10px — 12px | align-items: center |
| Tabela (acoes) | 16px | 0 (icone only) | Centralizado na celula |
| Badge / tag | 12px — 14px | 4px | align-items: center |
| Toast / alert | 16px — 20px | 8px — 12px | align-items: flex-start |
Quando usar icone sozinho vs. com label
| Situacao | Recomendacao | Motivo |
|---|---|---|
| Acao na toolbar (editar, excluir) | Icone + tooltip | Espaco limitado, tooltip para contexto |
| Navegacao principal | Icone + label | Discoverability para novos usuarios |
| Sidebar colapsada | Icone + tooltip | Label aparece ao expandir |
| Botao de acao primaria | Icone + label | Clareza na intencao da acao |
| Acao recorrente (favoritar, curtir) | Icone sozinho | Convencao universal reconhecida |
Do's & Don'ts
Regras visuais para manter a consistencia do sistema de icones em todos os contextos e equipes.
Usar todos em outline com mesmo stroke-width
Misturar outline com filled ou strokes diferentes
Manter tamanhos iguais no mesmo contexto
Usar tamanhos diferentes no mesmo nivel hierarquico
Usar cores da paleta oficial (currentColor ou variavel CSS)
Usar cores arbitrarias fora do design system
Manter proporcoes originais do icone (1:1)
Distorcer ou esticar o icone
Codigo e Uso no Projeto
Exemplos praticos de como implementar os icones no codigo, usando a biblioteca Lucide com React/TypeScript.
Instalacao
# Instalar Lucide para React npm install lucide-react # Ou com Yarn yarn add lucide-react
Uso Basico
import { Search, Home, Settings, Plus } from 'lucide-react' // Tamanho padrao (24px) <Search strokeWidth={1.5} /> // Tamanho personalizado <Home size={20} strokeWidth={1.5} /> // Dentro de um botao <button className="btn-primary"> <Plus size={16} strokeWidth={2} /> Novo Produto </button>
Componente Wrapper (Recomendado)
import { LucideIcon } from 'lucide-react' type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' const sizeMap: Record<IconSize, number> = { xs: 14, sm: 16, md: 20, lg: 24, xl: 32 } interface Props { icon: LucideIcon size?: IconSize className?: string } export function Icon({ icon: LucideIcon, size = 'lg', className }: Props) { return ( <LucideIcon size={sizeMap[size]} strokeWidth={size === 'xl' ? 1 : 1.5} className={className} /> ) }
Uso com SVG Inline (Fallback)
<!-- Padrao Sysled: outline, round caps, 24x24 --> <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" > <circle cx="11" cy="11" r="8" /> <line x1="21" y1="21" x2="16.65" y2="16.65" /> </svg>