21 ícones · interaction="hover"

Ícones animados no hover

Estes ícones tocam para a frente quando o ponteiro entra e voltam ao contrário quando ele sai, então o movimento acompanha o cursor e nunca termina pela metade. Combinam com itens de navegação e botões que antecipam o que abrem: a tampa da lixeira se levanta, a engrenagem de configurações gira, a pasta se abre.

Todos os ícones com a interação “Hover”

Como funciona

Toca para a frente no mouseenter e ao contrário no mouseleave.

Com movimento reduzido, o hover não toca a animação. Toques em telas sensíveis ao toque não iniciam animações de hover; já o foco pelo teclado inicia, quando o ícone está dentro de um elemento focável. O componente React cuida de tudo isso; você só escolhe o ícone.

Onde usar

Itens da sidebar e do menu de navegação
Botões de excluir que levantam a tampa antes do clique
Links de configurações e de perfil
Controles de aumentar e diminuir zoom
Links de redes sociais no rodapé

Por categoria

Ações · 11
Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out
Conteúdo · 7
Archive, Copy, Mail, Share, User minus, User plus, User X
Redes sociais · 3
Instagram, YouTube, YouTube V2

Use no React

Os ícones listados aqui usam esta interação por padrão. Qualquer outro ícone também pode usá-la: basta passar a prop interaction.

import UseAnimations from 'react-useanimations';
import bookmark from 'react-useanimations/lib/bookmark';

// Bookmark normalmente usa 'click-toggle'
<UseAnimations animation={bookmark} interaction="hover" size={32} />

Coloque o ícone num link ou botão com a render prop: assim a animação também toca quando o elemento recebe foco pelo teclado, e toques em telas sensíveis ao toque não a disparam.

import archive from 'react-useanimations/lib/archive';

<UseAnimations
  animation={archive}
  render={(eventProps, animationProps) => (
    <a href="/archive" {...eventProps}>
      <span {...animationProps} /> Arquivar
    </a>
  )}
/>

Todas as props estão na documentação. Fora do React, os ícones são arquivos Lottie JSON; a página Ícones Lottie mostra como recriar as interações com lottie-web.

Perguntas frequentes

Quais ícones usam a interação “Hover”?

21 ícones: Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out, Archive, Copy, Mail, Share e mais 6. Ícones de hover costumam marcar itens de navegação, botões de excluir, configurações, controles de zoom e links de redes sociais.

O que acontece quando o usuário prefere movimento reduzido?

Com movimento reduzido, o hover não toca a animação. O componente React lê prefers-reduced-motion e se atualiza quando a configuração muda, então você não precisa escrever nenhum código para isso.

Como mudo a interação de um ícone?

Cada ícone executa a interação para a qual foi desenhado. Passe interaction="hover" para dar esse comportamento a qualquer outro ícone, ou outro valor ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') para trocá-la. As props autoplay, loop e speed ajustam a reprodução.