The Heroicons arrow long up icon depicts a lengthy upward-pointing arrow, commonly used to indicate an increase, a return to the top of a page, or a positive trend.
Common uses
- Scroll to top button
- Positive stock market indicator
- Upload progress indicator
Use it in React
Install
npm i @heroicons/reactImport & render
import { ArrowLongUpIcon } from '@heroicons/react/24/outline';
<ArrowLongUpIcon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<ArrowLongUpIcon className="size-6" />24/solid
<ArrowLongUpIcon className="size-6" />20/solid
<ArrowLongUpIcon className="size-6" />16/solid
<ArrowLongUpIcon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- arrowlongupupward arrowlong arrow upincrease arrowreturn to top
FAQ
- What is the arrow long up icon used for?
- It signifies upward movement, increases, or returning to the beginning of content.
- How do I use the arrow long up icon in React?
- Import it using: `import { ArrowLongUpIcon } from '@heroicons/react/24/outline'`. 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.
Looking for something else? Search Heroicons 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 →