I'm trying to devise an icon to indicate that when it is clicked, it will collapse all the nodes in a tree. The tree contains profiles which already have an icon, so ideally I'm looking for a "decorator" for our profile icon (like the star-burst used to indicate that clicking this button will create a new thing, or the pencil that indicates that clicking the button will edit the selected thing).

I've tried using the Windows tree node icons, but these are hard-coded to the Windows Vista/7 style and so will look wrong on Windows XP; also, given that they are triangles, they're a bit abstract.

UPDATE: The icon will be displayed in a separate "Actions pane" to the right of the tree view.

  • We're using a little icon with a + and - sign next to a folder image. (our tree nodes are usually folders) – Barfieldmv Sep 5 '11 at 14:38
  • That's a design question. Voted to close. – Phil Sep 5 '11 at 15:00
  • 3
    @Phil: There are lots of questions phrased "What is a good icon?" that have many upvotes and answers. I can't see anything in the FAQ indicating that design questions are forbidden. – alastairs Sep 5 '11 at 15:27
  • 12
    @Phil How is design not a huge part of user experience...? I can see how a purely stylistic question is unwanted, but UX is all about designing thing properly... – Ben Brocka Sep 5 '11 at 16:50
  • 1
    @alastairs: The FAQ also doesn't say that questions about giraffes are forbidden ;) A good question would be: Can this be achieved with an icon? And if yes, what's the most common one? And my answer would be that only very few icons without label work for a broad audience and that a different approach might be better (could be easily tested against with a quick usability test). – Phil Sep 5 '11 at 16:55

Go with a chevron. It is widely used for collapsing and expanding, and it's rather self explanatory.

enter image description here enter image description here

  • I like these. Where did you find them? – alastairs Sep 7 '11 at 15:09
  • 2
    I created myself, feel free to use them. – Matt Rockwell Sep 7 '11 at 15:15
  • 2
    I create those with a guillemet (en.wikipedia.org/wiki/Guillemet) which I then rotate 90 degrees. It allows me to choose a specific font to get a specific look. – Shawn Dec 14 '11 at 21:29
  • Yes, this is more intuitive to me than triangles that rotate 90 degrees to represent what is basically a vertical slide rather than a rotation. One idiom I've seen is to use a single down chevron to expand one, and the double down to expand all. Up and double up to collapse. – Jon Coombs Feb 26 '16 at 23:05
  • 1
    I am thinking these are page down, page up actions. Isn't it somewhat confusing? or am I the only one? – Sol Sep 22 '16 at 10:09

I've previously used this kind of idea below - not these actual icon, but something based on them and in keeping with the rest of the design style.

enter image description here

enter image description here

  • Thanks; I had seen something similar to the "expand" icon elsewhere. – alastairs Sep 5 '11 at 15:54
  • This makes sense, since presumably the individual nodes consist of a single box containing either a plus or a minus sign. If OTOH you were using a single chevron on each node in the tree, then the "all" version could be double chevrons, which is a simpler icon to parse visually. – Jon Coombs Feb 26 '16 at 23:12

I would go to a visually cleaner solution, i.e, with less artifacts / clutter.

Google Mail - Collapse AllGoogle Mail - Collapse All Example2


  • I don't think I've ever seen this before, so personally I wouldn't call it broadly adopted! – Jon Coombs Feb 26 '16 at 23:00
  • I just checked Gmail, and it is using an icon similar to this for the expand/collapse button when viewing an email conversation. – JohnDubya Oct 27 '16 at 21:06

So is there a consensus? Across the web, even within the same organizations I've seen them use different icons. On Google Groups, they use the right facing arrow / down facing arrow combo. In Gmail, they use the + / -. In Google Plus they use the Chevron double arrow. WTF? I understand that different groups build those applications and one icon might make more contextual sense in one place than the other but seriously, standardization would be nice.

Outside the Chevron double arrow, I've always been reluctant in using the right / down facing arrow. I think it'll get lost / confused with any combo boxes on the page.


I can't quite grasp the context you need the design to be implemented. but I've always found cases like these don't necessarily need to reinvent the wheel.

a good reference to use is http://patterntap.com/ I've always find it useful, hopefully it'll help you.

  • 2
    Unfortunately, the patterntap link is broken. – LarsH Sep 12 '18 at 18:08

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