Hi there! I'm Noah, longtime MetaLab blog reader, first-time writer. I started out in product design before carving out a niche for myself as the team's very first Design Specialist. I typically stick with iconography & illustration these days.

Why am I talking about icons, exactly? Icons are like microcosms of a product or a brand. Through what they depict and how they depict it, you can glean a lot about a product, how it functions, and how interacting with it might make you feel.

So, what is an icon? And what are the icon basics?

There’s a lot of interpretations of the word icon floating out there in the design world, but the most helpful for our purposes comes from illustrator extraordinaire Meg Robichaud:

"An icon is a symbol … representing a larger idea. It’s one of those things that you shouldn’t notice when it’s done really well, but always notice when it’s done poorly (which is a lot of the time). Above all else, an icon should be something you can easily interact with. It should be intuitive. It should concisely capture the idea that it represents."

Of course, this can cover a lot of ground, so in the interest of time (and our considerable workloads) we’ll just be focusing on UI icons in a mobile product. But this is also where you can really let an app’s personality shine!

And a fantastic opportunity to do just that arose earlier this year with Indigo, a fast-growing startup that brings Silicon Valley tech into the world of agriculture. Their existing marketplace connects farmers and buyers, and we partnered with them to expand that experience to mobile.

Groundwork

Why icons matter

