Saltar al contenido
ES

5 iconos · licencia MIT

Iconos animados de gráficos

Gráficos de barras, un gráfico circular y flechas de tendencia para analítica e informes. Los iconos de tendencia al alza y a la baja muestran de un vistazo si una métrica subió o bajó, lo que encaja en tarjetas de KPI y en registros de cambios de cifras.

Los 5 iconos 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 gráficos

Dónde usarlos

  • Tarjetas de KPI con métricas al alza o a la baja
  • Elementos de navegación de analítica e informes
  • Estados vacíos de dashboards
  • Resúmenes financieros y de cartera

Por interacción

  • Iconos animados que se reproducen con hover · 5

    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. Bar Chart, Bar Chart 2, Pie Chart, Trending Down, Trending Up.

Añade uno a tu app

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

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

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

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

npx shadcn@latest add https://useanimations.com/r/trending-up.json
import { AnimatedTrendingUp } from '@/components/animations/trending-up';

<AnimatedTrendingUp 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 gráficos se incluyen?

5 iconos: Bar Chart, Bar Chart 2, Pie Chart, Trending Down y Trending Up. Todos son gratis para proyectos personales y comerciales con la licencia MIT, sin necesidad de atribución.

¿Cómo uso estos iconos animados de gráficos en React?

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

¿Puedo usar estos iconos animados de gráficos sin React?

Sí. Cada icono es un archivo Lottie JSON en https://useanimations.com/icons/<id>.json (por ejemplo, https://useanimations.com/icons/trending-up.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.