16

Does the icon of arrows shaped as triangles pointing up and down have a name and what does it mean? I'm not sure if I can use it.

two triangles on top of each other, top one pointing up and bottom one pointing down, next to a label, "NAME"

Improve this question
1
  • 4
    I've always called them elevator buttons.
    – Tyzoid
    Sep 1, 2021 at 17:38

3 Answers 3

Reset to default
21

This icon seems to have different meaning in different systems:

  • it's called "caret sort" or "chevron sort" in Carbon Design System;
  • it's called "unfold more" in Material Design, while for sorting they use different icons;
  • it's called "sort" in Font Awesome;
  • Fluent Design System uses different kind of arrows for sorting, while the icon you provided, probably, doesn't have a set meaning for Windows users;
  • the icon you provided is used in "Pop-Up Buttons" on macOS, so using it for sorting could be a problem for macOS users - some users could expect it to open a pop-up/drop-down when pressing it;

enter image description here

To answer your question - you have to consider if your users understand the icon: Do they come from the environment where the icon means what you want it to mean in your app? Is the icon used consistently in your app?

I'd recommend going with it and perform proper user testing when it's up.

Improve this answer
3
  • 15
    [W]hile the icon you provided, probably, doesn't have a set meaning for Windows users - there is a common Windows control that looks very much like the one in question (although with a completely different purpose): the NumericUpDown (link to image search) control (also known, colloquially, to old-timers like me as a "spinner") (cont.)
    – Spratty
    Sep 1, 2021 at 9:52
  • 5
    (cont.) The new use of it as a dropdown or sort control confused the hell out of me the first time I saw it, I have to say.
    – Spratty
    Sep 1, 2021 at 9:54
  • Yes, agreed, good observation
    – exp
    Sep 1, 2021 at 11:43
17

It is one representation of a sort icon. When used next to a table header label, the user can sort in one direction by clicking once, and the other direction by clicking a second time.

Improve this answer
5
  • In this case, the arrows are shown in different colors, to make clear which is the selected sort direction.
    – apaderno
    Sep 2, 2021 at 8:32
  • 1
    @apaderno: A highly non-accessible and confusing practice. Even if the user can disginguish the colors they are unlikely to know which you intended to have which meaning. Same as left/right sliding on/off widgets that change color. The accessible form of this control only shows one arrow at a time, the active direction, and changes direction when toggled.
    – R.. GitHub STOP HELPING ICE
    Sep 2, 2021 at 15:24
  • @R..GitHubSTOPHELPINGICE I didn't think of the accessibility. Certainly, showing a single arrow that tells me which sorting is applied is better than showing two arrows with the same color. (Now that I look at my email application, I notice that sorting is shown with a single arrow.)
    – apaderno
    Sep 2, 2021 at 15:34
  • Should that be considered a sort icon? For what I recall, sort icons don't use two arrows using the same color.
    – apaderno
    Sep 2, 2021 at 15:37
  • 1
    After the first click, one of the triangles should disappear and only the directional triangle should be shown. It's still not an ideal accessible solution because the glyphs are very small and can be hard to interpret by people with vision issues.
    – Izquierdo
    Sep 2, 2021 at 15:58
15

I have seen some dropdowns on the web styled with the double arrows.

dropdown with double arrows

Also, in table headers it is used as a sort icon (fa-sort in font-awesome). So I guess you can use it for both.

Improve this answer
5
  • 6
    What do you mean "old dropdowns"? How old? The oldest dropdowns I can think of did not have double-arrows, only a single one. That includes GS/OS, OS/2, early Mac OS, NeXTSTEP, Windows, and others. The descendants of those operating systems don't have double-arrows on their drop-down boxes, either.
    – Cody Gray - on strike
    Sep 1, 2021 at 0:34
  • I could not find anything reliable about this, but it comes up in google image search occasionaly. Seems to not have something to do with age.
    – Nash
    Sep 1, 2021 at 8:00
  • Plenty of double arrows seem to have been (still are?) in Mac OS: c.f. two screenshots. Funny: there seem to be both double- and single-arrowed dropdowns in the same window.
    – ojdo
    Sep 1, 2021 at 8:12
  • 5
    Mac OS X calls the one shown here, with two arrows, a pop-up button, whereas the "traditional" one with just one arrow is called a pull-down button. However, the picture shown in the OP question is slightly different from this, and is probably indeed a sort button, instead, allowing you to sort by name ascending, descending, etc.
    – Brandin
    Sep 1, 2021 at 14:10
  • 3
    It looks like menus put the arrows on the right, sort headers put it on the left.
    – Barmar
    Sep 1, 2021 at 14:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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