list-style-image svg smaller in webkit

I had the same problem, especially with the size on iOs devices. I solved it by using a :before attribute

.services ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.usp ul li:before {
    content: url('images/check.svg');
    width: 16px;
    height: 16px;
    margin-right: 10px;
}

since you are calling the SVG image; you have to define SVG on your page as well. It is also mandatory to define the height and width as well in your SVG otherwise by default its take 1em width and height if not mentioned.

<svg height="16px" width="16px" viewBox="0 0 16 16"  version='1.1' xmlns='http://www.w3.org/2000/svg'>
</svg>

It would be better way to call the image by using background:url this way a height and width can given to image, so the SVG image could rendered properly.

.services li:before { 
content:''; 
display:inline-block; 
height:1em; 
width:1em; 
background-image:url('images/check.svg'); 
background-size:contain; 
background-repeat:no-repeat; 
padding-left: 2em; 
}

Tags:

Css

Svg