Gentleface › Arrows › arrow-left-to-line

arrow-left-to-line icon

Arrow left to line: jump to start, move to start, go to start, go to beginning. 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.856 12.856C1.759 12.952 1.641 13 1.5 13C1.359 13 1.241 12.952 1.144 12.856C1.048 12.759 1 12.641 1 12.5L1 2.5C1 2.359 1.048 2.241 1.144 2.144C1.241 2.048 1.359 2 1.5 2C1.641 2 1.759 2.048 1.856 2.144C1.952 2.241 2 2.359 2 2.5L2 12.5C2 12.641 1.952 12.759 1.856 12.856ZM8.146 3.146C8.246 3.047 8.364 2.997 8.5 2.997C8.636 2.997 8.754 3.047 8.854 3.146C8.951 3.244 9 3.362 9 3.5C9 3.638 8.951 3.756 8.854 3.854L5.707 7L14.5 7C14.641 7 14.759 7.048 14.856 7.144C14.952 7.241 15 7.359 15 7.5C15 7.641 14.952 7.759 14.856 7.856C14.759 7.952 14.641 8 14.5 8L5.707 8L8.854 11.146C8.953 11.246 9.003 11.364 9.003 11.5C9.003 11.636 8.953 11.754 8.854 11.854C8.754 11.953 8.636 12.003 8.5 12.003C8.364 12.003 8.246 11.953 8.146 11.854L4.146 7.854C4.049 7.756 4 7.638 4 7.5C4 7.362 4.049 7.244 4.146 7.146L8.146 3.146Z"/></svg>

React

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

export function ArrowLeftToLineIcon(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.856 12.856C1.759 12.952 1.641 13 1.5 13C1.359 13 1.241 12.952 1.144 12.856C1.048 12.759 1 12.641 1 12.5L1 2.5C1 2.359 1.048 2.241 1.144 2.144C1.241 2.048 1.359 2 1.5 2C1.641 2 1.759 2.048 1.856 2.144C1.952 2.241 2 2.359 2 2.5L2 12.5C2 12.641 1.952 12.759 1.856 12.856ZM8.146 3.146C8.246 3.047 8.364 2.997 8.5 2.997C8.636 2.997 8.754 3.047 8.854 3.146C8.951 3.244 9 3.362 9 3.5C9 3.638 8.951 3.756 8.854 3.854L5.707 7L14.5 7C14.641 7 14.759 7.048 14.856 7.144C14.952 7.241 15 7.359 15 7.5C15 7.641 14.952 7.759 14.856 7.856C14.759 7.952 14.641 8 14.5 8L5.707 8L8.854 11.146C8.953 11.246 9.003 11.364 9.003 11.5C9.003 11.636 8.953 11.754 8.854 11.854C8.754 11.953 8.636 12.003 8.5 12.003C8.364 12.003 8.246 11.953 8.146 11.854L4.146 7.854C4.049 7.756 4 7.638 4 7.5C4 7.362 4.049 7.244 4.146 7.146L8.146 3.146Z" />
    </svg>
  );
}

Vue

Vue: see /icons/arrow-left-to-line.md

Svelte

Svelte: see /icons/arrow-left-to-line.md

HTML img

HTML img: see /icons/arrow-left-to-line.md

CSS

CSS: see /icons/arrow-left-to-line.md

Data URL

Data URL: see /icons/arrow-left-to-line.md

Sprite

Sprite: see /icons/arrow-left-to-line.md

SwiftUI

SwiftUI: see /icons/arrow-left-to-line.md

Compose

Compose: see /icons/arrow-left-to-line.md

Android XML

Android XML: see /icons/arrow-left-to-line.md

Flutter

Flutter: see /icons/arrow-left-to-line.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

jump to start, move to start, go to start, go to beginning

Alternatives

chevron-left-to-line: the first page in a pager (first-page)
arrow-up-to-line: move an item to the top of a vertical list (move-to-top)

Don’t confuse with

skip-back: skip-back is the media previous-track control

Also fits

first page: move the cursor or an item to the start (jump-to-start)

Tags

arrow, left, start, beginning, limit, to-line, jump, home, bar

Category

Arrows

Component name

ArrowLeftToLineIcon

History

2026-10-15 added

Family 27

arrow-down arrow-down-left arrow-down-right arrow-down-to-line arrow-left arrow-left-right arrow-right arrow-right-to-line arrow-up arrow-up-down arrow-up-left arrow-up-right

More arrows icons

arrows-out chevron-down chevron-down-triangle chevron-left chevron-left-to-line chevron-left-triangle chevron-right chevron-right-to-line chevron-right-triangle chevron-up chevron-up-triangle chevrons-down chevrons-down-up chevrons-left chevrons-right chevrons-up · all arrows icons

For agents

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

arrow-left-to-line icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp