list-style-image

What the values mean

• none: the initial value. No image; the list-style-type marker is shown.
• url(/marker-star.svg): uses that image as the marker.

In the preview, the three rows inside the box (display: list-item) inherit the value set on the box. This site only lets you pick the star, check, and arrow images it hosts.

When to use it

Use it to show icons instead of bullets, for example in checklists or step lists.

Watch out

• An image with its own width and height is drawn at that size and does not scale with the text. The images in the preview are 12px square. When you need control over size or position, drawing it with background-image on ::before is a common approach.
• Setting list-style-type as well is a good fallback in case the image fails to load.
• It is inherited, so setting it on a ul applies to every li inside. Only elements with display: list-item get a marker.