🎯 CSS list-style-image Property

The CSS list-style-image property allows you to replace the default list marker with a custom image. It is used in <ul> and <ol> elements to customize bullet points visually.

Instead of standard bullets or numbers, you can use icons, logos, or any image as list markers.

Removes any custom image and displays the default list marker (bullet or number).

ul {
  list-style-image: none;
}
                

Defines the image path used as the list marker. Each list item will display this image instead of a bullet.

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

✔ Example result: Each list item uses a star icon as a bullet.

Resets the property to its default value. The browser will use standard list markers.

list-style-image: initial;
                

The element inherits the list-style-image value from its parent element.

list-style-image: inherit;
                

You can use custom icons to make menus or lists more visually appealing:

ul.menu {
  list-style-image: url("icons/arrow.png");
}
                

In this example, each list item will display an arrow icon instead of a bullet point.