3 Rules for Making Great Website Icons

February 19, 2019

The internet can be an overwhelming experience. As users, we are constantly bombarded with information and content competing for our attention. This leads to skimming through a website and waiting for something visual to stand out and draw us in.

So, how do we capture that attention? One way to do so is by using icons.


Support Your Content

The main purpose of icons in web design is to visually communicate a message to your users. Icons can be looked at as visual shortcuts for your website’s content. They should represent your content, but also enhance and support it as well.

If you feel that your content is coming across a bit weak or not providing clear direction for the user, then perhaps adding in an icon can strengthen it.

Improve Your Design

It can sometimes be difficult to find images that support your site’s content. This presents the perfect opportunity to implement an icon.

Create an icon using your sites branding to provide consistency, add character, and bring some originality to the website design.

Icons are also great for enhancing the layout of a website. Use icons as breaks between sections of content and organize text into smaller portions. This reduces the amount of information the user has to process and prevents cognitive overload.


3 Rules for Making Great Website Icons

It’s important to give yourself a set of rules and stick with them when creating your icons:

1.) Simplicity is key

Keep your icons simple and easy to understand; less is more! Don’t add too many little details that may confuse or overwhelm users.

2.) Consult your style guide

Be sure to adhere to your style guide. Your website should be following a style guide and your icons should do the same.

3.) Sizing

Make all of your icons the same size. For example, set your artboard at 200px by 200px and create your icon, copy that artboard, and create the next icon. This ensures all of your icons will have roughly the same size, spacing, and consistency when exported.

Icons should visually communicate a message to users while supporting your website’s content. Keep them simple and easy to interpret. They’re useful to help break up your content into more manageable sections. If you’re making them yourself, set yourself some rules to keep things consistent.

Read: How to Choose Photos for your Website >>

Let’s Start a Web Design Project

Talk with a Web Strategist.