What is the best use of icons in the header? In my application I am using a number of icons for simple features such as "find friends". "ask a question" etc. This is mainly because I need to keep the header uncluttered and of minimal width to allow a straightforward use of the bootstrap collapse functionality (I can alter the collapse point default but then I run into other problems not explained here). I have added some popovers to them but is this enough. From a UX perspective one might argue that the user has to hover over them before he sees this. I also have a "tour" button which creates a simple tour of these buttons. I am debating whether to have this or not.

What is your opinion on replacing text with icons.....

enter image description here

enter image description here

2 Answers 2


I've noticed, so far in my years of Online browsing that many websites start with Text on the Header.

Once the website starts to become popular, the Text is replaced with an Icon to consume less estate but yet provide enough sensibility to know what the icon stands for.

This makes perfect sense, since for a new website, if you have a few actions on the Header which are unique to your website, using an icon might be confusing to the user as to what does it do, unless it has a tooltip. Even with a tooltip, most users won't find it familiar and might not click on it.

When you use text as an action instead of an icon to kick off the website for a few months, users become aware of it's place. Hence, then later when you do a subtle change of the text to an icon which is relatable to the text, they'll easily learn and comprehend that what the icon does if it's placed as the text was in the same order.

So, depending on the universal acceptability of the icon relevant to the action on your header and the familiarity with the website's UI you should choose to choose text or icon.


I reccommend using icons and text together.

The graphical representations are attractive since they are very easy to recognize by the human brain. They do have a disatvantage since perception is biased by the mental model of the users and their previous experiences and it is hard to find a generic graphical representation understandable by all users.

This is where the text helps, in case you have a doubt, the label is there to clarify it.

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.