The Standard Icon Set

Controls

Stepper icon

A filled dot joined by a line to two empty circles in a row. Use for multi-step progress or a stepper.

SVG
PNG
Size
Weight

Sizes

  • 16
  • 18
  • 20
  • 22
  • 24
  • 28
  • 32
  • 40
  • 48

Use it

Format
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="3" cy="8" r="1.5" fill="currentColor"/><path d="M9 8C9 8.398 8.842 8.779 8.561 9.061C8.279 9.342 7.898 9.5 7.5 9.5C7.102 9.5 6.721 9.342 6.439 9.061C6.158 8.779 6 8.398 6 8C6 7.602 6.158 7.221 6.439 6.939C6.721 6.658 7.102 6.5 7.5 6.5C7.898 6.5 8.279 6.658 8.561 6.939C8.842 7.221 9 7.602 9 8Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.182"/><path d="M13.5 8C13.5 8.197 13.461 8.392 13.386 8.574C13.31 8.756 13.2 8.921 13.061 9.061C12.921 9.2 12.756 9.31 12.574 9.386C12.392 9.461 12.197 9.5 12 9.5C11.803 9.5 11.608 9.461 11.426 9.386C11.244 9.31 11.079 9.2 10.939 9.061C10.8 8.921 10.69 8.756 10.614 8.574C10.539 8.392 10.5 8.197 10.5 8C10.5 7.803 10.539 7.608 10.614 7.426C10.69 7.244 10.8 7.079 10.939 6.939C11.079 6.8 11.244 6.69 11.426 6.614C11.608 6.539 11.803 6.5 12 6.5C12.197 6.5 12.392 6.539 12.574 6.614C12.756 6.69 12.921 6.8 13.061 6.939C13.2 7.079 13.31 7.244 13.386 7.426C13.461 7.608 13.5 7.803 13.5 8Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.182"/><path d="M4.5 8H6M9 8H10.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.182"/></svg>

Paste it into HTML. It draws in currentColor, so it takes the colour of the text around it.

Related15