Icons were first used by ancient Greeks to depict religious deities and holy figures in hand-drawn paintings.

Literacy was uncommon, so the easiest way to spread religious teaching was through images rather than written text. There were thousands of iconic depictions of The Virgin Mary, where she’s portrayed using the same recognizable characteristics. This was a deliberate act to create a sense of familiarity and recognizability for those who were religious.

Today's technological innovations have brought icons into the digital world where they’re used within a website's user interface. A site’s icons convey meaning related to its content and prompt its users to take a specific action.

Although they’ve moved to different mediums, 21st-century icons are designed in line with ancient Grecian iconic principles: simplicity, legibility, and clarity.

Download Our Free UX Research & Testing Kit

Why are icons important on a website?

Icons are key elements of a website's makeup. They’re aesthetically pleasing and can enhance the layout of a site. Replacing text-heavy pages with recognizable symbols makes it easier for the user to understand a page’s context.

Since internet users access websites from around the world, a site's visitors likely have different contextual understandings. Recognizable icons can help websites transcend language barriers, especially if they correlate to the content on your site.

How To Design a Set of Icons

Well-designed icons contribute to a user’s website experience. Whether an icon prompts someone to leave a comment or navigate to a different page, they make your site easier to use.

Because of this, it’s crucial to understand how to create a set of icons that further enhance your audience's experience on your site.

Determine what purpose your icons will serve.

The first thing you’ll need to do when designing a set of icons is to get a comprehensive understanding of your task.

Ask yourself questions related to the purpose your icons will serve on your site. You want to know what your icons will represent or prompt your users to do before you create them.

For instance, if you’re looking to create a set of icons for a foodservice website, maybe you want to use icons to encourage users to start an online order or to try one of your recipes. Either way, your icon will need to be explicitly designed for its purpose.

Once you know what your icons will be for, you’ll want to do research related to your icons.

Continuing with the foodservice example, you should conduct searches to see what images and icons are commonly associated with the set you’re going to design. Maybe you’ll do an in-depth search into similar websites, and find that a stovetop icon is commonly used to represent recipes. This means you’ll want to design your icon to match those results, as your users will make similar associations.

At this stage, it’s also essential to decide if your icons will be metaphorical or literal. For instance, you’re either creating an icon that is a fork or an icon that is metaphorically related to a fork.

For example, a heart icon is typically used to denote that you like or love a certain piece of content. The meaning of this symbol is understandable and easy to pick up on.

outlined black heart icon

Image Source

However, the meaning behind the icon for a cloud is more metaphorical. You wouldn’t immediately see a picture of a cloud and think that clicking on the icon would prompt you to download files from online digital databases.

icons8 outlined black cloud icon

Image Source

You may also want to sketch ideas during this stage if you develop concepts during your research.

Choose a style.

A key feature of well-designed icons is stylistic consistency. After you know how you’ll use your icons, you’ll need to decide on a consistent style for your set. This means determining a color scheme, line weight, and edge shape.

You should also decide whether your icons will be outlined or filled and flat or three-dimensional. To illustrate these concepts, let’s look at an example from Kem Bardly’s Envelope icon set.

Notice how the color scheme is consistent for all six icons, and how they have the same shape and size regardless of what’s inside the envelope. These icons are straight-edged and filled.

kem bardly filled envelope icon set

Image Source

This icon set by Phosphor Icons, on the other hand, is outlined, rounded, and unfilled. The purpose of these icons is to denote chat functions, and you’ll notice the design consistency: they’re all the same size, line weight, edge shape, and color.

phosphor icons unfilled outlined black chat icons

Image Source

It’s important to note that your icon set should be responsive, meaning that they should be compatible with whatever device your site visitors are using. For example, here’s how the Phosphor icon set grows and shrinks to adapt to different screen sizes.

material deisgn responsive chat icon set

phosphor icons responsive black outlined chat icon setImage Source

Successfully designed icons are also recognizable by all groups of people, regardless of their demographics. Users are visiting your site from all over the world, and if you’re using Western-centric images, you won’t get through to your users who are unfamiliar with Western symbols. You can stand to lose traffic if some of your users can’t understand your icons, especially if their purpose is site navigation.

