Creating Website Icons That Fit With Your Brand

p>Icons are one of those kinds of features that subtly contribute to users’ overall impression of not just your website, but your brand as a whole. You need something that’s concise enough to blend into your site’s design, but will stand out enough to get clicked. Here’s how you should pick or design your website icons:

Planning

It’s important to have an idea of what you want, then have a more simple and generalized version of it as your icons. This can be a tricky task because there may be different associations or translations of a word or activity. For example, if I’m trying to find a symbol for service, one might think of a tool set (hammer and screwdriver) and another might think of a “handshake” icon. Try to stick with relatively universal meanings that make sense, even with language and cultural barriers. It’s always a safe bet if it can work amongst a large group of users.

Selecting A Style

The current trend for icons tends to lean toward the clean, minimal, flat look, and can either be an outline or filled in. The aesthetics can range, but it all depends on the style of your branding and what look you want to go for. For a more playful look, you may want to delve into some fun types of icon like a sketchy style:

For a more up to date and trendy look, you may want to look into flat icon design. These can range from outlines, flat colors or slight, flat shadowing:

Create Your Own

It’s typically best to design your own icons, especially when it comes to specific products or services that you want to feature on your site. Start out by sketching out some ideas and how you want to present them (again, keeping consistent to your branding and overall look and feel of your site.) Next, trace them out in a design program like Adobe Illustrator so you have a vectorized image that can be easily adjusted at a later time if necessary. It’s crucial to make sure that the icon is even, so apply guidelines and measurements to ensure you have an equal and symmetrical looking icon.

Gathering Resources

If you can’t budget the time and/or funds to create your own icons, there are plenty of image sites that provide free or low-cost SVG (Scalable Vector Graphic) icons, including FlatIcon, Iconmonstr, and iStock. While they won’t be original, the upside to that is you know they’re more likely to meet the universal recognizability standard.

Size & Type

With your icons created and selected, you need to finalize them, which you can go about in different ways depending on how your icons will be displayed or how your site is built. Typically, the best and highly editable way to upload your icons would be to save them as an SVG.

You want to stick with SVGs because the icon will be able to size up and down with no distortion to the quality. For responsive design especially, this is great since it makes the process of resizing incredibly easy and flawless. If, for some reason, SVGs are not an option, you can always create them as a PNG with a transparent background. Just remember to double the size for quality purposes when sizing down!

When it comes to your website’s icons, quality and selectivity is key. Your icons should be clear enough for the user to understand what they represent, and your site shouldn’t be littered with them to the point that it becomes decoratively cluttered. Icons have the ability to help information stand out, in addition to being repurposed as an abbreviated version of a direction. Use them wisely and with care for an extra oomph to your site!