The Stack Overflow podcast is back! Listen to an interview with our new CEO.

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
39
votes
6answers
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 … ...
380
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? ...
0
votes
1answer
39 views

Alternative way to represent to open or close a dropdown?

I'm doing some animation icons for a recent product and I'm playing with some alternative to the standard dropdown toggle. Typically, it's a arrow pointing either down or up... Is there any reason ...
4
votes
1answer
214 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 ...
0
votes
0answers
31 views

HELP: Using icon or text label? [duplicate]

I have the following issue regading UX/UI Design. A little introduction: Currently we are working on a new version of a document based application. This is for mostly municipalities/goverment kind of ...
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 ...
0
votes
1answer
56 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, ...
3
votes
1answer
131 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 ...
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?
1
vote
3answers
123 views

Best way to Indicate a item is shared or copied

I have a tree on my webpage that is used to display some folders and within these folders some items; These items can be copied from one node of the tree to another and also shared. When copied or ...
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 ...
1
vote
1answer
50 views

How to inform the user that the number shown in a list is incomplete or might not be current?

Consider this card shown below: It's a card with a list view showing the total income by teams. Now most of these teams have secondary teams under them. And many times the actual number of one of the ...
6
votes
4answers
587 views

Handling inactive notifications icons

With our app, there's currently a list of notification icons in the left side of the page. This are to alert you to events or things to do (e.g. you haven't contacted customer x for 30 days, you have ...
14
votes
2answers
1k views

What do the three bars in old installers mean?

Quite many old setups look kind of like this: I always wondered what the three bars in the bottom left-hand corner mean. I really have no clue.
0
votes
1answer
133 views

What is the difference between a 9 dots menu icon and a 7 dots? [closed]

What does it possibly mean? Can it be used as 'go back to menu'? https://cdn1.iconfinder.com/data/icons/social-media-vol-3/24/_dots-512.png
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?
11
votes
3answers
2k views

Which accordion Identifiers work best?

which accordion identifiers make more sense? plus and minus OR up & down arrow chevrons I'd be very interested to see if anyone has any analytics or proofs on these concepts. As always, ...
0
votes
1answer
43 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 ...
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 ...
2
votes
1answer
91 views

Tri-state icon convention?

I have to design a report with validated information about the data entered. In some fields I have a typical triple state. Imagine a file. That file belongs to a report model file. When uploading it, ...
1
vote
3answers
74 views

What is the best location on a form for an information icon?

I am trying to create a form for my web app, which requires information elements to be added. In general I would refer to the documentation of the framework that I would be using (which in my case ...
22
votes
2answers
23k views

What the difference between the 2 menu icons: 3-dots (kebab) and 3-lines (hamburger)

What the difference (if there is any...) between these 2 menu icons? 1) 3 lines (a.k.a burger icon) 2) 3 dots (a.k.a kebab icon)
1
vote
2answers
70 views

Native iOS icon sets

I've always found designing natively for iOS tricky - Google seems to just have everything there for you to look through and design exactly the same. Whereas the Apple Human Interface Guidelines ...
2
votes
3answers
202 views

Width of stroke in an SVG icon

I'd like to use the "material" icons -- https://material.io/tools/icons/?style=outline They look a bit cartoonish to me, e.g. here they are on a black top-bar: Their design guidelines say, for ...
2
votes
2answers
86 views

Salesmanship: How to differentiate two fulfilment statuses when both should seem attractive

