1. css
  2. /properties
  3. /list-style-image



The list-style-image property sets an image as the marker for a list item. It replaces the default marker (usually a bullet point or number) with an image of your choice.


Setting list-style-image using a URL:

ul {
  list-style-image: url('images/star.png');

Setting list-style-image using a gradient:

ol {
  list-style-image: linear-gradient(to bottom, red, blue);

Setting list-style-image to none:

ul {
  list-style-image: none;


url()Specifies the URL of an image to be used as the marker.
noneRemoves the marker from the list item.
inheritInherits the value of list-style-image from the parent element.

Best Practices

  • Use images that are small and simple, as larger or more complex images may be difficult to see at smaller sizes or on lower-resolution screens.
  • Make sure the image you choose is relevant to the content of the list, as it can help reinforce the meaning or theme of the list.
  • Test the appearance of your list with different image formats and resolutions to ensure that it looks good across different devices and browsers.
  • Consider using a fallback marker, such as a bullet point or number, for users who may not be able to see the image due to accessibility issues or slow connection speeds.
  • Use a descriptive alt attribute for the image to provide context and improve accessibility for users with screen readers.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera