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
11 Essential Marketing Tools
You might also like...
Custom User Interface Design: The Most Important Success Factor for Software
View
What is Custom Web Design?
View
The Web Design Debate: Mobile-First or Desktop-First?
View

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:

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 / DevelopmentWebsite Design / Development

Website Design / Development

Custom Mobile or Web Application DevelopmentCustom Mobile or Web Application Development

Custom Mobile or Web Application Development

Website Maintenance / MonitoringWebsite Maintenance / Monitoring

Website Maintenance / Monitoring

Marketing ServicesMarketing Services

Marketing Services

What Are you trying to accomplish with your project?

Custom Design a WebsiteCustom Design a Website

Custom Design a Website

Implement a CMSImplement a CMS

Implement a CMS

Develop Front-End CodeDevelop Front-End Code

Develop Front-End Code

Build a Custom CMS or Web ApplicationBuild a Custom CMS or Web Application

Build a Custom CMS or Web Application

Integrate a Theme For a CMSIntegrate a Theme For a CMS

Integrate a Theme For a CMS

Mobile App DevelopmentMobile App Development

Mobile App Development

Web Application DevelopmentWeb Application Development

Web Application Development

Cross-Platform DevelopmentCross-Platform Development

Cross-Platform Development

API DevelopmentAPI Development

API Development

CMS / Software Updates / UpgradesCMS / Software Updates / Upgrades

CMS / Software Updates / Upgrades

Continuous Website ImprovementsContinuous Website Improvements

Continuous Website Improvements

24/7/365 Monitoring24/7/365 Monitoring

24/7/365 Monitoring

Compliance AuditsCompliance Audits

Compliance Audits

SEOSEO

SEO

Pay per clickPay per click

Pay per click (CPC/PPC)

Paid SocialPaid Social

Paid Social

Inbound MarketingInbound Marketing

Inbound Marketing

What is your budget for this initiative?

$

Tell us about your project

Tell us about yourself

Thank You !

We'll be in touch shortly with an email!

Name

Email Address

Phone

Company Name

Budget

Looking for assisance with:

Trying to accomplish:

Project description: