arrows up down icon

Common uses

• Sortable table column header
• Expand/collapse section toggle
• Reorderable list item indicator

Use it in React

npm i @heroicons/react

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

<ArrowsUpDownIcon className="size-6" />

Styles

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

<ArrowsUpDownIcon className="size-6" />

<ArrowsUpDownIcon className="size-6" />

<ArrowsUpDownIcon className="size-6" />

<ArrowsUpDownIcon className="size-6" />

Details

Library

Heroicons (324 icons)

License

MIT

viewBox

0 0 24 24

Keywords

arrowsupdownsort iconbidirectional arrowsexpand collapseup down arrows

FAQ

What is the arrows up down icon used for?

It signifies bidirectional movement, often used for sorting controls or to show that an element can be expanded or collapsed.

How do I use the arrows up down icon in React?

Import it from Heroicons like this: import { ArrowsUpDownIcon } 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.