CSS list-style-image size

Html Problem Overview

I'm trying to set custom SVG icons with CSS on a <ul>'s list items. Example:

<ul>
    <li style="list-style-image: url('first.svg')">This is my first item</li>
    <li style="list-style-image: url('second.svg')">And here's my second</li>
</ul>

The problem is that the the images are too large, and stretch the height of the lines. I don't want to change the image size, because the point of using SVG is to scale with the resolution. Is there a way to set the size of the image using CSS without some sort of background-image hack?

EDIT: Here's a preview (large image deliberately chosen for illustration and drama): http://jsfiddle.net/tWQ65/4/
And my current background-image workaround, using CSS3's background-size: http://jsfiddle.net/kP375/1/

Html Solutions

Solution 1 - Html

I'd use:

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

Solution 2 - Html

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.

Solution 3 - Html

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:

Resize the image.
Use a background-image and padding instead (easiest method).
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).

Solution 4 - Html

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.

Solution 5 - Html

Thanks to Chris for the starting point here is a improvement which addresses the resizing of the images used, the use of first-child is just to indicate you could use a variety of icons within the list to give you full control.

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

This seems to work well in all modern browsers, you will need to ensure that the width and the negative margin left have the same value, hope it helps

Solution 6 - Html

Almost like cheating, I just went into an image editor and resized the image by half. Works like a charm for me.

Solution 7 - Html

Here is an example to play with 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>")

Play with SVG width & height to set the size
Play with M70 42 to position the hand
different behaviour on FireFox or Chromium!
remove the rect

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>

Solution 8 - Html

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

.your_class li::marker {
  font-size: 1.5rem; /* You can use px, but I think rem is more respecful */
}

Solution 9 - Html

I did a kind of terminal emulator with Bootstrap and Javascript because I needed some dynamic to add easily new items, and I put the prompt from Javascript.

HTML:

  <div class="panel panel-default">
      <div class="panel-heading">Comandos SQL ejecutados</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
	//li.appendChild('el comando');   por que no es un nodo
	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;
}

I hope this help you.

Solution 10 - Html

I achieved it by placing the image tag before the li's:

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

Solution 11 - Html

This is a late answer but I am putting it here for posterity

You can edit the svg and set its size. one of the reasons I like using svg's is because you can edit it in a text editor.

The following is a 3232 svg which I internally resized to initially display as a 1010 image. it worked perfectly to replace the 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>

I then simply added the following to my css

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

The list-style: none; is important as it prevents the default list image from displaying while the alternate image is being loaded.

Content Type	Original Author	Original Content on Stackoverflow
Question	BitLooter	View Question on Stackoverflow
Solution 1 - Html	Chris	View Answer on Stackoverflow
Solution 2 - Html	Franky	View Answer on Stackoverflow
Solution 3 - Html	CourtDemone	View Answer on Stackoverflow
Solution 4 - Html	asandeep	View Answer on Stackoverflow
Solution 5 - Html	Stedy67	View Answer on Stackoverflow
Solution 6 - Html	Jahmic	View Answer on Stackoverflow
Solution 7 - Html	Danny '365CSI' Engelman	View Answer on Stackoverflow
Solution 8 - Html	ProStudio	View Answer on Stackoverflow
Solution 9 - Html	Leonardo Oliva	View Answer on Stackoverflow
Solution 10 - Html	Shubham Batham	View Answer on Stackoverflow
Solution 11 - Html	DeveloperChris	View Answer on Stackoverflow