list-style-image
Replace a list marker with an image while retaining a type fallback.
Overview
| Class | Declarations |
|---|---|
list-style-image:none | list-style-image: none;
|
list-style-image:url(<…>) | list-style-image: url(<…>);
|
list-style-image:linear-gradient(<…>) | list-style-image: linear-gradient(<…>);
|
list-style-image:radial-gradient(<…>) | list-style-image: radial-gradient(<…>);
|
list-style-image:repeating-linear-gradient(<…>) | list-style-image: repeating-linear-gradient(<…>);
|
list-style-image:repeating-radial-gradient(<…>) | list-style-image: repeating-radial-gradient(<…>);
|
list-style-image:conic-gradient(<…>) | list-style-image: conic-gradient(<…>);
|
Examples
Use an image marker
Point list-style-image at an image asset. This local SVG has an intrinsic size of 12 × 12; it replaces the square marker while preserving the list’s outside position.
<!-- 12 × 12 SVG · native marker --><ul id="target" class="w:260px max-w:100% m:0 pl-lg font-md leading-lg list-style:square|outside list-style-image:url(/demo/marker.svg)"> <li class="mb-2xs">Collect references</li> <li class="mb-2xs">Compare the spacing across every screen size.</li> <li class="mb-2xs">Review the composition</li></ul>Keep a type marker as a fallback. Image markers do not use the text’s foreground color; the asset controls its own paint.
Generated CSS
@layer utilities { .list-style-image\:url\(\/demo\/marker\.svg\) { list-style-image: url(/demo/marker.svg) }}Use a gradient marker
A CSS gradient can be the marker image. Reference the preset color variables explicitly and separate color stops with a comma inside the function.
<!-- Generated image · blue to violet --><ul id="target" class="w:260px max-w:100% m:0 pl-lg font-md leading-lg list-style:disc|outside list-style-image:linear-gradient(var(--color-blue-50),var(--color-violet-50))"> <li class="mb-2xs">Collect references</li> <li class="mb-2xs">Compare the spacing across every screen size.</li> <li class="mb-2xs">Review the composition</li></ul>A gradient has no intrinsic dimensions. Its native marker size depends on the browser and font; the readout reports the actual image value, not a fixed marker size.
Fall back to type markers
Set only the image to none when the type and position should survive. Open print preview: the SVG becomes a square marker and remains outside.
<!-- Screen SVG · print square --><ul id="target" class="w:260px max-w:100% m:0 pl-lg font-md leading-lg list-style:square|outside list-style-image:url(/demo/marker.svg) list-style-image:none@print"> <li class="mb-2xs">Collect references</li> <li class="mb-2xs">Compare the spacing across every screen size.</li> <li class="mb-2xs">Review the composition</li></ul>A list-style shorthand would reset all three properties. list-style-image:none removes the image independently.
Apply conditionally
Resize past sm to add the image on screen. The square type remains the fallback at every size; print uses that type without an image.
<!-- Real viewport · square to SVG --><ul id="target" class="w:260px max-w:100% m:0 pl-lg font-md leading-lg list-style:square|outside list-style-image:none list-style-image:none@print list-style-image:url(/demo/marker.svg)@screen@sm"> <li class="mb-2xs">Collect references</li> <li class="mb-2xs">Compare the spacing across every screen size.</li> <li class="mb-2xs">Review the composition</li></ul>