Gentleface › Design › justify-vertical-start
justify-vertical-start icon
justify-vertical-startJustify vertical start: justify start vertical, pack items top. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.
Code line-round
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M1.144 2.856C1.048 2.759 1 2.641 1 2.5C1 2.359 1.048 2.241 1.144 2.144C1.241 2.048 1.359 2 1.5 2L14.5 2C14.641 2 14.759 2.048 14.856 2.144C14.952 2.241 15 2.359 15 2.5C15 2.641 14.952 2.759 14.856 2.856C14.759 2.952 14.641 3 14.5 3L1.5 3C1.359 3 1.241 2.952 1.144 2.856ZM10.707 4.293C10.902 4.488 11 4.724 11 5L11 7C11 7.276 10.902 7.512 10.707 7.707C10.512 7.902 10.276 8 10 8L6 8C5.724 8 5.488 7.902 5.293 7.707C5.098 7.512 5 7.276 5 7L5 5C5 4.724 5.098 4.488 5.293 4.293C5.488 4.098 5.724 4 6 4L10 4C10.276 4 10.512 4.098 10.707 4.293ZM6 7L10 7L10 5L6 5L6 7ZM12.707 13.707C12.512 13.902 12.276 14 12 14L4 14C3.724 14 3.488 13.902 3.293 13.707C3.098 13.512 3 13.276 3 13L3 11C3 10.724 3.098 10.488 3.293 10.293C3.488 10.098 3.724 10 4 10L12 10C12.276 10 12.512 10.098 12.707 10.293C12.902 10.488 13 10.724 13 11L13 13C13 13.276 12.902 13.512 12.707 13.707ZM12 13L12 11L4 11L4 13L12 13Z"/></svg>
// Gentleface "justify-vertical-start" (line-round), MIT. https://gentleface.com/icons/justify-vertical-start
import type { SVGProps } from 'react';
export function JustifyVerticalStartIcon(props: SVGProps<SVGSVGElement>) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
<path d="M1.144 2.856C1.048 2.759 1 2.641 1 2.5C1 2.359 1.048 2.241 1.144 2.144C1.241 2.048 1.359 2 1.5 2L14.5 2C14.641 2 14.759 2.048 14.856 2.144C14.952 2.241 15 2.359 15 2.5C15 2.641 14.952 2.759 14.856 2.856C14.759 2.952 14.641 3 14.5 3L1.5 3C1.359 3 1.241 2.952 1.144 2.856ZM10.707 4.293C10.902 4.488 11 4.724 11 5L11 7C11 7.276 10.902 7.512 10.707 7.707C10.512 7.902 10.276 8 10 8L6 8C5.724 8 5.488 7.902 5.293 7.707C5.098 7.512 5 7.276 5 7L5 5C5 4.724 5.098 4.488 5.293 4.293C5.488 4.098 5.724 4 6 4L10 4C10.276 4 10.512 4.098 10.707 4.293ZM6 7L10 7L10 5L6 5L6 7ZM12.707 13.707C12.512 13.902 12.276 14 12 14L4 14C3.724 14 3.488 13.902 3.293 13.707C3.098 13.512 3 13.276 3 13L3 11C3 10.724 3.098 10.488 3.293 10.293C3.488 10.098 3.724 10 4 10L12 10C12.276 10 12.512 10.098 12.707 10.293C12.902 10.488 13 10.724 13 11L13 13C13 13.276 12.902 13.512 12.707 13.707ZM12 13L12 11L4 11L4 13L12 13Z" />
</svg>
);
}Vue: see /icons/justify-vertical-start.md
Svelte: see /icons/justify-vertical-start.md
HTML img: see /icons/justify-vertical-start.md
CSS: see /icons/justify-vertical-start.md
Data URL: see /icons/justify-vertical-start.md
Sprite: see /icons/justify-vertical-start.md
SwiftUI: see /icons/justify-vertical-start.md
Compose: see /icons/justify-vertical-start.md
Android XML: see /icons/justify-vertical-start.md
Flutter: see /icons/justify-vertical-start.md
Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.
With npm: import { JustifyVerticalStartIcon } from '@gentleface/react'; (setup).
Meaning
- Use it for
- justify start vertical, pack items top
- Tags
- justify, justify content, start, top, flex start, pack, pack top, vertical, column, main axis, items, flexbox, auto layout, arrange, layout, css, figma, design tool, ui design
- Category
- Design
- Component name
JustifyVerticalStartIcon- History
- released in 0.2.0
- added
- Since
- version 0.2.0
Family 5
More design icons
align-horizontal-center align-objects-bottom align-objects-bottom-three align-objects-left align-objects-left-three align-objects-right align-objects-right-three align-objects-top align-objects-top-three align-vertical-center angle animation animation-off auto-layout-horizontal auto-layout-vertical auto-layout-wrap · all design icons
For agents
Metadata: /icons/justify-vertical-start.json · Markdown: /icons/justify-vertical-start.md · SVG: https://gentleface.com/svg/{style}/16/justify-vertical-start.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/justify-vertical-start.png