Best Practices for Icon Design

Icons are a huge part of the branding puzzle and can be a wonderful way for a designer to make some extra money. It seems like most clients want their own, customized icons, and it’s easier to do than you might think.

But, icons can also create a terrible mess if they’re done wrong. They have a unique, focused function within a design plan. Yet, all too often I observe poorly-planned icon design that either confuses, distracts, or just plain doesn’t make sense.

These tips are based on my own experience and have served me well when I’ve had the opportunity to customize icons. Like any other specific design elements, there are some general rules that can keep you out of trouble. But don’t be afraid to break these — especially when you’re experimenting or just playing around. Just make sure you know exactly why you’re breaking these general rules so you can step back and be somewhat objective prior to sending off crazy ideas to a client.

Know the Context

Not all icons function the same way. Context is king! Sometimes you need to create icons for a website. In other instances, you are building out a series of icons used within software. Still others are system tray/dock icons — PC and/or Mac.

You must know the context for which you are designing the icons and start from there. Otherwise you’ll get lost in irrelevant details or, worse, end up designing something completely inappropriate.

Start with Standards

I always like to start off with some standards. Usually this means researching icons designed by others that I really like. So, I spend awhile pulling together my own roundup of favorite icon designs and come up with some best-in-class examples.

This gives me a baseline and also helps me when I’m working with super-small designs like icons. It’s easy for me to get frustrated and feel like my palette has been dramatically limited. When I pull up some standards that I love, I tend to get excited and feel rejuvenated.

This also helps me avoid pitfalls and break me out of my box. I have a few favorites I keep around, but I also always go and find some new ideas before getting started.

Brand Awareness

Keep the brand in mind while designing. You may have a whole series of icons that you used for the website that can be easily integrated into the software package. Don’t reinvent the wheel! Use what ya have!

But, even if you’re starting from scratch, it’s always a good idea to get the basic brand elements in front of you. I like to have the logo, color swatches, any specific typography/fonts used, brochures, and the website all in front of me. Hopefully, the client has a well-defined brand scheme that is reflected throughout these marketing materials.

If not, no worries. Just focus on the best of the brand elements and build those into your icons. Basic colors and shapes are a great way to go, simply because icons are such simple pieces. So, don’t get too worried here. Think high-level colors and shapes when integrating branding into your icon designs.

Consistent Styling

As I design icons, I like to save layer styles in Photoshop (or whatever software you like to design icons in). This allows me to quickly apply the same basic effects to all my icons to keep a similar look and feel throughout.

Shadows and reflections are two of the easiest design concepts that pop into my head that I have to consistently repeat from one icon to the next. Make it once and apply it to them all. No sense in having to go through all those steps again.

This also creates a clear pattern to your designs and keeps this pattern tight and focused. You might think it’s no big deal if your global light on one icon is 20 degrees off on another, but it does! Okay, so maybe only the most picky user will notice, but it’s just too easy to prevent this misshap from happening with layer styling these days.

Simplicity

Avoid complex designs with lots of different shapes and ideas. I’ve seen plenty of icon designs that integrate a background, multiple shapes, and a giant checkmark on top of all of these. That’s too much! Way too much!

Keep icons simple. Their function is to give the user a fast visual reference. The simpler the design, the faster the interpretation. Too simple can be bad, too, of course. But the tendency in most cases is to go too far with too many design elements.

Look at your icon and see if anything that doesn’t affect the idea can be eliminated. If so, cut it!

Icons Should be…Iconic

This kind of goes back to not reinventing the wheel – there are a lot of well-defined icons out there that already communicate their respective messages. Integrate these into your designs and save yourself time – not to mention your users’ energy.

For example, we’re all familiar with the obligatory RSS feed symbol used on just about every site these days. You already know what I’m talking about without having to see it. So when it’s time for you to make a customer RSS icon, don’t try to start from scratch. Implement that obvious symbol, add your brand’s touch, and move on.

Create Multiple Sizes

Don’t forget to examine in what sizes your icons may be displayed. You may need to design for each of the possible sizes. Some icons go up to 512 x 512 pixels.

This is where context is so important. Most icons are static — you know exactly how big they are and how they’ll display every time. But sometimes you’re going to design for an environment that is less than simple. So know how your icons will be used and prepare accordingly.

Avoid Unnecessary Symbols

A HUGE, annoying, glaring mistake I see in icon design is the addition of extra symbols. If you have to include a checkmark or a giant X over your icon, just don’t include the icon at all. Use the checkmark or X by itself. Otherwise, you clutter the design.

Ask yourself if all the symbols are necessary. If so, is the icon necessary? Often you’ll find that you don’t need both. There’s just no need! Users can figure out from the context, in most cases, what to do if you just use the appropriate symbols.

Avoid Icon-Internal Text

Another glaring issue is the use of text inside the icons. Why? Seriously?! Do you think users need that much guidance? Is the brand so important that you have to cram characters into the icon? No! It’s an icon. Keep it simple.

There is an exception to this rule. Very large icons lose their iconistic value — they look more like giant pictures. In these rare cases, you may want to include some text to help people from a strictly user experience standpoint. But, these should be the exception to the rule, not the norm for your icon designs.

Icons are an important part of making a website usable. Make sure to use best practices for your icon designs to help clients keep their clients happy and ultimately help you bring in the big bucks. I’d love to see some of the icons you’ve designed, especially outside the box designs.

Have any of your own advice? Feel free to share in the comments below!