Designing Icon Systems

The definition for icon is “a sign or representation that stands for its object by virtue of a resemblance or analogy to it.” I’d cosign with that explanation and further define an icon system as a series of these signs or representations that are bound by a common visual thread, or a motif, as I like to call it. The icon systems we design at Cuberis serve a unique purpose to the sites in which they exist. Sometimes, they are strictly functional (hamburger menu, search icon, CTA arrow). Sometimes they are used as graphics. It all depends on the goals of the icon system, which are usually one or more of the following:

    • to enhance a user’s comprehension of a concept (with or without text labels)
    • to unify a section of content and establish its sovereignty amongst its peers
    • to provide another method of visual interest, enhancing and further defining the voice of the brand
Icon Set designed for the nonprofit, Triangle Community Foundation
Our client Triangle Community Foundation focused their attention on 4 specific areas of social improvement. This icon set was designed to unify, celebrate, and differentiate those focus areas.

My process

It’s important to remember that the purpose of design is to solve a problem, and designing an icon set is no exception. When I start designing an icon system, the first thing I do is get a list together of all the items I’ll be designing for. From there, I look over the list to find something that inspires me. I then take to pencil and paper and sketch until I have something that feels right, and then use that as a springboard for the remainder of the set.

Once I’ve gotten my concepts down on paper, I bring them to life digitally. In the first stages of digital execution, I keep things in black and white. Color can be a distraction in the early stages of icon development, so it’s not until I have a solid concept (that I’ve vetted through my team for appearance and UX considerations) that I move on to color exploration. From there it’s about viewing the icons within the context of a larger design piece and fine-tuning until I have something I feel is client-ready.

Developing an icon system is an in-depth and non-linear process that, when done effectively, can present value to website visitors in a unique, and natural way. And let’s not forget, when done right, they look pretty awesome, too.

Are you a fan of icons? How do you use them on your website? Tweet us @Cuberis!