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.

7 Answers
7

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).

Exactly what I was going to say. Google Chrome is a perfect example in that it was designed to get out of the way. The top bar, buttons, icons are all monochrome and condensed nicely. So the Chrome UI doesn't steal too much attention from the web page you're trying to look at. And I've noticed that Microsoft has a similar philosophy with IE9.
–
Steve WorthamApr 23 '11 at 0:28

The part that makes me furious (given Microsoft's latest announcement blogs.msdn.com/b/visualstudio/archive/2012/02/23/…) is that this only works for certain types of user interfaces, particularly those that don't have a hundred buttons, tree views and panels all over the interface. When will UI designers start to realise this is just a very specific design metaphor and not some cool fad? Coloured icons work when there are many icons to be seen.
–
Nick BedfordMar 2 '12 at 1:13

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).

+1 for the pre-attentiveness. Forgot about that one.
–
Bryan MarbleApr 25 '11 at 21:00

+1 for bad trend. I think monochrome icons (and "flat design" in general) are mostly a product of laziness and I'm actually having difficulty discerning between icons like these on a daily basis.
–
Matti VirkkunenSep 21 '14 at 14:19

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.

Trend wise I believe Apple did it before Chrome. Google simply got it from safari. My question is "is this just a trend, or there some theory/research behind it?
–
GeorgeUApr 21 '11 at 18:22

No, Safari's market share (5%) is almost as low as Opera (2%). By definition, a trend is something popular. Safari is not popular, so it did not start the trend.
–
JoJoApr 21 '11 at 18:27

2

Safari had grayscale buttons since version 1. Mozilla and Microsoft still continued to use colored buttons for years because they didn't give a damn about Safari. Often people reason "If it's not popular, it's not good". Safari was not popular, so they're not going to copy it. Then came Google Chrome, which shook up the game. It's penetration rate was incredible. Since it's becoming so popular, Mozilla and Microsoft copied it. There's a reason why there was such drastic changes were made to FF4 and IE9 after C came out and not before. I'm just connecting the dots.
–
JoJoApr 21 '11 at 18:46

3

I highly doubt Apple used grayscale for Safari for usability reasons. The usability sucks on Safari with their color scheme and contrast. I have to squint to read the text on my tabs. It's more likely that Apple used grayscale for branding. All their products follow their black and white brand colors.
–
JoJoApr 21 '11 at 19:22

1

Apple has been on the forefront of industrial design - essentially setting the trends in the market. Whether or not this was with an eye towards usability (not likely) or aesthetics (more likely) is a better question.
–
David ClarkeMay 7 '13 at 3:52

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.

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.