<h2>Checkbox personnalisation with SVG icons</h2>
<label for="checkbox">
  <div class="checkbox_wrapper">
    <input type="checkbox" id="checkbox" />
    <span class="custom"></span>
      
      <!-- True icon -->
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32" class="true_icon">
      <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" />
      </svg>
    
      <!-- False icon -->
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32" class="false_icon">
      <path d="M31.708 25.708c-0-0-0-0-0-0l-9.708-9.708 9.708-9.708c0-0 0-0 0-0 0.105-0.105 0.18-0.227 0.229-0.357 0.133-0.356 0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0-0 0-0 0l-9.708 9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.586c-0.286 0.286-0.361 0.702-0.229 1.057 0.049 0.13 0.124 0.252 0.229 0.357 0 0 0 0 0 0l9.708 9.708-9.708 9.708c-0 0-0 0-0 0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.355-0.057 0.771 0.229 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.13-0.049 0.252-0.124 0.357-0.229 0-0 0-0 0-0l9.708-9.708 9.708 9.708c0 0 0 0 0 0 0.105 0.105 0.227 0.18 0.357 0.229 0.356 0.133 0.771 0.057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z" />
      </svg>
  </div> 
</label> 

/*
 * Checkbox personnalisation using the :checked pseudo-class
 * IE 9+ support
 * 
 * @author Gaëtan Bonnot
 * @see @GaetanBt on Twitter
 * @see gaetanbt.com
 *
 * @lastmodified May 2nd 2014
 * @note added some specific selectors to let IE8 show the standard checkbox
*/

$not_checked_bg: #e74c3c;
$checked_bg: #2ecc71;
$bg_color: #333;
$color: #fff;
$font-stack: 'Ubuntu', 'sans-serif';

@import url(https://fonts.googleapis.com/css?family=Ubuntu);

// == Filter effect mixin ====================
@mixin filter-effect( $property, $value ) {
  @each $prefix in -webkit-, '' {
    #{$prefix}filter: #{$property + '(#{$value}' + ')'};
  } 
}

*,*:before,*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body {background: $bg_color;}

h2 {
  color: $color; 
  font-family: $font-stack;
  font-weight: 400; 
  margin-top: 3em;
  text-align: center;
}

.checkbox_wrapper {
  background: rgba(0, 0, 0, .1);
  border: 1px solid rgba(0, 0, 0, .2);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, .2);
  cursor: pointer;
  height: 50px;
  margin: 3em auto;
  position: relative;
  width: 100px;
}

// Forces you to click in the box to activate the checkbox
label {
  display: block;
  margin: auto;
  width: 100px;  
}

[type="checkbox"]:checked + .custom, 
[type="checkbox"]:not(:checked) + .custom {
  background: $not_checked_bg;
  left: 1px;
  position: absolute;
  top: 1px; bottom: 1px;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  width: 48px;
  z-index: 10;
}

[type="checkbox"]:checked, 
[type="checkbox"]:not(:checked) {
  opacity: 0;
}

[type="checkbox"]:checked + .custom {
    background: $checked_bg;
    left: 49px;
}

svg {
  @include filter-effect( drop-shadow, 1px 1px 1px #000 );
  position: absolute;
  z-index: 1;
}

.true_icon {
  fill: $checked_bg;
  left: 8px;
  top: 8px;
}

.false_icon {
  fill: $not_checked_bg;
  right: 8px;
  top: 9px;
}