CSS liststyleimage Property (original) (raw)

CSS list-style-image Property

Last Updated : 22 May, 2026

The list-style-image property in CSS is used to replace default list item markers with custom images. It helps create more attractive and visually appealing lists on web pages.

Allows the use of images as bullets for list items.
Enhances the design and creativity of unordered and ordered lists.
Makes web content more engaging and user-friendly.

**Syntax:

list-style-image: none | url | initial | inherit;

**Property Values:

**none	This value specifies that no image is used as the marker. If this value is set, the marker defined in the list-style type is used instead. This is the default value.
**initial	This mode sets this property to its default value.
**url	In this value, the path to the image is used as a list-item marker.

Methods to use List Style Image Property

1. Using CSS list style image property value as none:

**Example: Here, we are using list-style-image: none; property.

html `

CSS list-style-image Property

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

GeeksforGeeks

<h2>
    CSS list-style-image Property
</h2>

<p>Sorting Algorithms</p>

<ul>
    <li>Bubble Sort</li>
    <li>Selection Sort</li>
    <li>Merge Sort</li>
</ul>

2. Using CSS list style image property value as url:

**Example: Here, we use list-style-image: url; property.

html `

CSS list-style-image Property

<style>
    ul {
        list-style-image:

url("https://write.geeksforgeeks.org/wp-content/uploads/listitem-1.png"); }

GeeksforGeeks

<h2>
    CSS list-style-image Property
</h2>

<p>Sorting Algorithms</p>

<ul>
    <li>Bubble Sort</li>
    <li>Selection Sort</li>
    <li>Merge Sort</li>
</ul>