checkbox.css

.checkbox {
	--background: var(--bg-color);
	--border: #EEE;
	--border-hover: #DDD;
	--border-active: #F3B845;
	--tick: #fff;
	position: relative;
	cursor: pointer;
	padding: 1rem;
}
.checkbox input, .checkbox svg {
	width: 21px;
	height: 21px;
	transform: scale(1.5);
}
.checkbox input {
	-webkit-appearance: none;
	-moz-appearance: none;
	position: relative;
	background: var(--background);
	border: none;
	margin: 0;
	outline: 0;
	padding: 0;
	cursor: pointer;
	border-radius: 4px;
	transition: box-shadow 0.3s;
	box-shadow: inset 0 0 0 var(--s, 1px) var(--b, var(--border));
	outline-color: dodgerblue !important;
}
.checkbox input:hover {
	--s: 2px;
	--b: var(--border-hover);
}
.checkbox input:checked {
	--b: var(--border-active);
	--s: 2px;
	transition-delay: 0.4s;
}
.checkbox svg {
	pointer-events: none;
	fill: none;
	stroke-width: 2px;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke: var(--stroke, var(--border-active));
	position: absolute;
	top: 1rem;
	left: 1rem;
	width: 21px;
	height: 21px;
}
.checkbox.path input:checked + svg {
	--a: 16.1 86.12;
	--o: 102.22;
}
.checkbox.path svg {
	stroke-dasharray: var(--a, 86.12);
	stroke-dashoffset: var(--o, 86.12);
	transition: stroke-dasharray 0.6s, stroke-dashoffset 0.6s;
}

.checkbox span {
	font-size: 1.1em;
	margin-left: 1rem;
}