The Phosphor rectangle icon depicts a basic rectangular shape, commonly used to represent areas, containers, or elements with defined boundaries in user interfaces.
Common uses
- Representing a generic content block or card.
- Indicating a selection area or bounding box.
- As a placeholder for an image or media element.
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { Rectangle } from '@phosphor-icons/react';
<Rectangle size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<Rectangle size={24} />thin
<Rectangle size={24} weight="thin" />light
<Rectangle size={24} weight="light" />bold
<Rectangle size={24} weight="bold" />fill
<Rectangle size={24} weight="fill" />duotone
<Rectangle size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- design
- Keywords
- 4shapespolygonsboxdesignrectanglesquareshapeframe
FAQ
- What is the rectangle icon used for?
- It's used to visually represent rectangular areas, containers, or elements in UI design. It can also signify bounding boxes or placeholders.
- How do I use the rectangle icon in React?
- You can import it directly from the library using: import { Rectangle } from '@phosphor-icons/react'.
- What is the license for the Phosphor rectangle icon?
- The Phosphor icon library, including the rectangle 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 →