Gentleface › Text & formatting › align-left

align-left icon

Align left: align left, text align left, align start, left align. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<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 3.856C1.048 3.759 1 3.641 1 3.5C1 3.359 1.048 3.241 1.144 3.144C1.241 3.048 1.359 3 1.5 3L14.5 3C14.641 3 14.759 3.048 14.856 3.144C14.952 3.241 15 3.359 15 3.5C15 3.641 14.952 3.759 14.856 3.856C14.759 3.952 14.641 4 14.5 4L1.5 4C1.359 4 1.241 3.952 1.144 3.856ZM1.144 6.856C1.048 6.759 1 6.641 1 6.5C1 6.359 1.048 6.241 1.144 6.144C1.241 6.048 1.359 6 1.5 6L8.5 6C8.641 6 8.759 6.048 8.856 6.144C8.952 6.241 9 6.359 9 6.5C9 6.641 8.952 6.759 8.856 6.856C8.759 6.952 8.641 7 8.5 7L1.5 7C1.359 7 1.241 6.952 1.144 6.856ZM14.856 9.144C14.952 9.241 15 9.359 15 9.5C15 9.641 14.952 9.759 14.856 9.856C14.759 9.952 14.641 10 14.5 10L1.5 10C1.359 10 1.241 9.952 1.144 9.856C1.048 9.759 1 9.641 1 9.5C1 9.359 1.048 9.241 1.144 9.144C1.241 9.048 1.359 9 1.5 9L14.5 9C14.641 9 14.759 9.048 14.856 9.144ZM1.144 12.856C1.048 12.759 1 12.641 1 12.5C1 12.359 1.048 12.241 1.144 12.144C1.241 12.048 1.359 12 1.5 12L8.5 12C8.641 12 8.759 12.048 8.856 12.144C8.952 12.241 9 12.359 9 12.5C9 12.641 8.952 12.759 8.856 12.856C8.759 12.952 8.641 13 8.5 13L1.5 13C1.359 13 1.241 12.952 1.144 12.856Z"/></svg>

React

// Gentleface "align-left" (line-round), MIT. https://gentleface.com/icons/align-left
import type { SVGProps } from 'react';

export function AlignLeftIcon(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 3.856C1.048 3.759 1 3.641 1 3.5C1 3.359 1.048 3.241 1.144 3.144C1.241 3.048 1.359 3 1.5 3L14.5 3C14.641 3 14.759 3.048 14.856 3.144C14.952 3.241 15 3.359 15 3.5C15 3.641 14.952 3.759 14.856 3.856C14.759 3.952 14.641 4 14.5 4L1.5 4C1.359 4 1.241 3.952 1.144 3.856ZM1.144 6.856C1.048 6.759 1 6.641 1 6.5C1 6.359 1.048 6.241 1.144 6.144C1.241 6.048 1.359 6 1.5 6L8.5 6C8.641 6 8.759 6.048 8.856 6.144C8.952 6.241 9 6.359 9 6.5C9 6.641 8.952 6.759 8.856 6.856C8.759 6.952 8.641 7 8.5 7L1.5 7C1.359 7 1.241 6.952 1.144 6.856ZM14.856 9.144C14.952 9.241 15 9.359 15 9.5C15 9.641 14.952 9.759 14.856 9.856C14.759 9.952 14.641 10 14.5 10L1.5 10C1.359 10 1.241 9.952 1.144 9.856C1.048 9.759 1 9.641 1 9.5C1 9.359 1.048 9.241 1.144 9.144C1.241 9.048 1.359 9 1.5 9L14.5 9C14.641 9 14.759 9.048 14.856 9.144ZM1.144 12.856C1.048 12.759 1 12.641 1 12.5C1 12.359 1.048 12.241 1.144 12.144C1.241 12.048 1.359 12 1.5 12L8.5 12C8.641 12 8.759 12.048 8.856 12.144C8.952 12.241 9 12.359 9 12.5C9 12.641 8.952 12.759 8.856 12.856C8.759 12.952 8.641 13 8.5 13L1.5 13C1.359 13 1.241 12.952 1.144 12.856Z" />
    </svg>
  );
}

Vue

Vue: see /icons/align-left.md

Svelte

Svelte: see /icons/align-left.md

HTML img

HTML img: see /icons/align-left.md

CSS

CSS: see /icons/align-left.md

Data URL

Data URL: see /icons/align-left.md

Sprite

Sprite: see /icons/align-left.md

SwiftUI

SwiftUI: see /icons/align-left.md

Compose

Compose: see /icons/align-left.md

Android XML

Android XML: see /icons/align-left.md

Flutter

Flutter: see /icons/align-left.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.

Meaning

Use it for

align left, text align left, align start, left align, flush left

Alternatives

align-objects-left: align objects on a canvas by their left edges (align-objects-left)

Not for

align objects left (use align-objects-left): aligns lines of text, not objects

Tags

align, alignment, left, paragraph, text, justify, format

Category

Text & formatting

Component name

AlignLeftIcon

History

2026-10-14 added

Family 5

align-center align-justify align-right indent-decrease indent-increase

More text & formatting icons

asterisk bold border-all border-bottom border-inner border-left border-none border-right border-top case-lower case-sensitive checklist copyright divider divider-vertical heading · all text & formatting icons

For agents

Metadata: /icons/align-left.json · Markdown: /icons/align-left.md · SVG: https://gentleface.com/svg/{style}/16/align-left.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/align-left.png

align-left icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp