# Animated navigation and arrow icons

> 34 free animated navigation and arrow icons, including Arrow down circle, Arrow Down Left and Arrow Down Right. For React, shadcn/ui and Lottie, MIT.

Hamburger menus that morph into a close button, arrows, chevrons and corner arrows that nudge in their direction on hover. They make it obvious which way a control leads: open the drawer, go back, expand the row, leave the site.

Of the 34 icons, 2 loop continuously, 4 toggle between two states on click, 6 replay on every click and 22 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.

## Icons

- [Arrow down circle](https://useanimations.com/icons/arrow-down-circle) (`arrowDownCircle`, click-replay)
- [Arrow Down Left](https://useanimations.com/icons/arrow-down-left) (`arrowDownLeft`, hover-replay)
- [Arrow Down Right](https://useanimations.com/icons/arrow-down-right) (`arrowDownRight`, hover-replay)
- [Arrow Left](https://useanimations.com/icons/arrow-left) (`arrowLeft`, hover-replay)
- [Arrow left circle](https://useanimations.com/icons/arrow-left-circle) (`arrowLeftCircle`, click-replay)
- [Arrow Right](https://useanimations.com/icons/arrow-right) (`arrowRight`, hover-replay)
- [Arrow right circle](https://useanimations.com/icons/arrow-right-circle) (`arrowRightCircle`, click-replay)
- [Arrow up circle](https://useanimations.com/icons/arrow-up-circle) (`arrowUpCircle`, click-replay)
- [Arrow Up Left](https://useanimations.com/icons/arrow-up-left) (`arrowUpLeft`, hover-replay)
- [Arrow Up Right](https://useanimations.com/icons/arrow-up-right) (`arrowUpRight`, hover-replay)
- [Burger Menu](https://useanimations.com/icons/menu) (`menu`, click-toggle)
- [Chevron Down](https://useanimations.com/icons/chevron-down) (`chevronDown`, hover-replay)
- [Chevron Up](https://useanimations.com/icons/chevron-up) (`chevronUp`, hover-replay)
- [Chevrons Down](https://useanimations.com/icons/chevrons-down) (`chevronsDown`, hover-replay)
- [Chevrons Left](https://useanimations.com/icons/chevrons-left) (`chevronsLeft`, hover-replay)
- [Chevrons Right](https://useanimations.com/icons/chevrons-right) (`chevronsRight`, hover-replay)
- [Chevrons Up](https://useanimations.com/icons/chevrons-up) (`chevronsUp`, hover-replay)
- [Corner Down Left](https://useanimations.com/icons/corner-down-left) (`cornerDownLeft`, hover-replay)
- [Corner Down Right](https://useanimations.com/icons/corner-down-right) (`cornerDownRight`, hover-replay)
- [Corner Left Down](https://useanimations.com/icons/corner-left-down) (`cornerLeftDown`, hover-replay)
- [Corner Left Up](https://useanimations.com/icons/corner-left-up) (`cornerLeftUp`, hover-replay)
- [Corner Right Down](https://useanimations.com/icons/corner-right-down) (`cornerRightDown`, hover-replay)
- [Corner Right Up](https://useanimations.com/icons/corner-right-up) (`cornerRightUp`, hover-replay)
- [Corner Up Left](https://useanimations.com/icons/corner-up-left) (`cornerUpLeft`, hover-replay)
- [Corner Up Right](https://useanimations.com/icons/corner-up-right) (`cornerUpRight`, hover-replay)
- [External Link](https://useanimations.com/icons/external-link) (`externalLink`, hover-replay)
- [Log In](https://useanimations.com/icons/log-in) (`logIn`, click-replay)
- [Log Out](https://useanimations.com/icons/log-out) (`logOut`, click-replay)
- [Menu V2](https://useanimations.com/icons/menu-v2) (`menu2`, click-toggle)
- [Menu V3](https://useanimations.com/icons/menu-v3) (`menu3`, click-toggle)
- [Menu V4](https://useanimations.com/icons/menu-v4) (`menu4`, click-toggle)
- [More Horizontal](https://useanimations.com/icons/more-horizontal) (`moreHorizontal`, loop)
- [More Vertical](https://useanimations.com/icons/more-vertical) (`moreVertical`, loop)
- [Sidebar](https://useanimations.com/icons/sidebar) (`sidebar`, hover-replay)

## Where to use them

- Hamburger menu that turns into a close button on mobile
- Previous and next buttons in carousels and pagination
- Accordion and dropdown chevrons
- Back-to-top and scroll-down cues
- Sign-in and sign-out links
- External link markers and sidebar toggles

## By interaction

- [Looping animated icons](https://useanimations.com/interactions/loop) (2): Plays continuously; stays on the static first frame when reduced motion is preferred.
- [Click-to-toggle animated icons](https://useanimations.com/interactions/click-toggle) (4): Toggles between two states on click, or switches immediately when reduced motion is preferred.
- [Click animated icons](https://useanimations.com/interactions/click-replay) (6): Replays once from the start on every click unless reduced motion is preferred.
- [Hover-to-play animated icons](https://useanimations.com/interactions/hover-replay) (22): Plays once on mouseenter unless reduced motion is preferred. Leaving does not stop it; entering during playback does not restart it.

## Code

```jsx
import UseAnimations from 'react-useanimations';
import menu from 'react-useanimations/lib/menu';

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

```bash
npx shadcn@latest add https://useanimations.com/r/menu.json
```

Every icon is also a Lottie JSON file at `https://useanimations.com/icons/<id>.json`: [Lottie icons](https://useanimations.com/lottie-icons).

## FAQ

### Which animated navigation and arrow icons are included?

34 icons: 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 and 22 more. All of them are free for personal and commercial projects under the MIT license, with no attribution required.

### How do I use these animated navigation and arrow icons in React?

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

### Can I use these animated navigation and arrow icons without React?

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

## More categories

- [Animated alert icons](https://useanimations.com/categories/alerts) (5)
- [Animated notification bell icons](https://useanimations.com/categories/notifications) (4)
- [Animated action icons](https://useanimations.com/categories/action) (64)
- [Animated file, folder and user icons](https://useanimations.com/categories/content) (22)
- [Animated form control icons](https://useanimations.com/categories/form) (3)
- [Animated media player icons](https://useanimations.com/categories/media) (28)
- [Animated text editing icons](https://useanimations.com/categories/text-editing) (10)
- [Animated communication icons](https://useanimations.com/categories/communication) (13)
- [Animated device icons](https://useanimations.com/categories/devices) (12)
- [Animated weather icons](https://useanimations.com/categories/weather) (16)
- [Animated map and location icons](https://useanimations.com/categories/maps-location) (9)
- [Animated e-commerce icons](https://useanimations.com/categories/commerce) (11)
- [Animated chart icons](https://useanimations.com/categories/charts) (5)
- [Animated developer icons](https://useanimations.com/categories/development) (9)
- [Animated design and layout icons](https://useanimations.com/categories/design-layout) (10)
- [Animated shape and math icons](https://useanimations.com/categories/shapes-math) (8)
- [Animated loading icons](https://useanimations.com/categories/loading) (5)
- [Animated social media icons](https://useanimations.com/categories/social-media) (22)
- [More animated icons](https://useanimations.com/categories/other) (10)

HTML version: https://useanimations.com/categories/navigation