list-style-image

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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.

Try it

list-style-image: url("/shared-assets/images/examples/rocket.svg");

list-style-image: none;


  

    
NASA Notable Missions

    
    
      
  • Apollo
    • 
      
  • Hubble
    • 
      
  • Chandra
    • 
      
  • Cassini-Huygens
    • 
      
  • Spitzer
    • 
    

  




.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: list-item; by default this includes

  • elements. Because this property is inherited, it can be set on the parent element (normally
      or
        ) to let it apply to all list items.

    • Syntax

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

/*  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

    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

    Initial valuenone
    Applies tolist items
    Inheritedyes
    Computed valueThe keyword none or the computed
    Animation typediscrete

    Formal syntax

    list-style-image = 
        |
      none     

     = 
             |
        

     = 
        |
        

     = 
      url(  * )  |
                            

     = 
      src(  * )

    Examples

    Using a url value

    This example has a star as a marker, which we include using the image function.

    HTML

    html
      
  
    • Item 1
      • 
  
    • Item 2
      •

    CSS

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

    Result

    Using a gradient

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

    HTML

    html
      
  
    • Item 1
      • 
  
    • Item 2
      •

    CSS

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

    Result

    Specifications

    Specification
    CSS Lists and Counters Module Level 3
    # image-markers

    Browser compatibility

    See also