Canvasでiconを作る

<style>
	ul.icon{
		list-style:none;
	}
	ul.icon li {
		position: relative;
		margin-bottom: 0.5em;
	}
	ul.icon li canvas {
		position: absolute;
		top: 0.3em;
		left: -13px;
	}
</style>
<ul class="icon">
	<li>item01</li>
	<li>item02</li>
	<li>item03</li>
	<li>item04</li>
	<li>item05</li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	var list = $('ul.icon li');
	list.prepend('<canvas width="20" height="20" />');
	var ctx = null;

	list.each(function (i){
		var canvas = $('canvas', list).get(i);
		ctx = canvas.getContext('2d');
		drawIcon();
	});

	function drawIcon(){
		ctx.beginPath();
		ctx.arc(6, 10, 6, 0, Math.PI*2);
		ctx.fillStyle = 'rgb(50, 150, 255)';
		ctx.fill();

		ctx.beginPath();
		ctx.moveTo(5, 7);
		ctx.lineTo(8, 9);
		ctx.lineTo(5, 12);
		ctx.closePath();
		ctx.fillStyle = 'rgb(255, 255, 255)';
		ctx.fill();
	}
});
</script>

なるほどー