<!doctype html>
<html>
<head>
</head>
<body>
<ul>
<li>This is a line item</li>
<li>This is a line item</li>
</ul>
</body>
</html>

I'm unsure of how to control the size of the "list-style-image" ( i.e. scale the image ), which would be preferred over using multiple images. In this case lets say I wanted the 20x20 pixel image to be 10x10 pixels.

My ideal however would be to create a custom bullet style with the polygon attribute in CSS, but do not know how to implement or if it's supported ( as polygon is relatively new itself ).

Below is an example of what I was thinking. The polygon used is a hexagon for reference.

Instead of using list item images, you could use background images. If you increase the em width/height of the background image by 1, you can also increase the left padding of the parent <li> by 1. So that it will evenly scale.