arrow up circle icon

Common uses

• Scroll to top button
• Upload indicator
• Navigate to parent directory

Use it in React

npm i @heroicons/react

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

<ArrowUpCircleIcon className="size-6" />

Styles

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

<ArrowUpCircleIcon className="size-6" />

<ArrowUpCircleIcon className="size-6" />

<ArrowUpCircleIcon className="size-6" />

<ArrowUpCircleIcon className="size-6" />

Details

Library

Heroicons (324 icons)

License

MIT

viewBox

0 0 24 24

Keywords

arrowupcircleup arrow circlescroll topupload iconback to top

FAQ

What is the arrow up circle icon used for?

This icon typically signifies an upward movement or return, such as scrolling to the top of a page or initiating an upload.

How do I use the arrow up circle icon in React?

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

What is the license for Heroicons?

Heroicons are provided under the MIT license, allowing for free use in both personal and commercial projects.

Related icons

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