arrow top right on square icon

Common uses

• Link to external website
• Open in new tab button
• Redirect to documentation

Use it in React

npm i @heroicons/react

import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline';

<ArrowTopRightOnSquareIcon className="size-6" />

Styles

Heroicons ships this icon in 4 styles — each its own import:

<ArrowTopRightOnSquareIcon className="size-6" />

<ArrowTopRightOnSquareIcon className="size-6" />

<ArrowTopRightOnSquareIcon className="size-6" />

<ArrowTopRightOnSquareIcon className="size-6" />

Details

Library

Heroicons (324 icons)

License

MIT

viewBox

0 0 24 24

Keywords

arrowtoprightonsquareexternal link iconnew tab iconoutbound arrowgo to link

FAQ

What does the arrow top right on square icon represent?

This icon represents an action that leads to a new destination, often an external link or opening content in a new tab.

How do I use this icon in React?

You can import and use it in React with: import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline'

What is the license for this icon?

The Heroicons library, including this icon, is distributed under the MIT license.

Related icons

The same idea in other libraries, and near matches in Heroicons.