The Phosphor align center horizontal icon visually represents the action of centering multiple objects or elements along their horizontal axis, commonly used in design tools to ensure visual balance.
Common uses
- Centering text blocks within a container.
- Aligning form fields horizontally in a settings panel.
- Distributing images evenly across a page layout.
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { AlignCenterHorizontal } from '@phosphor-icons/react';
<AlignCenterHorizontal size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<AlignCenterHorizontal size={24} />thin
<AlignCenterHorizontal size={24} weight="thin" />light
<AlignCenterHorizontal size={24} weight="light" />bold
<AlignCenterHorizontal size={24} weight="bold" />fill
<AlignCenterHorizontal size={24} weight="fill" />duotone
<AlignCenterHorizontal size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- design
- Keywords
- alignmentarrangementlayoutcenteredmiddledesigneditoraligncenterhorizontalcenter horizontalhorizontal alignmiddle alignalign middle
FAQ
- What does the align center horizontal icon represent?
- It signifies the alignment of selected items to the horizontal center of a chosen area or relative to each other.
- How do I use this icon in React?
- Import it from the library like this: `import { AlignCenterHorizontal } from '@phosphor-icons/react'` and use it as a component: `<AlignCenterHorizontal />`.
- What is the license for this icon?
- The Phosphor icon set, including this 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 →