Awhile back, I was inspired by the beautiful work of Orman Clark over at Premium Pixels.
Personally, I prefer Fireworks over Photoshop for Web design, but every once in awhile, I see people doing things in Photoshop that really challenges me to attempt the same effect in Fireworks (especially when I can apply it to WordPress).

Below is a quick tutorial on how you can get your WordPress tags to look like this.
Demo | Download Source Files

I've also included the layered Fireworks source PNG for download.
These icons are 100% scalable vector, so you can modify them as you wish.

Download

When I began to style the tags in WordPress, I ran into a problem; I needed to change the markup because the the_tags() function of WordPress allows only a few (very basic) parameters; none of which apply to additional stying:

<?php the_tags('Tags:', ', ', '<br />'); ?>

Which simply outputs:

<a rel="tag" href="http://dev.simplethemes.com/tag/theme">theme</a>

But I needed something more along the lines of this:

<span class="st_tag"><a rel="tag" href="http://dev.simplethemes.com/tag/theme">theme</a></span>

By using this in your WordPress Theme, we can now select the element with some very simple jQuery.

<?php  if (get_the_tags()) :?> <p class="tags">Tags: <?php  the_tags('', ' ', ''); ?></p> <?php endif;?>

We want to wrap the tag in s span, so here's jQuery's wrap() function to the rescue: http://api.jquery.com/wrap/

$('p.tags a').wrap('')

So now, our markup looks like this:

<span class="st_tag"><a rel="tag" href="http://dev.simplethemes.com/tag/theme">theme</a></span>

Now, with a little CSS, we can finally style the tags:

/* Tag Styles */
 
p.tags {
    font: bold 13px/26px sans-serif;
}
 
p.tags span.st_tag {
    padding: 0px 0px 0px 20px;
    margin: 0;
    background: url(./images/tag_bg_l.png) no-repeat left center;
    display: inline-block;
}
p.tags span.st_tag a {
    text-decoration: none;
    text-shadow: #f4f4f4 1px 1px 1px;
    padding: 0px 10px 0px 2px;
    background: url(./images/tag_bg_r.png) no-repeat right center;
    display: inline-block;
}
p.tags span.st_tag a:hover {
    color: #333;
}