The list-style-image property lets you replace the default list marker (such as a bullet or number) with an external image. When specified, the browser draws that image in place of the normal marker for each affected list item; if the image cannot be loaded or is invalid, the user agent will fall back to the textual marker defined by the list type or to the UA default. Because the image is rendered as the list marker, it participates in the list’s marker box and influences spacing and alignment in ways similar to built-in markers.

In practical layouts you often use list-style as a shorthand to set this property together with the marker type and position, and you commonly rely on list-style-type as the fallback when an image is absent. The position of the marker relative to the list item’s content is controlled by list-style-position, so choosing between outside or inside positioning affects how the image interacts with wrapping and indentation. Because the image used by list-style-image is treated as the marker itself, it is not directly sized or styled by that property; to change visual size, alignment, or to apply filters, authors typically use the ::marker pseudo-element or create a custom marker with generated content, which provides more fine-grained control.

From an accessibility and performance standpoint, prefer simple, high-contrast images and keep file sizes small so markers don’t slow page load or cause layout shifts. Relying solely on decorative marker images can reduce clarity for assistive technologies, so ensure the list’s semantics remain intact (using proper ul/ol/li structure) and provide appropriate fallbacks via list-style-type or CSS adjustments. Finally, be aware that some user agents or print modes may ignore external marker images; when consistent cross-medium appearance is critical, implement markers via pseudo-elements or inline SVGs embedded with data URIs so you can control sizing and rendering more predictably.