The Phosphor columns plus left icon depicts a layout with multiple columns and an additional element being added to the left, commonly used to represent adding a new section or item before an existing set of content.
Common uses
- Adding a new column to a multi-column layout.
- Inserting an item at the beginning of a list or table.
- Prepend action in a content management system.
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { ColumnsPlusLeft } from '@phosphor-icons/react';
<ColumnsPlusLeft size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<ColumnsPlusLeft size={24} />thin
<ColumnsPlusLeft size={24} weight="thin" />light
<ColumnsPlusLeft size={24} weight="light" />bold
<ColumnsPlusLeft size={24} weight="bold" />fill
<ColumnsPlusLeft size={24} weight="fill" />duotone
<ColumnsPlusLeft size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- design
- Keywords
- *new*2shapespolygonsboxstacklisttablecardsprependinsertdesigncolumnsplusleftadd column left
FAQ
- What is the columns plus left icon used for?
- It's typically used to signify adding a new element or section to the left of an existing arrangement, like adding a new column or item.
- How do I use this icon in React?
- You can import and use it like this: import { ColumnsPlusLeft } from '@phosphor-icons/react'. Then render it as <ColumnsPlusLeft />.
- What is the license for this icon?
- This icon is from the Phosphor library and 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 →