What makes for a "good" app header/footer icon

Question

Consider the header bar shown below

To my eye the first three icons "look good". The other three appear to lack something. I am not really a designer so I tend to get there with a great deal of trial and error. However, I am sure that there are general principles that one can use to weed out icons that are doomed to "look bad" when viewed on small handheld devices. I am wondering if the UX people who hang out here might be able to help compile a list of criteria for the purpose. I have a fuzzy set of criteria in my own mind

• Lines "too thick", "too close togehter": Icon 4 above
• Icon "not clear": Icon 4 again
• Lines "too thin": Icon 5 above
• Too much detail: Icon 6 above
• ...

but this is far from being an applicable set of filtering rules that can be used as a choice/design guide.

---

I should explain that the images I have used here are purely for illustrative purposes. They do not represent anything I am actually using, or am planning to use, in a real world app.

Answer 1

I appear to have got a little carried away... but here's some of my tips for what makes a good icon.

• An icon should have the right level of detail for the size of the icon. This can mean designing differently sized icons with different levels of detail, but what you can distinguish as meaningful and useful at 16px, 32px or 256px is very very different.
• An icon should be designed for the purpose. There's lots of free icons out there, but people do grow tired of seeing the same old icons reused rather than designing something to fit the brand, the company, the product, the action.
• An icon should work with its neighbour. Icons should never be designed in isolation. A suite of icons needs to have a language, a connection that lets the eye flow from one to another without having to decode different design cues for each icon. A suitable whitespace around icons separating them from nearby content, or neighbouring icons, or groups of icons is essential.
• An icon should use the right metaphor. Icons should incorporate objects relevant to the context, and where relevant the language should incorporate and reuse visual cues for verbs nouns and actions in a consistent way - that's part of the icon language. I have used products with a picture of a log (tree) for a log file and a picture of windscreen wipers to refresh the view.
• An icon needs to be understandable at the quickest of glaces. Related to the previous item, if users are distracted even for the shortest of time whilst they try and work out what the icon is showing and what it means, then that will frustrate users. And if this happens often, that can be a big turn off.
• An icon should fit the context around it. Busy icons don't suit a minimalist website. A suite of red icons wouldn't suit a landscape gardening website.
• A set of icons should appear consistent. Line thickness, border radius, lighting, perspective, shadow, common elements and shapes should all be consistent between icons.
• An icon should be simple. But no simpler than necessary. Photo-realistic icons arguably have their place, but generally clutter in the imagery means more to decode for the user, more distractions when trying to recognize the shapes, and makes it take longer to recall the associated meaning. Icons are not images.
• An icon should be pixel perfect. Pixel aligned shapes and lines make icons much sharper and clearer making them easier to recognize, especially for people who may not have perfect vision. Working with grid - even with vector icons is essential. Icons should use simple shapes. Simple geometric shapes are more easily recognized and decoded by the user and they are more easily pixel aligned. Regular angles like 90 and 45 degrees help reduce the amount of aliasing that makes an icon appear jaggy.
• An icon should be familiar. Many people will recognize elements of widely used icons between applications. That doesn't mean the same icon needs to be used, but a shopping cart or basket is pretty standard for an e-commerce site, and expected even. So if people are going to be looking for a particular symbol, why deviate from it.
• An icon should be aesthetically pleasing and friendly. Curves look more friendly than sharp or spiky corners. Curves based on splines ease the flow of outlines rather than hand drawn shapes or pixel drawn icons. Vector icons also scale more easily.
• An icon should use appropriate line thickness. For example 1 pixel for a 16px icon, 2 pixels for a 32px icon, would be about right. Scaling icons without scaling the line thickness makes them look too thin or too bloated. Differently sized icons have a sweet spot for line thicknesses.
• An icon should work against different backgrounds. Whether it's on white or black, or grey or blue, you need to know the different places where the icon is going to be used. Especially for application icons that may appear anywhere the operating system chooses. An app store, a mobile screen, a desktop, a taskbar.
• An icon should meet accessibility guidelines. Alternative text. Icons and labels. Suitable contrast ratios. Suitable sizes. Consider how the 18% of the population that is impaired in some way (or the 33% that is temporarily impaired) will be able to use the icons. There may be design standards to be met.
• An icon shouldn't include words. Leave words for an associated label, for example MENU underneath a hamburger menu icon. Letters can work though - if necessary.
• An icon shouldn't use primary colors. Yes an icon needs to stand out, but it doesn't need to shout. Vibrant doesn't need to mean loud.
• An icon should still work in monochrome. If it works as monochrome, it will work disabled, and it will work when printed out.
• Icons should be designed by someone who is good at that sort of thing. I've seen so many products where the icons have been made up by the developers. Each developer making icons for their own bit of functionality. Maybe they're 'placeholders until we get someone to do it properly', but often it never happens. I might be a UX designer with graphic/visual design skills, but I used to be a developer and I know it happens. Icons from silos are bad, so ensuring that icons for a single product are designed by the same person is ideal.
• An icon should be the result of many iterations. Few great icons are drawn once. They are the result of sketches, blends of inspiration, restarts, critiques, and of the next item...

Finally:

• Icons should be tested. Just as much as any other part of the application.
  • with real users (who've never seen them before)
  • in different contexts
  • at different sizes
  • on desktop and mobile
  • at different resolutions
  • against different backgrounds
  • with different Windows themes (Black/White accessibility themes)
  • when printed
  • over screen sharing
  • on projectors
  • ...

Look at a set of icons and ask whether some, or all, or none of the above might have been considered. If the answer is yes to all, then they're probably pretty good icons. That look good. Everywhere. Together.

Answer 2

1. Try to keep every item a solid item, not a set of things. Number 4 looks like a thing with small another thing near it. Number 6 looks like a levitating clock and a hand under it. User should choose one thing of six, not a subset of six sets.
2. All items of a toolbox are different but born equal. Make them having similar size and line weight as much as possible. Number 5 now clearly looks different. Keep your style consistently.
3. I believe number 5 means a photocam or instagram? Sorry, but it doesn't look like a camera. Maybe more circle lens will help?
4. Does number 6 mean time or hand? Keeping time? Handing clocks? Catching dropped clock? Probably it is a Windows metaphor of "make file or folder network shared". Smartphone OSes in our time have their own metaphors of sharing, if you meant sharing. Younger users may not have Windows 98 background, so they will not get it. I believe number 6 should be rethinked.

Sorry for being rude.

Answer 3

Well, i think that is weird to see that they are "italic". Stick to the simple but effective things, maybe download the icon set of material design guide could help you to focus your attention in things that are not of your specific field...