Creating compelling app icons

Micah Ilbery


Introductions

Micah Ilbery

Designer

Micah Ilbery
anamorph icon certificate icon partial download icon clairvoyant icon laptop icon dippi icon givemelyrics icon go-for-it icon ideogram icon image-optimizer icon nutty icon contacts icon palette icon principles icon quickdocs icon resizer icon sheild icon sudoku icon tasks icon workspaces icon

Why a good app icon matters

Because first impressions matter

AppCenter

The HIG

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)

Our example

example icon 128px example icon 64px example icon 48px example icon 32px example icon 16px

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.

unique shape
square
shape in dock

Icon sizes

The importance of pixel-fitting

pixel-fitted icon 128px pixel-fitted icon 64px pixel-fitted icon 48px pixel-fitted icon 32px pixel-fitted icon 16px
scaled icon 128px scaled icon 64px scaled icon 48px scaled icon 32px scaled icon 16px

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 across the OS
icon sizes across the OS
icon sizes across the OS

Icon sizes continued...

What even is pixel-fitting?

pixel grid

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.


Color

Get fun with it


Color continued...

Careful of color associations.

blue green yellow red

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

unique shape size
square size
circle size

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.

Canvas Size

Base Line

X-Height

Mean Line


16x16
1
14
8
32x32
2
26
16
48x48
3
40
24
64x64
4
56
32
128x128
9
104
64

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.

outlines vs no outlines

Lighting

Light source, highlights, shadows, and materials

light direction
highlights
shadow
material

Inset & Outset Pictograms

Give that icon some depth

pictogram example
pictogram
outset pictogram
outset pictogram
inset pictogram
inset pictogram
inset pictogram
inset pictogram

Composition

Getting the details just right

pixel-fitted icon 128px pixel-fitted icon 64px pixel-fitted icon 48px pixel-fitted icon 32px pixel-fitted icon 16px

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.


Demonstration

Let's create an icon


Thank You

1 2 3 4 5 6 7 8 9 10
11 12 13 14 15 16 17