Avatares e ícones vetoriais gratuitos em UI design: história e atualidade

Em 2008, quando este artigo foi escrito pela primeira vez, o design digital era muito diferente do atual. O Smashing Magazine tinha acabado de publicar a coleção “Vector Girl Avatars”, personagens rechonchudas distribuídas em formato PSD e AI, que traduziam bem a estética da era Web 2.0. Naquela altura, gradientes, sombras e ilustrações complexas definiam as tendências, e qualquer webmaster conhecia a rotina de descarregar pacotes ZIP com ícones e recortá-los manualmente no Photoshop antes de os publicar.

Da perspetiva de 2026, essa coleção é um pedaço da história do design. A necessidade de recursos gráficos gratuitos e de qualidade não diminuiu, mudaram as tecnologias. Os vetores escaláveis (SVG) substituíram os formatos raster, as imagens estáticas ganharam a companhia das animações Lottie, e as interfaces modernas exigem uma abordagem ponderada às licenças, à acessibilidade e à segurança dos recursos visuais.

Este guia descreve a evolução dos recursos vetoriais, passa em revista as bibliotecas gratuitas disponíveis em 2026, com as respetivas licenças, e mostra como implementar gráficos vetoriais em projetos web e em sites WordPress.

#1. Como os ícones digitais passaram do pixel art ao SVG

#1.1 Que limitações tinham os ícones bitmap

A história dos ícones digitais está ligada às limitações tecnológicas de cada época. Nos primeiros tempos da internet, os designers trabalhavam sobretudo com gráficos bitmap, ou seja, imagens compostas por píxeis fixos que perdiam qualidade quando eram ampliadas para lá das dimensões originais. Esta limitação obrigava a preparar várias versões de cada ícone em tamanhos diferentes.

O design de ícones nos anos 90 e no início dos anos 2000 centrava-se na precisão ao píxel. Os designers desenhavam ícones em tamanhos pequenos (16x16, 24x24, 32x32 píxeis), onde cada píxel tinha peso visual. A estética “pixel art” surgiu não como escolha artística, mas como necessidade prática: os designers suavizavam as arestas à mão para obter imagens legíveis em resoluções limitadas.

A transparência alfa do formato PNG foi um avanço importante, porque permitiu que os ícones se fundissem com fundos diferentes sem as arestas serrilhadas típicas da transparência de um bit do GIF. A limitação de base manteve-se: ampliar um ícone para lá das dimensões para que foi desenhado produzia pixelização visível, e havia cada vez mais ecrãs com densidades de píxeis diferentes.

#1.2 Porque o SVG se tornou o padrão dos ícones

Os gráficos vetoriais escaláveis (SVG) resolveram o problema dos bitmaps, porque descrevem a imagem independentemente da resolução. Um bitmap define a imagem como uma grelha de píxeis coloridos, o SVG descreve formas, linhas, curvas, preenchimentos e contornos de forma matemática, pelo que estes são renderizados com nitidez em qualquer escala.

O SVG 1.1 é uma recomendação da W3C, e o seu sucessor, o SVG 2, continua com o estatuto de Candidate Recommendation: o snapshot mais recente desta especificação foi publicado pela W3C a 6 de outubro de 2026. Na prática, a adoção do SVG foi impulsionada pelo suporte nativo nos navegadores e pela possibilidade de incorporar o elemento <svg> diretamente no HTML5. O design web responsivo, desenvolvido a partir de cerca de 2010, acelerou ainda mais a mudança, porque os designers procuravam gráficos que ficassem nítidos em ecrãs de qualquer tamanho e densidade de píxeis.

O SVG tem três vantagens técnicas que explicam a sua posição no design de ícones. Primeiro, a escalabilidade: o mesmo ícone é renderizado corretamente num Apple Watch e num monitor 5K. Segundo, o tamanho reduzido: o ícone de lupa do conjunto Heroicons (24/outline/magnifying-glass.svg no repositório do projeto) tem 296 bytes, e o ícone search.svg do Lucide tem 275 bytes (medição de 12 de outubro de 2026). Terceiro, o controlo a partir do código: CSS e JavaScript podem alterar qualquer elemento de um gráfico vetorial (por exemplo, o olho de um avatar a piscar), o que permite construir efeitos ao passar o rato, animações e estilos dependentes do estado da aplicação.

#1.3 O que são as animações Lottie

O passo seguinte ao SVG estático foram os gráficos vetoriais animados. O Lottie é uma biblioteca da Airbnb que, segundo a documentação do projeto lottie-web, lê animações do Adobe After Effects exportadas para JSON com o plugin Bodymovin e renderiza-as de forma nativa em aplicações web e móveis.

