×
Try our new Figma plugin! Sample and source thousands of assets without leaving the app.

How to Design Icons: Tutorials and Pro Tips

By on Mar 12, 2021 in Tutorials
How to Design Icons: Tutorials and Pro Tips

Designing effective icons is a unique challenge. Whether it’s a single icon or set of icons for use in a UI, graphic design piece, or standalone app icon, even experienced and confident designers can find that creating icons pushes their technical abilities unlike any other design discipline.

Save

Icon design often requires you to express complex ideas in a tiny canvas where space is limited, so it forces you to strip everything down to the bare minimum while still conveying the key message or brand identity that it needs to. Doing this successfully is the real challenge, but thankfully there are a number of handy tips that icon designers use that can really help anyone create strong icons more consistently.

Make Use of Grids

Get the foundations of your icon designs right by using grids as much as you can; this goes for both the sketching phase and the digital work you do on screen. Pick up a sketchbook with grids or find some printable dot grid templates to help you explore icon ideas with better control over the balance and structure of your design.

When it comes to composing your digital icons, grids and icon templates can help you structure your designs. Google offers a free icon design grid template for Adobe Illustrator on their Material Design mini-site. To go along with this, here’s a fantastic tutorial from which shows you how to make one of these icon design grids yourself and then demonstrates how useful they can be to work on:

Using a pixel grid (like the one included in the Google Icon Design Template) along with ‘Snap to Grid’ or ‘Snap to Pixel’ options inside of Illustrator will help to make sure that your lines and shapes display better at smaller sizes. Lines and shapes should fill up entire squares on your pixel grid so that they keep their detail at scale. Here is a video tutorial better explaining the importance of pixel grids:

Use Simple Geometry

An icon needs to represent an object, action, or idea in the simplest way possible. Complicated details and shapes will be lost at smaller sizes, so it’s always a good idea to structure all of your icons with basic geometric shapes.

Save

The smaller an icon becomes, the simpler the overall geometry should be. The fewer lines and shapes you can use to represent the same idea, the better. Marc Edwards is the master at showing just how quickly shapes can be transformed into simple icons in as few steps as possible; explore his Icon Speed Runs to learn more.

Save

Save

Focus on Consistency

A successful icon works well on its own, but it also has to be a good team player! If you are designing a set of icons, there should be a clear visual connection between each icon that you make; this means sticking to a similar character, using the same stroke width and consistent visual weight, alignment of elements, and spacing throughout. You can still add plenty of variety to your icons, of course, but having rules about how thick your lines will be, how many colors or tones you are going to use, how rounded your corners will be, etc. all help you to define a style that can carry over across multiple icons.

Great icons will also be an extension of the brand or project that they were designed for too, taking existing design cues or brand identity into account so that icons are not just consistent with each other, but also the wider eco-system that they are used in — this point is particularly true if you are designing a solo icon or app icon for example.

Professional designer Michael Flarup talks us through app icon consistency in this video here: https://www.youtube.com/watch?v=F03eqjxTq1w

If In Doubt, Be Obvious

Condensing complicated ideas or actions down to one small icon is extremely tough, especially if you are trying to create something unique to anything else out there, but more often than not, it makes more sense to go straight for the most obvious standardized symbology or metaphor rather than risking something more unique and having a higher potential of confusing people.

Of course, once you are comfortable with your abilities, you will be better placed to explore more abstract and creative metaphors, but don’t feel bad at any time for falling back on standardized symbols that are commonplace as having something that is easily recognizable is almost always better than something a that might be a little more visually interesting, but also a little more abstract.

You can instead make your icons unique with your own embellishments and visual style; remember that the core symbol itself doesn’t have to be completely unique, and the way you finish and decorate your icon can be where you flex your design muscles.

Size With Your Eyes

When you are creating a set of icons, you might think that all your icons would need to be the same height and width, but that’s rarely the case, and for a very good reason. You do want the canvas of your icons to be the same across your set, but how much space your icon takes up visually is more important than ensuring a more mathematically accurate height and width. Of-course you want to use up as much of your square canvas as possible, but different shapes take up more space ‘visually’ than others.

