In addition to what NJ wrote about paths, Clarity uses a sprite for those icons, so you will have to get the sprite image, and then display the appropriate region.
If drop this into an HTML portlet (at least in v13.x), you should see all icons as a single image plus Red, Yellow and Green individually.
<html>
<head>
</head>
<body>
<h4>Here's your sprite: </h4><img src="ui/uitk/images/odf.png" />
<h4>Here are your Green Yellow Red:</h4>
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>Green</td>
<td><img src="ui/uitk/images/s.gif" border="0" name="Green" alt="Green" title="Green" style="width: 16px; height: 16px; background: url(ui/uitk/images/odf.png) no-repeat -48px -0px" align="absmiddle"></td>
</tr>
<tr>
<td>Yellow</td>
<td><img src="ui/uitk/images/s.gif" border="0" name="Yellow" alt="Yellow" title="Yellow" style="width: 16px; height: 16px; background: url(ui/uitk/images/odf.png) no-repeat -144px -0px" align="absmiddle"></td>
</tr>
<tr>
<td>Red</td>
<td><img src="ui/uitk/images/s.gif" border="0" name="Red" alt="Red" title="Red" style="width: 16px; height: 16px; background: url(ui/uitk/images/odf.png) no-repeat -112px -0px" align="absmiddle"></td>
</tr>
</table>
</body>
</html>