List Image

TailwindCSS’s list-image utility allows you to replace default bullet points in unordered lists with custom images, enhancing your list’s visual appeal.

Traditional Approach: Adding an SVG to Each List Item

Using SVGs for custom bullets requires repetition and more complex markup. For example:

<ul class="space-y-2 list-outside pl-4 text-gray-950 dark:text-white">
    <li class="flex gap-2 items-center">
        <svg class="size-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M20 6 9 17l-5-5" opacity="0.75" stroke="currentColor"></path>
        </svg>
        <span>First Item</span>
    </li>
    <li class="flex gap-2 items-center">
        <svg class="size-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M20 6 9 17l-5-5" opacity="0.75" stroke="currentColor"></path>
        </svg>
        <span>Second Item</span>
    </li>
    <li class="flex gap-2 items-center">
        <svg class="size-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M20 6 9 17l-5-5" opacity="0.75" stroke="currentColor"></path>
        </svg>
        <span>Third Item</span>
    </li>
</ul>

Simplified Approach: Using list-image

The list-image-[] utility allows you to replace bullets with a single utility class:

<ul class="space-y-2 list-outside pl-4 list-image-[url(/check.svg)] *:pl-2 text-gray-950 dark:text-white">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ul>

Why Use list-image?

• Custom Design: Easily replace boring bullets with images or icons.
• Cleaner Layouts: Matches your brand’s design language.
• Less Repetition: Avoid repetitive code like inline SVGs.
• Effortless Implementation: No extra markup or CSS required.

Browser Support

Most modern browsers support list-image. However, always test your designs for compatibility and provide fallbacks if needed.