Here is my preferred solution:

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

I am currently implementing the following code:

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;
}

This code snippet utilizes the background-size property to specify the size of the background image.

If you're interested in understanding how layout engines calculate list-image sizes, check out this link: https://www.w3.org/wiki/CSS/Properties/list-style-image

To address this issue while still reaping the advantages of CSS, there are three possible solutions:

1. Adjust the size of the image.
2. Opt for a background-image and padding instead (the simplest method).
3. Utilize an SVG without a specific size using the viewBox property, which will automatically resize to 1em when applied as a list-style-image (Props to Jeremy).

Big thanks to Chris for the initial inspiration, I've made some tweaks to improve the image resizing in this code snippet. Using ":first-child" allows you to have a variety of icons in your list for greater customization.

ul li:first-child:before {
  content: '';
  display: inline-block;
  height: 30px;
  width: 40px;
  background-image: url('../images/Currency.png');
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: -40px;
}

This solution should be compatible with all modern web browsers. Make sure to keep the width and negative margin values consistent for best results. Hope this helps!

Feeling a bit sneaky, I decided to try resizing the image in an editing tool by cutting it in half. Surprisingly, it worked like magic!

.custom_list li {
  list-style-image: url('../images/new_image.svg');
}

.custom_list li::marker {
  font-size: 1.5rem; /* Using rem for better scalability */
}

This answer may be a bit late, but I wanted to share it here for future reference

If you need to customize an SVG, you can easily edit its size using a text editor. Personally, I find this flexibility one of the main advantages of working with SVGs.

Below is a 32x32 SVG that I resized internally to initially display as a 10x10 image. It was a seamless solution for replacing the default list image.

<?xml version="1.0" ?><svg width="10" height="10"  id="chevron-right" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path style="fill:#34a89b;" d="M12 1 L26 16 L12 31 L8 27 L18 16 L8 5 z"/></svg>

To implement this in my CSS, I simply added the following:

* ul {
  list-style: none;
  list-style-image: url(../images/chevron-right.svg);
}

The list-style: none; declaration is crucial as it ensures that the default list image is suppressed while the custom image is being loaded.

Give this a shot

ul {
list-style: none;
}

li::before {
content: '';
display: inline-block;
height: 20px;
width: 20px;
background-size: contain;
background-image: url("images/icons_res/star.svg");
margin-right: 5px;
}

Check out this sample showcasing the Inline SVG for a list bullet (2020 Browsers)

list-style-image: url("data:image/svg+xml,
                      <svg width='50' height='50'
                           xmlns='http://www.w3.org/2000/svg' 
                           viewBox='0 0 72 72'>
                        <rect width='100%' height='100%' fill='pink'/>
                        <path d='M70 42a3 3 90 0 1 3 3a3 3 90 0 1-3 3h-12l-3 3l-6 15l-3
                                 l-6-3v-21v-3l15-15a3 3 90 0 1 0 0c3 0 3 0 3 3l-6 12h30
                                 m-54 24v-24h9v24z'/></svg>")

• Experiment with changing SVG width & height to adjust the size
• Adjust the positioning using M70 42
• Keep in mind, the behavior may vary between different browsers like FireFox or Chromium!
• Try removing the rect element
• If using color codes with # symbol, remember to escape it by replacing # with %23

li{
  font-size:2em;
  list-style-image: url("data:image/svg+xml,<svg width='3em' height='3em'                          xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'><rect width='100%' height='100%' fill='pink'/><path d='M70 42a3 3 90 0 1 3 3a3 3 90 0 1-3 3h-12l-3 3l-6 15l-3 3h-12l-6-3v-21v-3l15-15a3 3 90 0 1 0 0c3 0 3 0 3 3l-6 12h30m-54 24v-24h9v24z'/></svg>");
}

span{
  display:inline-block;
  vertical-align:top;
  margin-top:-10px;
  margin-left:-5px;
}

<ul>
  <li><span>Apples</span></li>
  <li><span>Bananas</span></li>
  <li>Oranges</li>
</ul>

If you want to position the icon in a visually pleasing way, consider using the following margin values:

margin: 0 0.5em -0.25em -1em;

This approach takes into account the relative font-size of the parent element and ensures that the icon maintains a consistent size (1em). Adjusting the margin helps align the icon with other glyphs and positions it where standard bullet icons typically appear.

Here is the complete styling for reference:

ul li {
  list-style: none;
}

ul li::before {
  content: '';
  display: inline-block;
  height: 1em;
  width: 1em;
  background-image: url('/Example.png');
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0 0.5em -0.25em -1em;
}

Comparison image: https://i.sstatic.net/K0gMl.png

I created a terminal emulator using Bootstrap and Javascript to easily add new items dynamically, including the prompt feature from Javascript.

HTML:

<div class="panel panel-default">
      <div class="panel-heading">Executed SQL Commands</div>
      <div class="panel-body panel-terminal-body">
          <ul id="ulCommand"></ul>
      </div>
 </div>

Javascript:

function addCommand(command){
    //Creating the li tag   
    var li = document.createElement('li');
    //Creating  the img tag
    var prompt = document.createElement('img');
    //Setting the image 
    prompt.setAttribute('src','./lib/custom/img/terminal-prompt-white.png');
    //Setting the width (like the font)
    prompt.setAttribute('width','15px');
    //Setting height as auto
    prompt.setAttribute('height','auto');
    //Adding the prompt to the list item
    li.appendChild(prompt);
    //Creating a span tag to add the command
    var span = document.createElement('span');
    //Adding the text to the span tag
    span.innerHTML = command;
    //Adding the span to the list item
    li.appendChild(span);
    //At the end, adding the list item to the list (ul)
    document.getElementById('ulCommand').appendChild(li);
}

CSS:

.panel-terminal-body {
  background-color: #423F3F;
  color: #EDEDED;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 15px;
  padding-bottom: 15px;
  height: 300px;
}

.panel-terminal-body ul {
  list-style: none;
}

Hopefully, this method proves beneficial for your needs.

I managed to achieve this by rearranging the order of the image tag and li elements:

HTML

<img src="https://www.pinclipart.com/picdir/big/1-17498_plain-right-white-arrow-clip-art-at-clipart.png" class="listImage">

CSS

.listImage {
  float:left;
  margin:2px;
  width:25px
}
.li {
  margin-left:29px;
}

After a quick search, I found the solution to my problem in just a few seconds. I simply looked up how to "resize image," went through the upload process, and voila! The image came out perfectly at 12px.

<div class="blockright">
<h2>Console</h2>
<ul class="myul">
  <li style="list-style: circle;">Mid price</li><br>
  <li style="list-style: circle;">Mid customization</li><br>
  <li style="list-style: circle;">Mid mobility</li><br>
  <li style="list-style-image: url(redicon.png);">All time connected</li><br>
  <li style="list-style-image: url(greenicon.png);">High update support</li><br>
  <li style="list-style-image: url(redicon.png);">Low performance customization</li>
</ul>