CSS list-style-image size

I'd use:

li {
  list-style: none;
}
li::before {
  content: '';
  display: inline-block;
  height: y;
  width: x;
  background-image: url();
}

I'm using:

li {
	margin: 0;
	padding: 36px 0 36px 84px;
	list-style: none;
	background-image: url("../../images/checked_red.svg");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 40px;
}

where background-size set the background image size.

You can see how layout engines determine list-image sizes here: http://www.w3.org/wiki/CSS/Properties/list-style-image

There are three ways to do get around this while maintaining the benefits of CSS:

1. Resize the image.
2. Use a background-image and padding instead (easiest method).
3. Use an SVG without a defined size using viewBox that will then resize to 1em when used as a list-style-image (Kudos to Jeremy).

You might would like to try img tag instead of setting 'list-style-image' property. Setting width and height using css will actually crop the image. But if you use img tag, the image will be re-sized to value of width and height.