Toggle On icon

A free toggle on 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: Essential Icons
Size: 24 × 24, scales to any size
License: Free, credit optional (terms)
Tags: switch, enabled, active, power, on-off, control

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path transform="translate(2 5)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M7 0L13 0C16.87 0 20 3.13 20 7C20 10.87 16.87 14 13 14L7 14C3.13 14 0 10.87 0 7C0 3.13 3.13 0 7 0Z"/>
  <path transform="translate(2 5)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M9 7C9 4.79 10.79 3 13 3C15.21 3 17 4.79 17 7C17 9.21 15.21 11 13 11C10.79 11 9 9.21 9 7Z"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path transform="translate(1 4)" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M0 8C0 5.88 0.84 3.84 2.34 2.34C3.84 0.84 5.88 0 8 0L14 0C16.12 0 18.16 0.84 19.66 2.34C21.16 3.84 22 5.88 22 8C22 10.12 21.16 12.16 19.66 13.66C18.16 15.16 16.12 16 14 16L8 16C5.88 16 3.84 15.16 2.34 13.66C0.84 12.16 0 10.12 0 8ZM9 8C9 6.67 9.53 5.4 10.46 4.46C11.4 3.53 12.67 3 14 3C15.33 3 16.6 3.53 17.54 4.46C18.47 5.4 19 6.67 19 8C19 9.33 18.47 10.6 17.54 11.54C16.6 12.47 15.33 13 14 13C12.67 13 11.4 12.47 10.46 11.54C9.53 10.6 9 9.33 9 8Z"/>
</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="translate(2 5)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M7 0L13 0C16.87 0 20 3.13 20 7C20 10.87 16.87 14 13 14L7 14C3.13 14 0 10.87 0 7C0 3.13 3.13 0 7 0Z"/>
  <path transform="translate(11 8)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M4 0C6.21 0 8 1.79 8 4C8 6.21 6.21 8 4 8C1.79 8 0 6.21 0 4C0 1.79 1.79 0 4 0Z"/>
</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="translate(1.9 4)" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M8 0C5.88 0 3.84 0.84 2.34 2.34C0.84 3.84 0 5.88 0 8C0 10.12 0.84 12.16 2.34 13.66C3.84 15.16 5.88 16 8 16L14 16C16.12 16 18.16 15.16 19.66 13.66C21.16 12.16 22 10.12 22 8C22 5.88 21.16 3.84 19.66 2.34C18.16 0.84 16.12 0 14 0L8 0Z"/>
  <path transform="translate(10.9 7)" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M5 0C3.67 0 2.4 0.53 1.46 1.46C0.53 2.4 0 3.67 0 5C0 6.33 0.53 7.6 1.46 8.54C2.4 9.47 3.67 10 5 10C6.33 10 7.6 9.47 8.54 8.54C9.47 7.6 10 6.33 10 5C10 3.67 9.47 2.4 8.54 1.46C7.6 0.53 6.33 0 5 0Z"/>
</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="translate(2 5)" fill="currentColor" d="M7 0L13 0C16.87 0 20 3.13 20 7C20 10.87 16.87 14 13 14L7 14C3.13 14 0 10.87 0 7C0 3.13 3.13 0 7 0Z"/>
  <path transform="translate(2 5)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M7 0L13 0C16.87 0 20 3.13 20 7C20 10.87 16.87 14 13 14L7 14C3.13 14 0 10.87 0 7C0 3.13 3.13 0 7 0Z"/>
  <path transform="translate(11 8)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M4 0C6.21 0 8 1.79 8 4C8 6.21 6.21 8 4 8C1.79 8 0 6.21 0 4C0 1.79 1.79 0 4 0Z"/>
</svg>