list-style-image supplies an image for list-item markers. A usable image takes precedence over list-style-type; otherwise the type supplies a fallback.
Supply a small SVG marker
The embedded SVG has an intrinsic size of 12×12, so no separate image file is required. A square marker remains available as fallback.
HTML and CSS
HTML
<ul>
<li>Read the smallest working document.</li>
<li>Change one value and compare the result.</li>
<li>Explain the difference before adding more styles.</li>
</ul>CSS
ul {
list-style-type: square;
list-style-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%225%22%20fill%3D%22%232563eb%22%2F%3E%3C%2Fsvg%3E");
}
li {
margin-block: 0.5rem;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Return to a normal marker without losing the list
None removes the marker image, not the entire marker. The circle type becomes visible again.
HTML and CSS
HTML
<ul>
<li>Read the smallest working document.</li>
<li>Change one value and compare the result.</li>
<li>Explain the difference before adding more styles.</li>
</ul>CSS
ul {
list-style-type: circle;
list-style-image: none;
}
li {
margin-block: 0.5rem;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Values and defaults
The initial value is none and the property is inherited. It accepts an image value, including a URL; newer generated-image or image-selection syntax needs its own support check. None allows the list-style-type marker to paint. The shorthand list-style can reset the image.
Common mistakes
A large source image is not sized by the list item’s width. Give simple marker artwork appropriate intrinsic dimensions, or use ::marker text styling for another approach. An image marker has no HTML alt attribute and should not carry unique status information. Keep important labels in each li. Replacing ol numbers with identical icons hides visible sequence, so keep numbered markers when the order matters.
Learn list-style-type, list-style-position, and ul.
Sources and browser support
MDN: list-style-image describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.