The Phosphor arrow line up icon depicts an upward-pointing arrow with a line, commonly used to indicate an action that moves content or focus towards the top of a page or list.
Common uses
- Scroll to top button
- Upload indicator
- Expand/collapse section (when indicating expansion upwards)
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { ArrowLineUp } from '@phosphor-icons/react';
<ArrowLineUp size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<ArrowLineUp size={24} />thin
<ArrowLineUp size={24} weight="thin" />light
<ArrowLineUp size={24} weight="light" />bold
<ArrowLineUp size={24} weight="bold" />fill
<ArrowLineUp size={24} weight="fill" />duotone
<ArrowLineUp size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- arrows
- Keywords
- directionalpointerpointingarrowheadtoparrowsarrowlineupscroll upupload arrowarrow topmove up
FAQ
- What is the arrow line up icon used for?
- It signifies upward movement or direction, often used for scrolling to the top, indicating an upload, or expanding content upwards.
- How do I use the arrow line up icon in React?
- Import it from the library like this: import { ArrowLineUp } from '@phosphor-icons/react'.
- What is the license for Phosphor icons?
- Phosphor icons are distributed under the MIT license, allowing for free use.
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 →