Icon Size Reference

Pick an interface context, from mobile navigation to favicons and touch targets, and get the recommended icon size in px, dp and rem with the minimum accessible touch area.

By Marshkalk

Choose an interface context below to see its recommended icon size, minimum touch target and the platform guideline behind it.

Why icon and touch target size is regulated

An icon that is too small is hard to read at a glance, and a tap target that is too small is hard to hit accurately, especially for anyone with reduced fine motor control, a larger finger, or a device used one-handed on the move. Apple's Human Interface Guidelines, Google's Material Design and the Web Content Accessibility Guidelines (WCAG) each set minimum sizes for exactly this reason: below a certain size, error rates on touchscreens rise sharply, and text or icon labels stop being legible at a normal viewing distance. These are not arbitrary numbers; they come from measured tap accuracy and readability studies used to set platform-wide defaults.

Full reference table: icon size by context

ContextIcon sizeTouch targetPlatform
Mobile navigation bar icon24 x 24px44 x 44pt (iOS) / 48 x 48dp (Android)iOS / Android
Desktop toolbar icon16 to 24px (20px typical)32 x 32px minimumDesktop (Windows, macOS, web)
Favicon16, 32 and 48px (multi-resolution)Not applicableBrowser
Floating action button (FAB)24 x 24dp icon56 x 56dp buttonAndroid / Material Design
Icon in a list or menu item24 x 24px48 x 48dp row heightiOS / Android / web
iOS system app icon1024 x 1024px (App Store) / 180 x 180px (home screen, 60pt at 3x)Full icon areaiOS
Android / Material app icon512 x 512px (Play Store) / 108 x 108dp adaptive icon (72dp safe zone)Full icon areaAndroid
Generic touch target minimumNot applicable44 x 44px CSS (WCAG 2.2 AA) / 24 x 24px (WCAG AAA) / 48 x 48dp (Material Design)Cross-platform, web accessibility

UK digital accessibility regulation

In the UK, the Equality Act 2010 requires services, including websites and apps, to be accessible to disabled users, and the Public Sector Bodies (Websites and Mobile Applications) Accessibility Regulations 2018 make WCAG 2.2 AA the explicit standard for public sector digital services. Touch target size sits inside WCAG's Success Criterion 2.5.8 (Target Size, Minimum), which sets 24 x 24 CSS pixels as the AA floor, with 44 x 44 CSS pixels recommended as better practice and used as the reference minimum by many UK public sector design systems, including GOV.UK.

Limits of this reference

Meeting a recommended icon or touch target size is one part of digital accessibility, not the whole of it. Colour contrast, keyboard navigation, screen reader labelling and focus order are separate criteria that a correctly sized icon says nothing about. Treat this tool as a quick sizing reference for design and development, not as proof of accessibility compliance on its own. For layout spacing and grid decisions around these icons, see the Grid System Builder.