Designing Icons for User Interfaces

Originally published on Medium · 10 min read

Have you ever stared at your keyboard and wondered how your brain could recognize and associate actions with the vast array of glyphs? Or how all of the icons on Apple products, even though they represent the same thing, look different from icons on Google products? Are you a designer who was just tasked with creating a new icon for an existing icon family and doesn't know where to start? Well then, you're in luck. We'll be covering all of those things and more.

In this article, we'll be dissecting how icons work, why icons are useful in user interface design, a few myths surrounding icons and usability, and how to effectively create and validate an icon design.

How icons work

User interface (UI) icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.

UI icons employ visual metaphors to speed comprehension by transferring properties from something we already understand. UI icons are typically created on a square (1:1) canvas and follow a strict set of rules to ensure consistency. Illustrations, on the other hand, also use visual metaphors to accomplish a similar goal. However, they often tend to be more free-form in visual representation and don't always follow the strict rules that icons adhere to.

In some cases, the metaphor is literal. The alarm icon in the Carbon Design System, created by IBM, for example, represents a classic mechanical alarm clock with bells, carrying over functionality we'd expect — it rings to wake us up on time.

Sometimes, the metaphor is a little outdated but understandable through repeated use. In the early days of personal computing, we used floppy disks to save and back up our files. Though we don't use this technology anymore, many applications still use a floppy disk icon to indicate a save action.

Other times, the metaphor is a little more abstract. The shuffle icon and the undo icon communicate their meaning through the implied movement of the arrows.

Using icons in user interfaces

Icons can enhance a user's ability to complete tasks successfully. Specifically, icons can:

• Create a common visual language that effectively bridges language gaps.
• Improve a design's visual interest and help direct a user's attention.
• Provide functionality and feedback — imagine a video player with the words "play" and "pause" compared to the icons currently used.
• Enable us to communicate an idea quickly.
• Support the notion of a product family by providing another medium for the brand identity to be expressed.

UX myth: icons can enhance usability

According to the Nielsen Norman Group, a user's understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity.

Research has shown icons are hard to memorize and are often highly inefficient. In most projects, icons are formidable to get right and need a lot of testing. When it comes to representing complex or abstract concepts, icons rarely work well.

UX Myths, a blog that collects the most frequent user experience misconceptions and explains why they don't hold true, curated a list of studies and articles on the claim that "icons can enhance usability." A few highlights:

• UIE conducted two experiments to test how users use icons. They first changed the pictures of icons in a toolbar but kept them in the same location — users quickly adapted to the change. Afterward, they kept the images but shuffled their location in the toolbar. This change confused users, slowed them down, and in several cases, they could not complete common tasks.
• Michael Zuschlag argues that icons, contrary to intuition, do not necessarily help the user find a menu item better than a text label alone — "it's not worth it."
• The former icon-only toolbar in Microsoft Outlook had poor usability, and changing the icons or their positioning didn't help much. Introducing text labels next to the icons immediately fixed the usability issues, and users started to use the toolbar. Another test revealed people remember a button's position instead of the graphic interpretation of the function.
• A user's understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate meaning and reduce ambiguity.
• In the battle of clarity between icons and labels, labels always win.

When in doubt, remember this: the best icon is a text label.

Don Norman has made a similar point about Apple's devices: inscrutable icons litter their surfaces even though research has long demonstrated that people cannot remember the meaning of more than a small number of icons. Icon plus label is superior to icon alone or label alone — who can remember what each icon means? In a related study, the team at UIE observed that people remember a button's position instead of the graphic interpretation of the function.

UX Myths presents several more findings along these lines, all repeating the same sentiment. Although icon usage is not likely to substantially impact your product's usability, it can help provide a better user experience.

Icon grids

There are always clear, established rules for consistent but flexible positioning of graphic elements within an icon family. These rules usually take the form of an icon grid, which delineates the icon's dimensions, the underlying pixel grid, and the key gridlines — or keylines — to follow.

Icon grids are composed of five elements: the pixel grid, keylines and keyshapes, the orthogonal, the mask, and the safe/trim area.

Pixel grid

Pixel grids help you draw in specific increments if you are snapping to a grid. A 1px increment has been the digital standard for some time now. However, because of improvements to screen resolutions, subpixel hinting, and anti-aliasing, a half-pixel increment has recently become more frequently adopted. Pixel-snapping helps render icons sharp on lower-resolution screens, but it has become less critical as hardware rendering has improved.

Keylines and keyshapes

Keylines are used to vertically or horizontally align lines and shapes in the icon grid. Drawing along an icon grid's keylines helps ensure visual consistency in an icon set.

