SVG Chevrons

by jorgeluis

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
  <desc>Left navigation arrow (chevron)</desc>
  <polyline class="navigation" points="32,4 12,24 32,44 "/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
  <desc>Right navigation arrow (chevron)</desc>
  <polyline class="navigation" points="12,4 32,24 12,44 "/>
</svg>

CSS

svg {
  width: 40px;
  margin: 5px;
}

polyline {
  fill: none;
  stroke: #999999;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}