32

I'm redesigning the products admin panel for a marketplace web-app where the user can add/edit/delete products. There isn't to much space available so I need to use icons for edit and delete. What do you think is the most intuitive icon to use as a delete action: a cross(x), minus, a trash bin?

Thanks!

| improve this question | |
  • 8
    To me "minus" would indicate remove rather than delete. – ChrisF Dec 9 '10 at 8:59
  • 1
    @ChrisF: please define the difference between remove and delete. For users these words usually are synonyms. – Mike L. Sep 15 '11 at 14:43
  • 3
    @Mike L. To me, remove means take the item off a list (for example) but it still exists whereas delete means destroy the object completely. So in the first instance the item still exists and can be added back to the list (or exists on other lists). In the second instance the item no longer exists at all. – ChrisF Sep 15 '11 at 14:46

12 Answers 12

Active Oldest Votes
38

I would go with a cross icon, e.g.:

alt text

but display a red version of it when it's hovered.

Try this: go to Google Images search and type "delete icon". You will see mostly "x" icons.

Update: I gotta agree with @peterchen; a hand drawn" "x" without the extra bounding box/circle would reduce chances of confusion with a Close icon. The following shows an example of standard and hovered icons:

alt text

| improve this answer | |
  • 5
    This also has the meaning of "close" so it might not be clear. – ChrisF Dec 9 '10 at 8:58
  • You're correct that "x" may not be as clear as the trash icon, but it has been used for 20+ years as the clipboard "cut" symbol (as in cut/copy/paste). The jump from cut to delete is easy. In addition, Stefan described deleting products. This, to me, implies products listed in rows with the icon having to be small. I find the trash icon difficult to represent esthetically when small. The Google Images search results for "delete icon" tells me that the "x" is widely used to represent "delete". – Hisham Dec 9 '10 at 20:40
  • @ChrisF Another thing... On the comment that you posted, move your mouse pointer to have it hover over the blue "edit" link. Stack Exchange will then display an icon for "delete". See which one it is. :-) – Hisham Dec 9 '10 at 20:44
  • @Hisham - I am aware that "x" is used as delete - I was merely pointing out it's alternate usage which may confuse the issue. However, it would depend on the context and the application. – ChrisF Dec 9 '10 at 20:46
  • 3
    To avoid the confusion, I'd not use an extra bounding box/circle, and make it look "hand drawn" (i.e. uneven). ---- +1 for asking google to throw a vote. They even suggest an alternative: trash icon. – peterchen Dec 10 '10 at 7:15
30

I'd say a trash can icon would be the first pick. A cross or a minus symbol would be a close second.

| improve this answer | |
  • True. A trash can means that you dispose it forever. However, a trash can should only be used for actions that cannot be undone. If an action can be undone, however, either use a cross: X or a circle with a strike (a mirrored Ø). – rightfold Jan 3 '11 at 18:30
  • 13
    I don't know about that. If you look at most operating systems they use a trash metaphor specifically because something can be later retrieved out of the trash like in real life. – slwen Jan 8 '11 at 11:05
  • 2
    I thought the trash cans were used to ejects CDs – Peter Olson Sep 15 '11 at 15:50
  • 3
    No, trash cans were used to eject Oscars. – Jake Berger Sep 15 '11 at 18:13
6

I will choose trash bin,but a cross is ok.it depend on the other icons near by delete button.

| improve this answer | |
4

I would go with cross icon in red color for delete. This red cross icon is not EXACT X. Second option is thrash icon for delete.

| improve this answer | |
4

A hand-drawn X seems most intuitive, with that I agree with the other answers - especially if its color and shape sticks out a bit from other icons nearby.

alt text

To add some options, I sometimes go with a simple text link "Delete" or "Remove" if there's not a lot of other actions to take - even in longer lists, just to be extra clear.

  A story about us         Eric Doe           Edit | Delete
  Once upon a tea leaf     Anna Dark          Edit | Delete

Also for "clearing" stuff (not necessary deleting stuff) I like this "gone in a puff of smoke" icon (works better together with other icons than alone on its own).

alt text

| improve this answer | |
2

I'd suggest the red X or the trash bin as well.

Minus is more like "close" or "remove"; same for X in a circle.

| improve this answer | |
2

I agree with an X, but it is very possible that hand-drawn x may not fit with the branding or design of the site. A hand drawn X - feels a bit outdated in the context of a lot of the sites I see today. IMO almost any X will communicate the delete action, I think the X is a commonly enough used paradigm, that people understand it in a variety of styles.

| improve this answer | |
2

I rather prefer a red 'x' icon indicating the action, like Dropbox does.

enter image description here

Or the iOS approach, just a red button with the text "Delete".

enter image description here

| improve this answer | |
1

As with those immediately before, my personal recognition would be trash bin. In particular, because that's more universal than "x" icons when you begin looking at the UI components of desktop operating systems, too.

I think you also have to think about 'delete' vs. 'cancel' and whether you need different icons to indicate these two very different interactions.

| improve this answer | |
1

The red X is usually my first inclination. I agree that a trash can is nice, though I find that to render it properly requires quite a bit of detail and highly detailed icons tend to become harder to decipher at first glance. A red X is very obvious.

The only issue I have with the X is that it competes with the standard close icon, which also happens to be an X.

| improve this answer | |
  • Trash can would be nice but I think that with a trash can the user thinks that he can recover from the trash the file. – Felix G Sep 15 '11 at 14:48
1

if we look from different angle, both have different prespective

Trash Bin - once user trigger, information will go to Trash Bin which can be recovered later incase of back up need. here we can have Open Trash for delete | Closed Trash for deleted files

Cross - this is something which normally user relate with Close or Remove. There is no way to recover it, once you trigger information has gone.

now based on our need we can take right call

| improve this answer | |
0

I would suggest going for simple text links - clean, clear, and concise understanding without users going through an extended dialogue.

Users should understand the system an apply existing metal models, one should understand icon functionality without thinking twice + avoid confusion at all costs.

I would suggest not to use 'X' icon for delete, this is very confusing and will break user expectations. The universal call to action for 'X' is close and should not be used for another function.

Trash can icon is a great choice however if you are compromising design, detail and size - then avoid using and stick with Simple text : )

| improve this answer | |

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