list-style-image

Sets the image used as the list item marker. An image marker needs a URL, so Atomic CSS ships only the remove-image class (none) and you write the URL variant in your own stylesheet.

Class List

Class	CSS	Description
`lsin`	list-style-image: none	Remove list marker image. Reverts to default marker (disc, etc.)

Marker Comparison

Compare how the marker differs across the three lists. The middle one removes the image marker and falls back to the list-style-type marker, while the right one drops the marker entirely and places an image on each row instead.

Default marker

Item 1
Item 2
Item 3

The disc marker from list-style-type. An ordinary list with no image marker set.

Image marker removed

Item 1
Item 2
Item 3

Turning the image marker off with lsin falls back to whatever list-style-type specifies.

Image per row

Item 1
Item 2
Item 3

No marker at all, with an image placed in each row. Size and color are fully under your control.

An image marker renders at its intrinsic size and cannot be resized with CSS, which is why production code usually reaches for the third approach or the marker pseudo-element.

Class Details

`lsin`list-style-image: none

Uses no image marker. It is also the initial value, but it earns its keep when a theme or reset stylesheet sets an image marker higher up and you need to undo that for one particular list.

<!-- Drop an image marker inherited from a theme or reset stylesheet -->
<ul class="lsin lsd">
  <li>Falls back to the disc marker</li>
  <li>The image marker from the ancestor rule is ignored</li>
</ul>

<!-- No image marker and no text marker at all -->
<ul class="lsin lsn">
  <li>Completely clean list</li>
  <li>Ready for a custom icon per row</li>
</ul>

What is left after removing it

With list-style-image set to none, the marker is decided by list-style-type. To remove the marker entirely, add lsn as well.

Setting an image marker

A URL value cannot be expressed as a class name, so write it in your own CSS. Both external files and data URIs work.

/* Atomic CSS only ships the none value, because an image marker needs a URL.
   Write the URL variant in your own stylesheet. */

.check-list {
  list-style-image: url("/icons/check.svg");
}

/* Inline SVG as a data URI, no extra request */
.check-list {
  list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='5' fill='%236366F1'/%3E%3C/svg%3E");
}

/* The marker is drawn at the image's intrinsic size and cannot be resized,
   so the ::marker or flex approach below is usually easier to control. */
.check-list li::marker {
  color: #6366f1;
}

Usage Examples

<!-- Remove list marker image -->
<ul class="lsin">
  <li>Shows the default disc marker instead of an image marker</li>
  <li>Useful for clearing image markers set by external CSS</li>
</ul>

<!-- Combined with list-style-type -->
<ul class="lsin lsn">
  <li>No image marker and no default marker</li>
  <li>Completely clean list</li>
</ul>

Practical example: feature list on a pricing card

The marker is removed and each row places its own icon. That allows a different icon per item and dimmed unavailable rows, neither of which an image marker can do.

<!-- Feature list on a pricing card.
     lsn strips the built-in marker, and each row carries its own icon,
     which can be sized, coloured, and swapped per item -
     none of which list-style-image allows. -->
<div class="w32rem p2rem bg0F0F17 b1pxsolid27272A br8px">
  <h3 class="fs2rem fw700 cFAFAFA mb16px">Pro</h3>

  <ul class="lsin lsn pl0 df fdc gap12px fs14px cFAFAFA">
    <li class="df aic gap8px">
      <img src="/icons/check.svg" alt="" class="fs0 w14px h14px">
      <span>Unlimited projects</span>
    </li>
    <li class="df aic gap8px">
      <img src="/icons/check.svg" alt="" class="fs0 w14px h14px">
      <span>Priority support</span>
    </li>
    <li class="df aic gap8px o50">
      <img src="/icons/lock.svg" alt="" class="fs0 w14px h14px">
      <span>SSO (Enterprise only)</span>
    </li>
  </ul>
</div>

Pitfalls

An image marker requires a URL

list-style-image takes an image value such as a file or a gradient. If the value is none or the URL fails to load, it silently falls back to the list-style-type marker.

You cannot resize the marker

The image is drawn at its intrinsic size, and properties like width or background-size have no effect. Export the file at the size you need, or build the marker another way.

The list-style shorthand overwrites it

A later list-style shorthand resets the parts you omit back to their initial values, which can wipe out the image marker you just set. Check the declaration order.

Screen readers do not announce markers

You cannot attach alternative text to a marker image. If the icon carries meaning, put it in the row content as an image with real alt text. If it is decorative, an empty alt is correct.

list-style-type list-style-position