Firefox Tomorrow

css property

`list-style-image` CSS property

View on MDN ↗

The list-style-image CSS property sets an image to be used as the list item marker.

It is often more convenient to use the shorthand list-style.

Interactive exampleOpen the canonical MDN source to run this embedded demo.
list-style-image: url("/shared-assets/images/examples/rocket.svg");

list-style-image: none;

<section class="default-example" id="default-example">
  <div>
    <p>NASA Notable Missions</p>
    <ul class="transition-all unhighlighted" id="example-element">
      <li>Apollo</li>
      <li>Hubble</li>
      <li>Chandra</li>
      <li>Cassini-Huygens</li>
      <li>Spitzer</li>
    </ul>
  </div>
</section>

.default-example {
  font-size: 1.2rem;
}

#example-element {
  width: 100%;
  background: #be094b;
  color: white;
}

section {
  text-align: left;
  flex-direction: column;
}

hr {
  width: 50%;
  color: lightgray;
  margin: 0.5em;
}

.note {
  font-size: 0.8rem;
}

.note a {
  color: #009e5f;
}

@counter-style space-counter {
  symbols: "\1F680" "\1F6F8" "\1F6F0" "\1F52D";
  suffix: " ";
}

[!NOTE] This property is applied to list items, i.e., elements with [display](/firefox/mdn/css/reference/properties/display/): list-item; by default this includes <li> elements. Because this property is inherited, it can be set on the parent element (normally <ol> or <ul>) to let it apply to all list items.

Syntax

/* Keyword values */
list-style-image: none;

/* <url> values */
list-style-image: url("star-solid.gif");

/* valid image values */
list-style-image: linear-gradient(to left bottom, red, blue);

/* Global values */
list-style-image: inherit;
list-style-image: initial;
list-style-image: revert;
list-style-image: revert-layer;
list-style-image: unset;

Values

  • image
    • : A valid image to use as the marker.
  • none
    • : Specifies that no image is used as the marker. If this value is set, the marker defined in list-style-type will be used instead. This is the default value for list-style.

Formal definition

Formal syntax

Examples

Using a url value

This example has a star as a marker, which we include using the &lt;url&gt; image function.

HTML

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

CSS

ul {
  list-style-image: url("star-solid.gif");
}

Result

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Using a gradient

This example has a CSS gradient as a marker, which we create uses the linear-gradient() image function.

HTML

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

CSS

ul {
  font-size: 200%;
  list-style-image: linear-gradient(to left bottom, red, blue);
}

Result

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also