Creating compelling app icons
Why a good app icon matters
Because first impressions matter
Your guide to greater icons
What we will cover
- A brief overview of the iconography section of the HIG.
- How it is used in practice when making an app icon.
What we won't cover
- How to use a specific software for creating app icons. (Inkscape, Akira, Figma, Illustrator, Sketch, ect.)
- Magic cheat codes for making icons the easy way. (There are none)
Shape & Metaphor
More than circles and squares
Try to avoid using a rounded-square or circle for your icon shape. find ways to turn the idea into a unique shape.
When making you icons the best way to stand out is to give it a unique shape. This will help them stand out of the crowd in the application launcher and dock.
The importance of pixel-fitting
Just like font's are hinted for different sizes we need to 'hint' our icons for display at different sizes. Otherwise our icons will scale incorrectly and look blurry.
Icon sizes continued...
Why it matters
Icon sizes continued...
What even is pixel-fitting?
Here we see a zoomed in view of the 48px pixel-fitted icon on a pixel-grid where every square in the grid is one pixel. Notice how the icon's edges, strokes, and details align to the grid. Making sure important elements of the icon sit on full pixels is pixel-fitting.
Get fun with it
Careful of color associations.
Colors do have their connotations, so be cognizant of this when picking them. But you can use these color connotations to help convey your icon's meaning.
Measurements & Exceptions
Size for eyes
Our icon has a similar visual weight as a rounded square so it follows these measurements. However if our icon were more round or a different shape all together we may need to extend the size of our icon to remain visually weighted the same.
Outlines & Contrast
How to stand out from the background
Here we see the difference in contrast on a background between icons with an outline and those without. As you can see the icons with an outline stand out much better than those without.
Light source, highlights, shadows, and materials
Inset & Outset Pictograms
Give that icon some depth
Getting the details just right
Detail elements change as we get smaller and smaller to better fit the size icon they sit on. On the smallest size we get rid of them all together.