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
1
vote
1answer
65 views

Need feedback on displaying tabs with icons

Actually we're building the gis application for Police Department. I have a widget called "Camera" and in that widget, we've added multiple camera locations as per their geo-ids. The camera widget ...
3
votes
6answers
2k views

How do I tell the user a filter is active

I have a button in my interface that when clicked shows a listbox so the user can apply a filter by those items the user has selected. It looks like this: My question is: How do I tell the user there ...
1
vote
3answers
93 views

How to display unavailable items with icons?

I need to display information about what a venue can provide or allow for its guests. The information if an item is available is of the same importance that it is not (e.g. it's important to know that ...
0
votes
1answer
23 views

Live app icons on smartphones?

One thing on my iPhone that always makes me wonder is the Clock app icon. As far as I know, it is the only app icon that is actually "live" (constantly changing state to show the current ...
21
votes
6answers
5k views

Is the “filter” icon widely recognised by users?

Note: I'm NOT asking for an icon suggestion. I'm designing an online menu for users to order their food at a restaurant. I'm also including a filter so that they can apply their dietary preferences. ...
1
vote
2answers
137 views

Filter icon for “include null”

I'm designing an e-commerce site that allows for filtering on items based on attributes such as weight, size, price, etc. The problem is for certain attributes, like "weight", some items have data, ...
1
vote
1answer
49 views

How a “disable animations” button should look like?

As it I've been asked to add a button to disable animation on my website, according to the WCAG animation criterion (https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html). The ...
0
votes
1answer
28 views

“Partial” icon in a comparison table

I'm making a table comparing the features in different offerings, using checkmarks and blank spaces to denote whether a feature is available or not. There are a few edge cases where there's partial ...
0
votes
1answer
70 views

Best Practice for placement of Help / Save / Cancel icons

I'm designing a UI where sections will become editable, and there are also quite a few help icons for users to get further information about each section. Originally, I put the Help icon in the top ...
1
vote
3answers
78 views

What's a better way to Indicate flights in operation when booking flights

I'm designing a flow that will reduce the likelihood of users getting zero results when they search for a flight. When looking at examples of how other airline apps do this, I came across the ...
176
votes
9answers
44k 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?
2
votes
1answer
195 views

Which is the most “shareable” icon out there [closed]

Our company have three main platforms, the web, Android and iOS. It's based on listings where you can perform some actions, one of them being sharing, since I saw this question in '15 (Which share ...
11
votes
4answers
37k views

Up arrow for increase, Down arrow for decrease, what for no change?

We have a web application that lists prices of a stocks and we have a requirement to indicate a movement. When there's an increase in price we add an up arrow, where there's a decrease in price we add ...
2
votes
3answers
105 views

What icon intuitively represents making comparisons? [closed]

I want to make an app which involves repeatedly giving users two options and having them select the one they like better. Is there any icon or symbol which would intuitively represent this concept, ...
2
votes
3answers
81 views

Provide icon set for customisable dashboard

Background We're providing a dashboard to our users, where they can set up their most important features. It is possible to show certain metrics (business figures), have widgets for quick actions, ...
0
votes
2answers
81 views

How consistent should icons be in sizing?

New to UX and confused about size consistency. I know icons that belong in the same group are supposed to have the same visual weight, but what if there's different groups of icons on the same page or ...
23
votes
7answers
2k views

Are grayscale buttons with icons usable and effective?

The image here is old gmail new gmail, when no mail is selected new gmail, when mail is selected new delicious To me, the buttons are unlabeled and tough to discover. I don't believe the icons do a ...
50
votes
11answers
12k 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 ...
0
votes
1answer
32 views

Confirm and Completed Icon in dashboard simillar

I am working on UX for the dashboard as we have booking progressing as our step for a booking system one thing I'm not sure with this 'CONFIRMED' and 'COMPLETED' Confirmed as the user is confirmed to ...
0
votes
1answer
110 views

Using detail disclosure buttons on section headers

My colleague is suggesting to add a detail disclosure icon to a section header in a mobile app. It seems rather cluttered to me given the density of info we already have on the screen. I'm wondering ...
0
votes
3answers
92 views

Should every line in a grid have edit icons?

We have an application with many grids. The current design is that only the currently active row shows the edit and delete icon. Is this a good practice, or should every line have the edit/delete ...
3
votes
1answer
88 views

Circle = warm, filled circle = cold?

The water tap in my bathroom can switch between cold and warm water. To indicate which lever direction is cold vs warm, there are two symbols: a filled circle and an unfilled circle. Is there any ...
0
votes
4answers
104 views

How can I better convey the idea of “message sent”?

Currently, I am designing a mobile screen where the user can send a message to their friends. In order to show that their message has been sent, the upper right hand corner check-mark goes from black ...
4
votes
1answer
278 views

Why are Progressive Web App Icons circular compared to their App counterparts

Working on a PWA (progressive web app) and coming up with the app icon for it. There aren't many others around since it's pretty new but it seems a lot of PWAs use a circular icon to differentiate ...
1
vote
2answers
81 views

Would you understand a 3rd state for a “like” action if it's using the same icon? [closed]

We're having a usability debate: would the user understand what the 3rd state means, without text or tooltips, if all he is presented with is an icon in different color, in a different component? ...
0
votes
2answers
62 views

How many Options / Icons / Actions on a screen/list/bar

I face a hard decision when designing an interface for a windows fat client. Do you have any good articles or answers to the following question: When having a lot of options for a certain context - ...
2
votes
2answers
74 views

Icon alternative for items per page [closed]

I've below pagination select input for choosing the number of records to be shown per page. I'm looking for an alternative icon that represents the text Items per page So that instead of showing text ...
4
votes
2answers
216 views

How to present filtering items in a sidebar?

I have a site where I need to present filtering items in a sidebar. These items work as "filters" for the site's content on the right. The user can click these filters on or off (selected are ...
4
votes
4answers
3k views

Help Identifying “Up Left Arrow” Android / Material Design Icon & Usage

Could someone please tell me the name of this "up left arrow" icon used in Google / Chrome mobile search bar list? (Icon highlighted in image) I looked around but couldn't find any info. Also, does ...
90
votes
13answers
19k 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?
255
votes
26answers
32k 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. ...
0
votes
1answer
127 views

Nomenclature of icons e.g. Kebab, Meatball, Hamburger

Is there any logic behind naming icons in UX ? e.g. Breadcrumbs, meatball, kebab, hamburger, doner. Possible logic of the name "breadcrumbs": It helps the user find a "page's location" similar to how ...
7
votes
4answers
2k views

I want to let the user toggle a column heading to sort a grid by a date field. How can I make ASC/DSC intuitive?

I want to let the user toggle a column heading to sort a grid by a date field. How can I make the ascending/descending dichotomy intuitive? EDIT: I was looking for date-column specific solutions.
3
votes
1answer
116 views

What are the most commonly understood signs/icons for chat interactions?

I'm designing an in-app chat feature where users get can live support from chat agents. What are the most commonly understood signs/icons for chat receipts like sending sent not sent delivered not ...
1
vote
1answer
35 views

Should empty state use a universal symbol or specialised?

Hye, Im wondering is it better to have a universal icon/illustration for the empty states. Means that the same message like 'There's nothing here' with X icon on all screens during empty state. Or ...
4
votes
1answer
75 views

Best horizontal order of icons for list-based operations (e.g. edit/delete or delete/edit)

we are redesigning a web-based application that handles a lot of lists, where every line represents a single item. Like a list of emails or a list of books. Every item offers 3 functionalities: delete,...
0
votes
2answers
94 views

When using a Pencil icon is it necessary to add “edit” next to the icon? [duplicate]

I am working with a new designer who feels strongly that when you use a pencil icon signifying edit you must also add the text "Edit" next to the icon. This is not consistent with how our other pages ...
2
votes
1answer
59 views

How to display icons for Service Locations on Maps?

I'm working on displaying icons on maps, there are 3 types of icons: Pick up point(s): The location that the vehicle should be navigated to Point of Service: The location that the service will be ...
1
vote
1answer
82 views

What is the standard way of showing the user that a context menu is available in a user interface?

In the picture below, the same icon is used for two different actions. The ones to the right expand and collapses the section, whereas the ones to the left open a classic context menu. I find this ...
2
votes
2answers
109 views

Is there any research about the information icon font?

There is a small debate in my project weather we should use the serif or the sans serif version of the font for the "i" on the icon and it is something we clearly can't test. I personally prefer the ...
4
votes
2answers
155 views

Communicating that something is clean

I am building a Website on which the status of different machines will be displayed. System Status: ON/OFF/CLEANING/etc. and Cleaning Status: CLEAN/DIRTY/WARNING. The system status is communicated ...
34
votes
3answers
13k 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 ...
3
votes
1answer
267 views

Why there are 3 lines in all types of menu icons?

I have noticed that all types of menu icons are using three lines or dots. From a UI/UX perspective, does it matter the number of lines/dots? For example if someone decides to use only one or six ...
4
votes
2answers
323 views

Should icons be trailing or leading in a button with icon?

What is the best practice for using both icon and label in a button should it be before the label or after ?
5
votes
2answers
5k views

Is there a common or typical icon for an external link to a company web site?

I am building a web site directory that lists thousands of companies. Each company has a external company web site, and several social sites, such as Facebook, Twitter, and Instagram. I have a nice ...
3
votes
3answers
219 views

Position of the number on notification icons [closed]

The number in notification icons is generally displayed on the right side of the bell icon, what is the reason behind this? Is there anywhere you have seen the reverse where the numbers are on the ...
44
votes
9answers
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 ...
1
vote
1answer
168 views

Suggested icons for the status of downloading content [closed]

We are designing the UI for the downloading of content for offline mode in a PWA app. We will use the solid and/or light download icons to allow users to download the content (which which they will ...
0
votes
1answer
121 views

File type icon colours

We're currently designing a new "Document Management" feature for our application, and I've come to the part where I need icons for the file types. I've gone down the route of doing something custom, ...
5
votes
2answers
1k views

Icon placement when it opens a new window

When using an icon to represent a link I believe the standard convention is [icon] [Link]. A colleague has raised the point that for links that open in a new window, the icon should appear after the ...

1
2 3 4 5
15