Chevron Down icon

A free chevron down icon in 3 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: chevron down, arrow, navigation, pointing down, direction, indicator, ui

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path transform="translate(8 10.14)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M0 0C1.06 1.46 2.31 2.77 3.7 3.89C3.88 4.04 4.12 4.04 4.3 3.89C5.69 2.77 6.94 1.46 8 0"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path transform="translate(7 9)" fill="currentColor" d="M5.92 5.67C7.39 4.5 8.69 3.12 9.81 1.59C9.94 1.41 10.02 1.17 10 0.92C9.96 0.37 9.47 -0.04 8.92 0C6.31 0.2 3.69 0.2 1.08 0C0.53 -0.04 0.04 0.37 0 0.92C-0.02 1.17 0.06 1.41 0.19 1.59C1.31 3.12 2.61 4.5 4.08 5.67C4.62 6.11 5.38 6.11 5.92 5.67Z"/>
</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 8 14)" fill="currentColor" d="M0 4C1.06 2.54 2.31 1.23 3.7 0.11C3.88 -0.04 4.12 -0.04 4.3 0.11C5.69 1.23 6.94 2.54 8 4L4 3.7L0 4Z"/>
  <path transform="matrix(1 0 0 -1 8 14)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M0 4C1.06 2.54 2.31 1.23 3.7 0.11C3.88 -0.04 4.12 -0.04 4.3 0.11C5.69 1.23 6.94 2.54 8 4L4 3.7L0 4Z"/>
</svg>