300 ícones · 20 categorias

Categorias de ícones animados

Cada ícone do useAnimations pertence a uma categoria, de setas de navegação e controles de mídia a loaders e logos de redes sociais. Abra uma categoria para ver todos os ícones dela, onde usá-los e o código para adicionar um, ou navegue por interação.

Alertas5 íconesTriângulos de aviso, círculos de alerta e placas de pare que pulsam só o bastante para chamar a atenção, sem piscar. Use-os ao lado de um campo de formulário com erro, no início de um banner de erro ou numa coluna de status, onde um ícone estático passa despercebido na rolagem.
Notificações4 íconesSinos que tocam quando há novidades ou que alternam entre sino e sino silenciado. Um balanço curto do sino leva o olhar até o contador de não lidas, e as versões que alternam servem também como controle para silenciar um canal ou uma conversa.
Navegação34 íconesMenus hambúrguer que se transformam em botão de fechar, além de setas, chevrons e setas de canto que se deslocam na própria direção no hover. Eles deixam claro para onde um controle leva: abrir a gaveta, voltar, expandir a linha, sair do site.
Ações64 íconesOs verbos da interface: salvar, excluir, baixar, atualizar, curtir, favoritar, buscar e configurar. Cada um confirma o clique ou o hover a que pertence: o coração se preenche quando você curte um post, e a tampa da lixeira se levanta antes de você excluir.
Conteúdo22 íconesArquivos, pastas, livros, e-mail, anexos e pessoas. Eles identificam aquilo com que o usuário trabalha, e as variantes de adicionar, remover e confirmar fazem o gerenciamento de listas e equipes parecer mais responsivo.
Formulários3 íconesUm checkbox, um radio button e um switch que animam entre os estados marcado e desmarcado. Use-os onde um input comum parece sem graça, como checklists de onboarding e telas de configurações, sem perder a leitura do estado num relance.
Mídia28 íconesPlay e pause, volume, microfone, câmera, pular e aleatório para players de áudio e vídeo. Os ícones que alternam trocam entre seus dois estados, de play para pause ou de microfone ligado para mudo, então o botão sempre mostra o que o clique vai fazer.
Edição de texto10 íconesNegrito, itálico, sublinhado, alinhamento e listas para barras de ferramentas de rich text. Uma animação rápida no clique confirma que a formatação foi aplicada, o que ajuda em editores em que a mudança no próprio texto é sutil.
Comunicação13 íconesTelefones, balões de chat, botões de enviar, correio de voz e RSS. Os ícones de chamada cobrem os estados de que um histórico de ligações precisa (recebida, efetuada, perdida e encaminhada), e o ícone de enviar dá à mensagem uma pequena despedida no clique.
Dispositivos12 íconesCelulares, tablets, monitores, relógios e impressoras, além dos indicadores de conexão ao redor deles: wifi, Bluetooth e bateria. Servem para seletores de dispositivo, alternadores de preview responsivo e status de conectividade.
Clima16 íconesSol, lua, nuvens, chuva, neve, raios e vento para previsões do tempo e tudo o que acompanha a hora do dia. O sol e a lua também formam um seletor natural entre modo claro e modo escuro.
Mapas e localização9 íconesPins de mapa, setas de navegação, globos, alvos e âncoras. Um pin que cai no hover destaca um localizador de lojas ou um endereço de entrega, e o globo funciona como seletor de idioma ou região.
E-commerce11 íconesCarrinhos, sacolas, etiquetas de preço, presentes, cartões de crédito e caminhões de entrega para lojas virtuais. Uma animação de adicionar ao carrinho confirma o clique sem precisar de toast, e os ícones de caminhão e de pacote dão um pouco de vida ao status do pedido.
Gráficos5 íconesGráficos de barras, um gráfico de pizza e setas de tendência para analytics e relatórios. Os ícones de tendência de alta e de baixa mostram num relance se uma métrica subiu ou caiu, o que combina com cards de KPI e históricos de números.
Desenvolvimento9 íconesChaves de código, terminal, branches do Git, commits, merges e pull requests, além de servidores e bancos de dados. Feitos para ferramentas de desenvolvimento, sites de documentação e páginas de status em que termos de Git e de infraestrutura fazem parte da interface.
Design e layout10 íconesGrades, colunas, camadas, recorte, caneta e cursor para editores e builders. Eles cabem em barras de ferramentas em que o usuário organiza conteúdo, alterna entre visualização em grade e em tabela ou escolhe uma ferramenta de desenho.
Formas e matemática8 íconesCírculos, quadrados, triângulos, hexágonos, um octógono e sinais de divisão. Use-os como ferramentas de forma em apps de desenho, como operadores de calculadora ou como marcadores neutros em diagramas e etapas de onboarding.
Carregamento5 íconesSpinners e loaders que ficam em loop enquanto algo está em andamento. Coloque um dentro do botão de enviar enquanto a requisição roda, no lugar de um conteúdo que ainda está carregando ou numa splash screen; eles ficam parados quando o usuário prefere movimento reduzido.
Redes sociais22 íconesÍcones de marca de redes sociais e das ferramentas em que desenvolvedores e designers compartilham trabalho: X, Instagram, YouTube, Discord, Telegram, Figma e outras. Eles animam no hover, o que deixa os links do rodapé e do perfil com mais cara de clicáveis.
Outros10 íconesÍcones que não pertencem a um grupo maior: carinhas de emoji para feedback, uma xícara de café, um relógio, uma linha de pulso e uma indicação de rolar para baixo. O ícone de rolar para baixo é uma dica comum na seção hero de que há mais conteúdo abaixo.