[kube]

hi Artisan,

If you mean category icons, here's one way although resizing maybe an issue if the icons are intended to be much larger in the header section of the main content (and remember to take care of default_icon.gif)...

in skin1/customer/categories.tpl locate something like the code below and {* comment *} it out...

{foreach from=$categories item=c}
<font class="CategoriesList"><a href="home.php?cat={$c.categoryid}" class="VertMenuItems">{$c.category}</a></font><br />
{/foreach}
{else} {foreach from=$subcategories item=c key=catid}
<font class="CategoriesList"><a href="home.php?cat={$catid}" class="VertMenuItems">{$c.category}</a></font><br />
{/foreach}

and undeneath it add this...

{foreach from=$categories item=c}
<div class="CategoriesListAndIcons"><img src="{$c.icon_url}" alt="" /><a href="home.php?cat={$c.categoryid}" class="VertMenuItems">{$c.category}</a></div>
{/foreach}
{else}
 {foreach from=$subcategories item=c key=catid}
<div class="CategoriesListAndIcons"><img src="{$c.icon_url}" alt="" /><a href="home.php?cat={$catid}" class="VertMenuItems">{$c.category}</a></div>
{/foreach}

Then add to skin1/skin1.css...

.CategoriesListAndIcons {
	FONT-SIZE: 12px; /* default x-cart font-size may want to change this to em */
	padding: 3px 0; /* Some spacing for top and bottom of each link */
	display:block; /* Using display block so that no extra <br />s are needed */
}

.CategoriesListAndIcons IMG {
	vertical-align:middle; /* puts the image middle of the box model */
	padding-right: 4px; /* padding for the right of the icon */
	padding-bottom: 2px; /* probably a better way but some browsers do not align middle properly */
	height:20px; /* change this for the set height of the icons */
	width:20px; /* change this for the set width of the icons */
}

Hope this helps. If I got your question horribly wrong, which I suspect, no worries I'm working on something like this at the moment as well ;D