arrow path icon

Common uses

• Refresh data list
• Reload page content
• Sync status indicator

Use it in React

npm i @heroicons/react

import { ArrowPathIcon } from '@heroicons/react/24/outline';

<ArrowPathIcon className="size-6" />

Styles

Heroicons ships this icon in 4 styles — each its own import:

<ArrowPathIcon className="size-6" />

<ArrowPathIcon className="size-6" />

<ArrowPathIcon className="size-6" />

<ArrowPathIcon className="size-6" />

Details

Library

Heroicons (324 icons)

License

MIT

viewBox

0 0 24 24

Keywords

arrowpathrefreshreloadsynccircular arrow

FAQ

What does the arrow path icon represent?

It represents a refresh, reload, or synchronization action. It visually communicates that an operation is being reset or updated.

How do I use the arrow path icon in React?

You can import it from the Heroicons library like this: import { ArrowPathIcon } from '@heroicons/react/24/outline'. Then use it as a React component: <ArrowPathIcon className="h-6 w-6" />.

What is the license for the Heroicons arrow path icon?

The Heroicons library, including the arrow path icon, is available under the MIT license.

Related icons

The same idea in other libraries, and near matches in Heroicons.