INÍCIO RÁPIDO

Um pouco de movimento. Três passos simples.

01 / Encontre seu ícone

Explorar a coleção. Busque por nome ou palavra-chave e filtre por categoria, fonte ou movimento. Você pode pausar as prévias a qualquer momento.

02 / Personalize

Abra um ícone para mudar cor, tamanho, espessura do traço, duração, atraso, curva de velocidade, repetições, direção e intensidade. Use Reproduzir, Pausar, Reiniciar ou o controle de posição para conferir o resultado. As últimas configurações ficam neste navegador. Um link compartilhado inclui as configurações sem precisar de conta.

03 / Leve com você

Escolha Copiar SVG para colar o código no seu HTML ou Baixar .svg para obter um arquivo independente. Ele inclui os estilos de animação e não precisa de JavaScript, bibliotecas nem recursos externos.

<img src="/icons/bell-ring.svg"
     width="32" height="32"
     alt="Notifications" />

Para imagens decorativas ao lado de texto, use alt="". Para SVGs decorativos no HTML, remova role e aria-labelledby e adicione aria-hidden="true".

Movimento com cuidado

Cada exportação respeita prefers-reduced-motion. O editor começa pausado se o sistema solicitar menos movimento; pressione Reproduzir para conferir a animação. Use uma repetição para confirmar ações e ciclos limitados para chamar a atenção.

Usar várias cópias no HTML

Cada combinação de ícone e configurações recebe estilos próprios. Se colar a mesma exportação várias vezes em um documento, dê IDs únicos a cada SVG e seu título e atualize os seletores CSS e aria-labelledby. Elementos de imagem isolam cada arquivo automaticamente.

Liberdade para criar

Os 210 ícones incluem informações de fonte e licença. Consulte a coleção de origem para conhecer o autor e as condições de uso. Os SVGs baixados incluem as mesmas informações. Fontes · Licenças