🖼️ CSS Tutorial: list-style-image

📌 Introduction

The list-style-image property in CSS allows you to replace the default bullet (•) of unordered lists with a custom image. This is perfect for adding branding, icons, or stylistic elements to your lists. Great for landing pages, feature lists, pricing pages, documentation, and more! ✨

🎯 Why Use list-style-image?

  • To replace boring bullets with attractive icons 🎨
  • To match branding using custom SVG or PNG assets 💼
  • To improve readability and visual hierarchy 📚
  • To create unique feature lists and UI elements 🌟

✨ Syntax

Basic Syntax

selector {
  list-style-image: url("path/to/image.png");
}

Note

Tip: Use list-style-position: inside | outside; to adjust icon alignment.

🧩 Value Types

1. url() — Most common

You can use PNG, JPG, SVG, GIF, or even WebP images as custom bullets.

Using a PNG Icon

ul.features {
  list-style-image: url("check.png");
}

2. none

Removes the bullet or image entirely.

Remove Bullets

ul {
  list-style-image: none;
}

🔥 Practical Examples

1. Using a Custom Icon for List Items

Feature List Example

.feature-list {
  list-style-image: url("icons/star.svg");
  padding-left: 20px;
}

2. Different Icon Sizes Using Background + Pseudo-elements (Better Approach)

Note

Note: list-style-image does not allow resizing the icon. If you need control over size, use ::marker or li::before.

Using ::marker Instead (Modern)

ul.custom-marker li::marker {
  content: url("icons/check.svg");
}

3. Aligning List Image Properly

Position Example

.inside-list {
  list-style-position: inside;
  list-style-image: url("icons/bullet.png");
}

📊 Comparison Table

MethodProsCons
list-style-imageSimple to use, clean syntaxNo control over icon size
::markerSupports SVG, emojis, custom text, scalableLimited styling options
li::beforeFull styling control (size, color, position)More code required

🖼️ Visual Example

Further details can be found at: https://dummyimage.com/900x230/eeeeee/000000&text=list-style-image+demo

>>“Good UI is in the details — even list bullets can enhance the user experience.” ✨

🎉 Conclusion

The list-style-image property is an easy way to replace default bullets with custom icons. Although it lacks flexibility (like changing icon size), it’s perfect for simple and elegant list customization. For complete styling control, consider using ::marker or pseudo-elements. 🚀