Brain Food for Web Developers

List Icon

Custom Icons for Lists

Update: Since this article is quite old now you might want to look at a newer one about CSS Sprites with Pseudo Elements.

Here’s a really quick tip for jazzing up your bullet points in unordered lists. Make use of the ability to assign images as your list-style.

Custom list iconsFirst of all you’ll need a set of icons to use. There are a lot of websites out there that offer free icon sets, such as iconfinder. Alternatively you could make your own. Make sure the icons are a suitable size (I’ve used 15px by 15px icons) and saved them as individual files.

Once you’ve found some suitable icons you can start with the HTML:

<li id="home"><a href='#'>Home</a></li>
<li id="articles"><a href='#'>Articles</a></li>
<li id="search"><a href='#'>Search</a></li>
<li id="contact"><a href='#'>Contact</a></li>

Each of the list items within the unordered list has a unique ID. Use CSS to associate the icons with each ID:

ul #home { list-style-image: url('/home.png'); }
ul #articles { list-style-image: url('/articles.png'); }
ul #search { list-style-image: url('/search.png'); }
ul #contact { list-style-image: url('/contact.png'); }

It’s that simple! With a bit of extra styling, this method can be used to make some very attractive lists that stand out from the rest.

Author: Graham

My name is Graham and I'm a Scottish web developer living in California. I love working with clean code to make attractive and usable websites. I'm also interested in cooking, gardening, and taekwondo.

Comments are closed.