Crafting custom icons that balance form and function



View all posts

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.

Custom icons
Custom icons

Twitter’s custom iconography (Source: Twitter mobile app)

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.

Custom icons

Codal’s custom logo and icon design for Contap

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.

Custom icons

Adam Morris’ BBC Weather icons (Source)

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.

Read more posts like this

Sean McGowan
Sean is a technical researcher & writer at Codal, authoring blog posts on topics ranging from UX design to the Internet of Things. Working alongside developers, designers, and marketers, Sean helps support the writing team to ensure Codal produces engaging web content of the highest quality. When not writing about the latest innovations in app design, Sean can be found cooking, watching old movies, or complaining about the shortcomings of his favorite Philadelphia sports teams.

Join over 3 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 3 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 3 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 3 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 3 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.

Follow us