The Heroicons arrow turn up right icon depicts a directional change upwards and to the right, commonly used to indicate navigation, progression, or a positive trend.
Common uses
- Navigating to a new section
- Indicating a positive growth trend
- Signaling an external link
Use it in React
Install
npm i @heroicons/reactImport & render
import { ArrowTurnUpRightIcon } from '@heroicons/react/24/outline';
<ArrowTurnUpRightIcon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<ArrowTurnUpRightIcon className="size-6" />24/solid
<ArrowTurnUpRightIcon className="size-6" />20/solid
<ArrowTurnUpRightIcon className="size-6" />16/solid
<ArrowTurnUpRightIcon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- arrowturnuprightup right arrowturn arrowdirectional arrowprogress arrow
FAQ
- What is the arrow turn up right icon used for?
- This icon is typically used to show movement or direction upwards and to the right, often signifying progress, navigation, or an upward trend.
- How do I use this icon in React?
- You can import and use it in your React application with: import { ArrowTurnUpRightIcon } from '@heroicons/react/24/outline'
- 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 →