The Phosphor square split vertical icon depicts a square divided into two equal vertical rectangles, commonly used to represent layout options that split content vertically or a split-screen view.
Common uses
- Vertical split-screen layout toggle
- Content pane divider
- Two-column view selector
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { SquareSplitVertical } from '@phosphor-icons/react';
<SquareSplitVertical size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<SquareSplitVertical size={24} />thin
<SquareSplitVertical size={24} weight="thin" />light
<SquareSplitVertical size={24} weight="light" />bold
<SquareSplitVertical size={24} weight="bold" />fill
<SquareSplitVertical size={24} weight="fill" />duotone
<SquareSplitVertical size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- design
- Keywords
- shapespolygonsrowsdesigneditorsquaresplitverticalvertical splitsplit viewtwo columnslayout vertical
FAQ
- What does the square split vertical icon represent?
- It represents a division of space into two vertical sections, often used for layout controls or split views in user interfaces.
- How do I use this icon in React?
- You can import and use it like this: import { SquareSplitVertical } from '@phosphor-icons/react'. Then render it as a React component: <SquareSplitVertical />.
- What is the license for this icon?
- The Phosphor icon set, including the square split vertical 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 →