List Marker Image Property
Last updated: 2026-09-13
list-style-image List Marker Image Property
list-style-image replaces the default marker (dot, number, etc.) with a custom image on list items. The default value none means no image is used. It is often used to give lists branded small icons or decorative arrows for a richer look.
| Category | |
|---|---|
| Initial Value | none |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
list-style-image: none | <image>;⚙️ Values
| Value | Type | Description |
|---|---|---|
none | Keyword | No image |
<image> | Type | Custom marker image |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| list-style-image | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： list-style-image cannot control the image size; for more flexibility, use a ::before pseudo-element with background-image instead.
Warning： If the image fails to load, the marker disappears, so it is wise to also set list-style-type as a fallback.
❓ FAQ
QWhich is better, list-style-image or a ::before pseudo-element?
A::before is more flexible: it controls image size, position, spacing, and alignment, and works with icon fonts. list-style-image is simple to use but cannot scale the image or fine-tune alignment. Use ::before with background-image and background-size when you need precise control; use list-style-image for quick marker swaps.
QHow do I center the image in list-style-image?
Alist-style-image itself cannot precisely control alignment — the image is drawn at its intrinsic size. For exact centering, switch to li::before inserting content: "" with background-image and background-position: center, sizing it with background-size, and center/scale as needed.
QWhat happens when the list-style-image fails to load?
AIf the image fails to load (wrong path, unsupported format, or blocked), the marker disappears or falls back to nothing, leaving the list items 'bare'. To avoid that, keep list-style-type as a backup, e.g. list-style: disc url(bullet.png); — the disc shows when the image is unavailable.
QWhy can't I resize the list-style-image image?
ABecause the property draws the image at its intrinsic size in the marker position, and CSS offers no parameter to scale it or recolor it. Oversized or undersized images cannot adapt to the font size and layout. For size control, switch to li::before with background-image and background-size, or use an inline SVG icon and set its width and height.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
list-style Property
The shorthand for list styles
::before Pseudo-element
A more flexible way to customize list markers
