Ícones para Web

Criando e exportando ícones SVG otimizados para web

Publicado: 15/06/2026
design-web ícones web svg

O que você vai aprender

  • Criar sets de ícones consistentes com grid e estilo unificados
  • Otimizar ícones SVG para web: simplificar paths, remover nós desnecessários
  • Exportar ícones em múltiplos tamanhos e formatos (SVG, PNG@1x/2x/3x)
  • Usar sistemas de ícones com símbolos SVG reutilizáveis ( + )

Ícones para Web🔗

Princípios de Design🔗

Tamanho🔗

  • ícones padrão: 24x24px
  • ícones pequenos: 16x16px
  • ícones grandes: 32x32px ou 48x48px

viewBox🔗

Sempre use viewBox="0 0 24 24" para consistência.

Stroke vs Fill🔗

EstiloUso
Fillícones sólidos
Strokeícones outline, mais moderno

Criar Ícone no Inkscape🔗

  1. Crie novo documento 24x24
  2. Desenhe o ícone usando shapes simples
  3. Use stroke 2px para outline icons
  4. Centralize na área de trabalho

Otimizar para Web🔗

Remover Metadados🔗

svgo input.svg -o output.svg

Simplificar Paths🔗

  1. Path > Simplify (Ctrl + L )
  2. Remova nós redundantes

Limitar casas decimais🔗

svgo --precision 1 input.svg

Sprite SVG🔗

Criar Sprite🔗

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="..."/>
  </symbol>
  <symbol id="icon-settings" viewBox="0 0 24 24">
    <path d="..."/>
  </symbol>
</svg>

Usar Sprite🔗

<svg><use href="#icon-home"/></svg>

Inline SVG🔗

Para CSS styling:

<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <path d="..."/>
</svg>
.icon {
  width: 24px;
  height: 24px;
  color: #333;
}

Checklist🔗

  • viewBox 24x24
  • Sem dimensões fixas
  • Stroke consistente (2px)
  • Removido metadata
  • Testado em múltiplos navegadores

Use currentColor para que o ícone herde a cor do texto CSS: color: blue; = ícone azul.

Você aprendeu

  • Ícones consistentes usam grid uniforme (24x24 ou 16x16), mesmo peso de traço e estilo visual
  • SVG + permite reutilizar definições de ícones sem duplicar código
  • Otimização (SVGO) reduz tamanho do arquivo sem perda visual perceptível

Referências🔗