Os ficheiros Lottie são representações JSON de animações exportadas do After Effects. Contêm a informação necessária para a renderização: caminhos, preenchimentos, transformações e dados de keyframes. A biblioteca suporta reprodução, repetição em ciclo, saltar para um frame escolhido e alteração de propriedades a partir do código.

No design de interfaces, isto significa que animações de carregamento, confirmações de sucesso, sequências de onboarding e microinterações podem ser vetoriais e controladas por código, em vez de incorporadas como GIF ou vídeo.

#2. Porque os gráficos vetoriais continuam a ser essenciais em UI

#2.1 Gráficos vetoriais no design responsivo

O design web responsivo mudou as exigências feitas aos gráficos de interface. Quando os sites passaram a servir smartphones, tablets, portáteis e monitores grandes, as limitações dos bitmaps tornaram-se cada vez mais incómodas. Um único ícone pode aparecer com 16 píxeis num sítio e 64 píxeis noutro.

Os gráficos vetoriais resolvem este problema. Um ícone SVG define a aparência através de uma descrição matemática e não de uma grelha de píxeis, por isso é renderizado em qualquer tamanho sem perda de qualidade. Um único ficheiro de origem substitui um conjunto de versões em resoluções diferentes, o que reduz tanto o trabalho da equipa como o número de ficheiros a descarregar.

O SVG é um formato de texto (XML), por isso o servidor pode comprimi-lo na transmissão da mesma forma que o HTML e o CSS, e o navegador renderiza-o sem plugins adicionais.

#2.2 Como os ícones SVG melhoram a acessibilidade

O SVG suporta marcação que as tecnologias de apoio conseguem ler. Os elementos <title> e <desc> fornecem uma alternativa textual, e os atributos ARIA permitem marcar um ícone como significativo ou decorativo. Os detalhes e exemplos de código estão na secção 6.3.

Os gráficos vetoriais funcionam também melhor com o zoom da página e com os modos de alto contraste. Quando o utilizador amplia o texto, o ícone SVG escala sem os artefactos que surgem ao ampliar bitmaps para lá da sua resolução nativa.

As propriedades do SVG podem ser alteradas em CSS, por isso um ícone pode reagir às preferências do utilizador, por exemplo às media queries prefers-color-scheme e prefers-contrast, mudando a cor ou a espessura do contorno.

#2.3 Ícones SVG num design system

Aplicações empresariais e sites de grande dimensão precisam de muitos ícones: ações, indicadores de estado, elementos de navegação e conceitos. Manter a coerência visual em centenas de ícones é um desafio que a abordagem vetorial ajuda a resolver de forma sistemática.

Os design systems tratam os ícones vetoriais como componentes de base. Quando as formas de base, a espessura dos contornos, os raios dos cantos e as correções óticas são parâmetros de todo o sistema, os novos ícones mantêm-se coerentes com os existentes. Isto reduz as pequenas incoerências que surgem quando cada designer desenha ícones à sua maneira.

Os ícones SVG funcionam bem com design tokens: a cor, o tamanho e a espessura do contorno de um ícone podem ser geridos em conjunto com cores, espaçamentos e tipografia. Alterar a definição centralizada de um token muda a aparência dos ícones em toda a aplicação.

#3. Onde encontrar avatares e ícones vetoriais gratuitos em 2026

Se procura sucessores dos lendários “Girl Avatars”, a internet atual oferece bibliotecas que muitas vezes funcionam em regime “mix and match”: cria a sua própria personagem a partir de peças.

#3.1 Geradores de avatares SVG: DiceBear, Humaaans e outros

Em vez de escolher avatares numa biblioteca finita, os programadores podem gerá-los de forma programática a partir do identificador do utilizador, do nome ou de outro atributo.

O DiceBear gera avatares SVG a partir de uma cadeia de entrada (seed), por isso o mesmo utilizador recebe sempre o mesmo avatar. Lembra-se dos Gravatars? Esta é uma versão moderna e vetorial da mesma ideia. A integração mais simples é um URL com o identificador como parâmetro:

<img src="https://api.dicebear.com/10.x/lorelei/svg?seed=mariusz" alt="" width="64" height="64" />

Segundo a documentação da API HTTP do DiceBear, a versão atual da API é a 10.x (as versões 5.x a 8.x foram descontinuadas), o limite é de 50 pedidos por segundo para SVG, e a API pública é gratuita para uso não comercial. Para uso comercial ou limites mais elevados, a documentação recomenda alojar uma instância própria. O código do DiceBear está sob licença MIT, mas cada estilo de avatar tem a sua própria licença, descrita na página de licenças do DiceBear: Lorelei é CC0 1.0, Fun Emoji é CC BY 4.0 (exige atribuição de autoria), e Avataaars e Bottts têm condições próprias dos autores, que permitem uso pessoal e comercial.

