0

My question is not about changing social icon color to get a good looking UI, that question was answered here: Changing Colour of Social Media buttons to match Colour Palette, it's rather about usability.

Is there a difference how users recognize icons in neutral colors (shades of grey, white) and color that doesn't match brand guidelines and in the one that does?

A few examples, parralax website has all social icons in violet to match their color palette. On this website they are all black. Hovering over "Social" tab on this website you get icon in light grey. Icons can be white or inside white (or any other color shape) like here:

enter image description here enter image description here

Which of the examples above is the most recognizable? Do certain types of shapes around the icon make it less recognizable? Is there any research on this topic?

  • 1
    Wow, changing the background color made the third icon look very different! ;) – maxathousand Mar 15 '17 at 19:08
3

Before anything

Before anything, you should keep in mind that there are very strict guidelines for brand usage, including:

Don’t modify Facebook brand assets in any way, such as by changing the design or color

(From Facebook Brand)

LinkedIn is quite similar:

Logos may be downloaded for use in reporting on LinkedIn's business. These logos may not be altered, combined with other marks or used in a misleading manner. Your use of these logos is subject to your compliance with these Guidelines.

IN Twitter's case, you wouldn't have any problem with shape. And arguably, with the whole icon just as you have it, since you could say it's white. For more info, check Twitter's brand guidelines, specifically the section Misuses

So, there's a legal aspect about NOT fooling around with this

However...

The only truth is reality. And reality shows that everybody and their mothers play around with social media icons at will. And as far as I know, these companies never cared very much. They could simply go to Dribble, Freepik, Pixeden, Font Awesome or whatever big graphics resource and tell them "stop what you're doing". Yet they don't. So... while the above point is worth noting, I'd say it's a bit of "as long as you don't go bananas, feel free to play a bit".

Iconography

All the above being said, you should consider this: a brand is made of its components. Between those components, you'll find brand iconography in the form of imagotypes, logotypes, isotypes and/or isologos. All these are made of a basic component: SHAPE. Everything else such as color may or may not exist, but shape is the only thing that exists in every brand type, even if it's just a logo (where logo is just words, without signs). Thus, by altering the shapes, you alter the perception of the brand. And this is why all important brands have specific guidelines, as shown above.

In your specific case, where you don't alter shape, but alter color and context, the loss of brand recognition is certainly smaller, but still exists. Which, again, takes us to the brand guidelines above (surprise!).

If you take a look to those guidelines, you'll also see how the icons should be displayed in context, which includes spacing. So, if you see the circles and the rounded corners squares, you'll see spacing is not the same. Therefore, you'll be breaking a guideline. But getting to your questions, the square with rounded corners is probably your best choice. The circles encapsulate the icons in a tighter way, leaving very little space between the icons and the backgrounds

Rounding Up...

The process of changing the icons falls into the debranding realm (and an unsolicited debranding, as we're at it), so you'll need to ask to yourself: is that social media important for you or not? If the answer is YES, then follow the guidelines. After all, they were built by top professionals and have lots of time of testing. Otherwise, if you want to make your brand stronger by debranding the social media icons, you can play a bit

This site is temporarily in read only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .