Arrow Right icon

A free arrow right 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 right, direction, rightward, navigation, pointing right, 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(3 6)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12.17 0C14.27 1.56 16.16 3.37 17.79 5.41C17.93 5.58 18 5.79 18 6M12.17 12C14.27 10.44 16.16 8.63 17.79 6.59C17.93 6.42 18 6.21 18 6M18 6L0 6"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path transform="translate(2 5)" fill="currentColor" d="M12.17 1.05L12.42 6L1 6C0.45 6 0 6.45 0 7C0 7.55 0.45 8 1 8L12.42 8L12.17 12.95C12.15 13.34 12.36 13.7 12.7 13.88C13.04 14.06 13.45 14.03 13.76 13.8C15.94 12.2 17.89 10.32 19.57 8.22C19.86 7.86 20 7.43 20 7C20 6.57 19.86 6.14 19.57 5.78C17.89 3.68 15.94 1.8 13.76 0.2C13.45 -0.03 13.04 -0.06 12.7 0.12C12.36 0.3 12.15 0.66 12.17 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 21 12)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M0 0L0 18"/>
  <path transform="matrix(0 1 -1 0 21 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 20 12)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M0 0L0 18"/>
  <path transform="translate(13.17 5)" fill="currentColor" d="M7.83 7C7.83 6.57 7.69 6.14 7.4 5.78C5.72 3.68 3.77 1.8 1.59 0.2C1.29 -0.03 0.89 -0.06 0.55 0.11C0.21 0.28 0 0.62 0 1L0 13C0 13.38 0.21 13.72 0.55 13.89C0.89 14.06 1.29 14.03 1.59 13.8C3.77 12.2 5.72 10.32 7.4 8.22C7.69 7.86 7.83 7.43 7.83 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 21 6)" 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 21 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.83L6 5.53L0 5.83Z"/>
  <path transform="matrix(0 1 -1 0 21 6)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M6 5.53L6 18"/>
</svg>