When you want to use an image for a bullet in your project, you can follow the next steps:

C# 8.0 and .NET Core 3.0 – Modern Cross-Platform Development: Build applications with C#, .NET Core, Entity Framework Core, ASP.NET Core, and ML.NET using Visual Studio Code, 4th Edition
ASP.NET Core 3 and Angular 9: Full stack web development with .NET Core 3.1 and Angular 9, 3rd Edition
C# in Depth, 4th Edition

1. Create your image.

2. Use the  list-style-image property which accepts a URL, which supports the path to your image file as a value.

You can use the next two files to test this:

File test.css

ul {

list-style-image: url(image1.gif);


File test.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”


<html xmlns=”https://www.w3.org/1999/xhtml” lang=”en-US”>


<title>How to use an image for a list item with CSS</title>

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />

<link rel=”stylesheet” type=”text/css” href=”test.css” />




<li>list item one</li>

<li>list item two</li>

<li>list item three</li>

<li>list item four</li>

<li>list item five</li>





The next picture shows the result:


Using of an image for a list items with CSS

Using of an image for a list items with CSS