Here’s a common example: most websites utilize an “X” symbol to signify to users that clicking on the “X” icon will close the page they’re on. The symbol requires little cultural context, and most website users understand its purpose.

Start creating.

After you’ve finalized your icons concept and style guide, it’s time to bring them to life using your favorite UX design software. If you’ve made sketches during your previous stages, you should use those as a reference as you develop your final designs.

In line with Material Design’s icon principles, you’ll need to start with a grid. This will help you remain focused on shape, size, and object-placement with your icons. Your design process will be more straightforward if everything is sized correctly.

icon design square grid

Image Source

During this stage, you’ll create more detailed designs so your icons are as recognizable as possible. For example, if you’re designing a donut, it needs to look like a donut and be recognized as a donut. The icon shouldn’t just be a circle with another circle inside of it. Instead, consider adding sprinkles — a standard identifying marker for a donut.

However, it’s important to note that too much detail can be confusing. Another characteristic of well-designed icons is that they’re clear. You want your audience to see your icon and immediately recognize it for what it is. You don’t want your design to be too busy.

Here’s an example from Material Design of what they denote as a busy, overly detailed icon:

material design black filled ship icon

Image Source

Versus what they denote as a clear, straightforward icon:

material design filled black boat icon

Image Source

Fewer graphic details aid with recognition. A user may view the former icon and think of a pirate ship, rather than your intention: a boat.

Be original.

If your icons are part of your website’s recognizable branding, they should only look like your icons. Let’s take a look at Waze and Google Maps icons.

colored and filled waze app icons

Image Source

google maps colored icons

Image Source

Waze and Google Maps are similar in nature — both provide users with directions. While their services overlap, their icons are unique to their brand, and, therefore, recognizable.

Test and implement your icons.

Your icons will likely undergo a series of iterations before you finalize your designs. However, after you’ve completed your icon set, it’s essential to test whether they fulfill your intended purpose.

Consult with your website's intended audience, and get their opinions on what you’ve created. There are a range of usability testing techniques that you can use, but your tests should assess four key elements:

  • Findability - Are your icons clearly placed on your page?
  • Recognizability - Do your users know what your icon is?
  • Comprehensibility- Do your users know what action the icon represents?
  • Attractiveness- Are your icons aesthetically pleasing? Do they enhance the visuals on your pages?

After you’ve tested your icons’ usability, add them to your site!

Icon Design Resources

There are a variety of resources available to help with the process of designing an icon set for your website. You can use these resources to reference other icons for inspiration or download pre-made icon sets that you can customize to fit your website and brand needs.

1. Material Design

Material Design is Google’s open-source platform that provides information on typography, web accessibility, and other digital guides. You can download icons and customize them to your brand needs.

2. Streamline Icons

Streamline Icons features over 30,000 pre-designed icons that are available for download. Their free “Essential Icons” pack features commonly used symbols for email and music functions, and their paid “Ultimate Pack” includes niche icons like travel and ecology symbols.

3. Nucleo

Nucleo allows you to select, customize, and download icons within their app. Pricing varies depending on the number of users on an account.

4. Animaticons

Animaticons offers downloads of animated icons, which can give your site a unique user experience. You can choose from five different icon sets that range in price from free - $5.

5. Free Design Resources

Free Design Resources offers various icon packs to download and use on your website, like iOS tab bar icons. Some sets are free, some are paid, and you can filter icons by their compatibility with your favorite design software like Illustrator, Figma, or Sketch.

Icons are necessary elements of your site.

Ultimately, well-designed icons are essential to creating a seamless user experience.

You want your website visitors to enjoy their time on your site and complete your desired action, whether it’s purchasing a product or signing up for a newsletter.

Icons can help you guide users through different processes, getting rid of the need for large quantities of explanatory text. Recognizable images also make it easier for users from all over the world to interact with your content.

If you take the time to understand the purpose the icons on your site will serve and design them while maintaining stylistic consistency, your users will be delighted, have fun taking action on your site, and want to keep coming back.

ux templates

 ux research kit

Originally published Oct 7, 2020 7:00:00 AM, updated October 07 2020

Topics:

User Experience