<ul>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
</ul>
ul {
  list-style: none;
}
ul li::before {
  content: "";
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fb-heart.gif);
  background-size: contain;
  display: inline-block;
  width: 1em;
  height: 1em;
  position: relative;
  top: 0.1rem;
  margin-right: 0.2rem;
}

/* 
You can't control the size with list-style-image

ul.list-style {
  list-style-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fb-heart.gif);
}
*/


/* 
If you use the image directly as pseudo element, you can't size it:

ul li::before {
  content: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fb-heart.gif);
  display: inline-block;
  width: 20px;
  height: 20px;
}
/

External CSS

  1. https://codepen.io/chriscoyier/pen/GRpqNwX

External JavaScript

This Pen doesn't use any external JavaScript resources.

Packages

This Pen doesn't use any packages.