Keyshapes provide template shapes to start from. Four basics are standard: a landscape rectangle, a circle, a portrait rectangle, and a square. IBM's Carbon Design System uses these four keyshapes to draw icons for email, next, hourglass, and calendar.

You can think of keyshapes as a starter kit, providing just enough to set the standard while leaving room for flexibility and creativity. The intention isn't for every icon to map perfectly to a basic shape, but rather to build a place to start and drive consistency.

Orthogonal

Orthogonal is a term derived from mathematics, meaning "at right angles." It's related to orthogonal projection, another method of drawing three-dimensional objects. In the context of icon grids, orthogonal refers to the keylines that intersect the icon's center point and create additional vertices to use. These lines commonly slice the canvas at 90° and 45°. When different angles are needed, increments of 15° and 5° are usually the next steps.

Mask

A mask customizes the container of an icon from the default square canvas. Masks may be embedded in the asset itself or applied afterward using CSS styling — Apple's App Store, for instance, applies a rounded rectangle mask across all its icons, including third-party ones like Spotify's.

Safe/trim area

The safe area, or live area, shows where the icon's important content should live, while the inverse — the trim area — shows the area to avoid. In some cases, the safe area is more of a suggestion, but it becomes strict when the content will be cropped.

Optics over grids

A quick word of advice for icon grids: as with any grid, they're meant to be used as guides, not hard rules. Drop them when they stop working for you, and always check for optical balance. A common example is a curve that doesn't quite match up with its circle keyshape — it's often necessary to deviate from the grid for visual balance. Follow what looks optically right, not strict metric values.

Implementing icons in a user interface

Context is everything when it comes to icon design. Start with the user and where they'll encounter the icon. Reference user personas, demographic information, and so on as your contextual starting point. What language do they speak? What countries do they come from? What accessibility considerations are involved? Will they view the icon on their phone or on a highway sign?

Like most tasks associated with user experience design, creating a high-quality icon requires a thoughtful approach, a trained eye, a bit of iteration, and a lot of practice.

A good process for designing icons starts with quick thumbnail sketches. It's essential to generate as many as possible within a short period — it's helpful to timebox these things, so start by generating 20 thumbnails and spend no longer than a minute on each.

Then, choose three of those sketches that best communicate the idea and product brand. Next, sketch at least five adaptations of each thumbnail idea selected, spending no more than five minutes on each sketch.

With these 15 or so new sketches, pick — or consult with another designer to get a second opinion on — the top three ideas from the group. Redraw these ideas to work within the product's icon grid. At this stage, utilizing keylines and keyshapes helps ensure your sketches work visually within the icon set.

Brand alignment

Finally, it's optimal if icons fit nicely into the design and enhance the aesthetics rather than working against them. Evaluate your icon designs against your company's brand guidelines — does this aesthetic align with your brand's personality and tone? The aesthetic appeal can also be tested via a preference test, which heavily depends on your audience's opinions and tastes.

Validating icons

Now, with these refined compositions, it's time to evaluate whether users understand the new icon. Here's a list of key attributes you can test for, with some questions a user might ask of an interface like a file manager.

Findability. First, your user has to be able to find the icon in your design. ("How do I delete this file? Where's the delete button?") Both the navigation test and the first-click test are great for testing findability, and it's critical to measure it in-context — the rest of the interface is an integral part of how a user finds an icon, so testing without it makes it hard to get accurate findability data.

Recognizability. Second, your user has to identify the form of the icon — be it a real-world object like a floppy disk or a metaphorical device like an arrow or network node. ("Is this icon a trash can or a cup of tea?")

Comprehensibility. Next, a user must be able to interpret the functionality the icon is shorthand for — can they quickly determine what the icon does, rather than what it is? ("Does a trash can mean I'm deleting this forever, or can I recover it later?")

Recognizability and comprehensibility can be tested in a variety of ways:

• Design surveys give you unstructured, free-text feedback from participants.
• Five-second tests measure how memorable the icon is.
• Preference tests help you discover the icon that's the most understandable to participants.
• First-click or navigation tests give you a view of the icon's overall performance.

Further learning

This guide provides a general outline of the topic, so I'd encourage exploring it further. A few places to start: Material Design's icon principles, Slava Shestopalov's writing on optical effects in user interfaces, Material System Icons, the Apple Human Interface Guidelines, and IBM's Carbon Design System icon guidelines.

Sources

• Nielsen Norman Group, "Icon Usability."
• Material Design, Android icon guidelines and system icon guidelines.
• IBM Carbon Design System, icon guidelines.
• UX Myths, "Icons Enhance Usability."