arrow right on rectangle icon

Common uses

• Login button
• Sign up action
• Export data

Use it in React

npm i @heroicons/react

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

<ArrowRightOnRectangleIcon className="size-6" />

Styles

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

<ArrowRightOnRectangleIcon className="size-6" />

<ArrowRightOnRectangleIcon className="size-6" />

<ArrowRightOnRectangleIcon className="size-6" />

Details

Library

Heroicons (324 icons)

License

MIT

viewBox

0 0 24 24

Keywords

arrowrightonrectanglelogin iconsign in iconenter iconexport icon

FAQ

What does the arrow right on rectangle icon represent?

It represents an action of moving into or entering a defined space, often used for login or sign-in functionalities.

How do I use this icon in React?

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

What is the license for Heroicons?

Heroicons are provided 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.