CSS list-style-image Property

What You’ll Learn

The list-style-image property lets you replace default bullets or numbers with a custom image marker. It is useful for branded lists, feature highlights, and decorative navigation.

Introduction

The list-style-image property in CSS allows developers to specify an image as the marker for list items. This property replaces the default bullet or number with a custom image, giving designers more control over the visual style of lists.

It is commonly used to enhance the appearance of lists in navigation menus, content sections, and other parts of a website. You can use PNG, SVG, GIF, or other image formats supported by the browser.

Definition and Usage

Apply list-style-image on ul, ol, or individual li elements. When an image is set, it takes priority over the marker from list-style-type. If the image cannot load, the browser falls back to the type marker.

📝 Syntax

The syntax for the list-style-image property is straightforward. It can be applied to any list item (<li>) or parent list (<ul>, <ol>):

selector {
  list-style-image: url(image-path);
}

Basic Example

ul.custom-list {
  list-style-image: url("/images/flower.png");
}

Syntax Rules

• url(image-path) specifies the path to the image file used as the list marker.
• none removes the image and restores the normal marker behavior.
• The property is inherited by list items.
• Image markers cannot be resized with CSS; prepare the asset at the size you want.
• Pair with list-style-type as a fallback when the image fails to load.

💎 Property Values

🎯 Default Value

The default value of the list-style-image property is none, which means no image is used and the default list marker is displayed.

Examples Gallery

Replace default bullets with an image, add a fallback marker type, combine with the list-style shorthand, and reset markers with none.

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

<ul class="custom-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

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

ul.branded {
  list-style: square outside url("/images/flower.png");
}

ul.plain-list {
  list-style-image: none;
  list-style-type: disc;
}

♿ Accessibility

• Decorative markers should not carry meaning alone — Important information belongs in the list item text.
• Keep semantic list markup — Use real ul and ol elements even with custom images.
• Provide alt text indirectly through content — CSS background and list marker images do not accept alt attributes.
• Ensure markers remain visible — Low-contrast icons can be hard to see on some backgrounds.
• Test without images — Verify fallback markers still make lists scannable if images fail.

💡 Best Practices