What is the reasoning behind grayscale icons?

Question

Quite a few web applications have started utilizing gray(black) scale icons, for example Github,new Google Analytics, etc. Even applications like Firefox 4, Chrome, IE9, iTunes, Mac OS, have dropped colorful icons.

What is the reasoning behind the move from the colorful icons to grayscale/monochrome icons?

Examples:

• Google Analytics Settings Icon
• Github (look at the icons buttons on the top right)
• iTunes 10 made a switch to monochrome icons

Update: It seems Apple first introduced it in Aqua under Designing Icons for Rectangular-Style Toolbar Controls:

Icons that look good in rectangular-style toolbar controls are streamlined, black images that convey meaning through outline and contour, not internal detail. Because your icons should echo the appearance of the existing Mac OS X images inside rectangular-style toolbar controls, use the system-provided template images as a guide. As you design an icon for a rectangular-style toolbar control, keep the following points in mind:

• Make the outline sharp and clear
• Use a straight-on perspective
• Use full black and a few shades of gray to suggest dimensionality
• Use anti-aliasing
• Make sure the image is visually centered in the control (note that visually centered might not be the same as mathematically centered)

Icons for regular-size rectangular-style toolbar controls should measure no more than 19 x 19 pixels.

Answer 1

I believe this trend came together with the idea of separation of content and presentation. Icons are part of the chrome/ui and should not be too conspicuous in order not to compete with the content itself.

Another reason may be that it's easier to attract attention to an element when it is the only one with a colourful icon, and everything else is greyscale. For example, a green log in padlock icon in combination with greyscale menu icons. Making something pop-out in a group of colourful elements takes much more skill and time as you have to think about much more than just colour (which no longer plays the primary role in attracting the user's attention).

Answer 2

• They often look good, regardless of the layout, so you can keep them if the layout changes.
• You can combine icons from different sources (The Noun Project, symbol fonts, existing icons used on platforms like the iPhone, etc.), since they mostly look similar.
• It's easy to do your own.

Personally, I think it's generally a bad trend. Our brains process color preattentively (before we even consciously see it); we're really good at tasks like "find the red icon in a list of colored icons." We're not so good at a task like "find the icon that looks like a little truck in a list of black icons." Making all icons the same color makes your product harder to use.

There are exceptions, of course. You don't want garish colors in an app like Photoshop, since they can influence how you see the image you're trying to work on. They're also not necessary when people identify icons mainly based on their position (the back button is always on the very left in a browser's button bar, for example).

Answer 3

I believe this trend was spurred by the initial release of Google Chrome. The name "Chrome" is ironic because Google's goal was to use less chrome (anything but content) than all other browsers.

• Its tab would act as the window's title
• Its menu bar is gone
• It combines the address bar with search

Google Chrome

Mozilla Firefox 3

Notice how Google Chrome uses much less chrome than Firefox? Google even makes this a key point:

Simplicity

Chrome's browser window is streamlined, clean and simple.

Chrome also includes features that are designed for efficiency and ease of use. For example, you can search and navigate from the same box, and arrange tabs however you wish — quickly and easily.

Google Chrome wanted the browsing experience to focus on the website content, not to be distracted by the chrome. It is obvious that bright colorful buttons in the chrome would distract from the website content. As a result, Google Chrome used grayscale buttons from the get-go. Other browsers are now playing catch-up. We can clearly see that Firefox 4 and IE9 borrowed from Google's design principle of less (color / stuff) is more.

IE9

Firefox 4

Be careful not to apply this design principle to other areas of UI design. Color works well in unfamiliar interfaces to draw attention to buttons that you want users to click. Since the concept of web browsing is so common, and buttons are more-or-less in the same position on all web browsers, there was no need for the web browser designers to dumb down the interface by adding color.

Answer 4

My hypothesis: it takes less time to create a good black-and-white icon than a color icon that works well with the surrounding theme. You can more easily recycle an existing black-and-white icon.

Answer 5

My hunch (or perhaps a justification) is akin to chart junk. Web sites are turning into web applications with a lot of contextual icons scattered throughout the UI. As to not compete with the actual content/data, using a monotone set of icons can help prevent them from sticking out like zits on the page.

Answer 6

If they're being used for a purpose, the answer is simple: If you're giving attention to everything on the page, nothing gets the users attention.

Answer 7

I like how Windows 7 adopted grayscale colors for system icons on the taskbar. They do not attract your attention to them. When there's a situation that needs your attention, the icons have a yellow or red overlay depending on how serious the issue is.

The same can be said about the toolbar in Windows Explorer windows and details pane: they attract much less attention implemented in gray colors as opposed to Vista where these areas were much more colorful. Also in IE 4/5 era, toolbar icons were usually gray, and on mouse hover they were displayed in color.

So using grayscale icons lets users concentrate on the content they work with rather than colorful icons of the UI.