Iconography – Fundamentals

7 Ways To Make A Great Icon

Great design foundations include icons. Inconsistent or unaligned icons can frequently confuse users, leading to errors, abandonment, or frustration. Additionally, there is an accessibility requirement to consider. If an icon is overly complex or improperly labeled, it may fail to comply with accessibility standards.

1

Clarity

Communicate the

concept quickly

2

Readable

Make sure it is

readable

3

ALIGNMENT

It should have a

balance

4

CONCISE

Keep the design

simple

5

CONSISTENT

Keep the similar visual

treatment

6

Themeable

Allow the icon to have

different style

7

EASE OF USE

Create flexibility in size

and code

So Many Icons!

Icons are a crucial component of great design foundations. Users can frequently become confused, frustrated, or abandon tasks when confronted with inconsistent or unaligned icons. Furthermore, it is essential to consider accessibility requirements. If an icon is overly complex or lacks proper labeling, it can fail to comply with accessibility standards.

Why You Need Alignment With Icons

PROBLEM: There can be different interactions for the same icon and different icons for the same interactions. Both create a lack of consistency and can disrupt the customer’s experience.

SOLUTION: Align with both interaction and the icon at the top level so that you keep the affordances and design consistent across all funnels.

Setting Up A Universal Library

Creating a universal library is one of the ways you can start from the top. The challenges with keeping both interactions, intentions, and designs in check are knowing which group or team is creating them and oftentimes if they aren’t pulling from a centralized library or reviewing as a collective which leads to variances in tone and design when they should be the same.

Icon Theming

Universal icons in an evergreen set are available as both a fill and outline.

From here the icons can be themed to work with branding/platform/channel for the experience needed. The primary changes available are the following:

• Color
• Shape
• Backgrounds

Scrutinize additional customizations that change the icon’s primary intention.

Universal Icon Library

The location of your library is not specific but Figma, XD, or Sketch is a great tool to utilize. IFigma is utilized in this example.

Creating a centralized location with the same style, color, and enacts as a source of truth when an icon is used on multiple platforms and themes.

Governance

At this point is also critical to set up governance to manage and maintain the icon library. It is recommended that there are a limited amount of creators making icons to avoid multiple styles of designs being created in a silo.

A strong workflow and handoff process can also serve as a way to verify a new icon needs to be created, edited, or added to a design.

Icon Features And Functions

Now that icons have been designated to being part of a universal library and governance has been defined. Another part of establishing a strong icon library is defining icons by their function and status. This topic will be discussed further in a later article. For now, at a high level, there are 3 main functions for icons: Functional, Helper, and Illustrative. Followed by: Universal, Conflicting, and Unique. Depending on the outcome of the icon will determine the usage, commonality, and need for additional contexts like labels or text.

Reference Article: https://www.smashingmagazine.com/2016/10/icons-as-part-of-a-great-user-experience/