Five Rules of Modern Icon Design

An icon is an artistic representation or symbol of something holy and divine, in form of relief, painting or mosaic, usually quite small in size. The word itself comes from Greek eikon, meaning simply “image.” [Definition source]

History of Icons (Briefly)

Remembering the world first GUI or Graphical User Interface based computer Xerox Alto (1973), it was not built for commercial use, mostly computers were distributed to research organizations. Later on Xerox Star (1981) was released with many similar design features of Alto. In Star icons represent objects rather than processes. Users are encouraged to think of them a physical objects. Icons were based on rounded rectangles. The consistency across all the icons, the detail was remarkable.

Next was the Apple's Lisa(1983), they were more detailed and smaller in resolution than Xerox Star icons. Macintosh (1984) icons were the first to bring a clear distinction between documents (paper sheets with folded corners) and applications (a human hand holding a tool against a sheet of paper). They also included several classics, such as “happy Mac” icon, the metal trashcan or the exclamation/question mark face. Windows 1.0 (1985), it was the first edition of the Microsoft Windows series, although the icons were not very good, almost ugly as compare to the elegance of Macintosh icons. The only best thing in Win 1.0 was the clock icon, a working analog clock. [image] However, this interesting idea was dropped in later version. In 1991 Macintosh System colors were introduced to the icons, they look and appear clickable in nature.

In 1995 Windows 95 was introduced, more colors to the icons. Simple version have 16 colors, but Microsoft Plus! for Windows 95, allowed the people to use 256 colors.

Introducing Modern Icon Design

With the release of the Windows 256 color icons, starts the revolution in icon design, more colors and details are introduced even it started a race among the top OS kings, like Microsoft and Apple.

Icons  are now started to designed not just for functionality, but for aesthetics as well. There are now few branches of icon design, where we can see traditional functionality defined icons mostly used as face for apps, informative versions of icons which are used to support content and the third version is a combo of both.

Rule One

Difference - Icon is always made to fit in a system, it is always part of a batch whether it is designed for a desktop or website. When start to design an icon, you always consider that each icon you create has a different identity, they look to perform a different function. We have icons that look alike and it is very hard to understand what is what. If you miss the legends, you can very easily get the icons mixed up.
Icons from the Utilities section in Mac OS X. In small sizes they seem almost same & identical, which is not good.

Rule Two

Size - The size plays a big role, as now everything has changed – the resolution and screen size increased. Icons now designed in various different sizes, varying from 16x16 to 512x512 pixels. Why having such large icons? because when we are using devices with the screen resolution above 300 dpi, it became clear that designing larger icons are now inevitable.
It is important to design each size separately, scaling them down to small can make the design look blurry. I would suggest you to read these two good articles [1] & [2] about the importance of the icon size.

Rule Three

Functionality - It is the important thing, very first experience for the user, figuring out what the function of the app, before the open it. It is quite similar concept as logos and the photographs on the product boxes.
The system preferences icon of the Mac OS X is a good example of functionality defined icon,which is adapted from the iPhone icon for Settings. It shows some gears, which resemble “how things work.” Similarly the control panel icon of windows, it shows a control panel. (although I have never seen something like that in real, but it still works.)
Lets see an example of bad functionality icon design, VLC player, we all have heard about this player and its really a good player but when we see its icon "a traffic cone"??, it doesn't make any sense for a media player icon.  The developers opted the traffic cone design because they used to collect traffic cones from streets. Surely not a good practice.

Rule Four

Details - As the icon size has grown up to so everything has changed. The icons grew larger and you can work on details for as long as you want. It’s tedious but the result is worth the effort – you end up with a work of art.
Realism is another trend pursued now a days by the icon designers, even 3d editors are now in use as sub tool for the icon designing.
Source: Train icon | Mashable icon

Rule Five

Mobile - Almost Everyone now own a touch screen device whether its an iPhone, iPad or an android phone. Touch-screen interfaces are now widely spread, stylus has been gone and now everyone seem to use fingers. Now, the designers have to design icons for these devices as well, with the desktop icons. Almost every app has now its mobile versions, which run on these popular touch devices.
Icons for the iPhone are square in shape and occupy all the space allotted to them. It was a smart approach because a square always has a larger area, so you can easily use your fingers to press an icon.
Android developers used a slightly different approach, and they have invented their own style for the icons, even they have released a guideline for the designers so their designed icon meet the requirements of the android platform.

Conclusion

Difference, Size, Functionality, Details and design for mobile or touch devices, these are the basic rules every designer should consider when designing icons. Not every designer would agree with me on these point, so let me know about your views on this article, constructive criticism is most welcome, so write whatever you feel in the comments below.

Icons used in title image are designed by Umar Irshad