Creating Website Icons That Fit With Your Brand - NP GROUP

Website icons are seemingly small details, but they play a big role in your website's user experience.

Skip navigation and go to main content

New Possibilities Group, LLC

1033 Route 46 East, Suite 107
Clifton, NJ 07013
(855) 674-7687

Creating Website Icons That Fit With Your Brand

  1. NP Group
  2. Blog
  3. BlogCreating Website Icons That Fit With Your Brand2015-07-01Creating Website Icons That Fit With Your BrandDesign
    New Possibilities Group
Creating Website Icons That Fit With Your Brand
4 min
Do your website visitors trust you? Download our free e-book:
You might also like...
Top Ten Ways Your Website Is Scaring Away Customers and Clients
Ten Reasons Your Boss Undervalues Your Website
The Ultimate Guide to Developing Personas for a Custom Software Development Project

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:


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:

Creating Website Icons That Fit With Your Brand

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:

Creating Website Icons That Fit With Your Brand

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!

NPG's Strategy Services

Get Started With Your Project.

Please select and fill out all options below

What do you need help with?

Website Design / Development

Custom Mobile or Web Application Development

Website Maintenance / Monitoring

Accessibility Services