How can a custom image be used as a bullet on list items?

The list-style-image CSS property sets an image to be used as the list item marker.

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

/* <url> values */
list-style-image: url('starsolid.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: unset;

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image