Icons in UI Design
Icons are an integral element to any application or website. These small visual graphics can communicate simply and efficiently, but can also be confusing or annoying when not used properly.
As a designer I have designed numerous custom icons and I wanted to discuss best practices when designing icons and how to create successful icons.
The Essentials of an Icon
Creating that one little piece of design that communicates a word, person, place or action can be a daunting task. A beautiful, identifiable and memorable icon can have a huge impact on not only the aesthetics of an app or site, but also the overall user experience. So what makes a ‘successful’ icon? Design can be subjective but there are a few rule of thumbs that are hard to argue against.
Simplicity • Recognizability • Consistency • Scalability
The most important thing is for it to be SIMPLE. The simpler the better. If it’s not clear and simple, it’s not an icon.
One of the most challenging aspect when creating an icon is trying to communicate an idea or word in a small visual representation that is easy to understand with no explanation. The big question is: is it clear and easy to understand? A good icon should be recognizable instantly. If you’re trying to communicate a complicated concept, an icon may not be the best route. The design needs to make an immediate connection to the meaning. If it doesn’t click right away, users will be confused or annoyed. Sometimes copy text works better than icons.
I had a client, McDonald’s who asked me to create custom icons for their equipments’ digital screens. They wanted icons for every product like Filet-O-Fish, Chicken Nuggets, Chicken Selects, Chicken Strips, Mythic Chicken Patty, Chicken Croks (Switzerland)… True story! I told them this would be better off as text or photos.
There should be a sense of consistency and standardization throughout the entire experience of your app or site so the look and feel supports the brand and can be grouped together as an icon family. If it’s an on outlined icon style, the thickness of the lines should be consistent throughout. If it’s a flat UI style, everything should be flat. There can’t be instances where some icons are filled and some are not. If you’re using shadows, lighting, reflections, etc., make sure those styles/effects are carried throughout.
Also, there is something to be said about the universal language. Using the magnifying glass for search, or the trash can for delete, or arrows to indicate direction are all globally recognized icons. Let’s not create our own versions and confuse others. Some icons just don’t need reinventing. They just need to be used consistently.
Another important aspect of an icon is scalability. Since icons appear in a multitude of platforms and mediums, we need to consider how the size of the icon affects the integrity and details. This is why keeping it simple is key. You want to ensure that the icon maintains it’s look when it is small as well as when it is large.
Ready to work with icons? First of all, you should know that you don’t always have to start from scratch. There are plenty of resources and stock icons available online. This is a great way to speed things up if you are designing wireframes or creating prototypes. One thing to keep in mind though, is to make sure they fit the brand and are consistent and cohesive with the entire experience.
Of course, if you are looking to create custom icons, the best way is to use Illustrator. Let’s dive deeper into several ways to work with icons.
Sketch, Adobe Illustrator, CSS
gif, svg, eps, png, jpg
1. Use icon resources found online
The first option is to use readily available icons straight up. You can get icons from google or stock image sites. One free site I like to use is Vecteezy but there are also other paid stock options like iStock, Veer, etc.
The Noun Project is also great site with a wealth of icons submitted by the community. You can search and download PNGs and SVGs.
Alternatively, instead of using images, you could use icon fonts which are like dingbat fonts or glyphs. Since they are fonts, they can scale responsively and you can style them with CSS (color, size, weight, interactivity, etc). IcoMoon or Font Awesome are great resources you should check out.
2. Building on existing icons
To add a little bit of uniqueness and customization, you could build on icons found on the internet. This is a fast way to create custom icons and is great if you are not particularly artistic. You’ll need Adobe Illustrator or Sketch to modify the vector artwork. (You could use Photoshop, too if PNG/GIF/JPG is all you need.)
These are some custom icons I designed using illustrator. I just added my own unique style to icons I’ve found. Me+We is a personal project I worked on. It was a revolutionary chat world concept and so I created icons to underscore the network and connections aspect. The project didn’t go far but the icons was positively received and I got a lot of compliments and a stock icon site even approached me asking for permission to sell these on their site. That’s another thing about icon design. It can be very lucrative. Some people are full-time icon designers. Some sell their artwork on stock sites. So if you are good at it, it can be very profitable!
3. Design Custom Icons
If you want to go above and beyond and create your own unique icons from scratch, start by sketching using pencil and paper.
You can use a graph paper like the Dot Grid book or just use regular white paper. Drawing guidelines is really helpful. I like to make a square shape for icons. Once you feel satisfied with the design, you can use a pen or marker to define a stronger line or fill the shape.
Then scan your artwork to your computer. (If you don’t have a scanner, you can take a digital photo)
Adjust the lighting in Photoshop so there is clear contrast and is clean.
You could also skip the sketch and scan step and just start in Illustrator right away if you want. Start with a large file size. It can be as large as you want. Turn the grids and ruler on. Remember, icons should have a square shape. Lock the original layer and create a new layer.
Use geometric shapes like circle, rectangles and combine them to create a new shape. For more detailed lines or to connect different shapes, use the pen tool. This is where craft comes in play. If you’re going for an outlined icon style, turn the strokes into a shape by selecting the shape, then choose Expand from the Object menu. When finished, use the combine pathfinder tool so it becomes one unified shape.
Color wise, you should start with black and white first, but afterwards you can explore different colors. You can also try different styles..outlines or filled.. flat UI or creative styles…
If you’re going the extra mile of designing your own icons, think outside the box and imagine a visual that encompasses the concept in an interesting, unusual way.
For example, to represent ‘strategy’ les84 used a knuckle ring as the icon.
Zarget’s website also does a fantastic job of illustrating concepts like ‘comparisons’, ‘hot new chrome plugin’, and ‘out of the box solution’.
As mentioned before, it is not necessary to design custom icons for every project. Especially for prototypes, it makes sense to be efficient and speed up the process using readily available icons. We also don’t need to reinvent the wheel and design different versions of universal icon standards.
At the same time, if all the icon styles were the same, the world would be monotonous. Good visual design enhances the brand and user experience. In cases where creativity does matter, don’t be afraid to try pushing for a more unique and creative solution. It may take some time practicing but the craft will pay off.