1. Start with the size it will be used at
Decide the target size before drawing. A 24px UI icon and a 96px feature icon are different drawings, not one drawing scaled. Detail that reads at 96px turns to mud at 24px. Draw on a canvas at the smallest target size, then scale up and add detail if a larger version is needed.
2. Use a grid and keyline shapes
A 24px grid with a 2px padding, plus a set of keyline shapes (circle, square, tall and wide rectangles) that all occupy the same visual weight. Material Design's icon grid is the reference most teams copy. Keylines are why a round icon and a square icon in the same set look equally sized: the circle is drawn slightly larger to match the square's optical mass.
3. Pick one stroke weight
Outline icons live or die on stroke consistency. A 2px stroke at 24px is the common default; 1.5px reads lighter and more editorial. Whichever you choose, every icon in the set uses it, including inner details. Mixed weights are the fastest way to make a set look assembled from three sources.
4. Keep gaps consistent
The space between strokes matters as much as the strokes. At small sizes gaps under 2px fill in. Set a minimum gap equal to the stroke weight and hold it across the set. Where a shape needs a thinner gap, simplify the shape instead.
5. Restrict angles
Use 45° and 90°, and 30° or 60° only when the whole set does. Odd angles blur at small sizes because they do not sit on pixels. Snap anchor points to whole or half pixels for the same reason.
6. Commit to one style
Outline, filled, duotone or flat colour. Corner radius sharp or rounded. Terminals square or round. Write these decisions down before icon two, because by icon forty you will have forgotten. This is the same discipline as a brand guide, covered in brand identity systems.
7. Test in context, not on a white board
Drop the icons into the actual interface at actual size, next to text, on the real background colours, on a phone. Icons that looked balanced on an artboard often need their optical centre nudged once they sit beside a label. Check in dark mode too.
Android app icon size and other icon dimensions
Design icons on a grid at the size they will be seen, then export to the sizes each platform asks for. These are the dimensions we use most often when handing icons and app logos to developers.
| Where it is used | Size to design or export | Note |
|---|---|---|
| Android adaptive app icon | 108 x 108 dp, artwork inside the central 72 x 72 dp | Launchers crop to a circle, squircle or square, so keep the logo in the safe zone |
| Google Play store listing | 512 x 512 px PNG | Shown in the store, separate from the launcher icon |
| iOS App Store icon | 1024 x 1024 px PNG, no transparency | Xcode generates the smaller sizes |
| Android and Material system icons | 24 x 24 dp | Drawn on a 24 dp grid with 2 dp padding |
| Website favicon | 32 x 32 px, plus 180 x 180 px for Apple touch | Add 192 and 512 px versions for a web app manifest |
Common questions
- What size should UI icons be designed at?
- 24px is the standard base for interface icons, with 16px and 20px variants for dense UI and 32px or 48px for feature icons. Design each variant deliberately rather than scaling one drawing.
- Should icons be outline or filled?
- Either, consistently. Outline icons suit lighter, editorial interfaces; filled icons read faster at very small sizes and in navigation. Many systems use outline by default and filled for the active state.
- Which tool is best for icon design?
- Figma for UI icon sets because of components and pixel snapping; Illustrator for icons headed to print or for complex vector work. Both export clean SVG.
- What is the Android app icon size?
- Design the adaptive icon at 108 x 108 dp with the important artwork inside the central 72 x 72 dp, because launchers mask the edges into different shapes. The Google Play listing needs a separate 512 x 512 px PNG.
- What size should a website icon or favicon be?
- A 32 x 32 px favicon covers browser tabs, a 180 x 180 px Apple touch icon covers iPhone home screens, and 192 and 512 px versions cover Android and web app manifests.
