The Phosphor text columns icon visually represents content divided into multiple vertical sections, commonly used in UI to indicate layout options for articles or text-heavy interfaces.
Common uses
- Layout switcher for multi-column content
- Button to enable/disable a column view
- Setting for print or article formatting
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { TextColumns } from '@phosphor-icons/react';
<TextColumns size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<TextColumns size={24} />thin
<TextColumns size={24} weight="thin" />light
<TextColumns size={24} weight="light" />bold
<TextColumns size={24} weight="bold" />fill
<TextColumns size={24} weight="fill" />duotone
<TextColumns size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- design
- Keywords
- *updated*typographyprintfontalignmentarticledesigneditortextcolumnsmulti-columnlayout columnsarticle viewtext layout
FAQ
- What is the text columns icon used for?
- It's used to represent the concept of dividing content into multiple vertical columns, often related to layout or text formatting.
- How do I use the text columns icon in React?
- You can import it from the '@phosphor-icons/react' library like this: import { TextColumns } from '@phosphor-icons/react'.
- What is the license for this icon?
- The Phosphor icon library, including the text columns 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 →