Questions tagged [icons]

An image or pictogram used instead of or supplemental to textual information. Icon requests are off topic; please keep questions related to their use rather than asking what a good icon to represent a certain item/concept would be.

Filter by
Sorted by
Tagged with
378
votes
20answers
33k views

What explains the current shift from glossy UIs to matte UIs?

I've noticed an interesting phenomenon in the user interfaces of many famous applications, they're moving away from the glossy complex to a more dull and bare minimum design. Why the sudden change? ...
249
votes
24answers
30k views

Save icon, is the floppy disk icon dead?

This Twitter post sparked me to ask the question: totally! RT @damienguard: Dear UI designers everywhere. Stop using floppy disk icons for save. Too many people have no idea what it is now. ...
169
votes
9answers
38k views

When to use icons vs. icons with text vs. just text links?

Are there any rules on when to use icons vs. icons with text vs. just text links in a web application? For example: vs. save vs. save Extra question: Is save -or- save preferable?
110
votes
10answers
8k views

Do unique icon contours help people scan?

Many years ago, I ran across a good icon design tutorial. It said that having unique contours to icons help users scan for the item they're looking for. If this is true, why don't iPhone and Android ...
99
votes
6answers
14k views

Star vs Heart icon to represent save as a favourite

I am working on a mobile app that involves the user saving a favourite location. I wanted to use an icon to represent that feature, but I'm not sure which one is better – a star or a heart icon. Some ...
83
votes
20answers
24k views

I'm designing a no-data USB cable : How should the end be marked?

I'm specifying a dedicated USB cable for a product, but it won't be a full cable, it will be missing the center conductors. In other words, it is functionally equivalent to a "charge only" USB cable. ...
80
votes
10answers
72k views

Use up or down arrow to represent “sort ascending” at table header

To represent "sort ascending" (a -> b -> c -> ...) , my first sense told me that, I should use ↓ to represent it. This is because if I lay my data a b c It seems like thing is moving naturally ...
77
votes
9answers
21k views

How should you show that an accordion is expanded?

When you have an accordion, you need some way of showing the current state is expanded. There are a number of different ways of handling this, and each is used by a number of respected websites and ...
74
votes
12answers
16k views

When a button contains text and an icon, which should come first?

Assuming I'm optimizing for making it as fast and easy as possible for most users to find the button they need, what's the optimal ordering?
65
votes
5answers
9k views

What is the origin of the power icon?

What is the origin of the power button? Is it supposed to resemble a physical switch? Was it originally skeuomorphic UI design? Did it every move/turn or provide feedback? download bmml source &...
59
votes
11answers
10k views

Why is the file icon usually folded from the right corner?

I'm doing a bit of iconography which got me thinking about the standard icon for a document / file shown below: Why do the majority of these icons have the folder corner on the right hand side? Why ...
58
votes
3answers
6k views

Why is the share icon always different? [duplicate]

Every site uses a different share icon here are some examples: Which icon is best for UX and most obvious to the user that it is a share icon?
51
votes
9answers
6k views

How can I make monochrome icons work?

My company has just implemented a monochrome icon theme in an attempt to transition to a more "modern" interface. Feedback from the first round of user testing has been mixed: Almost everybody ...
50
votes
11answers
11k views

Has user testing found that the “three horizontal bars” for main menu on mobile is commonly understood?

"Three horizontal lines" aka "hamburger icon" seems to be becoming a convention for the "main menu" button, especially on mobile sites: Has anyone done any user testing of this convention, or got any ...
48
votes
10answers
11k views

At least one is mandatory. How do I make this clear?

I have a list where the user has to select some items. Sometimes none of them are mandatory, sometimes one is mandatory, and sometimes at least one out of two is mandatory. But how do I show this? ...
48
votes
14answers
5k views
47
votes
9answers
11k views

Why do Radio Buttons not fill the entire outer circle?

My question is simple: Why do most radio buttons not fill their entire outer circle? Example of standard radio button: (Unusual) Example of an entirely filled radio button: Is this for some ...
43
votes
22answers
9k views

Button for “Play, but from beginning” for a scrubber UX [closed]

Consider a typical video-editing style timeline: There's the usual Play button: a right arrow. There's the usual Pause button: two bars. -----------------|----------- > || However, I ...
43
votes
8answers
3k views

What would be a good way to thumbnail audio?

I want to represent an audio file in an image with a maximum size of 180×180 pixels. I have been thinking about something similar to what Soundcloud does, although it will require some chopping and ...
41
votes
22answers
5k views

What would be a good non-religious icon to represent that a person has died? [closed]

I have an application that displays information about people in an organization and their accomplishments in the organization. It is non-religious in nature and members can be of any or no religion. ...
41
votes
5answers
17k views

Should we use the 3x3 9-dots icon as an apps menu?

As the web continues to evolve and more complex applications emerge, there is a need to let the user quickly navigate between applications. This action is different from the navigation menu we see ...
40
votes
3answers
5k views

What is the origin of the eject symbol?

On the web, there is a lot of information about the Play, Pause, and other symbols, but I could find no information about the famous Eject symbol at all. The only source I could find was an article ...
39
votes
5answers
29k views

Which way should arrows point in a collapsible accordion? Left/down … down/up?

