Saltar al contenido
ES

144 iconos · interaction="hover-replay"

Iconos animados que se reproducen con hover

Estos iconos se reproducen una vez cuando entra el puntero y terminan por sí solos, lo que evita que un paso rápido por una barra de herramientas se convierta en un movimiento nervioso. La mayor parte del set funciona así: flechas, archivos, dispositivos, clima e iconos de marca que cobran vida con hover.

Todos los iconos con la interacción “Repetir con hover”

Cómo se comporta

Se reproduce una vez con mouseenter, salvo que se prefiera movimiento reducido. Salir no lo detiene, y volver a entrar durante la reproducción no lo reinicia.

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

  • Listas de funciones y tablas de precios
  • Enlaces con flecha y botones de llamada a la acción
  • Botones de barras de herramientas en editores y dashboards
  • Tarjetas en la cuadrícula de una landing page
  • Enlaces del pie de página y de contacto

Por categoría

  • Navegación · 22

    Arrow Down Left, Arrow Down Right, Arrow Left, Arrow Right, Arrow Up Left, Arrow Up Right, Chevron Down, Chevron Up, Chevrons Down, Chevrons Left, Chevrons Right, Chevrons Up, Corner Down Left, Corner Down Right, Corner Left Down, Corner Left Up, Corner Right Down, Corner Right Up, Corner Up Left, Corner Up Right, External Link, Sidebar

  • Acciones · 6

    Award, Key, Maximize 2, Minimize 2, Shield, Slash

  • Contenido · 10

    Book, Book Open, Clipboard, File, File Text, Image, Inbox, Paperclip, User, Users

  • Multimedia · 11

    Aperture, Cast, Disc, Fast Forward, Film, Headphones, Music, Radio, Rewind, Speaker, TV

  • Edición de texto · 2

    Hash, List

  • Comunicación · 9

    At Sign, Message Circle, Message Square, Phone Forwarded, Phone Incoming, Phone Missed, Phone Outgoing, RSS, Voicemail

  • Dispositivos · 10

    Battery, Battery Charging, Bluetooth, CPU, Hard Drive, Monitor, Smartphone, Tablet, Watch, WiFi

  • Clima · 13

    Cloud Drizzle, Cloud Lightning, Cloud Rain, Cloud Snow, Droplet, Moon, Sun, Sunrise, Sunset, Thermometer, Umbrella, Wind, Zap

  • Mapas y ubicación · 8

    Anchor, Crosshair, Life Buoy, Map, Map Pin, Navigation, Navigation 2, Target

  • Comercio electrónico · 10

    Box, Briefcase, Credit Card, Dollar Sign, Gift, Package, Percent, Shopping Bag, Tag, Truck

  • Gráficos · 5

    Bar Chart, Bar Chart 2, Pie Chart, Trending Down, Trending Up

  • Desarrollo · 8

    Code, Command, Database, Git Branch, Git Commit, Git Merge, Git Pull Request, Server

  • Diseño y maquetación · 7

    Columns, Grid, Layers, Layout, Move, Pen Tool, Table

  • Formas y matemáticas · 8

    Circle, Divide, Divide Circle, Divide Square, Hexagon, Octagon, Square, Triangle

  • Redes sociales · 9

    Chrome, Codesandbox, Figma, Framer, GitLab, Slack, Trello, Twitch, Twitter X

  • Otros · 6

    Clock, Coffee, Frown, Meh, Smile, Tool

Ú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 settings from 'react-useanimations/lib/settings';

// Settings usa normalmente 'hover'
<UseAnimations animation={settings} interaction="hover-replay" size={32} />

Aplica el hover a toda la tarjeta o el enlace, no solo al icono: con la render prop los eventos van a tu elemento, y el foco del teclado también reproduce la animación.

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

<UseAnimations
  animation={trendingUp}
  render={(eventProps, animationProps) => (
    <a href="/reports" className="card" {...eventProps}>
      <span {...animationProps} /> Crecimiento semanal
    </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 “Repetir con hover”?

144 iconos: Arrow Down Left, Arrow Down Right, Arrow Left, Arrow Right, Arrow Up Left, Arrow Up Right, Chevron Down, Chevron Up, Chevrons Down, Chevrons Left, Chevrons Right, Chevrons Up, Corner Down Left, Corner Down Right, Corner Left Down y 129 más. Los iconos que se reproducen con hover suelen animar enlaces con flecha, listas de funciones, botones de barras de herramientas y tarjetas de landing pages.

¿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-replay" 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.