8 simple steps to better icon design

Carrie Cousins.
January 17, 2017
8 simple steps to better icon design.

Icons are everywhere. From app icons on home screens to graphic representations that lead users through a design, icon design is a big deal. There’s a fine art to good icon design. Not only does the element have to render recognizably at the smallest of sizes, good vector-based icons can be scaled to use in oversized proportions as well. Some designers are even using icon-style images for dominant visuals. So where do you start? Here’s a guide to designing a better icon in eight (somewhat) simple steps.

1) Start with a grid

Good icon design starts with a solid foundation. A simple square block grid is all you need to start sketching an icon. grid Use the same gridded paper you worked with in grade school to create icon sketches with pencil and paper or start with a square pixel grid in design software. You should probably design on a square canvas, as most icons end up needing to fit in in square spaces. (This includes everything from icons for apps to icons in website designs or for social media profiles.) Once you have a grid, make sure to give yourself an element of white space around the perimeter. This will give you just enough flexibility to add a background if needed and keep the icon from getting cut off in applications that might have rounded edges or other types of beveling. Just because your grid is square doesn’t mean your icon has to be. It can be round or more rectangular. Remember: As you design something that isn’t square, it should line up horizontally and vertically centered in the grid for ease of use later. It will also help you maintain a consistent scale for an icon set. The grid is just to help you create a framework where you can design consistently. As a bonus you can also use the grid to help draw elements of the icon; use gridlines to draw straight angles or determine placement of strokes within the design.

2) Build with geometry

Icons are often small, so building with elements that users recognize at a glance is important. That’s why so many icons are rooted in geometric shapes. Circles, squares and triangles are the most popular combinations of shapes. Users don’t have to think about them or question what they are. Each shape is simple and identifiable. Then they can be merged and connected to create other elements with that same geometric styling. dropbox Look at the icon for Dropbox, for example. It is nothing more than a few squares linked together to form a box. The concept is creative, simple and easy to read at any size. Another popular geometric” option is to use a single, block letter as part of the iconography. While this doesn’t work well for widespread application, it can serve as a functional brand identifier. Facebook is a primary example of this icon usage in action.

3) Create a unique shape

While starting with circles and squares is helpful, you want to create a shape that’s yours. This is most important if you are working with a brand-identifying icon. Even seemingly complicated icons often start with simple shapes that are morphed into something more unique. When it comes to uniqueness, there are a few design elements to think about. 

  • Stay away from images. They won’t look good small.
  • Stay away from text. Users won’t be able to read it.
  • Some trends are worthwhile. Flat and almost flat icon styles work wonders.
  • Work with straight lines and angles connected by points on the grid. Curves can get awkward quickly.
  • The best icons work in color but are also recognizable as black and white outlines.

4) Give it plenty of room

Icons need plenty of space to breathe. Think of how icons are used. Particularly if you are designing an app icon that users will see on top of crazy wallpapers on their devices, the design needs to set inside the frame a bit to make it more readable and distinguishable. gardening Within your grid, create a consistent border around the edge. Think of this space almost like you would when working with a bleed in print design. The color needs to extend to this part of the canvas, but it will likely be unseen.

5) Stick to brand colors

Don’t get crazy with icon color palettes just because you can. If you are creating something for brand work, stick to your color palette. While you may diverge from your normal brand logotype for an icon, color should stay consistent. If you are working on an icon set for a web design package or other use, start with black or white icons first. Then add color as you get closer to completing the design. By working with simple elements with high contrast – black on white or white on black – you really get a feel for how each icon looks in space. If it works independent of color, chances are greater that it will work well with color added also.

6. Use consistent divots

Pay attention to every detail in the icon design. Did you cut out an angled corner in the design? Then consider doing it on all of the corners. While these tiny details might not seem important – they may not even be completely visible at the smallest sizes – they can add a classic flair to icons used in more graphic displays. food-icons More designers are using icons as buttons throughout designs and to help lead the eyes between more text heavy elements. Carefully crafted icons can help delight the user and encourage website conversions.

7. Design for the smallest size

While icons could be used at almost any size, you want to craft the design so that it works at the smallest of sizes. Commonly favicon icons are uploaded at just 16 by 16 pixels. Is your icon decipherable at this size? If the answer is no, you have two choices: 

  1. Start over with the icon design.
  2. Create an alternate icon for tiny spaces, such as favicons.

8) Don’t decorate

Finally, keep it simple. Resist the urge to decorate your icon design. Some of the best apps still suffer from awkward icons. (Wunderlist immediately comes to mind. Just think of how much nicer it would look without the shadows and outlining.) Decoration just ends up looking awkward in these small spaces. It can also overwhelm the design. Think about icons as design accent marks, they aren’t the primary focus. If a user lingers on an icon too long because they are trying to work out the meaning of it, they can lose track of what they are supposed to do. Icons should signal quick interactions.

Conclusion

Icon design can be a lot of fun if you have time to hone this skill. But if you aren’t an expert don’t worry. There are plenty of great shops out there that release icon sets for you to use in your projects. If you are just starting with icon design, it is worth downloading one of these sets. Toss the icons on a grid and pick them apart. You can learn a lot about how to better create your own simple shapes from this exercise.

Carrie Cousins

Carrie Cousins is a freelance writer with more than 10 years of experience in the communications industry, including writing for print and online publications, and design and editing. You can connect with Carrie on Twitter @carriecousins.

Read Next

Are Simple Websites Better For Business?

As web design technologies raise the bar on what it is possible to achieve on a realistic budget, there’s a rising deba…

Apple Opts for AR over VR at WWDC

An Apple VR headset has been one of the most widely-rumored devices of the last few years, and it was finally settled a…

Exciting New Tools for Designers, June 2023

We’re halfway through 2023 already, and the number of incredible apps, tools, and resources for designers is mounting.

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …