Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Icon Design
Webdesign

Tips on How to Pick the Right Icons for Your Website

by
Difficulty:BeginnerLength:ShortLanguages:

When designing a website, we often spend a good bit of time considering which visual assets to use. Photos and illustrations, for example, can have a large impact on a design. However, those aren’t the only assets we should focus on.

One asset that can get easily overlooked is icons. There are a lot of generic libraries floating around and they’re easy enough to use, but there is something to be said for using a more custom solution. Indeed, the right icons make for a more detailed and complete user experience.

So how do you go about deciding which icons to use? Let’s take a look at some tips and best practices for making the right choice. We’ll include some amazing examples that you can access with a subscription to Envato Elements, home to more than 5,500 icon sets, plus hundreds of thousands of top design resources.

1. Use Icons Relevant to Your Subject

So often we use icons that don’t really fit the subject matter of our website. Thankfully, we don’t have to settle. Utilizing icons that are relevant to an industry or concept is a better way to go. This provides a more finished look while adding context for users.

Medical Line Icons
Medical Line Icons

The medical field is a great example. Medical Line Icons includes fifty, fully-editable icons that are available in a variety of formats. Each image illustrates an industry-specific concept in a simple and straightforward manner.

More industry-specific icon sets:

Development Line Icons
Development Line Icons
Education Icons Set 2 - Flat Series
Education Icons Set 2 - Flat Series
40 Food and Kitchen icons
40 Food and Kitchen icons

2. Reflect Your Branding and Style

Icons should add to, not take away from, your style. Look for images that mesh with the overall tone and messaging of your site. That means a site with a more buttoned-down, corporate feel should opt for icons that promote a professional look. Likewise, a more casual website won’t want to get too serious when it comes to imagery.

30 Fresh  Modern Avatars
30 Fresh & Modern Avatars

30 Fresh & Modern Avatars could be a great fit for blogs or startups that want to reflect a fun atmosphere. Choose from a collection of interesting characters and edit them to fit your personality.

More laid-back avatar icon sets:

Diversity Vol 3
Diversity Vol. 3
eople Vector Icon Set
People Vector Icon Set
12 Female Flat Occupation Vector Illustrations
12 Female Flat Occupation Vector Illustrations

3. Think About the Number of Icons You’ll Need

One of the challenges in using custom icons is that some sets may not be very deep. There might not be options to fill every need. Therefore, you’ll want to consider the potential number of icons you plan to use. Having a good idea ahead of time will save you the trouble of switching directions or attempting to mix and match different sets.

Modern Flat icons
Modern Flat icons

If you require a deeper library of icons, check out Modern Flat Icons. The set contains 200 icons that are categorized by subject. They’re a good choice for websites that plan on using a larger number of images that span a variety of industries.

More extensive icon sets:

180 Real Estate Line Icons
180 Real Estate Line Icons
200 hand-drawn vector icons
200 hand-drawn vector icons
Marketing 200
Marketing 200

4. Consider Size and Editability

When it comes to size, not all icons measure up. Many sets are available in vector formats that scale to any size and are easy to edit. But you’ll also find collections that are relegated to lower resolutions and can’t be tweaked. This should be an important factor when browsing through potential options.

26 Colorful Vector Ice Creams
26 Colorful Vector Ice Creams

For example, with 26 Colorful Vector Ice Creams, you’ll find an icon set that offers unlimited sizing capabilities. Since it’s available in both vector (Ai, EPS) and raster (PNG) formats, these icons will be a great fit at any size. Plus, you can make any necessary edits to better fit in with your style.

More fully scalable, highly-detailed icon sets:

50 Hand-drawn Vintage Vector  Badge
50 Hand-drawn Vintage Vector & Badge
Hobby - set of flat design infographics elements
Hobby - set of flat design infographics elements
Little Critters Monster Extended Pack
Little Critters Monster Extended Pack

5. Look for the Unexpected

Let’s try a quick experiment. Close your eyes and think of what an icon should look like. We all have our own specific picture in our heads. But the exciting aspect of custom icons is that they aren’t one-size-fits-all. Sometimes, they can take unexpected forms that help to push our designs forward. They may not work for every use case, but these mavericks may be just what you need.

Social Media Icons Large Set
Social Media Icons Large Set

This set of Handwritten Social Media Icons is anything but standard. Coming in both sketch and outline styles, these hand-crafted beauties will help you stand out. They may even change your idea of what an icon can be.

More unexpected icon sets:

Abstract Patterns Seamless Wallpaper
Abstract Patterns Seamless Wallpaper
Vintage Pennants  Retro Icons Set  Part 2
Vintage Pennants / Retro Icons Set | Part 2
LOVE Stickers
LOVE Stickers

Little Details That Make the Difference

Though they can be small in stature, icons have the potential to do big things for your website. The key is in choosing the right ones for your specific needs.

Look for icons that match your subject and style. Then, consider how deep of a collection you’ll need and if you’ll want to perform any resizing or editing. Finally, don’t be afraid to use images that break the boundaries of traditional icons.

Keep those factors in mind and use icons that will help bring your website to the next level.

 More Icon Goodness on Tuts+

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.