Do’s and Don’ts of Effective Icon Design

Designing an icon can be tricky as it is very important to balance good design and color with clarity. An icon, no matter how artistically designed will lose its value if it does not communicate to the viewer.

Effective icon designs

1. Create a theme: Although it is important for icons to stand out from each other, it is important to include a common design element. These elements can be based on color, perspective, size or light and shade.

2. Keep it simple: The function of an icon is clearest when the least number of elements are used in the design. Adding too many elements or trying to make the icon look realistic might make it too complicated to understand thereby defeating the purpose.

3. Consistency in shadows, light and reflection: Ensure that all the icons in the group are consistent with each other. If the light is acting from a specific direction, use the same direction for all other icons and add shadows and reflections accordingly. Use a simple perspective and ensure that all icons are drawn from the same angle.

Mistakes to avoid

1. Ambiguous and disarrayed designs: The efforts to create a set of icons that follow a theme may go waste if the icons look too similar. This will confuse the viewer and won’t serve the purpose. Similarly, if icons are too different from each other, the output will not be aesthetically pleasing and can be off-putting.

2. Cluttered icons: Adding too many elements or unnecessary design in the icon can confuse and irritate the viewer. The icon should be equally clear when resized. As icons are usually very small in size, it is important to keep it clean and easily understandable.

3. Unclear metaphors: While taking the creative approach to icon designing could get you great results; they may not always be as effective. Ensure that the designs you choose for icons are universally recognizable.

Want to learn more on how to design Icons from scratch, check out these 100+ amazing tutorials!

Create a Magnifying Glass Icon in Photoshop CS4

In this tutorial, we'll combine simple vector shapes, layer styles and generous amounts of shininess to create the perfect magnifying glass for all your search icon needs. Let's get started! - Author: Andrea Austoni

Design a Vintage Radio Icon in Photoshop

In this Photoshop Tutorial, you’ll learn how to design an old vintage radio using simple shapes, gradients, patterns and textures. - By Jurgis Narvils

How to Create an Alarm Clock Icon

With simple shapes and gradients, this easy tutorial will show you how to create an alarm clock icon. We'll be using Illustrator CS4 for this tutorial, but those of you with older version should be able to follow along as well. - Author: Rype

How to Create A Swanky Coffee Table Icon in Photoshop

How to Design a Custom Newspaper Icon – Vector Plus Tutorial

New Quicktime Icon in Photoshop

Apple is about to release their new version of Mac OS X, code-named as Snow Leopard. With this new release there will be a totally new version of Quicktime. One thing that is really cool is the new icon for the app. Because of that I decided to play a bit with Photoshop to reproduce the effect. - By Fabio Sasso

Draw a Speaker Icon in Photoshop Part 1

This tutorial is contributed by Sohan Negi and will show you in every details on how we can create a set of speakers icon from scratch in Photoshop. As this is the longest tutorial ever, it was split into Part 1 and Part 2. - By Sohan Negi

Design a Realistic 3D Baseball Cap in Photoshop

In this Photoshop tutorial, I will show you how to create a realistic 3D Baseball cap in Adobe Photoshop using the Pen tool, brushes and some nifty tricks. - By Cucu Tudor Ionel

Design a Stylish Mail Icon in Photoshop

I have worked on this new tutorial with Cucu Tudor. In this tutorial you will learn how to create a glossy mail icon that can be used for your apps or websites. - By Constantin Potorac

How to Create a Golden, Vector Compass in Illustrator

Create an Adobe Box Icon in Photoshop

Create an Adobe box Icon in Photoshop, to fill your dock with new icons. Learn techniques on brushes, blur, layer mask and blend modes. - Via drawingclouds.com

Create a Fun Icon of Frozen People on Ice – Part II

Icon Design Tutorial – Designing a New Icon In Illustrator

Icon Design Tutorial – Designing a New Icon In Illustrator - Via designreviver.com

Create a Dock Icon Folder in Photoshop

Create a dock icon folder in photoshop, customize it and fill your dock with all your favorite folders. - Via drawingclouds.com

Glossy RSS icon

In this tutorial we are going to create a colorful RSS icon for your blog. - By ART-D

Create a Stylized GPS Icon

Location based software and peripherals are very popular these days. So, In this beginner/intermediate Illustrator tutorial, I will show you how to create a stylized GPS icon using simple shapes and gradients. Using these basic techniques, you can easily create other icons, logos, and illustrations. - Via vectips.com

Design a Vector Audio Speaker Icon In Illustrator

Create an iMac – Design Your Desk – Part 2

In part two of our seven part series called “Design your desk”, we’re going to be looking at the creation of your computer’s horsepower – The Tower – or in this case, an iMac. As usual, this tutorial will cover everything from drawing the basic shape, to shading and shadowing. - Via psvibes.com

How to Create a Van Icon in Photoshop

How to Create a Yellow Submarine Icon with Gradient Meshes – Vector Plus Tutorial

How to Create a Gearbox Settings Icon Using Simple Shapes

How to Create a Transparent Battery Icon

Craft a Delicious Chinese Food Icon

Draw a Classy 3D Poker Chip in Photoshop

In this tutorial we are going to illustrate a 3D Poker Chip in Adobe Photoshop starting from scratch. New Photoshop users should consider running through our Pen Tool guide first! - By Federico Sportelli

