Icon Design: Mastering a 32×32 Pixel Universe

Black Ink recently undertook an exciting branding project for a client. It involved taking a client’s existing brand identity – one in need of a significant rework – and determining how to make incremental change, without first addressing an existing, outdated logo, to something that would enhance corporate positioning, elevate the overall visual experience, communicate the value proposition and seamlessly integrate with a future, planned revamp of the existing brand identity.

We evaluated the client’s existing materials, planned future assignments and timelines, and available brand real estate (website, email campaigns, newsletters, flyers, brochures, presentations). Working with the client, we pinpointed the firm’s target market segments and demand triggers, positioning, and messaging we needed to convey to each market. BI then synthesized the brand promise down to three words as a framework for developing the client’s brand voice and vocabulary. We recommended designing an icon suite for the client that would instantly, visually provide context for the brand. And then we boiled our three words down to convey those thoughts in a 32px by 32px space.

The Power of Small

In 2020, telling a client’s core brand story includes expressing it clearly, succinctly, in increasingly small spaces. Iconography refers to the images and symbols on signage, websites, and across all marketing collateral materials, etc., anywhere a short brand cue can reinforce or advance a brand presence. When used correctly, icons are a highly effective way to convey big ideas without using a single word.

That small space – realistically 30px by 30px, so we have a 2px to provide visual breathing room – needs to capture the viewer’s attention and contribute to the telling and understanding of a brand and its experience. Well designed icons exhibit a methodical, deliberate approach to the three primary attributes making up any icon design: form, aesthetic unity, and recognition. Whether creating an original or reworking a new icon set, we approach each of attribute in an iterative approach, starting with its general (form) and proceeding to the specific (recognizability). Even if the assignment is creating a single icon, these three attributes are still implied and extrapolated.

Undoubtedly, more goes into it than three attributes to make up effective icon design, but the three elaborated below are where we typically loop in clients for scrum-style feedback to keep projects on track.

FORM

Form is the underlying structure of the icon. Everything comes down to a square, a circle, a horizontal or vertical rectangle, a triangle, or something more organic, with foundational geometric shapes — circle, square, and triangle — creating a visually stable foundation for icon design. We started by sketching simple shapes, layering in greater detail as we refined. We achieve design success – and balance – when there remains only as much detail as is needed to communicate the concept presented – be it an object, idea, or action. Design truly is complete, not when there is nothing else to add, but when there is nothing more to take away.

AESTHETIC UNITY

Elements shared within a single icon and across an icon set are bound together visually through an inherent aesthetic unity. These elements are rounded or square corners; the specific size of corners; angle degrees; limited and consistent line weights; overall style (flat, line, filled line, or glyph). The set’s aesthetic unity is the collection of design elements and/or choices repeated throughout visually tying it together as a cohesive whole. We worked with the client to determine initial parameters – a unifying shape, orientation, weight, and overall style. That led us to develop conceptual work in black and white (because if it doesn’t work in black and white, color only compounds its flaws), then creating color palettes and other treatments.

RECOGNIZABILITY

The main function of an icon is in its recognizability – what makes it unique. Whether an icon fulfills its purpose ultimately rests on how easily the viewer comprehends the object, idea or thought, or action it depicts. Recognizability includes showing the properties the viewer commonly associates with that idea, but it can also add unique or unexpected elements. Recognizability refers not only to the comprehension of the object, thought, or action depicted but also to the totality of an icon set. Aesthetic unity and recognition very often overlap.

Part of an icon form is its general shape and orientation. If we draw a line around the outside edges of an icon — a bounding box — the resultant shape will generally reveal as a square, circle, triangle, horizontal rectangle, vertical rectangle, or diagonal rectangle.

Circular icons are centered in the grid and usually touch all four of the content area’s outermost edges, without pushing out into that 2px “no-go” zone. We may choose to bend the rule and extend an accent or minor design element into that area – our “negative space.” It can enhance the overall effect, increase visual impact, and highlight our messaging just by breaking through the rigidity of the boundaries of even this tiny space while maintaining design integrity.

This project started with a suite of three brand icons for the client; it has now grown to five, appearing throughout the client’s brand real estate. We’ll likely add more as the client introduces additional services. And someday in the not-too-distant-future, we’ll start in on that logo revamp. Sketchbooks at the ready; pencils sharpened!

Need assistance orienting your brand identity and components? Contact Black Ink for assistance. We’ve partnered with dozens of micro-, small- and medium sized businesses to originate or overhaul brand presentation. An internally and externally balanced, functional, and authentic brand is mission critical to a businesses’ success. And yes, we have been known to start designing on a napkin …