Как сделать кастомные checkbox с картинками?
.input__kids:checked + span{
  background-image: url(/images/svg/cheked.svg);
}<label class="label__kids" for="1.1">
<input name="kids" class="input__kids" type="checkbox" name="1" id="1.1">
<span></span>
</label>
и размеры, понятное дело. Сам инпут скрыть.
Либо 
инпут не внутри лейбл, а лейбл после инпут, тогда будетinput:checked + label
.input__kids:checked{
  background-image: none;
}
.input__kids:checked:before{
  content:' ';
  width:1em;
  height:1em;
  position:absolute;
  left: -2em;
  top: 0;
  background-image: url(/images/svg/cheked.svg);
}
Общий смысл - делаете чекбокс прозрачным (но не display:none), а в псевдоэлемент before пихаете ваш SVG.