CSS list-style-image

Markers are the bullets on a list with items.

The list-style-image property uses an image as marker.

The image marker displays as is, and cannot be resized.



A list with list-style-image set to a leaf icon.

  • Vincent Van Gogh
  • Henri Matisse
  • Paul Gauguin
<ul style="list-style-image: url('/img/css/leaf_icon.jpg')">
  <li>Vincent Van Gogh</li>
  <li>Henri Matisse</li>
  <li>Paul Gauguin</li>


list-style-image: none | url | initial | inherit;



Value Description
none Default. No image will display. The element uses the list-style-type property instead.
url Image path or URL.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

Did you know?

Did you know?

Image markers with background-image

Alternatively, a background image can also be used as marker.

This has the advantage that the iamges size is adjustable.

Here is an example:

  • Vincent Van Gogh
  • Henri Matisse
  • Paul Gauguin
  .style-resize > li::before {
    content: '';
    display: inline-block;
    height: 50px;
    width: 50px;
    background-size: cover;
    background-image: url('/img/css/sunflowers-sm.jpg');
    background-repeat: no-repeat;
    margin-right: 10px;
    background-position: center center;
    vertical-align: middle;

<ul class="style-resize" style="list-style-type: none">
  <li>Vincent Van Gogh</li>
  <li>Henri Matisse</li>
  <li>Paul Gauguin</li>

Browser support

This table shows when list-style-image support started for each browser.

1.0 Dec 2008
1.0 Nov 2004
4.0 Sep 1997
7.0 Jan 2003
1.0 Jun 2003

You may also like

Last updated on Sep 30, 2023