Arrow Left icon

A free arrow left icon in 5 styles, drawn by hand on a 24px grid. Copy it as SVG or JSX, for personal or commercial use.

Style Stroke

Category: Arrows & Navigation
Size: 24 × 24, scales to any size
License: Free, credit optional (terms)
Tags: arrow left, direction, leftward, navigation, pointing left, movement, indicator

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path transform="translate(4 6)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M5.83 0C3.73 1.56 1.84 3.37 0.21 5.41C0.07 5.58 0 5.79 0 6M5.83 12C3.73 10.44 1.84 8.63 0.21 6.59C0.07 6.42 0 6.21 0 6M0 6L16 6"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path transform="translate(3 5)" fill="currentColor" d="M7.83 1.05L7.58 6L17 6C17.55 6 18 6.45 18 7C18 7.55 17.55 8 17 8L7.58 8L7.83 12.95C7.85 13.34 7.64 13.7 7.3 13.88C6.96 14.06 6.55 14.03 6.24 13.8C4.06 12.2 2.11 10.32 0.43 8.22C0.14 7.86 0 7.43 0 7C0 6.57 0.14 6.14 0.43 5.78C2.11 3.68 4.06 1.8 6.24 0.2C6.55 -0.03 6.96 -0.06 7.3 0.12C7.64 0.3 7.85 0.66 7.83 1.05Z"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path opacity="0.28" transform="matrix(0 1 1 0 4 12)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M0 0L0 16"/>
  <path transform="matrix(0 1 1 0 4 6)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M0 5.83C1.56 3.73 3.37 1.84 5.41 0.21C5.58 0.07 5.79 0 6 0C6.21 0 6.42 0.07 6.59 0.21C8.63 1.84 10.44 3.73 12 5.83"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path opacity="0.28" transform="matrix(0 1 1 0 4 12)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M0 0L0 16"/>
  <path transform="translate(3 5)" fill="currentColor" d="M0 7C0 6.57 0.14 6.14 0.43 5.78C2.11 3.68 4.06 1.8 6.24 0.2C6.54 -0.03 6.94 -0.06 7.28 0.11C7.62 0.28 7.83 0.62 7.83 1L7.83 13C7.83 13.38 7.62 13.72 7.28 13.89C6.94 14.06 6.54 14.03 6.24 13.8C4.06 12.2 2.11 10.32 0.43 8.22C0.14 7.86 0 7.43 0 7Z"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path opacity="0.28" transform="matrix(0 -1 1 0 4 18)" fill="currentColor" d="M5.41 0.21C3.37 1.84 1.56 3.73 0 5.83L6 5.53L12 5.83C10.44 3.73 8.63 1.84 6.59 0.21C6.42 0.07 6.21 0 6 0C5.79 0 5.58 0.07 5.41 0.21Z"/>
  <path transform="matrix(0 -1 1 0 4 18)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M0 5.83C1.56 3.73 3.37 1.84 5.41 0.21C5.58 0.07 5.79 0 6 0C6.21 0 6.42 0.07 6.59 0.21C8.63 1.84 10.44 3.73 12 5.83L6 5.53L0 5.83Z"/>
  <path transform="matrix(0 -1 1 0 4 18)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M6 5.53L6 16"/>
</svg>