O Humaaans, de Pablo Stanley, é um sistema modular de ilustrações: o designer combina cabeças, troncos, pernas e fundos em cenas e personagens. A página do projeto indica a licença CC0, que permite uso comercial e pessoal, e remete para a versão para Sketch, para um exemplo no InVision Studio e para a coleção no serviço Blush.

A abordagem modular é útil em aplicações que precisam de muitos avatares diferentes. Em vez de escolher entre combinações prontas, é possível gerar variantes de forma programática a partir de componentes diferentes e ajustá-las à estética da marca.

Outros geradores que vale a pena conhecer:

• Boring Avatars: biblioteca React (MIT) da organização boringdesigners, com seis variantes (marble, beam, pixel, sunset, ring, bauhaus); o avatar é criado a partir da propriedade name, que pode ser o nome do utilizador ou o e-mail.
• Multiavatar: gerador cujos autores indicam na página do projeto 12 230 590 464 avatares possíveis; as condições completas da licença estão numa página separada do projeto.
• Bean Heads (antes Big Heads): componente React de Robert Broersma, sob licença MIT, para compor personagens a partir de propriedades como cabelo, olhos e cor da pele.

#3.2 Bibliotecas gratuitas de ilustrações vetoriais

As bibliotecas de ilustrações fornecem gráficos pensados para uso conjunto, com estilo, paleta e linguagem visual coerentes.

O unDraw, de Katerina Limpitsouni, é uma coleção de ilustrações em estilo flat, com temas que vão dos negócios às atividades do dia a dia. Na página do projeto, a cor de destaque é definida antes do descarregamento, por isso a ilustração encaixa logo na paleta da marca. Funciona bem em landing pages e em estados vazios. O unDraw tem uma licença própria, publicada na página do projeto, que convém ler antes de a usar num projeto de cliente.

Na prática, basta escolher a ilustração, definir a cor de destaque, descarregar o SVG e incorporá-lo no template. O código SVG pode depois ser estilizado através de propriedades CSS ou de atributos inline.

#3.3 Bibliotecas gratuitas de ícones SVG

O mercado de bibliotecas de ícones em 2026 inclui tanto conjuntos clássicos como sistemas com muitas variantes.

O Phosphor Icons é uma família de ícones em seis pesos: Thin, Light, Regular, Bold, Fill e Duotone, sob licença MIT. Cada ícone existe em todas as variantes, por isso os conjuntos combinam sem atritos. O Phosphor tem implementações para React, Vue, Figma e web components.

O Heroicons, dos criadores do Tailwind CSS (Tailwind Labs), existe em quatro variantes: 24x24 outline, 24x24 solid, 20x20 solid e 16x16 solid. Os pacotes @heroicons/react e @heroicons/vue disponibilizam os ícones como componentes, e o repositório do projeto indica a licença MIT. O Heroicons encaixa em projetos baseados em Tailwind, mas funciona em qualquer projeto.

O Feather Icons aposta na simplicidade: cada ícone é desenhado numa grelha de 24x24, e a espessura predefinida do contorno é 2. O projeto está sob licença MIT.

O Lucide é um fork do Feather Icons mantido pela comunidade, com mais de 1600 ícones segundo o repositório do projeto, sob licença ISC. O Lucide tem pacotes oficiais para React, Vue, Svelte, Angular, Astro e outros ambientes.

O Tabler Icons, segundo o README do projeto, inclui 6238 ícones (5184 de contorno e 1054 preenchidos, dados de outubro de 2026), numa grelha de 24x24 com contorno de 2 px, sob licença MIT. Os ícones de contorno podem ficar mais finos ou mais grossos alterando stroke-width.

O Material Symbols, da Google, é uma fonte variável de ícones com quatro eixos: preenchimento (0 a 100), peso (100 a 700), grade (de -50 a 200) e tamanho ótico (20 a 48 px). Segundo o repositório da Google, os ícones estão disponíveis sob licença Apache 2.0.

.material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

#3.4 Licenças dos conjuntos de ícones gratuitos em comparação

“Gratuito” não significa “sem condições”. As diferenças entre licenças dizem respeito sobretudo à atribuição de autoria e ao que é preciso incluir nas cópias dos ficheiros.

O Font Awesome, no ficheiro de licença da versão Free, separa três licenças: CC BY 4.0 para os ícones, SIL OFL 1.1 para os ícones empacotados como fontes web e de desktop, e MIT para os restantes ficheiros. O mesmo ficheiro pede que não sejam removidos os comentários de atribuição que já existem nos ficheiros descarregados.

