Let’s explore how to use icons, what icons work best in website design, and how to implement them when designing for the digital world.
When designing a new digital product—whether it’s a website or an app—one of your primary concerns is to create a well-rounded and easily understandable experience for your customers.
Perhaps due to their relatively small size, or because finding ones that work cohesively can be a challenge, one of the elements that designers and brands often overlook is the humble icon. A stalwart of any digital product, icons have the power to communicate and express perspective.
However, oftentimes icons are merely an afterthought.
Today, we challenge this outcome by exploring how we can use icons and what icons work best in various situations. And, ultimately, we look at how we can ensure that rather than thinking of icons as a nice-to-have, we consider them as equals to the other considerations you have when designing for the digital world.
Icons Have a Purpose
Before we get into some tips for how to choose icons, it’s worth understanding their purpose and their potential.
Building a Common Visual Language
Icons are not solitary creatures, preferring to live in families or sets. Often created with a theme or aesthetic in mind, icons can introduce a common visual language throughout your product that text or images alone would struggle to achieve. Because of this, they’re a perfect way of bringing consistency to your design.
Choosing a strong icon set gives your design cohesion and consistency. Image via Starline
*free gift for you: free download of
Acting as a Circuit Breaker
Icons are a great way to deliver a message in a brief and concise way, without laborious passages of text. As universal standards developed in icon design, this concision has increased.
Now we have standard icons for common tasks and functions such as Home, Search, Refresh, or Contact.
Accentuating Visual Appeal
Unless you’re typesetting a novel, it’s most likely that your design won’t need to be a continuous passage of text. Icons are a great way of bringing visual interest and intrigue to a design or to break up larger sections into smaller, more manageable chunks.
Signposting
As digital products mature and become more and more complex, the need to signpost your product becomes ever more important. Customers need a sense of grounding. What’s more, if they go off down a rabbit hole, they want a surefire way of making their way back. Icons in the physical world started life as literal signposts, and their digital brethren are no different.
Icons are particularly useful for navigation. But, they can also draw attention to certain sections, introduce asides and additional areas of interest, or visually split information into categories and themes.
Tips for Choosing the Right Icon Set
When choosing icons, it’s important to understand what works and what doesn’t. Not all icons are born equal, so dependent on the set and indeed the design, they may or may not be applicable for your particular product. Here are some tips on how to choose the perfect icon set:
Use Icons that Fit Your Subject
If your website or app is for a corporate entity, chances are you’re going to want to go with something buttoned-down and professional. If you’re a fashion brand, something aesthetically close to the garments you sell is likely more appropriate. Just as with any aspect of your brand, ensure that the icons you choose fit the subject.
Ensure Clarity and Understanding
When choosing an icon set, put yourself in the shoes of who will view them on your site. An icon’s power resides in its ability to easily convey meaning, so make sure that whatever you choose can be interpreted quickly. Overly ornamental icons, or even ones that don’t scale to the size that you need them, will add hurdles rather than remove them.
Lean on the Universality of Certain Icons
As mentioned earlier, some icons are now so universal that it’s hard to think of representing them in any other way. In fact, studies have shown that trying to reinvent well-known icons may add to the novelty of your design, but it’ll severely restrict understanding. One such example is the “burger menu,” those three lines that have come to represent the navigation menu in a website, particularly on mobile devices. Others include a house for Home, a landline telephone for Contact, and a magnifying glass for Search.
Make Sure They Reflect and Enhance Your Branding
It’s tempting to introduce a whole new style with your icon set. However, if doing so contravenes the overall branding of your product, again, you may be doing more harm than good.
Maintaining a similar style and aesthetic as your branding ensures that your icons enhance the overall look and feel, rather than confusing it.
Explore the Unexpected
As certain digital styles and influences ebb and flow, so certain icon sets float to the top, as others fall to the bottom. While following a trend may be the right thing to do with your icons, first consider whether the icons you’re hankering after are original enough. Seeing the same icons across the internet not only makes things fairly one-dimensional, it also suggests that you don’t care for the details. This may happen entirely subconsciously in the minds of your users, but it’ll be happening nonetheless. So, always check out the more obscure icon sets before diving in with the most popular.
Understanding Common Pitfalls
Before we wrap up, it’s worth mentioning a few “gotchas” to avoid when choosing the perfect icon set.
Not All Icons Need to be Custom
A couple of times now, we’ve mentioned universal icons—such as “Home,” “Search,” and “Refresh.” Although there’s no rule against creating or choosing custom icons for these, it’s worth noting that major platforms—such as Apple and Android—already have these covered as part of their native style sheets.
Ensure You Use a Flexible Format
When choosing icon sets, remember that some formats are more flexible than others. Icon sets available as JPG or PNG may be more off-the-shelf and simpler for you to use. However, what you see is what you get. There’s no way to alter their structure, size, or aesthetic.
Alternatively, icons available as vectors or SVGs require more work to apply them to your designs. However, you can alter any aspect of these designs, from color, to stroke widths, to the actual size of the icons themselves. Make sure you choose the right format for your needs.
Think Beyond Your Initial Idea
It’s very tempting to go searching for icons, notice one that you think will fit, and download it as part of a set. Then, later on when you start implementing the icons, you might realize certain functions or navigation items are missing. It’s easy to get sucked into an icon set based on a single icon. Believe me, it’s happened to me more times than I care to remember! To overcome this, make yourself a list of all the icons you need ahead of time. That way, when you start searching, you’re less likely to fall in love with an individual icon!
So, there you have it—icons are an essential part of digital design that often get overlooked. However, their ability to communicate efficiently, signpost your navigation, and provide visual interest that could otherwise be lacking from your design makes them an essential part of every digital product you release.