How to add an image as the list-item marker in a list using CSS ?

Last Updated : 15 Oct, 2020

The approach of this article is to learn how to add an image as the list-item marker in a list using list-style-image Property in CSS.

Syntax:

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

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        ul { 
            list-style-image: url( 
"https://write.geeksforgeeks.org/wp-content/uploads/listitem-1.png"); 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h2> 
        How to add an image as the 
        list-item marker in a list using CSS? 
  
    </h2> 
  
    <p>Programming Languages</p> 
  
    <ul> 
        <li>c++</li> 
        <li>Java</li> 
        <li>PHP</li> 
        <li>python</li> 
    </ul> 
</body> 
  
</html> 