As licenças MIT e ISC exigem que o aviso de direitos de autor e o texto da licença sejam incluídos nas cópias do software. A página de licença do Lucide não fala de uma menção visível na página: a obrigação diz respeito à informação nos ficheiros distribuídos. A Apache 2.0 inclui ainda uma licença de patentes explícita.

#3.5 Ícones de redes sociais, bandeiras e métodos de pagamento

Para além das bibliotecas de uso geral, existem conjuntos especializados.

Os ícones de redes sociais contêm os logótipos das principais plataformas em formato vetorial. São úteis em botões de partilha, secções de contacto e rodapés. O logótipo de uma plataforma continua a ser marca registada do seu titular, por isso convém consultar as diretrizes de marca da plataforma em causa.

Os ícones de bandeiras representam países e regiões em formato vetorial e são úteis em seletores de idioma, calculadoras de envio e escolha de país. Os conjuntos costumam dar aos ficheiros os códigos de país ISO 3166-1, o que facilita o mapeamento.

Os ícones de métodos de pagamento contêm logótipos de cartões de pagamento, carteiras digitais e métodos de pagamento locais, usados nos carrinhos das lojas online.

#4. Como integrar SVG no WordPress de forma profissional

#4.1 Porque o WordPress bloqueia o SVG por defeito

O WordPress não inclui o SVG na lista de tipos de ficheiro permitidos por defeito. A razão é técnica: uma imagem PNG são dados de píxeis, ao passo que um SVG é um documento XML que pode conter JavaScript, referências a recursos externos e outras construções executadas pelo navegador. Um ficheiro SVG aberto diretamente no navegador pode executar um script no contexto do domínio do site.

É um risco de ataques de cross-site scripting (XSS). Um script executado no contexto do site pode ler dados da sessão ou realizar ações em nome de um administrador com sessão iniciada.

A restrição pode ser contornada com segurança se cada ficheiro carregado passar por sanitização e se só utilizadores de confiança puderem carregar SVG. Não se limite a desbloquear o MIME type.

#4.2 Como ativar o SVG no WordPress com segurança

O plugin Safe SVG é o caminho mais simples. Segundo a página do plugin no diretório WordPress.org, o autor é a 10up, tem mais de um milhão de instalações ativas, e a sanitização é feita pela biblioteca svg-sanitizer de Daryll Doyle (enshrined/svg-sanitize). O plugin remove código perigoso no carregamento, mostra pré-visualizações de SVG na biblioteca de media, permite limitar o carregamento de SVG a utilizadores escolhidos e, opcionalmente, otimiza os ficheiros com o SVGO (desativado por defeito).

A instalação é simples: instale e ative o plugin a partir do diretório do WordPress, limite, se necessário, quem pode carregar SVG, e carregue os ficheiros através da biblioteca de media. A sanitização funciona automaticamente em cada carregamento.

O plugin SVG Support, de Benbodhi (página no diretório), também sanitiza os ficheiros carregados e tem um modo avançado: a classe style-svg adicionada a um bloco de imagem renderiza o SVG inline, para que possa ser estilizado em CSS.

A sanitização manual dá controlo total aos programadores. O exemplo abaixo mostra o princípio de funcionamento, mas as expressões regulares não são um parser XML completo, por isso em produção é melhor usar a biblioteca enshrined/svg-sanitize, a mesma que o Safe SVG utiliza:

<?php
/**
 * Exemplo simplificado de sanitização de SVG.
 * Em produção, use a biblioteca enshrined/svg-sanitize.
 */
function wppoland_sanitize_svg($svg_content) {
    // Remover as tags de script
    $svg_content = preg_replace('/<script[^>]*?>.*?<\/script>/is', '', $svg_content);

    // Remover os handlers de eventos
    $svg_content = preg_replace('/\s*on\w+\s*=\s*["\'][^"\']*["\']/is', '', $svg_content);
    $svg_content = preg_replace('/\s*on\w+\s*=\s*[^\s>]+/is', '', $svg_content);

    // Remover os endereços javascript:
    $svg_content = preg_replace('/href\s*=\s*["\']?\s*javascript:[^"\']*["\']?/is', 'href="#"', $svg_content);

    return $svg_content;
}

#4.3 Como inserir SVG inline num tema WordPress

O SVG inline, ou seja, código SVG incorporado diretamente no HTML em vez de uma referência a um ficheiro com a tag <img>, oferece possibilidades de estilo que os ficheiros externos não têm. Cada elemento do gráfico fica acessível a CSS e JavaScript, o que permite efeitos ao passar o rato (por exemplo, fill: red; em :hover), mudanças dinâmicas de cor e animações. Por isso os programadores de temas colam muitas vezes o código SVG diretamente no template.

Integração básica de SVG inline:

