John KuehJohn Kueh

arrows pointing out icon

Heroicons · arrows-pointing-out · MIT

Download SVG

The Heroicons arrows pointing out icon visually represents expanding or entering a full-screen mode, commonly used to signify an action that enlarges content to occupy the entire display.

Common uses

  • Enter full-screen mode for videos or images
  • Expand a modal or pop-up window
  • Initiate a 'view details' or 'enlarge' action

Use it in React

Install
npm i @heroicons/react
Import & render
import { ArrowsPointingOutIcon } from '@heroicons/react/24/outline';

<ArrowsPointingOutIcon className="size-6" />

Styles

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

24/outline
<ArrowsPointingOutIcon className="size-6" />
24/solid
<ArrowsPointingOutIcon className="size-6" />
20/solid
<ArrowsPointingOutIcon className="size-6" />
16/solid
<ArrowsPointingOutIcon className="size-6" />

Details

Library
Heroicons (324 icons)
License
MIT
viewBox
0 0 24 24
Keywords
arrowspointingoutexpand iconfullscreen iconenlarge iconoutward arrows

FAQ

What is the purpose of the arrows pointing out icon?
This icon typically indicates an action to expand content to full screen or a larger view.
How do I use this icon in React?
Import it using: import { ArrowsPointingOutIcon } from '@heroicons/react/24/outline'
What is the license for Heroicons?
Heroicons are released under the MIT license, allowing for free use.

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 →