How to change list markers

Short answer

Any string can go into list-style-type — it becomes the marker:

<ul style="list-style-type: '✓ ';">
  <li>Free delivery</li>
  <li>30-day returns</li>
</ul>

There are built-in values too: disc (a dot), circle (a ring), square.

The marker color

The ::marker pseudo-element changes the marker color and size without touching the item text:

<style>
  li::marker { color: seagreen; font-size: 1.3em; }
</style>
 
<ul>
  <li>Tea</li>
  <li>Coffee</li>
</ul>

Only some properties work on ::marker: color, font and content. Padding and background have no effect on it.

A fully custom marker

For a complex marker — a colored circle, an icon, a precise gap — remove the default one and draw your own with ::before:

<style>
  .check { list-style: none; padding: 0; }
  .check li { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
  .check li::before { content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: seagreen; color: white; font-size: 12px; }
</style>
 
<ul class="check">
  <li>Free delivery</li>
  <li>30-day returns</li>
</ul>

Common mistake

The marker string is written without a trailing space: list-style-type: '✓'. The character sticks to the item text. Add a space inside the quotes or set a gap with padding-left on <li>.