The Phosphor align top icon visually represents aligning selected objects or elements to the top edge of a container or selection, commonly used in design tools for precise layout control.
Common uses
- Aligning text boxes to the top of a page section.
- Distributing images evenly with their tops aligned.
- Positioning form fields relative to a top boundary.
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { AlignTop } from '@phosphor-icons/react';
<AlignTop size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<AlignTop size={24} />thin
<AlignTop size={24} weight="thin" />light
<AlignTop size={24} weight="light" />bold
<AlignTop size={24} weight="bold" />fill
<AlignTop size={24} weight="fill" />duotone
<AlignTop size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- design
- Keywords
- alignmentarrangementlayoutflush topdesigneditoraligntoptop alignalign elements topvertical align topobject align top
FAQ
- What is the align top icon used for?
- It's used in user interfaces to align multiple selected elements to their topmost edge. This helps in creating organized and visually consistent layouts.
- How do I use the align top icon in React?
- You can import and use it in your React application with: import { AlignTop } from '@phosphor-icons/react'. Then render it as <AlignTop size={24} />.
- What is the license for the Phosphor align top icon?
- The Phosphor icon library, including the align top 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 →