Developer Tips: Shipping Application Icons
How to ship crisp, legible icons with your app
AppCenter is nearing 50 apps, and all of them are amazing, but it’s time for a bit of an intervention: your app icons could be much better by following just a few simple tips.
Follow The Style Guide
There’s an HIG section on iconography with tons of detailed information on how to style your icon so that it fits in and looks native to elementary OS. Here’s a few quick highlights:
- All elementary OS icons have a thin outline (stroke). The width of this stroke is one pixel for all icons, at every size. Strokes are also semi-transparent. This ensures that icons appear sharp against a variety of backgrounds.
- Since the edges of an object tends to reflect more light due to your position relative to it and to the light source, they will have a highlight. To apply the edge highlight effect to your icon, draw a subtle, 1 pixel, inner stroke as a highlight. This stroke is slightly brighter at the top and the bottom than it is at the edges.
- Your icon should not simply be a full-frame image or a completely flat pictogram. Where you can, distinguish your icon with subtle yet appealing visuals.
Scale (Not Stretch) to Appropriate Sizes
Shipping a single icon at a large size or stretching a single icon to many sizes will not keep your icon legible. You should have 6 icons in total that have been individually tailored to be displayed at each of the following sizes:
At each size, remember to align elements as closely as possible to the pixel grid. Misaligned elements will appear fuzzy due to anti-aliasing. Reduce detail as necessary at small sizes and exaggerate important elements.
Support HiDPI
If you’re shipping SVG icons, this is as simple as installing your icons to both 1x and 2x directories in HiColor. For example, for a 48px icon you would install your SVG icon file to both /usr/share/icons/hicolor/48x48/apps and /usr/share/icons/hicolor/48x48@2/apps. If you’re not shipping SVG icons, you’ll need to export your icons at their normal resolution as well as at twice that resolution (so 96px for a 48px icon).
For more details on HiDPI icons, see our previous post on the matter. This post is aimed at icon theme designers on the wider Open Source desktop, but it should still be helpful for app developers on elementary OS.
We’d like to say thanks again to everyone who’s bought an app on AppCenter, our supporters on Bountysource and Patreon, and those who’ve purchased a copy of elementary OS or merch from our store. Every contribution helps make all of this possible, and we wouldn’t be here without you! If you’d like to help improve elementary OS, don’t hesitate to Get Involved!
