Saltar al contenido
ES

34 iconos · licencia MIT

Iconos animados de navegación y flechas

Menús hamburguesa que se transforman en un botón de cerrar, y flechas, chevrons y flechas de esquina que se desplazan hacia su dirección con hover. Dejan claro adónde lleva cada control: abrir el panel lateral, volver atrás, desplegar una fila o salir del sitio.

De los 34 iconos, 2 se reproducen sin parar, 4 alternan entre dos estados al hacer clic, 6 se repiten con cada clic y 22 se reproducen una vez con hover. Cada uno se ofrece como componente de React, componente de shadcn/ui, animación Lottie JSON y SVG estático, gratis para uso comercial con la licencia MIT.

Todos los iconos de navegación

Dónde usarlos

  • Menú hamburguesa que se convierte en botón de cerrar en móvil
  • Botones de anterior y siguiente en carruseles y paginación
  • Chevrons de acordeones y menús desplegables
  • Indicaciones para volver arriba y para desplazarse hacia abajo
  • Enlaces de inicio y cierre de sesión
  • Marcadores de enlaces externos y botones para mostrar u ocultar la barra lateral

Por interacción

  • Iconos animados en bucle · 2

    Se reproduce sin parar; se queda en el primer fotograma estático si se prefiere movimiento reducido. More Horizontal, More Vertical.

  • Iconos animados que alternan con un clic · 4

    Alterna entre dos estados al hacer clic, o cambia de inmediato si se prefiere movimiento reducido. Burger Menu, Menu V2, Menu V3, Menu V4.

  • Iconos animados al hacer clic · 6

    Se reproduce una vez desde el principio con cada clic, salvo que se prefiera movimiento reducido. Arrow down circle, Arrow left circle, Arrow right circle, Arrow up circle, Log In, Log Out.

  • Iconos animados que se reproducen con hover · 22

    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. 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.

Añade uno a tu app

Con React, instala react-useanimations e importa el icono; reproducirá por sí solo su interacción “Alternar con clic”. Todos los iconos de esta categoría funcionan igual: cambia menu por el nombre que aparece en la página de cada uno.

npm install react-useanimations
import UseAnimations from 'react-useanimations';
import menu from 'react-useanimations/lib/menu';

<UseAnimations animation={menu} size={32} />

Con shadcn/ui, la CLI añade un componente listo para usar:

npx shadcn@latest add https://useanimations.com/r/menu.json
import { AnimatedMenu } from '@/components/animations/menu';

<AnimatedMenu size={24} />

¿No usas React? Cada icono es un archivo Lottie JSON en /icons/<id>.json; en Iconos Lottie encontrarás reproductores para web, iOS, Android y Flutter.

Preguntas frecuentes

¿Qué iconos animados de navegación y flechas se incluyen?

34 iconos: Arrow down circle, Arrow Down Left, Arrow Down Right, Arrow Left, Arrow left circle, Arrow Right, Arrow right circle, Arrow up circle, Arrow Up Left, Arrow Up Right, Burger Menu, Chevron Down y 22 más. Todos son gratis para proyectos personales y comerciales con la licencia MIT, sin necesidad de atribución.

¿Cómo uso estos iconos animados de navegación y flechas en React?

Instala react-useanimations, añade import menu from 'react-useanimations/lib/menu' y renderiza <UseAnimations animation={menu} size={32} />. El icono reproduce su interacción “Alternar con clic” y sigue el color del texto. Con shadcn/ui, ejecuta en su lugar npx shadcn@latest add https://useanimations.com/r/menu.json.

¿Puedo usar estos iconos animados de navegación y flechas sin React?

Sí. Cada icono es un archivo Lottie JSON en https://useanimations.com/icons/<id>.json (por ejemplo, https://useanimations.com/icons/menu.json) que se reproduce con lottie-web, lottie-ios, lottie-android o el paquete lottie de Flutter; los SVG estáticos están en la página de cada icono (en inglés). Ninguno usa expresiones, así que basta con la versión ligera de lottie-web.