For example, a square box will take up more space on your canvas than a circle would, so in your icon set, you could look to make your square box slightly smaller than your circle without them ‘feeling’ like they are different sizes. Mathematically they don’t match in size, but optically they will look the same.

Save

The more complicated shapes and symbols you use, the more experimenting you will need to do with how things sit in your canvas. If you have shapes that are thin or have a lot of negative space, you can try to have them be a tiny bit larger fill the canvas more, whereas bolder, fuller shapes might need to be made slightly smaller so that they don’t dominate over other icons in the set. This article by Bonnie Kate Wolf explains this concept in much more detail.

The same concept applies when trying to position your icon in the middle of your canvas. The visual weight of your icon will help you to decide whether it sits perfectly center or not; for example, if you have something that is perfectly symmetrical, it should sit in the mathematical center, but if you have something like an arrow which has more weight on one side than the other then you need to find a way to center it optically so that it ‘feels’ better placed than it might do when sitting truly centered.

Get Inspired

Understanding what works with icon design and what doesn’t is just something that you pick up over time, but it’s always a good idea to get familiar with popular icons to understand what people want from an icon or icon set. Here’s my handpicked collection of high-quality icon packs that I think set a great example of what a good icon pack should be.

Save

Save

Save

Save

Save

Save

If you want more examples of great icons, check out the Icons section over on Creative Market or continue to explore some more of my own personal favorites with my Recommended Icons Collection.

Use The Right Tools

Vector icons are king when it comes to versatility. If you have a vector icon, you will be able to resize your graphics without losing much detail. This depends on how well the icon was designed in the first place and whether it was optimized for small sizes first, but as a general rule creating vector graphics gives you much more flexibility when it comes to working with and using icons. Adobe Illustrator is the industry standard, but vectors can be created in many other design apps, including Photoshop, Inkscape, Affinity Designer, Sketch, and Figma.

The SVG format is very popular as it allows excellent web compatibility, scaling, and flexibility with code while retaining a very lightweight file size. Learning to create your icons so that they can be exported as SVG files will save you a whole lot of hassle in the long run.

If you’re looking to create more detailed, stylized, or textured icons for App Icons, etc, then you’ll usually have to sacrifice the simplicity vector graphics and instead be looking to design icons that look more like an illustration, or perhaps with 3D elements using common programs such as Cinema4D or Blender. Here’s an icon design workflow for 3D mac app icons that might give you some useful pointers.

Save

Icon Design Courses

If you are looking to get into icon design as a serious pursuit, then it’s highly recommended that you consider taking an icon design course. There are a number of excellent icon design courses out there on the web, which will give you a more extensive and detailed break-down and explanation of the entire process. Here are some icon design courses I found that might be worth checking out.

Save
Intro to Icons
“Intro to Icons is an online course with 30 fast-paced videos by Matt D. Smith.” — View Course

Save
Create a Cohesive Icon Set
“Create a custom set of icons that complements the needs and feel of any project. In this short class, designer Adam Whitcroft provides a behind-the-scenes look at creating a cohesive set of outdoor-themed icons. “ — View Course

Save
Creating Pictograms with Purpose
“This 45-minute class with the co-founder of the Noun Project — a crowdsourced visual dictionary of 150,000+ icons — will teach you how to design your own "KindSign" based on your environment and beliefs.” — View Course

Save
Icon Design Basics
“In this class, you'll learn theory basics, techniques, and some tips & tricks about icon design. With this knowledge, you'll be able to quickly create consistent icon sets in different styles.” — View Course

Save
Crafting Pixel Perfect Icons – The Right Way!
“A comprehensive course that will teach you how to create sharp-looking icons. No matter if you’re just starting out or already know a thing or two about icons – this course is for you! You not only learn what is pixel-perfect icons but also be able to practice creating three icons specially selected to cover every practical detail you might need to know.” — View Course

Share Your Tips & Tricks

If you have any icon design tips and tricks of your own that you’d like to share, we’d love to hear them, likewise, if you can recommend any other great resources or courses ideal for picking up or polishing icon design skills, then please share them with us in the comments below!

Want to become a WordPress pro?


Download now!

img

Download now!

Take our 10-day challenge

Download this challenge calendar and stay on track in your journey to WordPress domination.

5 Comments

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →