arrow left end on rectangle icon

Common uses

• Logout button
• Back to previous screen
• Exit full-screen mode

Use it in React

npm i @heroicons/react

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

<ArrowLeftEndOnRectangleIcon className="size-6" />

Styles

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

<ArrowLeftEndOnRectangleIcon className="size-6" />

<ArrowLeftEndOnRectangleIcon className="size-6" />

<ArrowLeftEndOnRectangleIcon className="size-6" />

<ArrowLeftEndOnRectangleIcon className="size-6" />

Details

Library

Heroicons (324 icons)

License

MIT

viewBox

0 0 24 24

Keywords

arrowleftendonrectanglelog outexitsign outback

FAQ

What is the arrow left end on rectangle icon used for?

This icon typically signifies an exit or logout action. It's commonly used on buttons to indicate that clicking it will end the current session or return the user to a previous state.

How do I use this icon in React?

You can import and use it in your React application with the following statement: `import { ArrowLeftEndOnRectangleIcon } from '@heroicons/react/24/outline'`.

What is the license for Heroicons?

Heroicons are provided under the MIT license, which allows for free use in both personal and commercial projects.

Related icons

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