Icon Grid · Reference
Icon Grid
Standard icon sizes, platform grid systems, and app icon export sizes. Click any row to copy. Runs in your browser — no server call, no tracking.
Standard Icon Sizes
Click to copy the dimensions
Micro
16px
Favicon, status bar
Small
20px
Tab bar (iOS)
Default
24px
Material, toolbar
Medium
32px
Desktop, sidebar
Large
48px
Nav, empty state
Platform Icon Grids
Standard size sets per design system — click to copy
Material Design16, 20, 24, 36, 48px
Apple SF Symbols16, 20, 24, 28, 32, 44, 48px
Fluent UI16, 20, 24, 28, 32, 48px
Lucide / Feather16, 20, 24px
Heroicons16, 20, 24px
Phosphor16, 20, 24, 32, 48px
Font Awesome16, 20, 24, 32, 48, 64px
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.
iOS App Icon Sizes
| Use | 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 |