The list-style-image CSS property specifies an image to be used as the list item marker. It is often more convenient to use the shorthand list-style.

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

/* <url> values */
list-style-image: url('starsolid.gif');

/* Global values */
list-style-image: inherit;
list-style-image: initial;
list-style-image: unset;
Initial value none
Applies to list items
Inherited yes
Media visual
Computed value none or the image with its URI made absolute
Animation type discrete
Canonical order the unique non-ambiguous order defined by the formal grammar

Note: This property is applied to list items, i.e. elements with 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.



Location of image to use as the marker.
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.

Formal syntax

<url> | none



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


ul {
  list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif");



Browser compatibility

Feature Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 1 12 1 4 7 1
Feature Android webview Chrome for Android Edge mobile Firefox for Android Opera Android iOS Safari Samsung Internet
Basic support 1 Yes 12 4 6 1 ?

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.