Icon Guidelines
Learn how to use icons to communicate and guide the user through our UI experiences.
Last updated
Learn how to use icons to communicate and guide the user through our UI experiences.
Last updated
Did you know that you have an awesome collection of Novacura icons right at your fingertips? That's right! Our icon library is waiting to be explored by brave individuals such as yourself. We strongly encourage you to use it!
Can't sign in to Lingo? You don't use your Active Directory account to sign in to Lingo. Instead, use these credentials!
The advantages of using a shared resource for icons are plenty, here's a handful of benefits that might convince you to use it:
Zero confusion. By using a single source of truth, we remove any confusion regarding where our "official" icons are stored.
Consistency. It becomes much easier to create a consistent experience if we can control which ones we are using.
Efficiency. Instead of waiting for hand-offs from designers, an icon library provides a quick way for everyone to find what they are looking for.
Let's say you need an icon for an error message that appears when the user uploads an invalid image format. You go to our icon library and find just the one... almost. It's not exactly what you were looking for; perhaps there are some things you'd like to change. For example, take this icon.
Maybe the dot in the top left corner isn't doing it for you, or you want it to be in a different color. What do you do?
❌ Don't send the task to a designer.
✅ Do it yourself!
There are countless free vector-based image editors out there, perhaps the most prominent being Inkscape, which also happens to have a great set of video tutorials for someone looking to learn the basics. So, if you ever run into a situation just as the one described, don't hesitate to get your hands dirty! Download a vector-based editor of your choice and do it yourself. Allowing everyone to make changes to icons means we have fever hand-offs, which saves time!
There might be cases where you're looking for a specific icon, but it's simply not there. In that case, you'll need to reach out to us so that we can provide you with a new icon; but before doing so (!), we strongly encourage you to find something (e.g., an icon from another app) that is similar to what you were looking for. It's easier for us to put something together if we have a rough idea or concept. We are currently using this icon pack as a resource to help us in our work, have a look and see if you can find something that better suits your needs!
If you have an icon you wish to add to the icon library, or if you've made changes to an existing one, make sure to send it to us along with a short description and we'll (probably) add it right away.
Icons help users scan the UI and improve readability. The effects are often subtle, but powerful, and can be the difference between a good and great user experience. For icons to serve as a visual scanning aid, users need to see them clearly, preferably before they see any accompanying content. Proper placing is also important when creating a sense of unity. In worse cases, icons feel disconnected, resulting in a disorienting UI.
Click through the dos and don'ts windows below to see examples of how we can improve icon placement.
Placing icons to the right of accompanying labels is seldom preferable. Due to the natural reading order, users will read the labels before looking at the icon, which in turn will weaken the icons' purpose as a visual recognition tool.
When the icon's and the label's centers are not aligned, it conflicts with the natural reading order. In both images above, the icon and the label are not appropriately balanced, creating uncertainty in which information you are supposed to process at first glance. By aligning the icons' middle-points with the labels', the natural reading order allows the user to first see the icon and then the labels.
Don't separate elements that should form a unity. The package icon and the labels are strongly related, but the disproportionate white space between them creates an attention-grabbing disconnection.
Using icons that perfectly convey information is not enough. If they are blurry or pixelated, they'll stick out like a sore thumb.
Don't use pixelated or blurry icons. In the screenshots above, some icons look blurry compared to others, which creates a displeasing inconsistency and the UI comes off as unpolished.
Everything comes with a certain style, and icons are no exceptions! Some icons aim for realism and look similar to their real-life counterparts, with nitty-gritty details and shadows. Other icons follow minimalism by only using what's necessary for recognition. Look at the image below to see the differences in the icons styles.
The left one is most straightforward, it uses only two shapes and one color to convey its meaning. The middle one is also simple but with slightly more details; it uses colors that are closer to what an actual cogwheel would look like. The right one is aiming for a realistic look with highlights and shadows as if it was made out of metal.
Note that icons can have different styles even though they have similar "complexity". Take a look at the image below; most people would probably agree that the two leftmost icons have the same style since their shapes are filled while the other two are outlined.
It's hard to define in detail what characterizes an icon style, and you often need to trust your intuition when trying to distinguish them from one another. Especially since there's no right or wrong! Having that said, it's important not to mix icons with entirely different styles. Before adding a new icon to the UI, make sure to compare its style with that of nearby, already existing icons. If they're awfully different, try to find another icon that will make a better fit.
Don't mix icon styles (unless you have a good reason). In each screenshot shown above, there is no common thread in the icons' style. Some are filled and use gradients while others are outlined and single-colored. This makes the UI feel haphazard and unpolished; and more "busy" than necessary.
It's perfectly valid to mix icons with slightly different styles to represent states. Let's say an interface uses outlined icons for items in a menu (see image below) and the user is currently inside "Favorites". It's perfectly reasonable to allow the icon of that page to have a filled icon (instead of an outlined one) to show what the user has selected. In this case, the different styles are used to show different states: selected or deselected. However, note that the style is very similar except for this variation.
As mentioned in icon guideline #5, icons come in different styles. Some are detailed and realistic, while others are simple and minimalistic. When dealing with icons that have a high level of detail, keep in mind that small details become impossible to distinguish unless they're scaled to a sufficient size. On smaller screen sizes, things like shadows, highlight, and gradients blend, making it harder for the user to understand the meaning of the icons. One can say that each icon has an "optimal" size, which directly correlates with its level of detail.
Don't scale down icons so that its details become blurry. The icon in the screenshot above has a lot of details which are impossible to distinguish when it's been shrunk down. This extra complexity is unnecessary and should be avoided when possible.
Many of our end users prefer compact designs, and with good reasons! In a dashboard solution, for example, it makes sense with a lot of information visible at once, even though it makes the UI feel busier. This design approach affects our icons as well, which sometimes results in claustrophobic designs! Therefore, we recommend that icons have at least half their size of white space surrounding them (see image below). If this isn't possible due to screen size issues, consider changing the icon to a simpler one; one that better suits a smaller screen space.
Icons can be difficult to interpret if they are crowded into small spaces. Add white space by either expanding the size of its area or decrease the icon's size. Watch out, though! By shrinking them down, you also risk losing details.
Icons aren't just meant to look good. They're meant to help the user. Icons allow the user to quickly scan a page by providing visual recognition. If you want to go back in a web browser, do you look for a button saying "Go back" or an arrow pointing left? Finding the arrow will be both easier and faster. In other words, icons increase the user's speed and efficiency.
To gain this benefit, the user must first understand what information the icons in our UI is trying to convey. This is where things get tricky. Users can easily be intimidated by interfaces they are unfamiliar with. In those situations, most prefer to have a clear idea of what will happen before they act. To clarify potentially confusing icons, add a label! Remember that even the most basic icons, that you think are "universal", can be misunderstood.
Some might believe that adding labels defeat the purpose of icons and instead prefer the use of tooltips. However, tooltips are a poor substitute for labels. Relying on tooltips means the user needs to hover over each icon to find out what they mean, slowing down the interaction considerably. Besides, they don't translate to touchscreens and is, therefore, a dangerous tool to rely on. The only valid argument against using labels is that they risk cluttering the UI or occupying too much of its space.
Avoid relying on icons alone. First and foremost, users need icons to find what they're looking for; only secondary are icons used as a way to understand the UI. The problem is that icons can be interpreted in a thousand different ways! For example, looking at the middle icon in the first screenshot (the arrow pointing left in a half loop), what does it mean? Undo? Revert to default? Who knows! Conflicting icons is another reason for using labels. (What icons should you use if the user can both "revert to default" and "undo"?)