My client is asking me to design text labels, iconography and colouring for two «fulfilment statuses» (apologies if that's the wrong term). Both should seem attractive to a potential customer. The ...
4
votes
2answers
524 views

What is the preferred shape of a messaging/chat icon? [closed]

As stated in this answer, an elliptical speech bubble is more commonly seen than a rounded (rectangular) speech bubble. This is perhaps true of comics, but not in messaging/chat services; it makes ...
4
votes
3answers
3k views

Is an aria-label necessary on icon fonts with additional context?

Given the following code, which is an error message on an invalid field entry: <i class="attention" aria-label="alert">Please enter a valid email address. The icon font is an alert icon (red ...
2
votes
2answers
192 views

Intuitive representation of “increase priority”

IGNORE THIS BLOCK We have a grid, each row represent a pending download. By default, downloads will proceed top-down, first row first, second row after that, etc. We want to put a column ...
4
votes
1answer
448 views

How to clarify ambiguity of the left arrow in google search autosuggestions?

Until recently I found the arrow next to each of the suggested keywords are tappable and will prepopulate the string to the search box for users to further refine the keyword before performing the ...
-1
votes
2answers
228 views

Good icon for the word “practice”? [closed]

I am creating a sports app where the users can track their practice for a specific aspect of the game. In my menu, I'd like an icon next to it to convey its meaning (and I have an icon for every other ...
0
votes
3answers
121 views

What (FontAwesome) icon should I use for “count” operation? [closed]

We have a standardized paginated table template. We already use FontAwesome icons to represent paging operations << to go to the first page < to go to previous page Numbers to a specific ...
2
votes
3answers
3k views

Icon only vs. text and icon

Im working on a project now but I'm not sure if an icon alone is accessible (AA) or if it needs to be accompanied by text? Which would meet the WCAG AA standards?
0
votes
2answers
116 views

Which icons have matching width / height ? Material Design icons are uneven [closed]

If you look at the containing vector of Material Design Icons, this is what makes the icons match in size. However the vectors of the content inside are not all the same sizes and follow no standard, ...
1
vote
3answers
164 views

Correct way to show that software is connected to an instrument?

Let me start by saying that I am a software developer, not a ui/ux designer at all, but in my company I need to cover this role too. I am developing a desktop software that manages some particular ...
0
votes
5answers
181 views

How to represent multiple positive buttons as CTA

We have an extension that has two different actions: Yes and No. But these two actions come in two different flavours. Yes for the current page and Yes for the whole domain, meaning Yes for the ...
0
votes
1answer
185 views

Is replacing icons with emoji a good idea?

I'm currently polishing an application I have built using fontawesome. Due to fontawesome's pretty huge (nearly 2 MB with the more accessible SVG + JS Version) footprint, I'm considering to utilize ...
0
votes
4answers
105 views

Designing/ Using Icons for people over the age of 40

How does someone in the industry use the right icons and text together in order for age > 40 people to understand the functionality of the feature that they are clicking on. I have come up with a few ...
0
votes
1answer
89 views

What kind of file icons should be used in web apps?

There are two approaches for file type icons—the official and non-offical versions. If an app chooses the official icon (E.g. latest version of Microsoft Word icon for .doc files) then the icons ...
1
vote
2answers
276 views

Which is clearer - cog/spanner/wrench icon for desktop website settings, or a text label?

Building a web-based tool which will really only be viewed on a desktop web browser (due to a restricted corporate environment). Trying to keep it as minimal as possible with no superfluous features. ...
0
votes
2answers
148 views

Which is correct? Whether to use the icon after the label or the icon before the label? [duplicate]

To Use Icon after the label? Ex: (Or) To Use Icon before the label?
2
votes
4answers
151 views

Are icons in business software helpful?

me and my team are working on a re-design for an internal software, that people within our customer service do use to track shipments in real-time. I am thinking about a way to efficiently show ...
6
votes
4answers
281 views

How can I know an icon will relay the same meaning across all cultures?

I work for a multinational company with websites in about 40 countries. There is a mix of European, Asian, Pan Pacific, North and South American countries we serve. I have been asked to design a ...
0
votes
2answers
230 views

Availability of tooltip text for keyboard users

I am programming a desktop application and I use some icon-buttons without labels. I do not want to use Labels because of layout. So I set to every icon a descriptive tooltip text, because some icons ...
5
votes
3answers
14k views

Defined used for the icon: three vertical dots

Is there a defined use(s) for the icon I have seen various uses for it, but I would like to know if there is a standard purpose for it - or if it can be used as a shortcut for any function needed ...
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 ...
0
votes
1answer
72 views

Navigation with icon to open page and open popover top

This is my first participation here so apologies if I am not doing this right. My question is about about using icons for navigation. For example: All items are clickable 1) The first item (My ...
2
votes
2answers
285 views

Clarifying unfamiliar tools in a toolbox

If you use Adobe Photoshop to edit your images, there's this toolbox, from which you can select the tool you want to use. (source: www.un.org) I'm designing a similar program than manipulates ...
3
votes
4answers
619 views

What icon to use for archive and for restore? [closed]

In our web-app there is a message centre with a time-line of communications. We let the user move instances of these into what we are calling an archive. On each of the listed messages there appears a ...
2
votes
9answers
2k views

Does a lock icon show the user is logged in or needs to log in

I am working on a device where the admin can require the user to log into the device into order to use it. The developers originally used a closed lock to show that a user is is "locked out". For ...
3
votes
3answers
266 views

The best icon for settings, wrench or gear? [closed]

While we were discussing UX at work, we stumbled across this question. Which icon is the best icon for settings, wrench or gear? We simply just need to figure out which icon is the best for settings ...