Icon Guidelines

Learn how to use icons to communicate and guide the user through our UI experiences.

#1: Use our icon library

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!

Lingo — The visual home for your brandLingo

Click this Lingo link to access our icon library.

Can't sign in to Lingo? You don't use your Active Directory account to sign in to Lingo. Instead, use these credentials!

But why?

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.

#2: Get your hands dirty

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.

#3: Icons first

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.

❌ Don't

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.

✅ Do

Icons should be placed to the left of their labels so that users see them first. In this way, the user sees them before they see the accompanying labels, which help the icons serve as a visual scanning aid.

❌ Don't

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.

✅ Do

Place icons according to the natural reading order. When both the icon's and the label's middle points are aligned, the user processes both items as a unity (first the icon then the label), resulting in a more natural reading experience.

❌ Don't

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.

✅ Do

Even out disproportionate white space. By pushing the package icon to the centre of its space, the icon and the labels create a natural unity while still allowing both some breathing room.

#4: Keep it sharp

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

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.

✅Do

Make sure all icons look sharp. This consistency makes the entire experience feel more polished.

🔍 Watch out for aliasing!

When representing a high-resolution image at a lower resolution, distortion artifacts known as aliasing may appear. Aliasing is often recognized by jagged edges on tilted surfaces that are supposed to be smooth. These problems can often be prevented by either applying anti-aliasing filters (see image below) or use icons that are less prone to create aliasing issues.

Left: without anti-aliasing filter. Right: active anti-aliasing filter.

Although a minor issue, there are instances of aliasing in our products. Looking at the example below, the high-resolution icon (for an application package) becomes distorted when displayed in the UI.

A high-resolution icon representing an application package.

Jagged edges appear along the icon's sides when it's displayed in the UI.

#5: Don't mix styles

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.

All three cogwheels have their own style.

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.

Styles can have subtle differences.

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

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.

✅ Do

Icons with a similar position and role in the UI should also have a similar style. In the screenshot shown at the top, each item in the list belongs to the same navigation menu and should thus have a similar icon style.

When it's OK to mix styles...

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.

The icon that is filled is currently selected by the user.

#6: Keep it simple (when keeping it small)

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

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.

✅ Do

In confined spaces, use simple icons. Simple icons are those that use few colors and details.

#7: Allow icons some room to breath

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.

We recommend that icons have at least half their size of white space surrounding them.

❌ Don't

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.

✅ Do

Allow icons room to breathe by giving them at least half their size in padding. If the icon's details are lost, consider swapping the icon to a simpler one. Another simple trick for a clean look is to start with way too much white space, then slowly decreasing it until you think it looks just right.

#8: Use labels to clarify icons

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.

❌ Don't

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"?)

✅ Do

Use labels to clarify icons. The only valid reason for not using labels is that you risk cluttering the UI. Also, use conventional icons as much as possible. Use Google to find the most widely used icon for your specific use case (when it is not unique to our product). Let's say you want an icon for "launching an application", google "launch icon" and you should have a rough idea of what to use. Let's say you want an icon for "launching an application". Go to Google and type "launch icon", and you should see many commonly used icons and get an idea of what to use.