From an icon's appearance, and from its position relative to other icons in the toolbar, I want to make it clear that its action is risky.

I added a vertical separator which visually separates the icon from the other icons (which are for low-impact, reversible actions). Each icon has a tooltip. When clicked, a modal confirmation dialog box appears, so the user still has time to cancel the decision. But I want to give a more "please be sure before you click" flavor to the icon, or to make it stand out from the others.

What can I do?


  • 1
    A bin icon already strongly implies risk. Most importantly, make sure you prompt for confirmation (with a description of what action the user is about to trigger and its consequences), or have an undo feature.
    – minseong
    Commented Nov 28, 2020 at 23:38
  • 1
    Red, red, red!!!! Although our lizard brain also fears black & yellow (or, at least, regards those colo(u)rs as a ****severe*** warning)
    – Mawg
    Commented Nov 29, 2020 at 19:05
  • Also, "are you sure that you are certain that you really want to...?"
    – Mawg
    Commented Nov 29, 2020 at 19:06
  • @theonlygusti Your comment sounds like the start of an answer. Would you like to post it as an answer instead so the community can vote on its merits? Commented Nov 30, 2020 at 14:27
  • 1
    @MawgsaysreinstateMonica Your comments sound like the start of an answer. Would you like to post it as an answer instead so the community can vote on its merits? Commented Nov 30, 2020 at 14:29

5 Answers 5


Your goal is that users do not accidentally delete items.

You have three general ways to achieve this:

1. Using design standards

The trash can icon and the color red are both standard for Delete-type actions. Your way of seperating the icon works, too. Another way would be to visually group all (if there are more) destructive actions together, as on the GitHub project options page:

GitHub Danger Zone, used for destructive actions, showing a red border around all destructive actions. All buttons have a red text color.

2. Friction

Friction is everything that hinders a user from accomplishing his goals. Therefore, it is best to reduce friction wherever possible – with the exception of destructive actions, of course.

Confirmation dialogs

Operating systems often use a modal confirmation dialog box for this, where you have to confirm the actions once more. Browsers use this when you're closing multiple tabs at once.

Confirmation Name-Input dialog

This is often used on websites when deleting whole projects, as it is a lot of friction. The user faces a confirmation dialog with much text and is forced to type the name of the project he wants to delete. Probably not the way to go here, as I don't see how this gracefully handles something like a multiselect-multidelete, which your software might choose to add.

GitHub project deletion box

Hiding destructive actions under a dropdown

Please see @harshikerfuffle's answer.

3. Reversibility

Have you ever cared about deleting an email? Has any program or website ever stopped you? Probably not. The reason is simple: These emails aren't really deleted, they are simply tagged with archive and hidden from most other views, with the notable exception of search (sometimes.) You can design your system to only keep archived items for a given amount of time and/or to offer a simple Undo action, eg in a snackbar:

Gmail Undo snackbar

  • 4
    Most of this is good, but undo is not. Offering undo only helps if the opportunity window for undo is accessible (not disappearing after a short time interval or after navigating away), discoverable (not buried somewhere the user might not be able to find it), and discovered (by loss of data being noticable). It doesn't help if the data being deleted is rarely used and you only realize you deleted it a year later when the opportunity to undo is long gone. Commented Nov 29, 2020 at 5:43
  • 2
    @R..GitHubSTOPHELPINGICE These are all implementation details, not arguments against the idea of "undo" to begin with. You can help to make the undo requirement discovered by carefully designing the software's response to the "delete" command. You can also do what sites like SE and Wikipedia seem to do, that is, retain "deleted" data forever, so it doesn't matter if the problem is discovered a long time later. If it's the sort of data you're not allowed to retain forever, introduce more friction - possibly including a requirement for multiple users to confirm the deletion. Commented Nov 29, 2020 at 14:40
  • 1
    Maybe I'm getting too tired right now...but it looks like this post, while excellent in its own right, doesn't actually answer the question? Commented Nov 29, 2020 at 14:45
  • @BrianDrake: They are not "implementation details". An implementation detail is whether you use a file or a table in an SQL db to store the info needed for undo. The things I discusses are exactly what UX means. Commented Nov 29, 2020 at 20:19
  • @BrianDrake It answers the question behind the question.
    – Sean
    Commented Nov 30, 2020 at 15:55

I would start by giving it another color. Red is usually associated with danger (example from Bootstrap).

More important is using a confirmation popup, which you already seem to do. Or use a 'soft deletion', which the user can undo later.

  • 6
    + add a red exclamation mark in the confirmation pop up.
    – PhillipW
    Commented Nov 28, 2020 at 9:20
  • 4
    Note that, in general, relying on the color red may reduce accessibility for many color-blind persons. Commented Nov 29, 2020 at 12:22
  • @Glorfindel: Isn’t red just a brownish-gray for people with red/green blindness?
    – Michael
    Commented Nov 29, 2020 at 17:20
  • 1
    Yes, that's why you shouldn't rely on it as a primary indicator. The author of the question has already provided other measures (the little line, the confirmation dialog) which are helpful to color-blind people as well. If all others icons are white, and the risky icon is brownish, they will notice that too.
    – Glorfindel
    Commented Nov 29, 2020 at 20:42
  • 1
    The OP could also make the icon red on hover if they don't want it to stand out too much if you aren't trying to execute that action.
    – dalearn
    Commented Nov 30, 2020 at 4:00

The destructive action can be hidden under ellipses or a 'More' option to make it less accessible to the user/ to prevent accidental clicking. Like this

enter image description here

  • 9
    One issue with this is that it makes it annoying to delete items in bulk, since you may potentially have to click three separate buttons (More + Delete + Confirm) for every single item. Commented Nov 28, 2020 at 6:20
  • 2
    depends on how important or frequent the delete action is + what implications it can have. Commented Nov 28, 2020 at 15:38
  • 3
    Normally, unimportant or rarely used options are hidden behind "more". That those are (or also feature) the dangerous options is astonishing. And as others allude, making a common task arduous doesn't make it any safer. Actually, muscle-memory soon negates any perceived extra safety. Commented Nov 28, 2020 at 21:41

You can put a yellow triangle with an exclamation mark next to the icon.


There already seem to be enough good answers, and I would probably go with red myself, but @maxathousand asked me post a comment of mine as an answer.

While red is generally seen as "danger" or "stop", that is fairly recent and may be culture specific (for instance, the Chinese consider red to be auspicious (which once led to me wearing some very gaudy "auspicious underpants" for Lunar New Year when I was working in Shanghai)).

If you really want to speak directly to the lizard hind-brain, then use black & yellow - either as the icon colo(u)r, or as a border to delineate it.

See, for instance, Why does black and yellow indicate danger? on our S.E. biology site, which has some interesting explanations as to why we, and other creatures, fear this combination.

Or, just think of wasps & bees, maybe you know of some snakes & frogs which are black & yellow?

In industry, I have often black & yellow floor markings delineating potentially dangerous areas, black & yellow tape on drums of hazardous materials, etc. I would not be surprised if the same login holds true for "Police line! Do not pass!" tape.

So, perhaps if if would blend well with your chosen colo(u)r scheme, this could be an option?

  • 1
    +1 black and yellow is also better for red-green colorblind individuals which make up a nontrivial proportion of the population Commented Nov 30, 2020 at 21:14
  • I would never associate black and yellow in a software interface with "danger". Maybe with meaning "under construction". Commented Dec 1, 2020 at 5:36

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.