The symbols descriptor is specified as one or more <symbol>s.

<symbol>

Represents a symbol used within the counter system. This must be one of the following data types:

• <string>
• <image> (Note: This value is "at risk" and may be removed from the specification. It is not yet implemented.)
• <custom-ident>

A symbol can be a string, image, or identifier. It is used within the @counter-style at-rule.

symbols: A B C D E;
symbols: "\24B6" "\24B7" "\24B8" D E;
symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
symbols: url("one.svg") url("two.svg") url("three.svg");
symbols: indic-numbers;

The symbols descriptor must be specified when the value of the system descriptor is cyclic, numeric, alphabetic, symbolic, or fixed. When the additive system is used, use the additive-symbols descriptor instead to specify the symbols.

While a space between quoted symbols is not required, it makes the CSS more legible. To use a quote as a symbol, either escape the quote character or enclose the character is using different quotes, such as "'".

symbols = 
  <symbol>+  

<symbol> = 
  <string>        |
  <image>         |
  <custom-ident>  

<image> = 
  <url>       |
  <gradient>  

<url> = 
  url( <string> <url-modifier>* )  |
  src( <string> <url-modifier>* )  

HTML

<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

CSS

@counter-style symbols-example {
  system: fixed;
  symbols: A "1" "\24B7" D E;
}

.list {
  list-style: symbols-example;
}

Result

• The symbols descriptor is used within the @counter-style at-rule.
• list-style, list-style-image, list-style-position
• symbols(), the functional notation creating anonymous counter styles
• url() function
• CSS counter styles module