Skip to content

5 icons · MIT licensed

Animated chart icons

Bar charts, a pie chart and trending arrows for analytics and reporting. The trending-up and trending-down icons show at a glance whether a metric rose or fell, which suits KPI cards and changelogs of numbers.

All 5 icons play once on hover. Each one comes as a React component, a shadcn/ui component and a Lottie JSON animation with static SVGs, free for commercial use under the MIT license.

All charts icons

Where to use them

  • KPI cards with rising or falling metrics
  • Analytics and reports navigation items
  • Dashboard empty states
  • Finance and portfolio summaries

By interaction

  • Hover-to-play animated icons · 5

    Plays once on mouseenter unless reduced motion is preferred. Leaving does not stop it; entering during playback does not restart it. Bar Chart, Bar Chart 2, Pie Chart, Trending Down, Trending Up.

Add one to your app

With React, install react-useanimations and import the icon; it plays its hover replay interaction on its own. Every icon in this category works the same way: swap trendingUp for the name on its page.

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

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

With shadcn/ui, the CLI adds a ready-made component:

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

<AnimatedTrendingUp size={24} />

Not using React? Each icon is a Lottie JSON file at /icons/<id>.json; see Lottie icons for web, iOS, Android and Flutter players.

FAQ

Which animated chart icons are included?

5 icons: Bar Chart, Bar Chart 2, Pie Chart, Trending Down and Trending Up. All of them are free for personal and commercial projects under the MIT license, with no attribution required.

How do I use these animated chart icons in React?

Install react-useanimations, add import trendingUp from 'react-useanimations/lib/trendingUp' and render <UseAnimations animation={trendingUp} size={32} />. The icon plays its hover replay interaction and follows the text color. With shadcn/ui, run npx shadcn@latest add https://useanimations.com/r/trending-up.json instead.

Can I use these animated chart icons without React?

Yes. Each icon is a Lottie JSON file at https://useanimations.com/icons/<id>.json (for example https://useanimations.com/icons/trending-up.json), playable with lottie-web, lottie-ios, lottie-android or Flutter's lottie package; static SVGs are on each icon page. None of them use expressions, so lottie-web's light build is enough.