HTML

CSS

JS

.hamburger {
  cursor: pointer;
}

.hamburger input {
  display: none;
}

.hamburger svg {
  height: 3em;
  -webkit-transition: -webkit-transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line {
  fill: none;
  stroke: white;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  -webkit-transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
              stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
              stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line-top-bottom {
  stroke-dasharray: 12 63;
}

.hamburger input:checked + svg {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.hamburger input:checked + svg .line-top-bottom {
  stroke-dasharray: 20 300;
  stroke-dashoffset: -32.42;
}

Unique Checkbox with Hamburger Icon

This is a very unique, modern-looking checkbox. It is using the hamburger icon to replace the typical square box. when the checkbox is unchecked. Once it is checked, a smooth animation will turn the hamburger icon into an X icon.

You can change the size of the checkbox by modifying height from the hamburger svg class.