CSS list-style-image Property

Definition and Usage

The list-style-image property sets an image (including gradients) as the marker for list items. It applies to elements with display: list-item (such as li).

The default is none, so list-style-type draws the marker. If an image fails to load, that type is the fallback. Prefer the list-style shorthand when you also set type or position.

CSS Syntax

Examples: list-style-image: url("flower.png"); · list-style-image: none; · list-style-image: linear-gradient(red, blue);

Property Values

How to Use list-style-image

Set the image on the list; items inherit the marker.

1. Select a ul or ol (markers need list items).
2. Set list-style-image to url("...") or a gradient.
3. Also set list-style-type so a marker remains if the image fails.
4. Use a small, simple image so markers stay aligned with the text.

Live Preview

Only list-style-image changes on the sample list. Type stays square as a fallback.

CSS Examples

Each snippet focuses on list-style-image. Use Try It Yourself for a live editor.

<style>
  ul {
    list-style-type: square;
    list-style-image: url("/images/flower.png");
  }
</style>

<ul>
  <li>Apollo</li>
  <li>Hubble</li>
</ul>

<style>
  ul {
    list-style-image: linear-gradient(135deg, #2563eb, #dc2626);
  }
</style>

<ul>
  <li>Apollo</li>
  <li>Hubble</li>
</ul>

<style>
  ul {
    list-style-type: disc;
    list-style-image: none;
  }
</style>

<ul>
  <li>Apollo</li>
  <li>Hubble</li>
</ul>

Key Takeaways