Feather Sprite and CSS background-image

Does anybody know of a way you can use the feather sprite with a css background image? I would have thought the below would have worked but it doesn't.

`.list-checkbox {
list-style: none;

li:before {
content: "";
display: inline-block;
width: 1rem;
height: 1rem;
background-image: url('data:image/svg+xml;utf8,');
stroke: currentColor;
stroke-width: 1;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
}`

Any help appreciated!