The Phosphor align top simple icon visually represents aligning selected objects or elements to the top edge of their container or the canvas, commonly used in design tools for layout control.
Common uses
- Aligning text blocks to the top of a text area.
- Positioning image thumbnails at the top of a gallery grid.
- Setting the top boundary for multiple selected elements in a WYSIWYG editor.
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { AlignTopSimple } from '@phosphor-icons/react';
<AlignTopSimple size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<AlignTopSimple size={24} />thin
<AlignTopSimple size={24} weight="thin" />light
<AlignTopSimple size={24} weight="light" />bold
<AlignTopSimple size={24} weight="bold" />fill
<AlignTopSimple size={24} weight="fill" />duotone
<AlignTopSimple size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- design
- Keywords
- alignmentarrangementlayoutflush topdesigneditoraligntopsimpletop alignalign elements toplayout top
FAQ
- What is the align top simple icon used for?
- It's used to align multiple selected items to their topmost edge. This helps in creating organized and consistent layouts.
- How do I use this icon in React?
- You can import and use it like this: `import { AlignTopSimple } from '@phosphor-icons/react'`. Then render it as a React component: `<AlignTopSimple />`.
- What is the license for this icon?
- The Phosphor icon library, including the align-top-simple icon, is available under the MIT license.
Related icons
The same idea in other libraries, and near matches in Phosphor.