Social icons may be more noticeable in the header, but they can clutter they navigation.

Are social icons as effective in grey-scale? ie. Will users still see them in a group of links if they're not "Facebook blue" or "Pinterest red"?

  • 2
    Probably not, but I have no evidence to back that statement up.
    – ChrisF
    May 23, 2012 at 21:13
  • 2
    The color's almost always part of the branding, so I'm sure it effects it to some degree. To what degree I couldn't say.
    – Ben Brocka
    May 23, 2012 at 21:24

5 Answers 5


It depends on your target user's context and past experience. Based on my experience in making icons gray when the rest of a site/app has colour, users relate to the colour gray as being disabled or non-clickable.

A simple and interactive way to improve this is by leveraging your header area more interactively. When the user hovers over the header area/proximity have the social icons turn into the coloured versions. That way they would not look disabled and they would draw attention to the user as the interaction responds to what they are doing.


Though I technically cannot give you statistics about how successful they are,a lot of Metro UI apps which I have worked on prefer to use grayscale or white or black social icons to share content and they have shown to be fairly successful as long as the nomenclature is consistent and the icon used is one which recognized easily. However we did notice that while facebook and twitter showed no issues in being recognized (and used) icons such as Pinterest were misunderstood as they are still relatively new on the social scheme


This depends mostly on the importance of color in the social media site's logo or other button graphic. A graphic that depends mostly on shape could still be recognizable enough.

In all cases, removing color from an image reduces the amount of transmitted information from which a memory connection can be made and therefore inevitably reduces the effectiveness.

Whether this is true in your case depends pretty much on the graphics used. I would imagine this to work out for the main social networks though. Especially since you have to be a member of one (and know its logo) in order to make use of its button.

  • I'm sure they're recognizable, but will they be used as often? Imagine the Google+, Facebook and Twitter icons to the left of the first post above were grey... May 23, 2012 at 21:25

I have done a quick search, and cannot find anyone who has done academic studies on this (I am sure they exist, I just couldn't find them easily). However, as others have indicated, the colour is part of the brand, and the recognisable part of the buttons. Losing this colour would be detrimental for some users, because the immediate recognition is partly based on colour.

If it is an issue regarding the cluttering, the better option is to make them smaller compared to the other navigational items. Or position them slightly differently, to de-emphasise them.

The problem with gray-scaling them is that the people who won't pick up on them are not the social-media savvy ones, the people who would find them almost whatever they looked like, it is the less experienced ones, who are possibly the ones you need to connect with more and closer, who might be more influenced by your connection. The savvy ones might hook up, but ignore half of your messages, because they already follow 350 people. The less savvy ones might only follow a few, and so might be more open to your marketing.

And lets not forget that the reason you want people to click them is to market them, to get them to come and buy stuff off your site. "social media" sounds altruistic, but for commercial entities, it has to be - in some form - about selling more.


I am not aware of any studies on this, but as Ben mentioned above, the colour of the icon is often integral to the brand.

The first thing to consider would be how important are the social icons and social media in general to the service/site you are designing for. If social media is an integral part of your service then it would probably make sense to keep the colour, although there are other points to consider such as aesthetics.

I would hypothesise that size/colour/location are all pretty important. For instance you may still get attention of the users with greyscale icons if they are large enough or in a prominent enough location. Using small icons and hiding them in the corner and I imagine users will not give them as much attention.

I always say this but: do some tests with users (a-b tests etc). personally I wouldn't spend too long debating this (although it does depend on the type of project you are working). I would put "something" in place then see how it is received. You could consider pushing different versions of the icons to different user groups and then analyse the results to see if one set gets a statistically higher number of hits.

Your Answer

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

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