My icon design workflow
Here’s some tips for creating icons — anything from a single colour pictogram to a highly detailed app icon.
There’s quite a few details my app design workflow article doesn’t cover, specifically relating to icon design. Icons are often where design software is pushed, making full use of vector abilities, masking, and constructive solid geometry. It is for those reasons that icons often require different tools and techniques.
Creation vs styling #
I think it is important to separate vector path creation from styling, because the two main tools I use — Photoshop and Illustrator — have vastly different abilities and strengths.
Photoshop’s rendering quality and masking abilities surpass pretty much all design tools, but Illustrator has better and more versatile vector tools. There really is nothing I’ve used that comes remotely close to Illustrator, for icon path creation.
Thankfully, jumping between the two apps is pretty seamless, so that’s what I do. Quick and simple jobs are often built directly in Photoshop, but icon sets or anything complex is created in Illustrator, then moved across to Photoshop for styling by pasting shape layers.
Illustrator for creation. Photoshop for styling and export.
Dimensions #
For icons where you have control over the size, the style and line width of your icons should help dictate dimensions. This is because many icons will require a centred line, and you can’t centre an odd width line on an even width icon. Conversely, you can’t centre an even width line on an odd width icon.
If you’re using an even line width, your icons should be even width × even height. If you’re using an odd line width, your icons should be odd width × odd height.
And if you can, never mix even and odd dimensions (unless you’re feeling crazy and are using a different line width on each axis).
Avoid using high DPI pixels to solve this — using a 1pt (or 1dp) line width and an odd point width icon might seem ok if your primary focus is on Retina devices, but it’ll just create a headache for for the 1× and 3× densities.
Your life will be far easier if you consider whole points to be the basis of your grid, and avoid fractional positioning. This means all initial work should be done at 1×.
macOS app icons #
Using a coarse grid can help with app icons. macOS’s app icon sizes are all exact multiples, so it’s possible to use the 16×16 pixel version of an icon to determine the main object positioning for a 1024×1024 pixel icon. This makes building all sizes far easier. Except for the tiniest versions, you may not need specific size tweaks.
Apple’s icons don’t quite hit that grid. For some strange reason, they’re a couple of pixels off — Safari’s icon diameter is 898 pixels, rather than being 896 pixels and aligning to the 1/16th grid perfectly.
Given the benefits, I’m ok with my circular icons being slightly different to Safari, iTunes and other Apple icons. We’re only talking about 2 pixels on a 1024 pixel icon. Hitting the grid is far more important. It makes me wonder why Apple chose the size they did though.
iOS app icons #
iOS app icon size don’t all correlate like macOS icons do. That makes life a little harder. Here’s the full list of pixel dimensions needed today (an even better list can be found in our Bjango App Icon Templates help).
- 29×29
- 58×58
- 60×60
- 76×76
- 80×80
- 87×87
- 120×120
- 152×152
- 167×167
- 180×180
- 1024×1024 (App Store)
There’s currently 11 sizes required. Starting with the 60px 1× iPhone home icon will let you scale up to 120px and 180px without the need to adjust positions of your artwork. Resisting the urge to initially build at higher fidelity can save loads of time, and help create better, more maintainable work. 1× is awesome. You can always jump to 2×, 3× or 4× when you’re ready to fine tune.
Except for specific situations, I’d recommend avoiding Smart Objects, due to the way they scale.
Start with Illustrator #
Apart from being able to work to a 1× grid while viewing full fidelity vectors, Illustrator contains many features that simply don’t exist anywhere else. Many features I wouldn’t want to live without. That’s why I use Illustrator as the starting point for most icons.
Snapping settings #
I don’t love Illustrator’s pixel snapping behaviour, but turning on View → Snap To Grid and turning off Align New Objects to Pixel Grid gets it pretty close to ideal. That second option can be found in the New Document window, and the fly-out menu of the Transform panel, for existing documents.
If you need to make some sub-pixel adjustments, the move window can be used (Object → Transform → Move, or pressing enter opens it).
Custom tool panel #
Recently, I’ve been experimenting with using a custom tool panel to remove tools I don’t use very often, and expose tools that are normally behind popup menus.
Pathfinder #
If you’re trying to add, subtract or exclude shapes (often referred to as boolean operations or constructive solid geometry), Illustrator’s Pathfinder is one of the best executions of the idea in any vector editor.
Of Pathfinder’s abilities, I love Divide the most — It cuts shapes into pieces so each overlapping region is a unique path, making it easy to discard unwanted portions.
Shape Builder #
Shape Builder is newer than Pathfinder, and often faster to use. With some separate, but overlapping shapes and the Shape Builder tool selected, drag to combine, option-drag to subtract.
⇧M selects the Shape Builder tool.
Dynamic round corners #
Illustrator CC 2014 added dynamic round corners, which appear as small handles in all corners. Dragging the handle increases corner radius. This works for all shapes, not just rectangles.
Dynamic round corners allow for creation of shapes that would be difficult or time consuming otherwise. Like many of Illustrator’s other features I love, it’s more about the convenience than anything else.
If you need more accuracy — and of course you do — exact corner radius values can be entered using Illustrator’s control bar.
Warp #
Warp and Illustrator’s other Envelope Distort features can be used to bend, twist and give life to your shapes.
Outline strokes #
I often turn strokes into paths before moving shapes back into Photoshop for styling. Some other design tools have this ability, but not many. It feels like a mandatory for a vector-based design tool.
Variable width strokes #
Illustrator’s width tool can alter the stroke width anywhere along a path.
With the Width tool selected (shift-W), double click a control point to show the options for more precision. Variable width strokes can be used to accurately construct shapes that may be difficult with other methods.
Dashed lines #
Illustrator contains two modes for dashed lines. One aligns dashes to corners, the other preserves dash and gap lengths. Aligning to corners often looks far better, and isn’t available in most design tools. Dashes can be converted to paths for use in Photoshop.
Transform each #
Scaling, rotating and moving many objects — as individual objects relative to their own origin — is easy in Illustrator. A simple feature, but one that can save hours of work.
Lasso selections #
When marquee selections don’t cut it, lasso selections often do. Lasso selections can be used in conjunction with the ⇧ (add) and ⌥ (subtract) modifiers.
Graphic styles #
I’ve set up some graphic styles in Illustrator to help work faster. If you’re creating an icon set that has similar characteristics across many elements, graphic styles can be a great way to apply styling quickly.
The graphic styles I use are part of my Illustrator screen design template, called Greyprint.
Pixel preview #
The pixel preview in Illustrator absolutely blows. The example below shows why it is a bit of a train wreck. Stray pixels, no gradient dithering, and general jankiness make Illustrator’s pixel preview hard to trust. This isn’t a big deal, because all my paths end up in Photoshop for styling anyway. It is something to be aware of though. You simply can not trust the pixel preview in Illustrator.
Here’s a comparison of the antialiasing in Illustrator’s pixel preview vs shape antialiasing in Photoshop. Illustrator’s antialiasing is embarrassingly poor.
Those stray pixels are dangerous, too. The dimensions of iOS and macOS interface images need to be exact multiples, so a stray pixel making an image 1px wider or taller could cause issues.
Styling in Photoshop #
Once I have the final icon paths, I usually paste them into Photoshop as shape layers. If you need to transfer many paths across, copying them all in Illustrator and pasting in Photoshop will place them all on a single layer. Selecting a single path and pressing ⇧⌘J in Photoshop moves a path into a new layer, ready for styling.
Templates #
We created our own templates for our app icons, which are now available for free as the open source Bjango App Icon Templates. They cover Android, iOS, macOS, Apple TV (tvOS), Apple Watch (watchOS), Windows, Windows Phone and web favicons. Where possible, they’re set up to automate exporting final production assets.
Exporting #
I do not recommend exporting bitmap images from Illustrator.
And, I don’t use PDFs for iOS assets.
To export PNGs and other bitmap images, I typically use slice sheets in Photoshop. There’s many benefits, including being able to use a single layer for 10s or 100s of icons, which keeps styling consistent and easy to edit. For more detail, please refer to my app design workflow article.
For exporting SVGs, I use a combination of Affinity Designer, Photoshop’s Generator and Illustrator.
Published 21 May 2015.