So why isn’t more care given to icons? A lot of products treat them as an afterthought (if they're thought about at all), and sometimes don't change at all from wireframes through final deliverables. Now not every project calls for custom icon work. But relying on a stock icon library is the same as relying on stock photography; it might functionally do the job, but it’s generic, unownable, and doesn’t speak to a brand/product’s particular strengths & quirks. And we quickly learned that in the farming and agriculture space, well-made and cohesive icon sets are hard to come by.

If you're trying to sell the idea of custom iconography to a stakeholder, here are a few more concrete rationales you can provide:

• The set you have isn’t extensive enough or expandable (e.g. missing or inconsistent rules)
• The product is using uncommon or new visual metaphors. Maybe it’s workflow-heavy and has some tool functionality that hasn’t been represented before.
• There are some funky UI or typography choices that should be paired & reflected in the iconography

Strategy & tone

Laying out a baseline strategy with Indigo and our internal project team was vital to hitting the ground running. The sooner you can develop a shared language of what you’re trying to say and how to say it, the fewer frustrations you’ll run into later.

A big part of our attack plan when we’re starting new icon work is performing a comprehensive audit. An audit is the process of going through the product to figure out what it needs, and identifying potential areas where product icon or illustration could elevate the experience.

In a couple days, we figured out an itemized list of every icon/illustration opportunity. Each entry included the existing icon location, function within the UI, metaphor/style notes, target resolution(s), priority, and other considerations (like active states).

Visual metaphors

Once we knew what we were dealing with, we set to task figuring out how to make this product stand out — how might we design iconography that not only differentiates Indigo but also supports its users?

For inspiration, let’s look at a couple good examples of thoughtful & specific approaches in their respective spaces: Twitter (though Twitterrific did it better first) and Spotify:

Twitter puts a fun spin on the ubiquitous home icon by rendering it as a jaunty birdhouse. And through the use of just three simple lines, Spotify suggests the old cubby shelves in your parents’ basement full of vinyl records.

For Indigo, various farming imagery naturally came to the forefront, but we limited it to some high impact areas like tab bars and onboarding. The users know what they’re doing—they don't need hay bales and irrigation equipment shoved in their faces from all quarters.

Figuring out metaphors can be an ongoing process, and usually dovetails (if not entirely overlaps) with ideation. Everybody’s got their own way to muddle through this;  when I’m starting a set from scratch, I try to draw as much as I can on paper to get my thoughts out.

Your mileage may vary with this, of course. Sometimes, I dive right into the computer if the style is already pretty well-established or I’m expanding an existing set that already has rules.

Style

“The start of any design project is overwhelming, and finding restrictions to impose on yourself can focus your attention and lead to more creative solutions. By considering an icon’s context, you’re immediately able to tick off a number of decisions and direct your focus accordingly.”

‍Designer Alex Griendling is right. One of the things I hear most often about icon design is “That sounds miserable. There’s so little space!” And while the second half of that sentiment is true, embracing the inherent constraints can simultaneously do a lot of work for you, and free up your mind for new ideas.

Imposing limitations on yourself is one of the most valuable things you can do in icon design (or most design, for that matter). Not only will it save a lot of headaches down the road if you understand and plan for them, but it allows creativity to flourish once you've narrowed your scope.

Beginning with a set of aesthetic rules is a great place to start—so, on Indigo, we did.

Imposing limitations on yourself is one of the most valuable things you can do in icon design (or most design, for that matter).

Grid

The skeleton of every icon set is its underlying grid system. You’re probably aware of Google’s Material Icons, which are built on a 24x24 pixel grid. But other multiples of 8 are pretty common, from 8x8 up to 64x64 or more (though that often infringes on spot illustration territory).

For Indigo, we actually used four different grids:

• 48px for spots
• 32px for the tab bar
• 24px for more basic utility icons
• 16px for small indicators.

Visual balance

A discussion about icons wouldn't be complete without mentioning keylines. Keylines are guides that help keep icon sets visually balanced, regardless of the orientation of their component parts.

Most icons are based on a handful of core silhouettes: squares, circles, vertical rectangles, and horizontal rectangles. There are, of course, variants on all of these; but keylines help keep your icons balanced when seen and used together.

For a quick example, let's take a look at a circle and square. Your first instinct might be to make their dimensions the same.

But we're dealing more with visual area here than with exact exterior dimensions—iconography is a lot like typography letter spacing in this way. At their target size and placement, how will these two geometric shapes stack up? The square will invariably feel heavier because its geometric area is larger. A quick way to test this is to add a blur to your icons, or un-focus your eyes.

So we used keylines to find something a little more balanced:

When dealing with different shapes at such a small scale, shaving off a couple of pixels can make a big difference! These are just basic shape guidelines, of course, but they can provide a good foundation for icon consistency.

Now let’s take a look at how those shapes translated into some glyphs for Indigo:

Keeping those base shapes in mind is important, since using a good mix of them (especially in persistent elements like tab bars) helps users cut down on cognitive load and understand them more quickly.

We could write a whole separate blog post just on accessibility best practices when it comes to icons (and we will!), but for now let’s continue on with the mechanics.

Level of detail

Before we get too nitty-gritty, level of detail is one area where a lot of icon designers stumble (myself included). It’s very tempting to cram as much content as you can into the space, especially if you’re working at an enlarged icon size and without surrounding screen context. It's always easier to add elements than remove them, so err on the side of simplicity, and constantly check icons against their intended context.

For example, this icon looks pretty good if you’re working at a blown-up size like a lot of folks do. But when you double-check it against its intended target context (12px in this case), things can get pretty muddy and illegible quickly when adjusting to different sizes.

Designing for the smallest size and scaling up, though, opens a wide range of possibilities. As the size increases, the potential for added detail and styling increases as well. This is not only a way to inject more brand personality, but can also perform double-duty as both icons and spot illustrations.

Since Indigo is a product that a lot of folks would be using outside in bright sunlight, we opted to trim and keep our icons as clear and as open as possible.

Rules & consistency

Time to get granular. There are a few essential things to consider when building a set or checking for inconsistencies:

Element size

It can be helpful to start with whatever the smallest element in your icon needs to be, and add detail from there. Cramming more elements in is always tempting, but rarely pays off. For example, I know that I want a dollar sign on this price tag, so I start there, get the stroke vertices where I want them on the grid for legibility, then build the tag around it.

Dimension & perspective

Should your icons have dimension or perspective baked in? It's something that can definitely set them apart, but make sure the treatment is spread around consistently. If you’re doing a side view forced perspective to show an open file folder, think about how that impacts the entire set. Again, we leaned toward flat icons for legibility and expandability.

Overlaps

Speaking of depth, you can’t always communicate complex concepts with singular elements or objects. A lot of icons rely on juxtaposing two or more elements together, sometimes even on top of each other. Do elements fit snugly together? Is there a stroke break for extra impact? Maybe elements further back are a different color or fill? Ask yourself these questions before you consider an icon done.

Strokes, corners, & terminals

Nothing makes an icon stick out like a sore thumb more than mismatched corner treatments and stroke weight. They shine like a beacon from a mile away and say “We don’t belong here!” Very small changes can make a big difference, and can vastly influence an icon set’s character and cohesion.

You probably noticed by now we used 1.5px strokes for Indigo. This was to reinforce of sense of lightness in a very info-heavy interface, and to reflect some typographic choices. If you’re guaranteed that your icons’ context won’t include low-density displays (like on desktop web, where where some folks have older monitors), then you’ve got more wiggle room when it comes to stroke weights. But since we knew these would be used exclusively on mobile, exact grid alignment wasn't as necessary to legibility.

That may be where we landed, but we did some exploration & testing before arriving there. Check out how some minor differences can change the vibe of the entire set:

Color & states

This is a big one, not just from an accessibility or active/inactive standpoint, but also as a way to make your icons distinct from other, run-of-the-mill sets. One color is classic and easy to implement, and this is the route we took on the tab bar icons for Indigo. We played around with some complicated, duotone treatments but simplicity and legibility won out in the end. We did use filled states for active tab bar icons though—going above and beyond simple color shifts to help users know where exactly they are in the product.

Documentation

Writing down your new rules help make sense of your icons for yourself, but they're an absolute must if you're shipping an MVP set that will need to be expanded upon later. Since you probably can’t guarantee that you will be helming that ship, guidelines are critical to setting up clients or another team for success.

If you have rules, you can also determine when it’s appropriate to bend or break them. (Make sure you document that too, along with your reasons why).

That's all, folks! For now, anyway...

While by no means is this an exhaustive list of pointers, what we did for Indigo might help set you up for success in your next icon project!

However, the mechanics of form and style are just the tip of the iceberg. Always remember that UI icons like these are just that: UI. They have a functional job to do within the larger product—and if overly-styled fanciness or obtuse metaphors get in the way of that job, then they've failed.

Clear beats clever every single time.

For those of you that want to dig into icons further, you can check out my Figma worksheet, which most of this material is based on.