The Phosphor arrows out line horizontal icon depicts two outward-pointing arrows on a horizontal line, commonly used to indicate expanding or splitting content horizontally.
Common uses
- Expand/collapse a horizontal panel
- Split view mode (horizontal)
- Open external link in new tab (horizontal)
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { ArrowsOutLineHorizontal } from '@phosphor-icons/react';
<ArrowsOutLineHorizontal size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<ArrowsOutLineHorizontal size={24} />thin
<ArrowsOutLineHorizontal size={24} weight="thin" />light
<ArrowsOutLineHorizontal size={24} weight="light" />bold
<ArrowsOutLineHorizontal size={24} weight="bold" />fill
<ArrowsOutLineHorizontal size={24} weight="fill" />duotone
<ArrowsOutLineHorizontal size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- arrows
- Keywords
- *updated*directionalpointerpointingarrowheadopensplitarrowsdesigneditoroutlinehorizontalhorizontal splitexpand horizontaloutward arrows
FAQ
- What does the arrows out line horizontal icon represent?
- This icon represents the action of expanding or splitting something horizontally, like a content area or a view.
- How do I use this icon in React?
- You can import and use it in React with: import { ArrowsOutLineHorizontal } from '@phosphor-icons/react'.
- What is the license for this icon?
- The Phosphor icon library, including this icon, is available under the MIT license.
Related icons
The same idea in other libraries, and near matches in Phosphor.
Looking for something else? Search Phosphor 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 →