<?php
function wppoland_render_icon($icon_name, $classes = '') {
    $svg_path = get_template_directory() . '/assets/icons/' . sanitize_file_name($icon_name) . '.svg';

    if (file_exists($svg_path)) {
        $svg_content = file_get_contents($svg_path);

        // Remover os atributos width/height para o ícone escalar com o CSS
        $svg_content = preg_replace('/(width|height)=["\'][^"\']*["\']/', '', $svg_content);

        // Adicionar viewBox, se faltar
        if (strpos($svg_content, 'viewBox') === false) {
            $svg_content = preg_replace('/<svg/', '<svg viewBox="0 0 24 24"', $svg_content, 1);
        }

        // Adicionar classes próprias
        if (!empty($classes)) {
            $svg_content = preg_replace('/<svg/', '<svg class="' . esc_attr($classes) . '"', $svg_content, 1);
        }

        return $svg_content;
    }

    return '';
}

Estilos CSS para SVG inline:

.icon {
    width: 24px;
    height: 24px;
    transition: fill 0.3s ease, stroke 0.3s ease;
}

.icon:hover {
    fill: #ff6b6b;
    stroke: #333;
}

/* Exemplo de ícone animado */
@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.icon.animated:hover {
    animation: iconPulse 0.5s ease-in-out;
}

#4.4 Como otimizar ficheiros SVG

A otimização de ficheiros SVG importa sobretudo em páginas com muitos ícones.

O SVGO é, segundo a documentação do projeto, uma biblioteca Node.js e uma ferramenta de linha de comandos para otimizar SVG. Remove metadados dos editores, comentários, elementos ocultos e valores predefinidos ou pouco otimizados, quando isso é possível sem alterar a aparência. O ideal é executá-lo no processo de build do tema.

Um sprite com elementos <symbol> junta vários ícones num único bloco SVG, e cada ícone é chamado através de <use>. O código do caminho chega à página uma só vez, mesmo quando o ícone aparece várias vezes:

<?php
function wppoland_icon_sprite() {
    ?>
    <svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
        <symbol id="icon-search" viewBox="0 0 24 24">
            <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke="currentColor" stroke-width="2" fill="none"/>
        </symbol>
        <symbol id="icon-menu" viewBox="0 0 24 24">
            <path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" stroke-width="2" fill="none"/>
        </symbol>
        <!-- Ícones seguintes -->
    </svg>
    <?php
}
add_action('wp_body_open', 'wppoland_icon_sprite');

Ícone a partir do sprite: <svg class="icon" aria-hidden="true"><use href="#icon-search"></use></svg>.

O carregamento diferido aplica-se a ficheiros SVG inseridos com <img>: o atributo loading="lazy" funciona com eles tal como com outras imagens. O SVG inline faz parte do HTML, por isso não há nada para carregar de forma diferida.

#5. Como animar ícones SVG e gráficos interativos

#5.1 Como animar SVG em CSS

As animações CSS aplicadas a elementos SVG não precisam de JavaScript. Dois padrões típicos de interface são o indicador de carregamento a rodar e o ícone de notificação a saltar:

@keyframes iconSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.icon.loading {
    animation: iconSpin 1s linear infinite;
}

@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.icon.notification {
    animation: iconBounce 0.6s ease-in-out 2;
}

Estas regras funcionam com SVG inline e podem reagir à passagem do rato, ao estado da aplicação ou a classes adicionadas por script.

#5.2 Como adicionar uma animação Lottie a uma página

As animações Lottie são incorporadas através de um leitor, que trata da renderização e do controlo da reprodução.

Implementação básica de Lottie:

<!-- Leitor Lottie numa versão fixada (npm: @lottiefiles/lottie-player) -->
<script src="https://unpkg.com/@lottiefiles/[email protected]/dist/lottie-player.js"></script>

<!-- Animação alojada no próprio servidor -->
<lottie-player
    src="/animations/loading.json"
    background="transparent"
    speed="1"
    style="width: 200px; height: 200px;"
    loop
    autoplay
></lottie-player>

A versão do leitor está fixada porque @latest pode, após uma atualização do pacote, mudar o comportamento da página sem qualquer alteração no código. O ficheiro JSON da animação deve, de preferência, ficar alojado no próprio servidor.

No WordPress, as animações Lottie podem ser incorporadas através de um shortcode ou de blocos Gutenberg, e o diretório de plugins tem soluções que adicionam um bloco Lottie com controlo da reprodução.

#5.3 Como as animações SVG afetam o desempenho

Os gráficos animados exigem atenção para não tornarem a página mais lenta.

Limite o âmbito da animação aos elementos relevantes, em vez do gráfico inteiro. Anime propriedades concretas, como opacity, transform ou fill, em vez de propriedades que obrigam a recalcular o layout.

