list-style-image

The list-style-image property sets an image with which to replace the list-item marker.

Syntax

The list-style-type property should always be specified as a fallback in case the image is unavailable for some reason.

ul.one {
  list-style-image: url('path-to-image.jpg');
  list-style-type: circle;
}

Values

none
Default value. No image is displayed and the list-style-type property will be applied.

url
Defines the path to the image to be used as a list-item marker.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of list-style-image? Submit a codepen.io demo and we'll showcase it here ↴