Icons are the elements that add both form and function to your UI designs when used properly. When used correctly, UI icons can speed up user interactions by being immediately recognizable, and they can also add style and visual interest to your user interface designs.

Using icons doesn’t need to be complicated. Even a couple of well-placed icons can improve your user experience when done correctly. Check out these iconography tips and best practices before implementing them in your next UI design.

Things Go Bad with Icons

1. The visuals already have a different, suspended meaning. A star icon, for example, for rating and booking, not for viewing “presentation templates.” The Internet Explorer icon means “to launch Internet Explorer,” not “to open a list of web links.”
2. References are very esoteric and require a lot of thought. A rocket image may cause the user to periodically jump from “rocket” to “launch” to “app”, as in launching applications. Just as a bull’s eye with a sharp arrow in the middle can combine “target” and then “hit the target” and “hit the target to earn money” in the end, savings and retirement. But most users do not want to solve the puzzle to understand the icon.
3. It is assumed that some intranet groups do not have the staff image-makers or the appropriate software, some icons are produced by substandard tools and thus look like characters, blurred, and difficult to render.
   The icon is repeated for everything in the list. Why add a silhouette icon next to every user to the word list, when the list only contains words and nothing else? Why add a small chain icon to each link list link? Why add a paper icon next to each document in the list of documents?
4. Thumbnails only serve as a set. Users should not read all of the set icons to determine the meaning of each icon.

Cost of Poorly Designed Icons

If the plan is to always have a label with every icon, then why is a bad icon dangerous? After all, the label will be there to clarify its meaning, right?

That’s not right. Thumbnails are free, and not all links on your intranet are appropriate for the thumbnail. Each of the following thumbnails has financial costs, transaction costs, and related opportunity costs:

1. Design and research: Icons do not simply appear in the air. Unlike adding a text link, someone with graphic-design skills needs to create them. They are compiled, drafted, tested for usability, and duplicated.
2. Upgrade and support: Once created, they still need to be coded, quality tested (usability-tested), supported, and sometimes written down. This can be a lot more work than using a text link.
3. Screen real estate: Thumbnails take up more space on the screen than just text links. The space used means that one part of the UI may be forced under wraps, on another page, or must be completely removed.
4. Information processing: Thumbnails may add visual effects. While nice icons can help, poor icons add clutter, and some are hard to understand.

The benefit the icon offers should be greater than the costs of having it.

Benefits of Perfectly Designed Icons

There are many ways in which intranet icons can help employees. Some of these include the following:
Quick Recognition: A common or memorable icon may convey meaning immediately — sometimes beyond a text link.

1. Availability: When people learn what action is associated with a given icon, the presence of an icon can provide an opportunity for other users to get commands faster and more effectively with repetitive tasks. However, we recommend that you include the text label on all thumbnails, especially to ensure that all commands are understandable even if the image is not visible to every user. Since the text label is always available, will the icon provide any additional benefits? Answer that question before deciding to add an icon
2. Easy-to-find targets: Targets that combine both a word and an icon are larger than the target targets that are just a word or an icon. These larger terms are easier to click and tap than the smaller ones.
3. Strengthening the brand and style: Icons that comply with product guidelines enhance the intranet-style of beauty. (Links and buttons without icons can do the same, with color, style, shape, font, and color.) Remember that a good icon should be visible, readily available, and memorable.

There are some of the tips a designer can use to make sure the icons are perfectly designed, some of them are common but making sure all of the points are checked while designing icon is critical.

1. Keep icons simple

Don’t overcomplicate your icon designs. Keep them as simple as possible, especially at smaller sizes. The best icons are simple shapes and pictograms that users can instantly identify.

2. Make them recognizable

Icons should be immediately recognizable. If users are left wondering what an icon means, it defeats their purpose. Don’t leave users wondering what an icon is supposed to be, as that will only lead to them wondering what the icon’s purpose is, harming the overall user experience.

3. Give Icons meaning

The images used for icons should have meaning that’s easily understood. The meaning should be directly tied to the function of the icon, such as a house icon for the home page. While metaphors are sometimes easily deciphered by users, more literal icons are generally faster to recognize.

4. Make sure they are scalable

Icons are often used in small sizes, but you may occasionally find use cases where you want to use larger versions (or even smaller ones). For that reason, make sure that your icons look good regardless of the size they’re displayed at. You can use progressively more complex icons as the size gets larger, but make sure that you don’t let them get too complicated.

5. Make Icons accessible

If you’re not using text labels to accompany your icons, be sure that you implement proper alt tags so that their functionality is still accessible to people using screen readers.

Along a similar line, be sure that your icons have enough contrast and are sufficiently sized to be accessible. You should also make sure that touch targets around icons are sufficient for users who might have fine motor control issues to still tap the intended area.

6. Be careful with color

As a general rule of thumb, icons should be a single color. Furthermore, don’t use different colors for each of your icons unless it directly contributes to making them more usable. In most cases, you might use a different color to indicate an active icon, while the rest are another color.

7. Always use vectors

When creating custom icons, you should always create them in a vector image format. This way, they can be easily scaled without losing clarity or crispness. When saving them for use in digital products, the SVG file type is the best choice as it preserves the scalability of the icon as well as transparency.

The next best alternative to SVG is to save them as lossless PNG files, as they’ll retain transparency and the quality won’t deteriorate.

8. Keep icons uniform

When using an icon set, all icons should be uniform in style and size. Using icons that don’t have a consistent style will confuse users and make your interface look messy. Using icons that aren’t the same size will have a similar effect.

Conclusion

Icons can help users recognize and recall commands. But, a set of links with icons of inconsistent quality will confuse employees and waste their time. Better to either brainstorm, research, and design a set of usable icons, or just use clear text links and no icons at all.