The Phosphor align left icon visually represents text or elements being positioned flush against the left edge of a container, commonly used in text editors and layout tools to set left alignment.
Common uses
- Setting text alignment to left in a rich text editor.
- Aligning a group of UI elements to the left within a layout.
- Indicating a left-aligned option in a toolbar.
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { AlignLeft } from '@phosphor-icons/react';
<AlignLeft size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<AlignLeft size={24} />thin
<AlignLeft size={24} weight="thin" />light
<AlignLeft size={24} weight="light" />bold
<AlignLeft size={24} weight="bold" />fill
<AlignLeft size={24} weight="fill" />duotone
<AlignLeft size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- design
- Keywords
- alignmentarrangementlayoutflush leftdesigneditoralignleftleft aligntext align leftalign justify left
FAQ
- What does the align left icon represent?
- It signifies aligning content or elements to the left edge, commonly used for text justification or element positioning.
- How do I use the align left icon in React?
- Import it from '@phosphor-icons/react' and use it as a component: import { AlignLeft } from '@phosphor-icons/react'; <AlignLeft />.
- What is the license for this icon?
- The Phosphor icon set, including align left, 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 →