arrow-left icon

Arrow left: back, go back, navigate back. 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="M12.5 7C12.641 7 12.759 7.048 12.856 7.144C12.952 7.241 13 7.359 13 7.5C13 7.641 12.952 7.759 12.856 7.856C12.759 7.952 12.641 8 12.5 8L3.707 8L6.854 11.146C6.953 11.246 7.003 11.364 7.003 11.5C7.003 11.636 6.953 11.754 6.854 11.854C6.756 11.951 6.638 12 6.5 12C6.362 12 6.244 11.951 6.146 11.854L2.146 7.854C2.049 7.756 2 7.638 2 7.5C2 7.362 2.049 7.244 2.146 7.146L6.146 3.146C6.246 3.047 6.364 2.997 6.5 2.997C6.636 2.997 6.754 3.047 6.854 3.146C6.951 3.244 7 3.362 7 3.5C7 3.638 6.951 3.756 6.854 3.854L3.707 7L12.5 7Z"/></svg>

React

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

export function ArrowLeftIcon(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="M12.5 7C12.641 7 12.759 7.048 12.856 7.144C12.952 7.241 13 7.359 13 7.5C13 7.641 12.952 7.759 12.856 7.856C12.759 7.952 12.641 8 12.5 8L3.707 8L6.854 11.146C6.953 11.246 7.003 11.364 7.003 11.5C7.003 11.636 6.953 11.754 6.854 11.854C6.756 11.951 6.638 12 6.5 12C6.362 12 6.244 11.951 6.146 11.854L2.146 7.854C2.049 7.756 2 7.638 2 7.5C2 7.362 2.049 7.244 2.146 7.146L6.146 3.146C6.246 3.047 6.364 2.997 6.5 2.997C6.636 2.997 6.754 3.047 6.854 3.146C6.951 3.244 7 3.362 7 3.5C7 3.638 6.951 3.756 6.854 3.854L3.707 7L12.5 7Z" />
    </svg>
  );
}

Vue

Vue: see /icons/arrow-left.md

Svelte

Svelte: see /icons/arrow-left.md

HTML img

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

CSS

CSS: see /icons/arrow-left.md

Data URL

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

Sprite

Sprite: see /icons/arrow-left.md

SwiftUI

SwiftUI: see /icons/arrow-left.md

Compose

Compose: see /icons/arrow-left.md

Android XML

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

Flutter

Flutter: see /icons/arrow-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

back, go back, navigate back

Alternatives

chevron-left: the iOS-style back button in a navigation bar; also previous in a sequence (previous)

Don’t confuse with

undo: undo reverts the last edit; back returns to the previous screen

Also fits

previous: return to the previous screen (back)
undo: navigate back to the previous screen (back)

Tags

arrow, direction, left, back

Category

Arrows

Component name

ArrowLeftIcon

History

2026-10-14 added

Family 27

arrow-down arrow-down-left arrow-down-right arrow-down-to-line arrow-left-right arrow-left-to-line 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.json · Markdown: /icons/arrow-left.md · SVG: https://gentleface.com/svg/{style}/16/arrow-left.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/arrow-left.png

arrow-left icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp