The HugeIcons align box middle center icon visually represents the alignment of content within a bounding box to the center both horizontally and vertically, commonly used for centering elements in layouts or interfaces.
Common uses
- Centering text within a button
- Aligning an image in the middle of a card
- Positioning a modal dialog in the screen's center
Use it in React
Install
npm i @hugeicons/react @hugeicons/core-free-iconsImport & render
import { HugeiconsIcon } from '@hugeicons/react';
import { AlignBoxMiddleCenterIcon } from '@hugeicons/core-free-icons';
<HugeiconsIcon icon={AlignBoxMiddleCenterIcon} size={24} strokeWidth={1.5} />Details
- Library
- HugeIcons (5,121 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- center alignmiddle aligncenter contentalign center
FAQ
- What does the align box middle center icon represent?
- This icon represents the concept of centering an element within its container, both horizontally and vertically. It's used in UI design to indicate or control the precise middle alignment of content.
- How do I use the AlignBoxMiddleCenterIcon in React?
- To use it in React, first import the icon: `import { AlignBoxMiddleCenterIcon } from '@hugeicons/core-free-icons';`. Then, render it using the `HugeiconsIcon` component: `<HugeiconsIcon icon={AlignBoxMiddleCenterIcon} />`.
- What is the license for this icon?
- The HugeIcons icon library, including the AlignBoxMiddleCenterIcon, is available under the MIT license.
Related icons
The same idea in other libraries, and near matches in HugeIcons.
Looking for something else? Search HugeIcons 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 →