I am available for freelance work - HIRE ME

Icons and the Web – Part 3: Organizing Your Icons

posted by Matt Ward on Apr 18, 2010.

This is the third article in a six part series, in which we will discuss various aspects of using icons for the web! This particular article outlines the importance of keeping your icon library well organized, and offers some ideas for how to go about it.

Here we are with part three in the continuing discussion of using icons on the web. In part 1 we considered why icons are important and how they can add usability and value to your designs. In part 2, we looked at some techniques that you can use to search for icons and begin building your own library.

Icons and the Web – Part 3: Organizing Your Icons

Icons and the Web – Part 3: Organizing Your Icons

If you keep building your library, though, you may eventually end up with a large amount of icons. When you get to this point, it can always be a good idea to try to find a way to organize your icons for easy access and retrieval. In this post, I want to look at some techniques that you can use to keep your icon library nice and organized – or any other media library for that matter.

Why Organizing is Important

Currently, I have hundreds of icons sitting in my own library. Over time, it is not at all unreasonable to expect that that number will slowly climb into the thousands. When I go looking for an icon or group of icons to use in a web design, the last thing that I want to do is have to manually wade through all of these manually.

Trust me – I’ve done this before. It is not at all efficient and the very thought of it makes me shudder.

Organizing is just a better way to go about it. Just think about a real library. How many books do you think it has? That will vary, of course, but thinking back to the library where I spent so much time as an undergraduate and graduate student, I would hazard a guess and say that they have hundreds of thousands of books.

Now suppose that I want to find one book in that entire collection. I don’t just walk in, look at the first book on the first shelf and then move from volume to volume hoping to find the one I want! I use the index system to look for the specific title, determine it’s call number and where in the library the book is and go find it. In a matter of minutes, I have exactly what I was looking for.

I do the same thing with my own books, too! I have four large bookcases in our basement, and each case generally holds a different type of book. All of my many fantasy novels are in one bookcase. All of by theoretical textbooks are on another. If I need to find something specific, I know just where to look.

Organizing your icons can offer all the same benefits! Instead of spending hours looking through all your icons individually, a good library should make location and retrieval simple and relatively painless.

Categorize

Probably the best way to start to organize your icon library is to establish a method of categorization, which will allow you to break your icons into logical and manageable groups. This, in turn, can make finding your icons just that much easier.

Categorizing your icons is a great way to get organized

Categorizing your icons is a great way to get organized

There are several different ways that you could choose to categorize:

By Publisher – If you tend to get all of your icons from a few key sources (like those listed in part 2), then you might consider categorizing your icons according to the publisher. This can help keep the creator of the icons at the front of your mind when it comes time to giving any necessary credit.

Also, a single publisher will often release multiple icon packs in the same – or at least very similar – style. Grouping your icons this way can be one useful way to help you find similar icons from different sets!

By File Type – In my icon library I have icons in AI, EPS, PNG, PSD, and ICO formats. There’s not too much difference between the AI and EPS icons, but there’s a world of difference between them and the PSD icons. Then there are the PNG icons, which are flattened and much more difficult to edit. The ICO icons are probably the least flexible, and are rarely used.

Categorizing icons by file type can be most helpful for people who tend to select their icons based on file types. Perhaps you are always looking for varying degrees of editability, or prefer to use vector icons in some situations and PSD or PNG icons in others. If that’s you, then using file type categorization might well be your best bet!

By Set – This is the way I am currently organized, and so far it has worked reasonably well for me. I basically just decompress each icon set to its own unique folder. I like to look at my icons in terms of their larger set, so this seemed a logical choice for me.

As my icon library has continue to grow, however, it is becoming less and less efficient. I will certainly be picking up another means of organizing them as soon as possible. As such, I would really only recommend this method of organizing for small libraries, or as a means of creating sub-categories withing a larger organizational construct.

By License – Filling your icons sets according to license type can be a great approach if your range of projects demands an equally diverse range of usage options. Perhaps you’re doing a bunch of personal projects for yourself (or others), some non-profit work and websites for commercial clients. Each of these types of projects may allow you to use different icons in your library, based on the unique license agreement.

Having your icons organized by license gives you a simple and easy way of filtering out sets which, though they may contain awesome material, may simply be unusable based simply on the license. It can also help fend of the disappointment of finding the perfect icon but not being able to use it because of license limitations.

By Theme/Style – You could also organize your library into thematic groups like social media icons or blogging icons. If you do a lot of work in a particular niche, you may also have some more specific general themes such as medical icons or academic icons. Alternatively, you can also organize based on styles. Grunge, glossy and sticker icons would all be different types of styles, based on the visual appearance of the icons themselves.

