Crafting custom icons that balance form and function

The best icons are unambiguous and unmistakable, ones that any user will immediately recognize and understand. But the best custom icons are ones that harness those universal visual totems, and tweak them just enough so that they carry a new connotation without losing their original meaning.

Take Twitter’s iconography for instance. The social media giant uses standard signifiers for elements like the “home” tab and the “write tweet” function, but baked in their own branding to align them with the larger user experience. The universal home icon is spun into a birdhouse, the traditional pencil becomes a feathered quill.

While convention versus creativity is an ever-present struggle for the UX designer, rarely is the boundary blurred as it is for custom iconography. To help, Codal’s UI design team has compiled a few guidelines for crafting custom icons that perfectly balance form and function.

Why custom icons?

But before we dive into the best practices and strategies for custom icons, let’s stop to ask why we even need them. As I’ve said, icons work best when they’re conventional and unambiguous. Why not simply stick to traditional icons that are universally known? Why risk ambiguity and user confusion when a clarifying text label will suffice?

“Successful custom icons can have a tangible effect on a platform’s user experience.”

Besides the benefits provided by all icons, such as quick, non-exhaustive communication and compact screen real estate, custom icons offer another layer to the user experience that a cookie cutter icon set can’t achieve.

Custom icons are not just more attention-grabbing and visually interesting, they also can help both differentiate and reinforce a brand. Creative imagery (in small doses) gives brands a distinct look and feel, making it easier to cut through the oversaturated digital market.

Build upon a visual foundation

Expertly designed custom icons need to extend a platform’s pre-existing look and feel, ultimately creating a more holistic user experience. For brands with well-established interfaces and design standards, it’s likely this pre-existing foundation is readily available to use as a jumping off point If you’re designing for a fledgling startup or are overhauling a company’s entire branding, you may have to establish it yourself.

The UX design agency I work for, Codal, recently performed such a branding overhaul for Contap, a social and professional networking company. Looking to retool the logo, UI, and craft a custom icon set, there wasn’t much of an established visual foundation—it needed to built from scratch. In situations like these, inspiration can be drawn from the philosophy of the company, or the function of the platform itself.

As a mobile app centered around the exchanging contact information through geolocation, the redesigned logo mimicked radar signal, expanding in an outward circle that doubled as the letter C for Contap.

This circular design became the foundation for the rest of the custom icon set, even for traditionally rectangular imagery. Boxes and squares had circular inner details, and corners were smoothed with large, beveled radiuses.

It’s also important to remember that while cohesion is key, it’s necessary to have some variation. The heavily rounded icons used in the navigation and functions for Contap are balanced by thinner line icons in the user profile cards. This contrast, while subtle, is enough to add distinguish key features of the application, and promote brand recognizability.

“The best icons are unambiguous and unmistakable.”

Remain consistent

Building upon a strong visual foundation facilitates the next key characteristic of all successful custom icon sets: consistency. Having a cohesive icon set not only ensures a unified aesthetic across the platform, but it also serves a functional purpose.

Even slight disparities in the icon’s look or feel can confuse the user, or at least interject a hiccup in what would otherwise be a smooth experience.

This commitment to consistency is exemplified in a case study of the iconography for BBC’s Weather platform. In it, designer Adam Morris describes basing the entire icon set off 30-degree curves. The aesthetically pleasing curvature was first fleshed out with the initial two icons designed (the sun and clouds), and then extended throughout the set. Even in an icon set as diverse as weather symbols, the imagery is unified by a common geometric thread.

Walking the tightrope

The central challenge to designing successful custom iconography lies in its several, and often conflicting, roles. UX designers must walk a tightrope, crafting icons that are distinct but recognizable, that are cohesive but not monotonous. It’s a difficult task, but the best strategy for tackling it is to keep consistent in your design choices, and tether them to a foundational base.

Despite their small size, successful custom icons can have a tangible effect on a platform’s user experience. They’re a subtle but powerful way for a platform to distinguish itself in a saturated market, and to facilitate brand alignment and recognition.

The hero image is from our recent post, Download 38 ecommerce icons—free.