Use transform para o movimento (translate, scale, rotate). Os navegadores conseguem animar transform e opacity sem recalcular o layout da página, o que não acontece com top, left ou margin.

Respeite a media query prefers-reduced-motion. Utilizadores sensíveis ao movimento podem ativar no sistema a redução de animações, e a página deve então mostrar uma versão estática ou muito simplificada:

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

#6. Boas práticas para SVG e ícones vetoriais

#6.1 Como manter um estilo de ícones coerente

Bons sistemas de ícones mantêm a coerência visual em toda a biblioteca.

Uma grelha comum faz com que os ícones ocupem o mesmo espaço e tenham um peso visual semelhante. Heroicons, Feather, Lucide e Tabler desenham os ícones numa grelha de 24x24, e o Material Symbols tem um tamanho ótico predefinido de 24 px. Ao combinar ícones de fontes diferentes, a grelha comum é a primeira condição de coerência.

Uma espessura de contorno uniforme mantém a mesma espessura de linha em todo o conjunto. Misturar contornos finos e grossos na mesma interface dá um aspeto caótico. Quando o conjunto oferece várias espessuras, escolha uma para toda a interface.

As correções óticas ajustam as formas à perceção humana. Um círculo e um quadrado com as mesmas dimensões não parecem igualmente grandes, por isso o círculo costuma ultrapassar ligeiramente a linha do quadrado. As bibliotecas de ícones cuidadas já trazem estas correções incorporadas.

#6.2 Cores dos ícones SVG e modo escuro

Os ícones têm de funcionar em contextos de cor diferentes, do modo escuro à identidade da marca.

currentColor faz com que o ícone herde a cor do texto do contentor. No ficheiro SVG, defina fill="currentColor" ou stroke="currentColor" e controle a cor em CSS:

.icon {
    color: #666;
}

.icon:hover {
    color: #ff6b6b;
}

As propriedades personalizadas de CSS organizam as cores dos ícones em todo o sistema:

:root {
    --icon-primary: #333;
    --icon-secondary: #666;
    --icon-accent: #ff6b6b;
    --icon-disabled: #ccc;
}

@media (prefers-color-scheme: dark) {
    :root {
        --icon-primary: #eee;
        --icon-secondary: #aaa;
    }
}

.icon { color: var(--icon-primary); }
.icon.secondary { color: var(--icon-secondary); }
.icon.accent { color: var(--icon-accent); }
.icon.disabled { color: var(--icon-disabled); }

#6.3 Acessibilidade dos ícones SVG: title, aria-hidden e role=“img”

Um leitor de ecrã não vê o ícone, por isso cada ícone tem de ser descrito ou ocultado. A decisão depende de o ícone transmitir ou não informação.

Um ícone decorativo ao lado de um texto que já diz o mesmo deve desaparecer da árvore de acessibilidade. A MDN indica os ícones como caso típico de utilização de aria-hidden="true" e avisa: “Não utilize aria-hidden="true" em elementos que podem receber o foco” (MDN, aria-hidden, tradução própria). O atributo é herdado pelos filhos, por isso não pode ser colocado no elemento pai de um botão ou de uma ligação.

Um ícone significativo incorporado inline recebe role="img" e um nome acessível. A MDN recomenda role="img" no <svg> exterior, porque assim o leitor trata o gráfico como um todo em vez de ler os elementos descendentes (MDN, papel img). Quando existe uma legenda visível ao lado, é melhor indicar o nome com aria-labelledby; caso contrário, com aria-label.

O elemento <title> dá ao gráfico uma descrição curta e acessível, que os navegadores costumam mostrar como dica. Para compatibilidade com o SVG 1.1, deve ser o primeiro filho do seu elemento pai (MDN, elemento title).

Um ícone como <img> a partir de um ficheiro SVG segue as mesmas regras que as outras imagens. A W3C WAI recomenda um atributo alt="" vazio para imagens decorativas, porque sem atributo alt alguns leitores de ecrã leem o nome do ficheiro (W3C WAI, imagens decorativas).

<!-- Botão só com ícone: nome no botão, ícone oculto -->
<button type="button" aria-label="Pesquisar">
    <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><use href="#icon-search"></use></svg>
</button>

<!-- Ícone significativo sem texto visível -->
<svg role="img" aria-labelledby="status-title" viewBox="0 0 24 24">
    <title id="status-title">Estado: ativo</title>
    <circle cx="12" cy="12" r="8" fill="currentColor"/>
</svg>

<!-- Ícone decorativo como ficheiro -->
<img src="/icons/star.svg" alt="" width="24" height="24" />

Os indicadores de foco em ícones interativos permitem aos utilizadores de teclado ver onde estão:

