The Phosphor square half bottom icon depicts a square divided horizontally, with the bottom half filled, commonly used to represent a split view or a section that is partially complete.
Common uses
- Representing a vertical split screen layout.
- Indicating a partially filled or selected area.
- Showing a content block with a distinct bottom section.
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { SquareHalfBottom } from '@phosphor-icons/react';
<SquareHalfBottom size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<SquareHalfBottom size={24} />thin
<SquareHalfBottom size={24} weight="thin" />light
<SquareHalfBottom size={24} weight="light" />bold
<SquareHalfBottom size={24} weight="bold" />fill
<SquareHalfBottom size={24} weight="fill" />duotone
<SquareHalfBottom size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- design
- Keywords
- 4shapespolygonsboxcolumnssidebarsplit verticaldesignsquarehalfbottomhalf filled square
FAQ
- What is the square half bottom icon used for?
- This icon is typically used to visually represent a split interface, a partially filled state, or a distinct bottom section within a UI element.
- How do I use the square half bottom icon in React?
- You can import and use it in your React application with: import { SquareHalfBottom } from '@phosphor-icons/react'
- What is the license for this icon?
- The Phosphor icon library, including the square half bottom 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 →