JSFiddle - React, Tailwind, and code Playground

HTML

<div class="a-checkpoint-list">
    <ul>
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
        <li>Test 4</li>
    </ul>
</div>

CSS

.a-checkpoint-list {
  font-size:16px;
}

.a-checkpoint-list ul {
  list-style-image: url('data:image/svg+xml;utf8,<svg width="14px" height="14px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect x="1" y="1" rx="6" ry="6" width="12" height="12" style="fill:transparent;stroke:black;stroke-width:1;opacity:1" ></rect></svg>');
  margin: 0 auto;
  width: 100px;
}