Icons are a crucial part of our day to day lives. Look around and you’ll see just as much text instructing you as you do iconography. It’s such an important part of our world that even films build out believable icon systems. Check out Typeset In The Future: The Alien Edition.
In application design icons can help communicate complicated features with limited space and transcend communication barriers that would require additional localization.
This guide is constructed to help designers build out their own icon set that can help them deliver on their vision. It’s filled with useful tips, best practices, and guides on how we do things here at Headway.
Sitting down and figuring out what icons you’ll need at the start of the project can be difficult and intimidating. However building up a system for your icon will allow you to continually add on to your set. Listing out common interactions like profile or settings and starting to build out this list will help you to start sketch out what icons you think you’ll need.
Creating a full icon set will help you build uniformity across your application, if you don’t want to create one from scratch there are tools out there to help you find complete icon packs. Noun Project and Iconfinder are some great resources if you’re looking for a full pack. If you’re not looking to create a set below are still some excellent points to keep an eye our for in a pack.
When starting to layout your set it’s good to start sketching out some icon ideas on paper. If you’re trying to test out a few ideas this is quick and easy. A grid or dot grid note book will help a ton.
When you’re looking for inspiration feel free to look at places like Dribbble, Iconfinder, and Noun Project to see what others are doing. These resources are invaluable so use them. When it comes to Noun Project or Icon Finder, if you have a subscription you can also grab icons to place in your set as place holders until you’ve finished your set. Kit bashing like this will help you start to think about your system as a whole.
There are a few stylistic choices you can make when you’re building out your icon set. Do you go with a stroked icon style, a filled glyph style, do you add color? Let’s cover three design elements that have an impact on icon style.
Stroke icons can give you room to add more detail than a filled set. They can be mixed with a filled set to create either active states or compliment some icons that just don’t work well with a filled state.
Filled icons can give more clarity and importance to an icon or interaction. Their traditionally bolder and have a higher tendency to catch a users eye just like a bold font would.
When creating your set you can do some interesting things with color, is your entire set a single color, do you add color on a hover state or does each icon have 2 colors if they’re apart of an important feature.
A good icon system is consistent not only with the each other but with the over all design of their final placement.
Depending on the platform you’re building for icons are constructed in a multitude of different ways. Each mobile OS has their own guideline put together for how they construct icons for their system. Below we’ve laid out some general things to consider when creating your icon.
Icons should follow some basic size guidelines when being created. Consider the device these icons will be on and the method of interaction (mouse or touch or in most cases both). Sticking to a 24x24 pixel icon is a great middle of the road icon size to start out with. If you want something smaller a 20x20 pixel icon is good as well and works really well for dense displays where a mouse will be the primary interaction method.
The grid for your icon regardless of how you’re building it should be a 1px grid. Starting with a 24x24 pixel square will help you design icons regardless of platform. Most design tools will allow you to export assets @2x so you can easily achieve the 48x48 pixel minimum set by Apple. If you need smaller icons on a platform like web you can also try to make dense icons and set up your grid to be 20x20 pixels.
Within your base grid keeping a 2px perimeter keeps icons from feeling cramped. For example your content on a 24px icon should not exceed the 20px content area. Similarly on a smaller/dense icon they should not exceed the 18px content area. This will also make a smaller target size, but create a larger hit box and help with some basic selectable accuracy.
With in your icon this 2px perimeter acts as padding built right into the icon it’s self.
When placing icons into your design there are a few things to consider. The icon its self will be too small of a touch area on mobile devices. So leaving a touch areas that is roughly 2x the size of the icon around it will help tremendously.
For example if you have a 24px icon the touch areas should be 48px. If you have a 20px icon the touch area should be 40px. This touch area can be baked directly into your icons when creating an icon system for easy placement or can be part of your UI kit in your icon component.
Here are some best practices we’ve defined as a team at Headway.
PNGs are still used in most mobile development environments so here are items that we want to keep in mind.
When working on web we are able to use SVGs, which are vector files. We do not need to export multiples of them since they can programmatically be changed and altered and will always keep sharp clear lines.
SVG Prep Checklist that can help you get your icons ready for export.
Our standard naming convention follows this basic format:
ico - name of glyph - modifier @scaling factor .file format
When sorting icons in your directories we want to make sure their easily findable, when assets tend to all get grouped into a single directory a good naming convention can make is easier for the team to find.
Keeping your object in a frame at all times allows you to easily add this object to a library file or turn it into a component. Frames will also allow you to add a general clipping mask and place a grid over the top. When prepping icons for export make sure your frame has the background turned off.
When setting up a grid it’s best to set up a 1px grid and save it as part of your library so you can quickly drop it into your frame file when creating an icon. You can create multiple grids if you wanted to see half lines as well.
Figma uses a vector network so adding vector points or deleting them is as easy as ever. Here is their entire blog post on it. Introducing Vector Networks by Figma
If you’re making a complicated icon shape and you’re using masks and multiple vector shapes you can collapse down your shape by pressing CMD + E.
Settings are controlled here there is inside, outside, and center and weight. You can also adjust the way caps and corners work here.
We hope this icon guide and pack is a helpful tool to designers and non designers. We’ll be adding to this series on the technical side of design so make sure to subscribe to our newsletter so you can stay up to date with our latest design guides and resources and get our free icon pack!
See all the ways we can help you grow through design, development, marketing, and more.
Receive the latest articles, resources, events, and more!