I have to design set of icons for 'clear search results', 'delete', 'close' and 'cancel' that due to specifics of the app might be sitting on the same toolbar side by side. Also the size is 16x16px which makes the task even more complicated.

So far I have a broom for the 'clear search results' which I dislike with a passion, "x" in a box for 'close', slashed circle for 'cancel' and nothing for 'delete'.

Any suggestions would be greatly appreciated.

Location and size of the icons are not up to me, I just have to make them distinguishable so it's easier for the user to select right action from a choice of similar-looking icons.

  • I would suggest this is more a question for the Graphic Design SE. graphicdesign.stackexchange.com – JonW Nov 1 '11 at 9:42
  • 1
    @JonW - Actually I think this has a good match with ux because of the potential for confusion to the user when having these four actions so close together. It's not just about pretty icons (no offence to gd :-) - it's about the meaning and clarity for the user and the relationship between these symbols. It's a tough problem. – Roger Attrill Nov 1 '11 at 10:05
  • 1
    It's a perfect example of where visual design and UX overlap quite a bit. My big concern would be placing those together. Even with perfectly designed visuals, I think there's a cognitive load trying to figure out "do I want to close this or cancel this? Or clear it?" – DA01 Nov 1 '11 at 14:36
  • What is the difference between "close" and "cancel"? And are you also saving when you close? – DisgruntledGoat Nov 25 '11 at 16:27

Unfortunately there is always this conflict between clear-delete-close-cancel so these are the worst icons to have to position next to each other whilst still being able to determine which icon means what action.


The only occurrence of red amongst the icons should be associated with the delete because this is the destructive action and should not be able to be easily confused with the other actions. A cross is best for delete and it doesn't need a box.

Because the clear is an action with a subject, try to include a cue as to what is being cleared (eg using the common magnifying glass for the search icon), this will help differentiate with the other icons

Close and Cancel need to be differentiated by the fact that the cancel might be undoing any changes made and therefore returning with no change, where as close will save any changes.

I would actually re-interpret your need for close and cancel to being 'accept with save' and 'close-without-save'

So close is like Enter on the keyboard - accepting any changes made, and we can use some symbology from the popular return/enter key on a keyboard.

Close should not indicate any acceptance. I'm slightly uncertain about using the cross as it is visually related to delete in this case, but either the cross (black) or the minus sign would suffice and with a box around it.

You have included delete as the second item, but actually because of the destructive nature of delete, I would ideally position it either:

  • at least at one end to halve the likelihood of an accidental hit when going for either clear or accept-with-save
  • preferably further separated from the other icons completely


So here's the results after taking the above considerations on board:

enter image description here

enter image description here

| improve this answer | |
  • 1
    As always - test icons in context and check your users understand them. – Roger Attrill Nov 1 '11 at 10:15
  • @ Roger Attrill - thank you so much for your detailed answer! Magnifying glass with 'x' in it was my first choice for 'clear search results' too, but it was rejected by the client, that's why i'm using broom. – zuko Nov 1 '11 at 13:54

Here's a great guide to help make your icons more clear: 9 Rules to Make Your Icons Clear and Intuitive

| improve this answer | |

If your goal is clarity, then I'm afraid that there are no icons for your situation which are going to suffice on their own.

Even a group of UX people don't have a uniform idea of what each icon means or what should represent it. So you have to think beyond simple icons. You need to include some text with the icon which makes it clear what it does.

When you're talking about a fairly abstract concept, unless there is a well defined icon for it, you need to include text. If you don't, your design may be prettier but it's not going to be a better experience for your customers.

| improve this answer | |
  • i agree with you, but there's no space on the widget's toolbar to include text to explain function of each button :-/ there will be tooltip help bubbles, but one has to hover over the icon to see it. That's why i need to come up with distinguishable icons – zuko Nov 1 '11 at 13:50
  • There's always space for clarity if it's a high enough priority. Outside of that, you aren't going to find what you want, just like I am not going to find a Ferrari for €1000 - even if that is my constraint. – JohnGB Nov 1 '11 at 14:14
  • If your contraints are that rigid - sometimes you just have to accept that you have to compromise on something else - like period of ownership - enough to get the job done perhaps! – Roger Attrill Nov 1 '11 at 15:12
  • @RogerAttrill :) – JohnGB Nov 1 '11 at 15:22
  • @JohnGB & RogerAttill - and sometimes you have to "suck it up" and put a Ferrari sticker on the bumper of your beat-up Hyundai to prevent it from falling off :P – zuko Nov 1 '11 at 15:56

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