Icons are simple pictographic communication devices that describe an object, action, or emotion. They permeate everyday life, from pictographic road signs to the settings on your mobile phone. Icons see almost ubiquitous use in websites and applications, as they can help users to identify key actions or ideas quickly – especially useful when users tend to scan content much quicker than other written media.
If using many icons for a single project, it’s important that these feel like they belong together to create a feeling of unity and credibility.
An icon set is a collection of icons that carry a consistent visual theme across each other. Often times these are used in series, such as on a list of features or on a navigation bar along the bottom of a phone app. It’s important that these icons appear balanced and consistent so they harmonise visually and could – in theory – be swapped out with another icon from the set.
An icon set would tend to run across an entire project and not only address the subject matter, but also user interface elements. For example, a website for a bank may use icons that represent money – such as a credit card – but would also be likely to use common icons such as arrows for navigation, telephone, and email icons, or a printer icon to symbolise a page can be printed off.
The best way to start is by deciding on some rules to carry across your set. First and foremost, you should decide on a common artboard size for your icons. We tend to use 48px × 48px as standard, but if your icon set is going to be seen more often on low-resolution, legacy screens, you may wish to use 24px × 24px or smaller.
In order to make sure your icons scale correctly relative to each other, you may also wish to determine a grid system for each icon to adhere to. There’s no hard-and-fast rule for this, but a good grid will allow wide and tall icons to reach the edges of your artboard, whilst giving more square-aspect icons a logical guideline to attach to.
A standardised stroke width (or set of widths) along the set will have the biggest impact on an icon set’s visual harmony. A thicker stroke can make an impact stylistically, but might not allow you much room in your artboard. A thinner stroke can appear more classy, but be careful not to go too thin as some browsers may have difficulty rendering your icon as desired. As a standard rule of thumb, try to have a stroke width appear a minimum of 1px thick on a 24px × 24px artboard (so using our example of a 48px × 48px artboard, this would be a 2px stroke width).
As long as you have a system in place, you can also mix and match stroke widths. For example, you could use one width for outer elements, but a different width for inner elements.
Ideally, you want your icon to communicate its purpose using as few anchor points as possible. Fewer points make for smoother lines and curves, and also ultimately a smaller end file size. If you have a path with a heavy number of anchor points (and you’re using Adobe Illustrator), you can try the Smooth tool to reduce these down.
If your icon set is only ever intended to be a single colour, you only need to prepare your icons in black – developers can easily style your icons with external CSS.
However, if your set calls for multiple colours, you’ll want to specify this. Consider your palette first – otherwise, you risk giving in to providing too much variance. To help developers, you may also wish to give your paths consistent names depending on their colours, so they are more easy to target if need be.
This is somewhat comparable to border-radius in the CSS world. You may wish to round your corners to provide a friendlier feel to your icons – or go without for a more formal effect.
If you do opt for rounded corners, it helps to keep these fairly consistent across icons. It’s helpful to at least define small, medium and large values, otherwise you will find it difficult to produce some shapes. When dealing with corners, you will come across instances where using a completely different value makes sense – in which case, it’s absolutely fine to do so.
As you build out your icon set, you may notice some icons share common elements, such as dots or arrowheads. Keeping these to similar sizes helps in a small way to unify your icon styles.
If using strokes, you have the ability to define how corners and the ends of your paths (caps) appear. A ‘butt cap’ (straight end) and a ‘miter join’ (straight corner) will help to create a feeling of formality or sophistication. A round cap and join creates a friendlier look, especially when paired with a thicker stroke width.
You can also mix and match these to good effect, especially when reflecting a brand’s style.
Strokes and fills are handled independently of each other, and so requires some predetermination (and discussion with your developers) on which to opt for. Stick to strokes if your icons rely on an outlined style with uniform stroke widths, allowing for easier editing at a later date – otherwise, converting strokes to fills will open up more creative freedom, such as being able to vary stroke widths and taper caps. You can, of course, mix strokes and fills if your icon set’s style calls for it.
Using strokes? Make sure your border alignment is set to ‘centre’ rather than ‘outside’ or ‘inside’. Although many popular vector editing software presents these options, there is no real equivalent in SVG’s specifications and will produce results you won’t expect.
By default, when an SVG icon with a stroke is resized, the stroke will scale along with it accordingly. However, if you would rather keep the stroke width the same independently of this, you can set ‘vector-effect=”non-scaling-stroke”’ on paths using a code editor.
Once you have your icon set ready, you’ll want to be able to store them in an easy-to-use, easy-to-extend way.
If using Adobe Illustrator, you have the ability to export and compress all artboards as SVGs in one fell swoop – this is especially invaluable if you have a particularly large set of icons (imagine having to save 50, or even 100 icons individually!). Make sure your artboards are named exactly how you would want the files to be named – lowercase letters and the use of hyphens in place of spaces will save development time going forward.
To make it easier to apply icons from this export, you may want to adopt a library system to keep them. Adobe boasts its platform-wide cloud library which allows you to store and use assets between the entire Adobe range of programs (Photoshop, inDesign, After Effects, etc.). Alternatives made specifically for icons are apps such as Iconjar (with the ability to export icons in different formats and colours directly from the app), and Noun Project’s Lingo platform (which allows for team-level asset collaboration).
Although I use Adobe Illustrator for icon creation, most of my work involves using UI mockup software such as Sketch or Figma. One advantage to using these is the ability to create reusable components or symbols that can be managed from one common source – icons are a perfect use case for this.
That said, what’s less perfect is the way both of these programs manage large quantities of icons – without any third-party help, you’ll find yourself manually adding icons individually. For Sketch, at least, there is a wonderful plugin by the name of Sketch Icons that take the pain out of this. It will add all your icons from a folder, name the symbols according to the file name, and allow you to select a ‘shared style’ (a certain fill or stroke you define) to allow colour overriding for symbol instances.
Making effective icon sets takes time and practice, but by defining and sticking to your own set of rules, they start to come naturally. Keeping your icons organised – and utilising apps designed for this very purpose – will help you to keep consistency, hand off for development, and extend your set in future if need be.