In my previous article I wrote about how paying attention to details will give a distinct and memorable look to your blog or website. One of those usually ignored elements are the bullets in the unordered lists. With a little bit of CSS magic and a unique set of icons you can turn your bulleted lists into an impressive work of art.

You can either create your own icons in any available Image Editing software, or download them from a numerous stock or free icon resources. In this post I will share with you 8 such icon sites and will demonstrate a simple CSS code that will teach you how to replace the default HTML bullets with the custom made icons. You can also give a quick makeover to your menu items by adding some attractive icons, but that's a topic for another post. For now, get inspired with the iconic art.

8 Icon Resources

  1. Crystal Clear Icons - beautiful open source icon sets by Everaldo Coelho, presented by Wikipedia. All Crystal icons were posted as LGPL on kde-look.
  2. Silk Icons - over 700 16x16 px very slick open source icons in PNG format.
  3. Sweetie - "Cute and clear icons to use in your nifty web application. They are licenced under a Creative Commons licence, so commercial use is fine. Also feel free to make derivatives with the included Photoshop documents."
  4. Icon Archive - various collections of Free icons for non-commercial use, with more of a cartoon-style interface.
  5. Free Icons Web - another collection of free icons for non-commercial use, consists of over 15,000 high quality icons for various applications and websites.
  6. N.Design Studio Stock Web Icons- designed by Nick La. The site offers various packages with very impressive collection of stock icons for blogs, websites, CMS, ranging from $25 to $50
  7. Chalkwork Basic Icons - designed by Dave Shea, creator of CSS Zen Garden. The set consists of 70 royalty-free icons for $125.
  8. Icon Drawer - offers various royalty-free icons for your website or software, ranging from $29 to $84, and some free icons for Mac OS X applications.

How to style Bulleted Lists with CSS

There are two different ways for styling unordered lists with images:

  1. Using images to replace bullets with list-style-image: url(imagename);. This is the quickest way that gets the job done, however it comes with a pretty substantial drawback - each browser positions those images-icons differently.
  2. Using Background images for list bullets with background-image: url(imagename). This is the preferred way for styling the lists, because it gives much more consistent results in various browsers. It involves a bit more coding, and requires the use of the padding property to customize the positioning.

For our demonstration we will use the following example of the HTML code with a nested ordered list within a DIV tag, and show two different CSS styling methods below.

HTML:
  1. <div id="sidebar">
  2.   <li>
  3.    <h2>Pages</h2>
  4.    <ul>
  5.      <li><a href="#">About</a></li>
  6.      <li><a href="#">Contact</a></li>
  7.      <li><a href="#">Sitemap</a></li>
  8.    </ul>
  9.   </li>
  10.  </ul>
  11. </div>

Method #1: Using Images

CSS:
  1. #sidebar ul {
  2.   list-style: none;
  3. }
  4.  
  5. #sidebar ul ul {
  6.    list-style-image: url(images/ibit_unordered.png);
  7. }

Method #2: Using Background Images

CSS:
  1. #sidebar ul {
  2.   list-style: none;
  3. }
  4.  
  5. #sidebar ul ul {
  6.     list-style: none;
  7.     padding:0pt;
  8. }
  9.  
  10. #sidebar ul ul li {
  11.     background: transparent url(images/ibit_unordered.png) no-repeat scroll 0pt 3px;
  12.     padding: 4px 0px 4px 18px;
  13. }

Please, note that those are very simple examples just to demonstrate the two different approaches in styling bulleted lists with CSS. You should apply them to your HTML and CSS structure with any further customization as needed.
Make sure to visit an incredible online resource that covers everything there is to know about Lists - Listamatic.

I hope you found this article useful and helpful. Let me know if you have any questions. I personally would love to hear from other designers and invite them to share their tips and tricks for styling bulleted lists with custom icons, and your favourite icon resources on the Web.

Recent Bits
Related Bits
16 Dates With Inspiration
Best Inspiration Bits in 2007
Favourite Tips From Blogiverse
Focus On Details And Get Inspired
8 bits of Colour Inspirations
Design Critique: SEGD
Design Critique: Klepas
8 Bits From The Past
Comment Bits

10 Insightful Bits in response to “Icon Resources and Tips For Styling Bulleted Lists”

  1. Very good resources, Vivien. I love collecting icons ;) And thanks for that little tutorial, now I can go ahead and make my theme a little unique :)
    And I found this icon search engine really useful. Currently it’s not functioning, but I hope to see it in action later.

  2. One other icon resource for you: IconBuffet. They have charged-for icons, but also a massive range of free stuff too. Might need to do some resizing for lists of course… ;)

  3. Some great icon resources there. If there’s something I’m absolutely hopeless at – it’s icons – I’m off to grab some. Thanks.

  4. great resources vivien, thanks – I need to start making lists of things I’m going to need once I move to wordpress…:)

  5. Very cool — and you’re right that the list bullets are usually ignored. I know I’m guilty. I might have to do a little updating this weekend.

  6. Vivien

    Thanks everyone – glad you enjoyed my little icon collection. Shankar and Paul, thanks for adding to it.

    Shankar, when are you going to find that perfect theme for your blog? I’ve never seen any other blog that’s changing its appearance as often as yours. I think you should think about designing your own theme that you’ll be happy with :-)

    Paul, that IconBuffet resource is excellent. I love the fact that I can browse by categories there. Thanks.

    Johno, same here – it is my hope to one dab into some icon design. I can design some very simple ones, but not nearly as good as most of those listed in the resources above.

    Pearl, good luck with your wordpress switch. It’ll definitely give you more power to customize your blog to your heart’s content.

    Brian, look forward to seeing what you’ll come up with for your blog’s bulleted lists :-)

  7. Vivien,

    Your icon resources helped out immensely. You are a great time-saver.

  8. @Vivien: I dunno why but I don’t get satisfied easily with any theme. I have such a mentality :D May be I’ll come up with a brand new theme in the days ahead. :)

  9. Thanks for taking the time to put these together.

  1. Best Inspiration Bits in 2007 » Inspiration Bit

    [...] Icon Resources and Tips For Styling Bulleted Lists [...]

Selected Bits

PopularBits

RecommendedBits

FavouriteBits

PersonalBits

Hi, I'm Vivien. Thanks for visiting my Inspiration Bit. I often find myself scouring the internet looking for either answers to many questions I have or websites that inspire me, sites that I can learn from. On what topics you might ask — any topics that interest me, anything from web design to typography and art, from blogging to entrepreneurship, from programming to open source.
read more…
When I'm not blogging, I design web sites, teach programming, play with my daughter and try to balance family, work, friends and a somewhat active social life on