Arrow Down icon

A free arrow down 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 down, direction, downward, navigation, descent, pointing down, indicator

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path transform="matrix(1 0 0 -1 6 20)" 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 0M12 5.83C10.44 3.73 8.63 1.84 6.59 0.21C6.42 0.07 6.21 0 6 0M6 0L6 16"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path transform="translate(5 3)" fill="currentColor" d="M12.95 10.17L8 10.42L8 1C8 0.45 7.55 0 7 0C6.45 0 6 0.45 6 1L6 10.42L1.05 10.17C0.66 10.15 0.3 10.36 0.12 10.7C-0.06 11.04 -0.03 11.45 0.2 11.76C1.8 13.94 3.68 15.89 5.78 17.57C6.14 17.86 6.57 18 7 18C7.43 18 7.86 17.86 8.22 17.57C10.32 15.89 12.2 13.94 13.8 11.76C14.03 11.45 14.06 11.04 13.88 10.7C13.7 10.36 13.34 10.15 12.95 10.17Z"/>
</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(1 0 0 -1 12 20)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M0 0L0 16"/>
  <path transform="matrix(1 0 0 -1 6 20)" 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(1 0 0 -1 12 20)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M0 0L0 16"/>
  <path transform="translate(5 13.17)" fill="currentColor" d="M7 7.83C6.57 7.83 6.14 7.69 5.78 7.4C3.68 5.72 1.8 3.77 0.2 1.59C-0.03 1.29 -0.06 0.89 0.11 0.55C0.28 0.21 0.62 0 1 0L13 0C13.38 0 13.72 0.21 13.89 0.55C14.06 0.89 14.03 1.29 13.8 1.59C12.2 3.77 10.32 5.72 8.22 7.4C7.86 7.69 7.43 7.83 7 7.83Z"/>
</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(1 0 0 -1 6 20)" 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(1 0 0 -1 6 20)" 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(1 0 0 -1 6 20)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M6 5.53L6 16"/>
</svg>