What is the best way to indicate that it's possible to open and close an element accordion-style? Arrow pointing left/arrow pointing down Arrow pointing down/arrow pointing up Plus sign/minus sign … ...
38
votes
4answers
21k views

Is Apple's or Google's meaning of the three-horizontal-bar icon more popular?

Apple and Google are going head-to-head to define meaning of the three-horizontal-bars icon: In iOS this icon means "drag me to rearrange items in a list" while Google Chrome's version means "click ...
37
votes
13answers
5k views

Down arrow and up arrow status

I have to make an iOS app, where there are categories and I have to show the decrease and increase in status of particular category. For decrease I used a red down arrow. For increase I used a green ...
37
votes
4answers
3k views

Where should the GUI light source come from?

I know that historically the light source on GUIs is in the upper left, casting a shadow on the bottom-right of buttons and the upper left of fields. Now, I see some places (like Apple) use a top ...
33
votes
5answers
8k views

Why are the “Undo” and “Redo” arrow icons commonly round?

A simple Google Image search will show a lot of icons related to "Undo & Redo", and interestingly, most of them, if not all are round. Take a look at the ones Microsoft Office uses: And some ...
31
votes
12answers
8k views

Most intuitive delete icon [closed]

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 ...
31
votes
5answers
32k views

What is a good icon for illustrating expand (and collapse) all? [closed]

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 "...
31
votes
4answers
2k views

How do you create or select an icon for a feature?

How do you work out what icon type or image you need for a feature? There's been quite a lot of very small questions here in the form of "What is a good icon for feature X?". Instead we should be ...
31
votes
2answers
7k views

Gear icon vs. ellipsis (3 dots)

I always see these icons on settings or data tables. Can both icons have the same value or meaning? Is it a trend or standard? Gear icon: Ellipsis:
30
votes
12answers
4k views

Will using “X” for both “close” and “remove” cause confusion

I'm working on a shopping cart design. I'm currently using "X" to mean both "close" and "remove" in the interface. As shown in screenshot below. Will this cause unnecessary confusion? For quick ...
30
votes
2answers
10k views

Info Icon vs Question Mark

We're debating inside our team on whether to use a question mark icon, or an "i" icon for prompting a tooltip that reveals more info. Which do you say conveys the message better? Or, how do they ...
29
votes
5answers
18k views

Why is the settings icon either associated with gears or a wrench + screwdriver

I was wondering what the association between gears and settings is because the symbolism/iconography is not clear to me. I can see that in the old days people might have used the wrench or screwdriver ...
28
votes
11answers
2k views

Ways for a company to organize common/shared Icons Images and Graphics

Are there any common tools that are used to store Icons Images and graphics for a company wide audience? As a programmer I would store everything in git so people could update it and track the ...
28
votes
7answers
4k views

What is the reasoning behind grayscale icons?

Quite a few web applications have started utilizing gray(black) scale icons, for example Github,new Google Analytics, etc. Even applications like Firefox 4, Chrome, IE9, iTunes, Mac OS, have dropped ...
27
votes
5answers
16k views

Why are search icons represented by a magnifying glass?

Why do so many applications and websites use a magnifying glass as a search icon ? A magnifying glass is a tool used to have a better view of small objects. It suits perfectly as an icon for a zoom. ...
27
votes
4answers
21k views

What unicode symbol should I use for EDIT?

I'm trying to keep a very light payload on a wordpress plugin I'm writing. Users will be able to: add - + refresh - ⟳ edit I'm thinking of using the pencil glyph: ✎, but I'm not sure about it. What'...
27
votes
7answers
5k views

Which share icon is most appropriate for web?

Now days there are multiple viable share icons available, but they are mostly mobile OS specific (iOS, WP, Android...). I wonder which icon should I use for the web that most of the users would ...
25
votes
7answers
2k views

Most intuitive favorite icon [closed]

Similar to Stefan's most intuitive delete icon question. I'm designing a web app that allows users favorite pages. A lot of big sites use either a heart or star symbol -Which one is most intuitive?
24
votes
2answers
2k views

Do Samsung's Marshmallow skin Quick toggles have enough contrast?

I recently updated to Marshmallow, and I'm not happy with the blue over white scheme in daylight conditions. My question is if it's just me, or if this is documented and studied somewhere? If so, how ...
23
votes
14answers
9k views

What's a good icon to represent how difficult a task is to do? [closed]

I am working on an application where users get to rate various things. In one category, they are rating how "good" something is, and so I put together a little 1-5 rating system with star icons, like ...
23
votes
7answers
3k views

red checkmark vs. a red “X”

I am currently designing a panel in my business application that shows a table of data to a user. The data in the table is the company's percentage (this is equated by many different values), whether ...
23
votes
5answers
2k views

How do you use an icon to represent 'click once' (not twice) [closed]

I need to teach my users to use issuu.com's interface -- click once to zoom in. If they double click, it zooms in then out again. I can't change issuu's component so want to add something on my web ...
23
votes
7answers
4k views

Based on what criteria do you add/not add icons to labels within a toolbar?

Some toolbars have icons for each label, and some toolbars do not have icons for any label. There is enough discussion about that. However, some toolbars will attach icons to label selectively, and ...
23
votes
3answers
6k views

When to use grab vs move cursor?

I am making an app with a drag and drop UI. I plan on changing the cursor when hovering over the draggable elements. What's the difference between the move and grab cursors? Can they be used ...