How to style List Style Image items

[RashiqAzhan]

How do I style list-image-[<value>] items with tailwind? For example resize them by applying a class size-2.

<ul class="list-image-[url(/img/checkmark.png)]">
  <!-- ... -->
</ul>

I tried list-image-size-2 but that doesn't seem to be it.

[barry166]

There is no list-image-size-* utility because list-style-image does not expose the marker as a box whose width/height you can set; the image uses the marker's default sizing. Keep the list semantics and render a sized background on a custom marker instead:

<ul class="list-none">
  <li class="relative pl-6 before:absolute before:left-0 before:top-[0.35em] before:size-2 before:bg-[url('/img/checkmark.png')] before:bg-contain before:bg-no-repeat before:content-['']">
    Item
  </li>
</ul>

For a dynamic/accessible icon, an actual <img aria-hidden="true" class="size-2" /> inside each <li> is even more explicit. list-image-[url(...)] is still useful when the browser's default marker size is acceptable; Tailwind's marker: variant only targets ::marker properties, not image dimensions. See Tailwind's list-image utility and MDN's list-style-image sizing notes.

[RashiqAzhan]

This does work.
Maybe this is too much to ask, but can you explain how you created this and your thought process? I don't think I really understand what's going on. I've read this render a sized background on a custom marker, but I don't know how to interpret this.

---

As for the second part. You recommend this instead?

<ul class="list-none">
  <li>
  <img aria-hidden="true" class="size-2" src="/img/checkmark.png" />
    Item
  </li>
</ul>

It looks simpler looking, but I'm not sure if this is acceptable semantic HTML.

[choijungmua]

Yes, an <img> inside each <li> is valid semantic HTML. The ul and li elements still expose the list structure; the image is just decorative content inside each item. Give a decorative checkmark alt="" (and optionally aria-hidden="true") so a screen reader does not announce the same decoration for every item.

A simpler aligned version is:

<ul class="list-none space-y-2">
  <li class="flex items-start gap-2">
    <img src="/img/checkmark.png" alt="" class="mt-[0.35em] size-2 shrink-0" />
    <span>Item text</span>
  </li>
</ul>

The earlier pseudo-element version builds the same layout without an extra DOM element:

• list-none removes the browser marker.
• relative makes the <li> the positioning reference.
• pl-6 reserves horizontal room so text cannot overlap the icon.
• before:content-[''] creates an empty ::before box.
• before:absolute before:left-0 before:top-[0.35em] places that box in the reserved room and aligns it near the first text line.
• before:size-2 gives the box an explicit width and height.
• the before:bg-* utilities paint and scale the image inside that box.

The key distinction is that list-style-image gives the browser ownership of the marker's layout, so CSS cannot reliably size it as a normal element. Replacing it with an <img> or ::before creates a box that size-2 can control. Use <img> when the explicit markup is clearer; use ::before when the image is purely decorative and repeated consistently.

[amasen02]

In the CSS specification, the list-style-image property does not have a native sizing property (there is no list-style-image-size in CSS). Browser rendering engines always draw list-style-image at its natural dimensions, which is why utilities like size-2 or list-image-size-* don't take effect on list markers directly.

To control the size and position of custom bullet images with Tailwind CSS, there are two standard patterns:

Pattern 1: Using before: pseudo-elements (Recommended)

Remove default list styling with list-none and use a before: element sized with size-*:

<ul class="space-y-2 list-none">
  <li class="flex items-center gap-2 before:inline-block before:size-4 before:bg-[url('/img/checkmark.png')] before:bg-contain before:bg-no-repeat">
    First item
  </li>
  <li class="flex items-center gap-2 before:inline-block before:size-4 before:bg-[url('/img/checkmark.png')] before:bg-contain before:bg-no-repeat">
    Second item
  </li>
</ul>

Pattern 2: Inline SVG icons

If the checkmark is a vector icon, placing an inline SVG or icon component gives you direct Tailwind color and size control (size-4 text-emerald-500):

<ul class="space-y-2">
  <li class="flex items-center gap-2">
    <svg class="size-4 shrink-0 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
    </svg>
    <span>First item</span>
  </li>
</ul>

Pattern 1 is a direct drop-in replacement for list-image-[url(...)] with full control over width, height, and alignment.