CSS | list-style-image Property

Last Updated : 09 Aug, 2019

The list-style-image property in CSS is used to set the image that will be used as the list item marker.

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 list-style-type is used instead. This is default value.
Syntax:

list-style-image: none;

Example:

<!DOCTYPE html>
<html>
    <head>
    <title>
        CSS list-style-image Property
    </title>
    <style>
        ul  {
          list-style-image: none;
        }
    </style>
    </head>
    <body style = "">
        <h1 style = "color:green;">
            GeeksforGeeks
        </h1>
          
        <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>
    </body>
</html>

Output:
liststyleimage

url: In this value the path to the image is used as a list-item marker.
Syntax:

list-style-image: url;

Example:

<!DOCTYPE html>
<html>
    <head>
    <title>
        CSS list-style-image Property
    </title>
    <style>
        ul  {
          list-style-image: 
url("https://contribute.geeksforgeeks.org/wp-content/uploads/listitem-1.png");
        }
    </style>
    </head>
    <body style = "">
        <h1 style = "color:green;">
            GeeksforGeeks
        </h1>
          
        <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>
    </body>
</html>