HOW TO DESIGN CUSTOM EYE-CATCHING ICONS

Originating in the 1500s from the Latin word ‘eikon,’ the word icon means likeness, or image. Every day, we come across all sorts of icons – whether it’s on a website, the apps on our mobile devices, or messaging with emojis. Icons can convey an expression, thought or idea through a simple visual depiction. Sure, there are stock icons you can purchase for a design project – but why buy stock when you could create your own custom icons? Here are some things to consider and try the next time you need to create a set of icons.

 

Why Icons Are Important

They create a universal language.

Think about the last time you tried to navigate through an airport – how many icons did you use to get yourself from one place to the next? Airports use icons for directional arrows, bathrooms and food, and even for charging stations. Icons allow us to communicate and understand something without actually speaking or writing in a specific language.

 

They relay information quickly.

In the increasingly fast-paced world we live in, icons are becoming more and more useful in design. As a whole, we tend to skim over longer pieces of reading material, and can learn quickly from simple headlines and iconography. Icons are also the key ingredient to making design tools such as infographics, and helping visual learners grasp concepts quickly and efficiently.

 

Styles of Icons

Outline

This style of icon is created with, you guessed it, outlines! These are one of the easier types of icons to design, along with their reverse, glyph (solid) icons.

 

Glyph (Solid)

These are basically the reverse of outline icons, and are filled in with one solid color. They’re known as glyphs or solid icons.

 

Filled

This type of icon is essentially an outline icon brought to the next level, usually filled in with different colors to give the icon more dimension and color.

 

Flat

These are similar to filled icons, in that they are the next step above outlines/glyphs. They usually use different opacities/shades of a single “flat” color. The design usually does not have an outline around the shape, because the base shape is already a color or multiple shades of a single color.

 

Hand-Drawn

This style of icon is a little more abstract, and looks, you guessed it again, hand-drawn. This style is used for brands or designs that allow for more experimentation and less rigid design.

 

Icon Sizing

If you’re creating a set of icons, you need to make sure they’re all proportional to one another. In real life, a pencil might be smaller than a notebook, but when creating icons, everything should be equal in size.

Standard icon sizes for web projects are:

  • 16 x 16
  • 24 x 24
  • 32 x 32
  • 48 x 48
  • 64 x 64
  • 96 x 96
  • 128 x 128
  • 256 x 256
  • 512 x 512

 

Grids, Grids, Grids!

No, you’re not required to use a grid when making an icon set, BUT it can make your life easier when designing an entire icon library. Grids help make sure icons are consistently sized, and can help with creating exact lines, perfect curves, etc.

 

Tip #1: Sketch out your ideas first and make sure they make sense.

Make sure the icons you’re dreaming up make the most sense for what they’ll be used with. For instance, if you need to convey money or payment, a dollar sign would work for a U.S. based company. However, it would not make sense to use for a company that is international, as various countries use all different types of monetary symbols. Try and pick something with a good balance of being specific, but also universal. Also try and think in terms of where your icons are going to be used – will they be used on a mobile app, embroidered on a shirt, printed on a large billboard, or used in a pattern in a PowerPoint background? The icon set should look good on any medium, large or small.

Sketching out your ideas will also save you time in the long run! Once you’ve sketched out and approved your ideas, all you need to do is turn them into digital files.

Since icons may need to be scaled very small, or perhaps very large, they’ll need to be created and saved in a vector format. Therefore, it is best to design icons in Adobe Illustrator.

 

Tip #2: Pick a style and stick to it.

Though this may sound obvious, it’s important to keep in mind during your design process. If you’re making icons that are outlines, make sure ALL of them are in outlines.

If you’re having trouble, remember to go back to basics and start off your design using simple shapes. For example, a symmetric heart shape can be created using a triangle and two circles – it can be as simple as that!

 

Tip #3: Have styling consistencies within a style.

So, you’ve picked an overall style for your icons. Now comes another hurdle – making sure they look like they belong together. Each set has a unique personality (stylistics, characteristics, etc.). For instance, what line weight are all of your icons set at? Are you keeping your designs super simple, or adding some detail? Will your icons be set inside of a circle? Are you using rounded corners or rigid lines? There’s a lot more that goes into making a consistent-looking icon set than meets the eye.

Once your icon set is made, you can create the same set in a different style, but make sure to get one style set finalized before you jump into any other styles.

 

Tip #4: Use the same color palette.

This may also seem evident, but making sure your icons have the same color palette helps assure icon consistency. Try not to use too many colors, it is surprising how fewer colors can be more impactful (dependent on the style of your icon, of course).

If you’re stuck on deciding which colors to use, think about color theory – this might help decide which color to make your icon(s)!

 

ocreations Examples

ocreations has designed icon sets for a variety of clients over the years. Check out some of our samples below:

 

 

Do you need an icon set for your next branding project? Contact us at ocreations. We love creating brands, and enhancing existing brands with our custom designs.

Let’s get creative, let’s make your brand iconic.