The Heroicons arrow up right icon depicts an arrow pointing diagonally upwards and to the right, commonly used to indicate an external link, a new window, or an action that leads to a new or different destination.
Common uses
- Indicating external links
- Signifying opening in a new tab
- Representing navigation to a related or advanced section
Use it in React
Install
npm i @heroicons/reactImport & render
import { ArrowUpRightIcon } from '@heroicons/react/24/outline';
<ArrowUpRightIcon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<ArrowUpRightIcon className="size-6" />24/solid
<ArrowUpRightIcon className="size-6" />20/solid
<ArrowUpRightIcon className="size-6" />16/solid
<ArrowUpRightIcon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- arrowuprightexternal link iconnew tab iconoutbound linkdiagonal arrow
FAQ
- What is the arrow up right icon used for?
- It typically signifies an action that leads to a new or different destination, such as an external link or opening content in a new tab.
- How do I use the arrow up right icon in React?
- You can import and use it like this: import { ArrowUpRightIcon } from '@heroicons/react/24/outline'.
- What is the license for Heroicons?
- Heroicons are distributed under the MIT license, allowing for free use in both personal and commercial projects.
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 →