In many ways, I think that this may be the most useful way of organizing your icons, since the theme or style of an icon will frequently be one of the deciding which icons to implement in your website designs.

Using a Folder Structured

Both OS X and Windows provide a natural way of organizing your icon files, through the use of various folders and sub-folders. For example, you can create a one folder called “Icons” and then create a series of other sub folders, based on whatever method of categorization you choose.

Using a folder structure is a simple and easy way to organize

Using a folder structure is a simple and easy way to organize

This is precisely the method that I am currently using, and so far it has worked pretty well, especially since my Mac is actually able to preview AI files. I can quickly navigate up and down through the folder structure, previewing the various icons as I look for a set to use.

The advantage of this method is that it’s really easy to set up and does not require and additional software. Just create your folders and go.

It does, however, start to become somewhat cumbersome for large libraries with dozens and dozens of subfolders to look through. You are also limited to just a single means of organization – you cannot really organize the icons independently by both theme and license. The best you can do is to create subfolders for each unique theme, and then create further subfolders within those for the different forms of licensing.

It all works, but it might be just a bit cumbersome. That’s where an often overlooked application like Adobe Bridge can become an incredibly valuable tool.

Using Bridge

I know that a lot of people aren’t a huge of using Bridge – it can be a little buggy and a real drain on system resources, especially for an application that is essentially a means of managing documents and creating an effective connection between applications in the Creative Suite. If does, however, have some unique features which can actually make it a really great choice for managing image libraries.

Adobe Bridge has some great organization functionality

Adobe Bridge has some great organization functionality

First of all, Bridge can actually display and preview nearly all major image formats, including AI and EPS files, which is a huge advantage for Windows users and over many other image browsing packages, many of which typically only work with bitmap-based images such as JPEG or PNG. In my experience, the only common icon format which Bridge cannot handle is the ICO file.

Moreover, Brdige also also provides some other interesting options that can help you improve the organization of your icon library. One great feature is the ability to assign keywords to files. As far as I can tell, you can use this almost like a tagging system. You create a series of words in the Keywords panel and then assign those keywords to different files. You can even create a sub keywords help maintain a logical structure.

Of course, on their own, keywords don’t really do you all that much good, and this leads us to the next part of Bridge that can be useful for us – filters. Filters allow you to limit the files that are displayed based on certain conditions, one of which is for specific keywords (you can also filter by other types of meta data too). So, after assigning some keywords to a bunch of different files, you can use the filter tool to retrieve only those files that have that particular keyword assigned to them.

That makes for a handy little organizational tool.

Lastly, you can also build what are called collections in bridge. A collection is kind of like a folder full of file references, and as such can actually contain files from multiple folders across your computer. This makes building an effective library really easy and flexible.

For instance, I can create a single collection called Icons to house all of my different icon files. I can then apply a variety of different filters to help narrow down my search! These filters could be on keywords or file types or even creation and modification dates. You can then use Bridge to open the icons in Illustrator, Photoshop, InDesign or any of the other applications within the Creative Suite.

I will be adapting this exact kind of icon organization myself before too long. I will also probably also use it for other design elements such as vectors and textures.

Conclusion

I know that this was somewhat of a different sort of post, and I am certainly not trying to tell you exactly how to organize your icons (or any other design elements for that matter). I do hope, however, that this third part of our Icons and the Web series has shown you the importance of organization and provided you with some ideas as to how to get your own library in order.

Now it’s your turn to talk. What kinds of techniques, methods or applications do you guys use to keep your icons and other resources well organized for easy retrieval? Please feel free to share! We’d all love to hear your thoughts and ideas!

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

Apr 19, 2010

designi1 says:

I must confess i´ve been trying all the times organize all stuffs and know the big importance of that. But for another hand sometimes i felt that i´m wasting my time because all times i need something i always found new and different stuff…

Well but i realize that the main resources that we really like we should organize them better we can and you have here great methods more then having all stuff organized it will boost your productivity… i´m confused :D I´ll try to be more organized to feel what it is :D

Apr 24, 2010

NK says:

nice collection of ICONS

Apr 18, 2012

Antonea Nabors says:

I was just recently looking into organizing my icon folders and I found the easiest way is to keep them in folders according to the set name and creating a folder called “Preview” on the root and dumping all of the preview icons in there so you can easily browse multiple sets at once.

Leave a Comment

Links

  1. zabox.net
  2. designfloat.com
  3. 200+ More Useful Fresh Articles for Designers and Developers | tripwire magazine
  4. uberVU - social comments

Top Commenters

Thanks so much to these awesome people for joining in on the discussion!

Copyright © Echo Enduring Media 2009-2014