How we designed a bespoke set of icons for our product

Design’s the limit

The year is 2023 and Design is a well-oiled machine. Folks nowadays recognize its importance across all aspects of their lives: from the roads we drive to the Earth-friendly packaging of consumers goods and even down to the smallest of designable objects. Design is palpable.

In this case, we’re talking about the design of icons. Sometimes up to 64×64px or even 128×128px and sometimes as small as just 16×16px.

Icons are shorthand for ideas. They are only support. Verbal labels and descriptions are paramount. There is a world where icons do not exist: they are only a flavor to help visually diversify physical and digital interfaces.

So we decided to redesign our internal icons, to rewrite our visual support language around verbal labels in the Census product.

We’ve redesigned our internal icon set.  But why?

We were previously using cherry-picked icons from either Font Awesome and Phosphor. Both work fine in isolation, both have a breadth of styles and shapes, both (either!) could have done the job. But the fact we used both was a fault. And opened the door to explore something custom.

Not every action (verb) in the Census product was represented by out-of-the-box icons. Of course “home” can universally use a house icon. Or, “settings” can use a gear or cog wheel. But in several instances within Census we needed a custom solution. How do you represent “sync data” or “data model” or “data entities”? These abstract concepts are more difficult to nail down than a noun or verb.

Process

But first we needed to assess and understand how the Census brand might approach this problem. Around the time of kickstarting this project, our Census Design team got together in Raleigh, NC — so we used our time together to brainstorm.

We leaned into our brand keywords as influence on design: Trusted (Analytical), Bold (Energetic), and Savvy (Idealistic). We also backed this up with a newer set of Design Ethos guidelines:

  • Simple — Uncluttered, straightforward, understandable
  • Reliable — Consistent, clear, precise
  • Sticky — Unexpected, emotional (positive)
  • Delightful — Surprising, enjoyable, refreshing

We also wanted our custom icons to feel custom, to feel unique to Census and our interface while also not being showy or getting the way. Again, the whole point of an icon is creating a mental shorthand, a signifier.

The rough drafts looked a little like this:

Result

We ended up with a core set of ten icons to be used in the primary left-side navigation. Now we can finally showcase “sync” with a unique-yet-familiar icon of parallel arrows; we can talk about “entities” with our own icons (using our own visual language). The system is coherent.

An additional 24 icons have been designed to support the broader design system.

Here is an incriminating close up of the pixel grid.

It was an early goal that the entire icon set work well with our primary brand font, Gratimo Grotesk. Remember, all icons should (were possible) be paired with their verbal descriptor for ease and accessibility.

These icons can now be used as navigational and wayfinding support within the product (above) as well as reinforced in marketing (below)

What’s next?

Of course, there will be general maintenance as these go live in the product. We’ll want to make sure alignment and scale function as intended and edit as necessary. And of course, we’ll add icons as our product features extend.

View the icons in situ and follow along at getcensus.com.

Onward!

Credits
Matt Yow
Brand