.icon-button:focus-visible {
    outline: 2px solid #ff6b6b;
    outline-offset: 2px;
}

Mais sobre os requisitos WCAG para WordPress no guia de acessibilidade WordPress e WCAG 2.2.

#7. Como resolver problemas comuns com SVG em UI

#Porque os ícones SVG aparecem distorcidos

O problema resulta normalmente da falta do atributo viewBox ou de um conflito de proporções. Confirme que os ficheiros SVG têm viewBox e defina o tamanho em CSS. Não fixe ao mesmo tempo width e height no código quando o ícone deve escalar.

#Porque a animação Lottie não aparece

Verifique se o caminho para o ficheiro JSON está correto e se o script do leitor foi carregado. A consola do navegador mostra erros de JavaScript ou de rede (por exemplo, um 404 ou um pedido bloqueado pela política CSP).

#Como adaptar ícones SVG ao modo escuro

Ícones com cores fixadas no código SVG não se adaptam sozinhos. Use currentColor nos atributos fill e stroke e defina as cores em CSS através da media query prefers-color-scheme ou de uma classe do tema.

#Porque o WordPress bloqueia o SVG apesar do plugin

Algumas configurações de alojamento e plugins de segurança têm restrições próprias de tipos de ficheiro, independentes das definições do WordPress. Verifique as restrições ao nível do servidor e as definições dos plugins de segurança e, no Safe SVG, também se a sua função de utilizador tem permissão para carregar SVG.

#8. Como incorporar ícones SVG inline durante o build no Astro

Se utiliza uma arquitetura headless (por exemplo, Astro ou Next.js) com o WordPress como CMS de back-end, carregar pacotes de ícones dinâmicos em tempo de execução pode aumentar o tamanho do JavaScript enviado para o cliente. Em alternativa, resolva e incorpore os ícones SVG inline durante a fase de build estático.

Eis um exemplo de um componente Astro que lê um ícone de forma estática durante a compilação:

---
// Icon.astro - A build-time SVG inline fetcher
interface Props {
  name: string;
  className?: string;
}

const { name, className = 'icon-svg' } = Astro.props;

// Read SVG content from a local directory or fetch from API
const svgPath = `src/assets/icons/${name}.svg`;
let svgContent = '';

try {
  const fs = await import('fs/promises');
  const raw = await fs.readFile(svgPath, 'utf8');
  
  // Extract content inside the <svg> wrapper
  svgContent = raw.replace(/<svg[^>]*>|<\/svg>/g, '');
} catch (err) {
  console.error(`Build Error: Could not locate icon: ${name}.svg`);
}
---

<svg 
  xmlns="http://www.w3.org/2000/svg" 
  viewBox="0 0 24 24" 
  class={className} 
  fill="none" 
  stroke="currentColor" 
  stroke-width="2" 
  set:html={svgContent}
/>

Este componente não gera JavaScript do lado do cliente: os dados vetoriais ficam incorporados diretamente no HTML durante a compilação estática.

#Como criar um sprite SVG durante o build

Para não repetir os mesmos caminhos SVG várias vezes no mesmo documento, crie um sprite estático. Cada ícone passa a ser um <symbol>, e o código do caminho chega à página uma só vez, mesmo quando o ícone aparece várias vezes:

// Vite/Astro build script snippet
import fs from 'fs/promises';
import path from 'path';

async function buildSvgSprite(iconDir, outputFile) {
  const files = await fs.readdir(iconDir);
  let spriteContent = '<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">\n';

  for (const file of files) {
    if (path.extname(file) === '.svg') {
      const id = path.basename(file, '.svg');
      const content = await fs.readFile(path.join(iconDir, file), 'utf8');
      
      // Extract contents and wrap in <symbol>
      const cleanContent = content
        .replace(/<svg[^>]*>/, `<symbol id="icon-${id}" viewBox="0 0 24 24">`)
        .replace('</svg>', '</symbol>');
      
      spriteContent += cleanContent + '\n';
    }
  }
  
  spriteContent += '</svg>';
  await fs.writeFile(outputFile, spriteContent);
}

Inclua o sprite gerado uma vez por página (num tema WordPress, o hook wp_body_open é um bom sítio) e depois chame cada ícone com <use>: <svg class="icon" aria-hidden="true"><use href="#icon-search"></use></svg>.

#9. Como gerar avatares SVG como data URIs em Base64

Para não guardar milhares de imagens de perfil individuais em secções de comentários ou diretórios, pode gerar avatares vetoriais de forma programática. Devolva-os como data URIs codificados em base64, que podem ser usados diretamente em propriedades CSS de fundo ou em atributos src comuns.

Eis uma implementação em PHP que gera avatares SVG geométricos e os devolve como data URIs:

declare(strict_types=1);

