The symbols CSS descriptor is used to specify the symbols that the specified counter system will use to construct counter representations.


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



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


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 "'".

Formal definition

Related at-rule@counter-style
Initial valuen/a (required)
Computed valueas specified

Formal syntax

symbols = 

<symbol> =
<string> |
<image> |

<image> =
<url> |

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


Setting counter symbols


<ul class="list">


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

.list {
  list-style: symbols-example;



CSS Counter Styles Level 3
# counter-style-symbols

Browser compatibility

BCD tables only load in the browser

See also