The Phosphor layout icon visually represents a common UI structure, often used to signify areas like sidebars, content panes, or overall page arrangement in design tools and applications.
Common uses
- Sidebar toggle button
- Content area representation
- Page structure settings
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { Layout } from '@phosphor-icons/react';
<Layout size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<Layout size={24} />thin
<Layout size={24} weight="thin" />light
<Layout size={24} weight="light" />bold
<Layout size={24} weight="bold" />fill
<Layout size={24} weight="fill" />duotone
<Layout size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- design
- Keywords
- wireframesidebaruiinterfacedesigneditorlayout
FAQ
- What is the layout icon typically used for?
- It's used to represent UI elements related to page structure, such as sidebars, content areas, or general design layouts.
- How do I use the layout icon in React?
- You can import and use it like this: `import { Layout } from '@phosphor-icons/react'`. Then render it as a component: `<Layout size={24} />`.
- What is the license for the Phosphor layout icon?
- The Phosphor icon library, including the layout 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 →