Guidelines For Creating Your Own Icon Set

Iconography is an integral part of any UI design project these days. Icons have the ability to communicate ideas, functions and meanings in a common visual language. Let’s examine the amount of work that goes into creating an icon set, as well as the logical phases to follow when doing so.

For the purpose of this article we’ll work with an icon set I recently designed called Uicons.

To download the icon set referenced in this article visit www.uicons.co.

Step 1: Research

The web design community loves great resources. Open source or not, they make our lives as designers so much easier. Before embarking on the creation of an icon set of your own, it’s a good idea to see if there’s one that already exists which will suit your needs.

So step one is to check existing icon sets; you could save yourself time and energy by not recreating what is already out there.

Step 2: Placement

Placement is about the point of difference between your proposed icon set and one of a thousand existing icon sets already out there. This really follows on from our research phase; without knowing what is already available, how do you know there is a demand or need for it?

The choice of icons styles is vast and you will need to decide what style your icons are going to be. Whether they will be mono-tone, full color, muti-color, three dimensional, cartoon, realistic, silhouettes, hand drawn, or pixel, pick a style and stick with it.

Before I created Uicons I found a need/want for multi-layered vector icons that were pixel perfect. I wanted an icon set that had more depth and detail than most of the existing mono icon sets offered, without having to use full color icons.

So once you have found a point of difference and a chosen a style then it’s time to move onto the planning phase.

Step 3: Planning

Planning is simply about deciding what icons you want to include in your set. You will need to consider to whom your icon set will appeal and then create a list (best done as a spreadsheet) based on those parameters.

A good tip is to split your list into sub-categories like social media, file types, transport .etc. As well as keeping things ordered you will find this useful during the design phase as checking off the list as you go will make completing your list of icons less daunting.

The planning stage is also the perfect time to decide in which size, or sizes, you will offer your icons. Common dimensions are 16, 32 and 48 pixels, however we are beginning to see more and more icon sets delivered in scalable formats like .CSH (Photoshop shape file) and font formats. More on formats later.

During the planning phase it is good to reflect on the previous research you did in phase one. There are hundreds of glyphs and icons that should be considered for a complete set – you won’t be able to remember them all without some reference material.

Be hard on yourself during the planning phase. Don’t be afraid to say no to an idea or to cull the list – it can blow out ridiculously fast. Creating quality icons is time consuming and creating a set of 5000 (for example) will not only take forever, it is difficult for the end user to manage.

During the 4 months it took to create Uicons, I constantly found myself culling and adding to the list right up until the release. Even now, I still find myself thinking of which icons to include in the next release.

Step 4: Design

You should now have your list populated with ideas for your kick ass icons. Now you’re ready to get started on designing.

During phases 2 and 3 you decided on your icon style. Your specific style will impact what application or method you use to make your icons.

In the case of Uicons, I was creating scalable icons (vectors), that users could resize without loss of quality. Most designers use Illustrator or other vector graphics applications, however, a vector program may make your life difficult if you are creating hand drawn pixel icons. Choose the right app for the job.

Now when I say ‘inspiration’, I don’t mean ‘plagiarism’. Make it your own.

Icons are basic shapes arranged to make something recognizable. It can be difficult to imagine all your icons and visualize them from scratch. Luckily, you have the research you did in phase 1 and are in possession of a list of reference points for visual inspiration.

It is good to play around with alternative design ideas for your icons. There are multiple ways to represent a store, to represent tools, to represent anything. Be creative. As well as offering a standard presentation of your icon’s subject, try to offer a new perspective. If every icon designer delivered the same ideas in the same way, the UI world would be pretty boring.

Just because you’ve designed something doesn’t mean it has to make the final cut. Be selective about what you end up releasing to the public. In the case of Uicons, about 10% of the icons were left on the cutting room floor for one reason or another.

The design phase is obviously the most time consuming phase of the whole project, so it’s important to have stamina, staying power and consistency.

Step 5: Continuity

Not really a dedicated phase but an over-riding approach to your icon set. At all points during the design process you should be aware of keeping your icon set consistent in style and appearance. If you’re not too worried about consistency during the process then continuity really will become a dedicated phase as you revise all your icons styling at the end.

Poor attention to consistency can lead to uneven weights, wrong sizes, wrong perspectives or just wrong altogether. After every icon, take a step back and see how it fits with those you’ve already created – it can be easy to pick the odd one out.

Step 6: Delivery

You may have chosen to deliver your icon set in a vector format like .EPS, .AI or .SVG in which case you’ve cut a chunk of work out of the process. You can be even more clever and choose to release your icons as a font file, or as a .CSH file. Either of these options will make an experienced designer like your icon set even more. Going down this road requires a little more effort as you will have to convert your Illustrator icons to another format, but the extra work yields massive advantages.

Because of my point of difference designing Uicons, I had a bit more work ahead of me at this stage. My desire was to create multi-layered vector icons that were pixel perfect. I could have done the multi-layered thing in Illustrator and left them like that for people to copy and paste into Photoshop, but I wanted pixel perfect vectors in a raster program.

Photoshop is awesome. That is, until you start to create icons. For many good reasons Photoshop allows variances on pixel width. You can have half a pixel or even two-thirds if you want. Anti-aliasing as this is called, is great for fonts and bezier curves but can frustrate when it comes to creating pixel perfect icons.

Uicons required importing multiple vector shapes independently from Illustrator into Photoshop, aligning, resizing and styling them, and then optimizing them for pixel perfection by nudging paths increment by increment to end up with clean edges.

Step 7: Distribution

Congratulations on making it this far! It is no small task creating your own icon set. Now that all the hard work is done you just need to release your icons to the public. By this point you have decided whether you are offering this as a free icon set to the design community or if you want some small reimbursement for the hundreds of hours you have spent creating your killer icon set.

Either way, you need a stage for people to preview and download from. The free option is easiest as you can literally send them to a bunch of graphic resource sites and blogs to publish, sit back and wait for the kudos.

However, if you’re wanting to sell your killer icon set, you have more work ahead of you. The easiest way to sell them is to host them one of several design resource sites like GraphicRiver. The download and payment is taken care of for you and you have the advantage of their existing site traffic.

If you’re more proactive, another option is to create your own website to display and download your modestly priced icons. If this is the case, there are great options to help you take care of the download and payment side of things.

Digital delivery services like Fetch and Quixly make it super easy to sell your icon set by taking care of the order, download and payment side of things. You only need to design and build a cool site to display your work. All the heavy tech stuff is taken care of.

Conclusion

Iconography like any visual language needs to be clear and concise. Whatever you’re trying to represent with icons keep it simple and clear and your chances of universal understanding will be greater.