6 interações · 300 ícones

Interações dos ícones animados

Cada ícone vem com a microinteração para a qual foi desenhado: fica em loop, alterna ou toca de novo no clique, ou toca no hover. O componente React faz toda a ligação e respeita o movimento reduzido, e a prop interaction troca a interação de qualquer ícone.

interaction="loop"Ícones animados em loop21 íconesToca continuamente; fica no primeiro frame estático quando o usuário prefere movimento reduzido.Ícones em loop costumam aparecer em spinners de carregamento, alertas ativos, um sino tocando ou uma dica de rolar para baixo.
interaction="click-toggle"Ícones animados que alternam no clique37 íconesAlterna entre dois estados no clique, ou troca na hora quando o usuário prefere movimento reduzido.Ícones que alternam no clique costumam controlar botões de mudo, mostrar/ocultar senha, menu/fechar, play/pause e curtir.
interaction="click-replay"Ícones animados no clique64 íconesToca de novo desde o início a cada clique, a menos que o usuário prefira movimento reduzido.Ícones de clique costumam confirmar botões de enviar, salvar, atualizar, baixar, adicionar ao carrinho e formatar.
interaction="hover"Ícones animados no hover21 íconesToca para a frente no mouseenter e ao contrário no mouseleave.Ícones de hover costumam marcar itens de navegação, botões de excluir, configurações, controles de zoom e links de redes sociais.
interaction="hover-replay"Ícones animados que tocam no hover144 íconesToca uma vez no mouseenter, a menos que o usuário prefira movimento reduzido. Sair não interrompe a animação, e entrar durante a reprodução não a reinicia.Ícones que tocam no hover costumam dar vida a links com seta, listas de recursos, botões de barras de ferramentas e cards de landing page.
interaction="hover-loop"Ícones animados em loop no hover13 íconesFica em loop durante o hover, termina o ciclo atual depois do mouseleave e fica estático quando o usuário prefere movimento reduzido.Ícones em loop no hover costumam marcar links de redes sociais, convites para comunidades, links de portfólio e seletores de idioma.

Como escolher uma interação

Um estado que dura, como carregamento ou um alerta ativo: loop.
Um controle liga/desliga, como mudo, menu ou mostrar senha: alternar no clique, com active para estado controlado.
Uma ação pontual, como enviar, salvar ou atualizar: reproduzir no clique.
Uma dica do que o link abre: hover, que volta ao contrário quando o ponteiro sai.
Barras de ferramentas e listas que o usuário percorre rapidamente: reproduzir no hover, que termina sozinho.
Links que convidam a olhar com mais calma, como ícones de redes sociais: loop no hover.

Movimento reduzido

O componente React segue prefers-reduced-motion e se atualiza quando a configuração muda. Toques em telas sensíveis ao toque nunca iniciam animações de hover.

loop: o ícone não inicia sozinho e fica no primeiro frame, estático.
click-toggle: o clique troca para o outro estado na hora, sem a animação de transição.
click-replay: os cliques continuam chegando ao seu handler, mas a animação não toca.
hover: o hover não toca a animação.
hover-replay: o hover não toca a animação.
hover-loop: o ícone fica estático durante o hover.