The Phosphor arrows vertical icon depicts two opposing arrows pointing up and down, commonly used to indicate vertical resizing or sorting functionality.
Common uses
- Vertical resize handle
- Sortable column header (ascending/descending)
- Expand/collapse section
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { ArrowsVertical } from '@phosphor-icons/react';
<ArrowsVertical size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<ArrowsVertical size={24} />thin
<ArrowsVertical size={24} weight="thin" />light
<ArrowsVertical size={24} weight="light" />bold
<ArrowsVertical size={24} weight="bold" />fill
<ArrowsVertical size={24} weight="fill" />duotone
<ArrowsVertical size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- arrows
- Keywords
- *updated*directionalpointercursorresizeexpandupdownarrowsverticalvertical sortresize up downdirectional arrows
FAQ
- What does the arrows vertical icon represent?
- It represents vertical movement or adjustment, often used for resizing elements or indicating vertical sorting.
- How do I use the arrows vertical icon in React?
- You can import and use it like this: import { ArrowsVertical } from '@phosphor-icons/react'.
- What is the license for this icon?
- The Phosphor icon library, including the arrows vertical icon, is available under the MIT license.
Related icons
The same idea in other libraries, and near matches in Phosphor.
Looking for something else? Search Phosphor and 4 more libraries by description →
The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →