JSFiddle - React, Tailwind, and code Playground

HTML

<code lang="php">
<div id="compar">
<input type="checkbox" id="compareid_"
    onchange="compare_tov"
    onclick="save_checkbox('checkbox')">
  <label for="compareid_">
    <span></span>
    <i></i>
  </label>
</div>
</code>

CSS

#compar {
	width: 36px;
	height: 36px;
	position: absolute;
	top: 55px;
}

#compar input[type="checkbox"] {
	opacity: 0;
	position: absolute;
	z-index: -10;
	top: -20000px;
}

#compar label {
	display: inline-block;
	height: 36px;
	width: 36px;
	background: url(https://192.168.3.129/local/templates/pneumax-shop/components/bitrix/catalog.section/.default/compare_grey.png);
}

#compar label span {
	background: url(https://192.168.3.129/local/templates/pneumax-shop/components/bitrix/catalog.section/.default/compare_grey.png);
	display: none;
	height: 36px;
	width: 36px;
	}

#compar label i {
	background: url(https://192.168.3.129/local/templates/pneumax-shop/components/bitrix/catalog.section/.default/сравнить.png);
	display: none;
	height: 36px;
	width: 36px;
}

#compar input[type="checkbox"]:checked + label {
      background: url(https://192.168.3.129/local/templates/pneumax-shop/components/bitrix/catalog.section/.default/compare_grey.png);
    }

#compar input[type="checkbox"]:checked + label i {display: block;}
#compar input[type="checkbox"]:checked + label span {display: none;}

JavaScript

function save_checkbox(name)
										{
											localStorage[name] = document.getElementById(name).checked ? 1 : 0
										}
										function load_checkbox() {
											var div = document.getElementById('compar')
											var input = div.getElementsByTagName('input')
										
											for(var i = 0; i < input.length; i++)
											{
												var checkbox = input[i]
												checkbox.checked = parseInt(localStorage[checkbox.id], 10)
											}
										}