29

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:

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.

3

7 Answers 7

14

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

2
  • 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. Apr 23, 2011 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. Mar 2, 2012 at 1:13
9
  • 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).

2
  • 2
    +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. Sep 21, 2014 at 14:19
  • Part of the reason for the trend may also be that they look as good even to the colourblind. Granted, a colourblind usability scheme could be worked up, but grayscale allows for an easy check on the "Does it stand out by more than colour alone?" test. Oct 28, 2021 at 23:12
6

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

chrome

Mozilla Firefox 3

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

ie9

Firefox 4

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.

7
  • 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?
    – GeorgeU
    Apr 21, 2011 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.
    – JoJo
    Apr 21, 2011 at 18:27
  • 3
    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.
    – JoJo
    Apr 21, 2011 at 18:46
  • 4
    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.
    – JoJo
    Apr 21, 2011 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. May 7, 2013 at 3:52
5

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.

1
  • +1 for recycling (and reuse) which is very important in design. Apr 22, 2011 at 7:07
3

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.

1
  • Well said! I Agree 100%! Apr 29, 2011 at 18:01
1

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.

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.