Draw a Checkmark Icon with SVG Path Lines

Checkmark Icon with Line Commands

A checkmark is one of the simplest and most recognizable icons. It requires just two line segments forming a V-shape that tilts to the right.

The Path

M 10,55 L 35,80 L 90,20

Breakdown

Command	Description
M 10,55	Start at the left wing of the check
L 35,80	Draw down-right to the bottom vertex
L 90,20	Draw up-right to the top of the long arm

Styling for Best Results

Since this is an open path (no Z), style it with:

<path d="M 10,55 L 35,80 L 90,20"
      fill="none"
      stroke="#22c55e"
      stroke-width="8"
      stroke-linecap="round"
      stroke-linejoin="round" />

The round line caps and joins give the checkmark a polished, friendly appearance.

Animated Check

A popular animation draws the checkmark progressively using stroke-dasharray and stroke-dashoffset:

path {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: draw 0.4s ease-out forwards;
}
@keyframes draw {
  to { stroke-dashoffset: 0; }
}

Calculate the stroke-dasharray value from the path's total length (approximately 120 for this path).

Variants

Thick rounded check (with wider angle):

M 15,50 L 40,75 L 85,25

Checkbox with square:

M 5,5 L 95,5 L 95,95 L 5,95 Z M 20,50 L 40,70 L 80,25

Proportions

The angle at the bottom vertex affects readability. A vertex angle between 70 and 100 degrees reads clearly as a checkmark. Too shallow and it looks like a V; too wide and it loses directionality.