Skip to content

10 icons · MIT licensed

More animated icons

Icons that do not belong to a larger group: emoji faces for feedback, a coffee cup, a clock, a pulse line and a scroll-down cue. The scroll-down icon is a common hero section hint that there is more below.

Of the 10 icons, 4 loop continuously and 6 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 other icons

Where to use them

  • Scroll-down hints at the bottom of a hero section
  • Happy, neutral and sad faces in feedback widgets
  • Activity and uptime indicators
  • Opening hours and time pickers
  • Buy-me-a-coffee and support links

By interaction

  • Looping animated icons · 4

    Plays continuously; stays on the static first frame when reduced motion is preferred. Activity, Arrow down, Arrow up, Scroll down.

  • Hover-to-play animated icons · 6

    Plays once on mouseenter unless reduced motion is preferred. Leaving does not stop it; entering during playback does not restart it. Clock, Coffee, Frown, Meh, Smile, Tool.

Add one to your app

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

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

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

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

npx shadcn@latest add https://useanimations.com/r/scroll-down.json
import { AnimatedScrollDown } from '@/components/animations/scroll-down';

<AnimatedScrollDown 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 more animated icons are included?

10 icons: Activity, Arrow down, Arrow up, Clock, Coffee, Frown, Meh, Scroll down, Smile and Tool. All of them are free for personal and commercial projects under the MIT license, with no attribution required.

How do I use these more animated icons in React?

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

Can I use these more animated icons without React?

Yes. Each icon is a Lottie JSON file at https://useanimations.com/icons/<id>.json (for example https://useanimations.com/icons/scroll-down.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.