In this article, we will learn to set an image or icon as the <li> image. We need to set the size of the custom list image to make it attractive. So, we will also learn the different ways to resize the custom list image.

Syntax: In this article, we will use below CSS properties.

• background-image: We will add a custom image as a background image in the list items.

li::before {
    background-image: url("image_URL");
}

• background-size: It will be used to set the size of the background image.

li {
    background-size: 20px;
}

Approach 1: First, we will set the list-icon as background-image and we can customize its size using the height and width property.

Example: This example shows the use of the above approach.

Output:

 

In the above output image, users can see the difference between the size of the list-style-image when we set sizes 30px and 10px.

Approach 2: In this approach, we will set the image size by using the background-size property for the <li> element.

Example: This example shows the use of the above approach.

Output: 

 

Users can see the above output image for the background-size: 20px.

Approach 3: We set a separate custom image for every list item and add style to that image.

Example: Here we are using the above-explained method.

Output: 

 

Users can see the above output after setup the custom image for every list item.