Create a Cute Panda Bear Face Icon

Lately, I have been working on some children illustrations, creating some über cute creatures. In the following easy tutorial, I’ll show you how to create a cute panda bear face icon all from ellipses (well, actually there is one rectangle for the background). - Via vectips.com

paint brush logo icon in Photoshop

Today I will show you how to create a Photoshop design paint brush logo icon in photoshop. - Via tutorialagent.com

panic button logo icon in photoshop

Today I am telling you about How to Create Photoshop design panic button logo icon in photoshop. - By gnews

Glossy Black Button Icons

Today's Etc Tutorial is a glossy black button icon. We will also be creating the accompanying spot light background effect. The check mark is a standard Photoshop shape. - By Tutorials Etc

Making a Photoshop Shield

How to Illustrate a Brain Icon for OSX and Vista

Handy Web 2.0 Icons In Photoshop

Photoshop Tutorial: Design the Mac OS X Leopard Folder

Learn how to create the popular Mac OS X Leopard Folder icon using Photoshop in just Ten Easy steps. Comes with a PSD, useful brushes and custom shapes! - By Shashank Tejura

How to Create a Moka Express Icon

Cubite graphics icon

Today I will show you how to create a Cubite graphics design logo icon Photoshop in Photoshop. - By tutorialagent.com

Create a High-Gloss Graduation Hat Icon Design

Photoshop is great to use for creating quality icon designs. In this tutorial, I will teach you how to make a professional, shiny, clean graduation hat icon. The techniques in this tutorial will help you graduate to the next level in icon design. - Author: Constantin Potorac

How to Create a Magic Wand Icon

MP3 player icon

Today I will show you how to create a Photoshop design sell MP3 digital player logo icon in Photoshop. - Via tutorialagent.com

Creating A Vector Style MacBook From Scratch

This tutorial is quite a long one, so I would go get a drink now if I were you, OK we are going to make a MacBook Pro in Photoshop using shapes and different blending options, combining these two simple things we get a realistic vector outcome which can be used in many different situations, so…let’s begin - By Steve Tolley

Sony playstation Icon

Today I will show you how to create a Photoshop design sony playstation logo icon in photoshop. - Via tutorialagent.com

Photoshop Gold Ipod Shuffle Icon

In this tutorial,I am telling you about How to Creae Photoshop Gold Ipod Shuffle Icon. - Via tutorialtown.com

Make a 3D Vector Film Roll, Drawn In Perspective

Compact Disc Icon

The icon were going to be creating is all done using shape layers which means you can resize up and down without loss of quality. Were going to start off with a fairly big canvas so create a new document 600 x 600 pixels, fill your background with any color, ive opted for a nice blue gradient background. - Author: Richard Carpenter

Simple Coffee Cup Icon Photoshop Tutorial

In this tutorial we’ll be going though creating a semi-photo realistic coffee cup, with some nice frothy coffee. - By Alex Rogahn

Halloween Pumpkin Icon

This tutorial will show you how to draw a pumpkin, with a scary cut out face for Halloween. - By ART-D

Photoshop Video Game Mario Icon

Here I will teach you about How to Create Photoshop Video Game Mario Icon - Via tutorialqueen.com

Carbon Style Icon

Right lets get started create a new document im using 600×200 but you can use what ever size you want depending on how many icons you want. Im also using a nice bright background so i can see everything abit more clearly. Select the rounded rectangle tool, change all the settings in the top tool bar to reflect the image below. - Author: Richard Carpenter

Design Float Circle Icon (AI Tutorial)

Finding the right icons isn’t always easy and in this case i had the perfect socialbookmarking icon set by fasticon, except one problem, it was missing a Designer float icon! so i decide to create one my self. - Via qbrushes.com

iTune Icon

The challange of this tutorial is to use various Blending modes and blending techniques to replicate the iTune icon. This tutorial is a good exercise to master your Blend techniques. - Via ndesign-studio.com

Sleek Icon Design

Today were going to be creating a colorful image icon from scratch, the icon features a colorful design in a shiny metal like border the icon also used a bokeh effect. - About The Author: Richard Carpenter

Design a 3D Box Icon in Photoshop

In this tutorial I’ll explain step by step how to create a sleek Box Icon in Adobe Photoshop for use in apps or websites. I would like to thank Luca Vlad(Wlady) for collaborating with me in creating this tutorial! - Cucu Tudor Ionel

How to Create a Super Shiny Pencil Icon

The Pencil is one of the visual metaphors most used to express creativity. In this tutorial, I'll show you how to draw a pencil icon. We'll have a look at gradients, selection tools, and basic transform operations. Let's have some fun with this. - Author: Eren Goksel

Custom Hard Drive Icon

In this tutorial il show you how to create a custom hard drive icon in various colors. - Author: Richard Carpenter

Create a Vector Lock Icon Design

Photoshop Pedometer Icon

3D Mp3 Player

3D Mp3 Player - Author: Richard Carpente

Photoshop Film Clapper Logo Icon

Today I will teach you about How to Create Photoshop Film Clapper Logo Icon. - Via tutorialqueen.com

Vista Error Icon

In this Photoshop tutorial I'll show you how to create Windows Vista icons using a few basic layers, creative layer styles and some web 2.0 gradients. - Via pshero.com