21 iconos · interaction="hover"

Iconos animados con hover

Estos iconos avanzan cuando entra el puntero y retroceden cuando sale, así que el movimiento sigue al cursor y nunca se queda a medias. Encajan en elementos de navegación y en botones que anticipan lo que abren: la tapa de una papelera se levanta, el engranaje de ajustes gira, una carpeta se abre.

Todos los iconos con la interacción “Hover”

Cómo se comporta

Avanza con mouseenter y retrocede con mouseleave.

Si se prefiere movimiento reducido, el hover no reproduce la animación. En pantallas táctiles, un toque no inicia las animaciones de hover; el foco del teclado sí, cuando el icono está dentro de un elemento enfocable. El componente de React se encarga de todo esto; tú solo eliges el icono.

Dónde usarlos

Elementos de la barra lateral y del menú de navegación
Botones de eliminar que levantan la tapa antes del clic
Enlaces a ajustes y al perfil
Controles para acercar y alejar el zoom
Enlaces a redes sociales en el pie de página

Por categoría

Acciones · 11
Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out
Contenido · 7
Archive, Copy, Mail, Share, User minus, User plus, User X
Redes sociales · 3
Instagram, YouTube, YouTube V2

Úsalo en React

Los iconos de esta lista usan esta interacción por defecto, pero cualquier otro icono también puede usarla: pasa la prop interaction.

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

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

Coloca el icono dentro de un enlace o un botón con la render prop: así la animación también se reproduce cuando el elemento recibe el foco del teclado, y los toques en pantallas táctiles no la activan.

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

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

Todas las props están en la documentación. Fuera de React, los iconos son archivos Lottie JSON; en Iconos Lottie verás cómo recrear las interacciones con lottie-web.

Preguntas frecuentes

¿Qué iconos usan la interacción “Hover”?

21 iconos: Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out, Archive, Copy, Mail, Share y 6 más. Los iconos con hover suelen marcar elementos de navegación, botones de eliminar, ajustes, controles de zoom y enlaces a redes sociales.

¿Qué pasa cuando el usuario prefiere movimiento reducido?

Si se prefiere movimiento reducido, el hover no reproduce la animación. El componente de React lee prefers-reduced-motion y se actualiza cuando cambia el ajuste, así que no necesitas escribir código para ello.

¿Cómo cambio la interacción de un icono?

Cada icono reproduce la interacción para la que fue diseñado. Pasa interaction="hover" para dar este comportamiento a cualquier otro icono, u otro valor ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') para cambiarlo. Las props autoplay, loop y speed ajustan la reproducción.