Iconset design

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 iconset design work. But relying on stock icons 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.

A big part of our attack plan when we’re starting an 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 icon or illustration could elevate the experience.

In a couple days, we figured out an itemized list of every icon or 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).

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 24×24 pixel grid. But other multiples of 8 are pretty common, from 8×8 up to 64×64 or more (though that often infringes on spot illustration territory).

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 iconset design 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.