Icon Sizes Guide: Standard Sizes for Web, Apps, Favicons and Print
The icon sizes that work for websites, iOS and Android apps, favicons, social media and print, with a simple rule for choosing export sizes.
"What size should my icons be?" has a short answer for each place an icon can appear. This guide collects the sizes that are in common use, so you can export once and move on.
Websites and web apps
Most interface icons are drawn on a 24 pixel grid, and that is the usual display size too.
- 16 px: dense tables, inline with small text
- 20 px: compact buttons and form fields
- 24 px: the default for navigation, buttons and lists
- 32 px: larger buttons and feature lists
- 48 px and up: empty states, feature highlights, hero sections
Use SVG so one file covers all of these. If an icon sits beside text, size it in em so it grows with the font.
Touch targets are bigger than icons
The icon and the area you can tap are different things. Apple's guidelines ask for a tap area of at least 44 by 44 points. Google's Material Design asks for 48 by 48 dp. A 24 pixel icon is fine as long as the button around it reaches that size.
Mobile apps
- iOS tab bars and toolbars: about 24 to 28 points. Supply vector PDF or SVG, or PNG at 1x, 2x and 3x (for 24 points: 24, 48 and 72 pixels).
- Android: 24 dp for system and action icons. Vector drawables are standard. PNG densities for 24 dp are 24, 36, 48, 72 and 96 pixels.
Favicons and home screen icons
A modern website needs only a few files:
- favicon.ico: 32 by 32, for older browsers
- favicon.svg: any size, used by current browsers
- apple-touch-icon.png: 180 by 180, for iPhone and iPad home screens
- 192 and 512 px PNG: for Android and installable web apps
The steps are in how to make a favicon from an SVG icon.
Presentations and documents
On a standard 16:9 slide, icons beside text look right at roughly 0.5 to 1 inch wide. Export PNG at 256 or 512 pixels so they stay sharp on a projector. In PowerPoint and Word you can insert the SVG directly.
Social media
Icons usually sit inside a larger graphic, so export them big and scale down.
- Icons within a post or story graphic: 512 px PNG
- Instagram highlight covers: design on a 1080 by 1920 canvas with the icon in the center. See Instagram highlight cover icons.
Print needs about 300 pixels for every inch. Multiply the printed width in inches by 300 to get the pixel size.
- 1 inch (2.5 cm) wide: 300 px
- 2 inches (5 cm) wide: 600 px
- 3.4 inches (8.5 cm) wide: 1024 px
For anything larger, send the printer a vector PDF or SVG. It has no pixel limit.
The simple rule
If you can use SVG, use it and stop worrying about size. If you need a PNG, export at double the size it will be shown at. When unsure, take 512.
Every icon on this site exports to PNG and JPG from 32 to 1024 pixels, and to SVG and vector PDF.
Questions
Why are icons designed at 24 pixels?
It is small enough for dense interfaces and divides evenly into 2, 3, 4, 6, 8 and 12, which makes it easy to align shapes to whole pixels. Most major icon systems use it.
Should icon sizes be even numbers?
Even sizes center more cleanly next to text and inside buttons. Odd sizes can leave the icon half a pixel off, which makes edges look soft.
What size should a logo icon be?
A logo is a separate job. Note that the icons here may not be registered as trademarks or logos. See the license.
Every icon on this site is free to download. If this guide helped, you can say thanks by buying a pack from the LinearAndLoom Etsy shop.
