The Phosphor align bottom icon visually represents aligning multiple objects to the bottom edge of a container or selection, commonly used in design tools to ensure consistent vertical spacing.
Common uses
- Align selected layers to the bottom of the artboard.
- Distribute elements evenly with their bottom edges aligned.
- Set the baseline for text elements in a form.
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { AlignBottom } from '@phosphor-icons/react';
<AlignBottom size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<AlignBottom size={24} />thin
<AlignBottom size={24} weight="thin" />light
<AlignBottom size={24} weight="light" />bold
<AlignBottom size={24} weight="bold" />fill
<AlignBottom size={24} weight="fill" />duotone
<AlignBottom size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- design
- Keywords
- alignmentarrangementlayoutflush bottomdesigneditoralignbottomalign bottom edgebottom alignvertical align bottom
FAQ
- What is the purpose of the align bottom icon?
- This icon is used in user interfaces to indicate the action of aligning selected items to their lowest common bottom edge.
- How do I use the align bottom icon in React?
- You can import and use it in your React application with: import { AlignBottom } from '@phosphor-icons/react'
- What is the license for the Phosphor align bottom icon?
- The Phosphor icon library, including the align bottom 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 →