REFERENCE · ICON DESIGN
Icon Grid
Standard icon sizes, optical alignment guides, and safe zones for pixel-perfect icons
Micro
16px
Favicon, status bar
Small
20px
Tab bar (iOS)
Default
24px
Material, toolbar
Medium
32px
Desktop, sidebar
Large
48px
Nav, empty state
Grid Anatomy (24px)
Every icon sits on a square canvas with crosshair guides, a safe zone, and key shapes
Canvas
The full bounding box — 16, 20, 24, 32, or 48px square
Safe Zone (2px padding)
Keep strokes and fills inside this area to ensure consistent visual weight
Key Shape — Circle (20px)
Circles appear larger than squares at the same size — constrain to 20px diameter in 24px canvas
Key Shape — Square (18px)
Squares sit inside the safe zone — 18px for a 24px canvas
Optical Alignment Rules
Circles extend 1px beyond squares
A circle touching the same boundary as a square looks smaller. Bleed it 1px to appear optically equal.
Triangles extend 1–2px
Pointed shapes have less visual mass — push them slightly past the safe zone for equal weight.
Tall shapes: fill height, constrain width
Vertical rectangles use the full height of the safe zone but stay narrower than square key shapes.
Wide shapes: fill width, constrain height
Horizontal rectangles span the full width but stay shorter to balance visual weight.
Use 2px stroke at 24px
Scale stroke proportionally: 1.5px at 16/20, 2px at 24, 2.5–3px at 32/48.
Platform Icon Size Requirements
Click to copy all sizes for a platform
Material Design 3
16 · 20 · 24 · 36 · 48
android
SF Symbols (Apple)
16 · 20 · 24 · 28 · 32 · 44 · 48
ios
Fluent UI (Microsoft)
16 · 20 · 24 · 28 · 32 · 48
windows
Lucide / Feather
16 · 20 · 24
web
Heroicons
16 · 20 · 24
web
Phosphor
16 · 20 · 24 · 32 · 48
web
Font Awesome
16 · 20 · 24 · 32 · 48 · 64
web
iOS App Icon Sizes
| Context | Size | Scale |
|---|---|---|
| App Store | 1024×1024 | @1x |
| Home Screen | 60×60 | @2x @3x |
| Spotlight | 40×40 | @2x @3x |
| Settings | 29×29 | @2x @3x |
| Notification | 20×20 | @2x @3x |
Android App Icon Sizes
| Density | Adaptive | Legacy |
|---|---|---|
| mdpi | 108×108 | 48×48 |
| hdpi | 162×162 | 72×72 |
| xhdpi | 216×216 | 96×96 |
| xxhdpi | 324×324 | 144×144 |
| xxxhdpi | 432×432 | 192×192 |
| Play Store | 512×512 | |
Recommended Stroke Widths
| Canvas Size | Stroke | Safe Zone | Key Circle | Key Square | Corner Radius |
|---|---|---|---|---|---|
| 16px | 1.5px | 1px | 14px | 12px | 1px |
| 20px | 1.5px | 1px | 18px | 16px | 1.5px |
| 24px | 2px | 2px | 20px | 18px | 2px |
| 32px | 2.5px | 2px | 28px | 24px | 2.5px |
| 48px | 3px | 4px | 40px | 36px | 3px |