namespace WPPoland\UI\Avatars;

/**
 * Generates a base64 encoded SVG Data URI based on a string hash.
 */
function get_avatar_data_uri( string $seed ): string {
    $hash = md5( strtolower( trim( $seed ) ) );
    
    $color_primary   = '#' . substr( $hash, 0, 6 );
    $color_secondary = '#' . substr( $hash, 6, 6 );
    
    $shape_type = hexdec( substr( $hash, 12, 1 ) ) % 4;
    $rotation   = hexdec( substr( $hash, 13, 2 ) );

    $svg = sprintf(
        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" style="background:%s;">',
        esc_attr( $color_secondary )
    );

    $svg .= sprintf( '<g transform="rotate(%d 50 50)">', $rotation );

    switch ( $shape_type ) {
        case 0:
            $svg .= sprintf( '<circle cx="50" cy="50" r="30" fill="%s" />', esc_attr( $color_primary ) );
            break;
        case 1:
            $svg .= sprintf( '<polygon points="50,15 15,80 85,80" fill="%s" />', esc_attr( $color_primary ) );
            break;
        case 2:
            $svg .= sprintf( '<polygon points="50,10 90,50 50,90 10,50" fill="%s" />', esc_attr( $color_primary ) );
            break;
        case 3:
            $svg .= sprintf( '<rect x="25" y="25" width="50" height="50" rx="10" fill="%s" />', esc_attr( $color_primary ) );
            break;
    }

    $svg .= '</g></svg>';

    return 'data:image/svg+xml;base64,' . base64_encode( $svg );
}

Esta função devolve um avatar escalável sem guardar nenhum ficheiro de imagem:

<img src="<?php echo esc_attr( get_avatar_data_uri( '[email protected]' ) ); ?>" alt="User Avatar" />

#10. Lista de verificação para passar de ícones PNG para SVG

• Otimize cada ícone como descrito na secção 4 antes de o incluir no tema ou no build do sprite.
• Sirva os ícones repetidos a partir de um único sprite com <symbol> e chame-os com <use>.
• Substitua as cores fixadas no código por currentColor e controle as cores e o modo escuro através de propriedades personalizadas de CSS.
• Atribua a cada ícone com significado role="img" e um nome acessível; oculte os ícones decorativos com aria-hidden="true" (nunca em elementos focáveis) ou com alt="" em <img>.
• Permita o carregamento de SVG apenas através de um sanitizador (Safe SVG ou enshrined/svg-sanitize) e apenas para funções de confiança.
• Verifique a licença de cada conjunto que adicionar e mantenha o aviso de licença ou os comentários de atribuição nos ficheiros que publica.

#Resumo: onde encontrar avatares e ícones vetoriais gratuitos

As personagens rechonchudas da coleção de avatares do Smashing Magazine de 2008 entraram para a história do design, mas a ideia que representavam, partilhar recursos gratuitamente, está hoje mais difundida do que nessa altura. As bibliotecas de ícones, os geradores de avatares e as coleções de ilustrações de 2026 dão a projetos de qualquer dimensão acesso a sistemas visuais coerentes.

Um recurso gratuito continua a ter licença. Antes de o implementar, verifique se o conjunto exige atribuição de autoria (Font Awesome Free, estilo Fun Emoji no DiceBear), se basta manter o ficheiro de licença (MIT, ISC, Apache 2.0) ou se não exige nada (CC0).

Um ícone bem implementado está descrito ou oculto para o leitor de ecrã, herda a cor através de currentColor, passa pela sanitização se entrar na biblioteca de media e pelo SVGO antes de chegar ao tema.

[1] Especificação W3C SVG 2; https://www.w3.org/TR/SVG2/

[2] MDN Web Docs, SVG; https://developer.mozilla.org/en-US/docs/Web/SVG

[3] lottie-web (Airbnb); https://github.com/airbnb/lottie-web

[4] DiceBear, API HTTP e licenças; https://www.dicebear.com/licenses/

[5] Humaaans; https://www.humaaans.com/

[6] unDraw; https://undraw.co/

[7] Plugin WordPress Safe SVG; https://wordpress.org/plugins/safe-svg/

[8] Font Awesome Free, ficheiro de licença; https://github.com/FortAwesome/Font-Awesome/blob/7.x/LICENSE.txt

[9] W3C WAI, imagens decorativas; https://www.w3.org/WAI/tutorials/images/decorative/

Permitir SVG no WordPress sem sanitização é um dos atalhos que mais tarde reaparece como incidente de segurança, e os ícones e ilustrações de bibliotecas gratuitas ainda precisam do formato certo para não pesarem na página. Essa parte do projeto, da otimização dos gráficos à implementação no tema, podemos assumi-la.