bars arrow up icon

Common uses

• Sort table column ascending
• Scroll to top button
• Move item to top of list

Use it in React

npm i @heroicons/react

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

<BarsArrowUpIcon className="size-6" />

Styles

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

<BarsArrowUpIcon className="size-6" />

<BarsArrowUpIcon className="size-6" />

<BarsArrowUpIcon className="size-6" />

<BarsArrowUpIcon className="size-6" />

Details

Library

Heroicons (324 icons)

License

MIT

viewBox

0 0 24 24

Keywords

barsarrowupsort ascendingsort upscroll to topmove to top

FAQ

What does the bars arrow up icon represent?

It visually represents sorting data in ascending order or moving content to the top of a page or list.

How do I use this icon in React?

Import it using: import { BarsArrowUpIcon } from '@heroicons/react/24/outline' and then use it as a React component.

What is the license for this icon?

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

Related icons

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