つまらないものですが申し訳ないですが、今回はおもいきってjsdo.itというサイトに登録してみました。すごく便利ですね！

html

この通り何のへんてつもないリストがあります。
canvasタグはjQueryで追加します。

html
<ul class="icon">
  <li>item01</li>
  <li>item02</li>
  <li>item03</li>
  <li>item04</li>
  <li>item05</li>
</ul>

css

リストの画像は普通cssの背景画像で指定しますが、背景画像にcanvasはたぶん指定できませんので、liの直下にcanvasを入れます。
細かい調整はcanvasのtopやleftで修正してください。

css
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;
}

JavaScript

要素の取得とかにjQueryを使用しております。

javascript
<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>

アイコンを描いているのは16行目あたりの「drawIcon」ですので、ここをカスタマイズすることでオリジナルのアイコンにできます。