The Phosphor split horizontal icon depicts two vertical bars separated by a gap, commonly used to indicate splitting a view or content horizontally.
Common uses
- Splitting a code editor into two panes
- Resizing a sidebar or panel
- Dividing content areas in a layout
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { SplitHorizontal } from '@phosphor-icons/react';
<SplitHorizontal size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<SplitHorizontal size={24} />thin
<SplitHorizontal size={24} weight="thin" />light
<SplitHorizontal size={24} weight="light" />bold
<SplitHorizontal size={24} weight="bold" />fill
<SplitHorizontal size={24} weight="fill" />duotone
<SplitHorizontal size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- arrows
- Keywords
- resizecolumnsarrowsdesigneditorsplithorizontalhorizontal splittwo columnsresize horizontaldivider
FAQ
- What is the split horizontal icon used for?
- It visually represents the action of dividing a space or interface element into two horizontal sections, often for resizing or layout purposes.
- How do I use this icon in React?
- You can import it directly from the library: `import { SplitHorizontal } from '@phosphor-icons/react'` and then use it as a component: `<SplitHorizontal />`.
- What is the license for Phosphor icons?
- Phosphor icons are distributed under the MIT license, which allows for free usage in both personal and commercial projects.
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 →