Icon Sizes: Standard px for Web, iOS and Android UI (2026)

The standard UI icon size is 24px (24dp on Android, 24pt on iOS), with 16px and 20px for dense UI and 32px or more for display use. The tap area around an icon is a separate number: at least 44x44pt on iOS, 48x48dp on Android and 24x24 CSS px for WCAG 2.2 Level AA. App store icons are 1024x1024px for Apple and 512x512px for Google Play. Every platform number below links to its source.

Platform numbers at a glance

Points (pt), density-independent pixels (dp) and CSS pixels are all device-independent units. On a standard screen, 24pt, 24dp and 24 CSS px are the same visual size.

UI icon sizes for websites

There is no W3C or browser standard for icon size on the web. In practice the web follows the same 24 grid as Material and the major icon sets: Lucide and Tabler draw on a 24x24 grid and render at 24px by default, and Material Symbols default to an optical size of 24. Our recommended scale, based on that grid:

Rules that keep a UI consistent:

1. Use four sizes, not ten. Pick from the scale above and stick to it.
2. Match the icon to the text next to it. A 20px icon sits well beside 14 to 16px text; 24px starts to dominate it.
3. Keep one stroke weight. Lucide and Tabler default to a 2px stroke at 24px; Heroicons outline uses 1.5px. Mixing sets with different strokes looks uneven at the same size.
4. Use the small-size versions when a set has them. Heroicons ships separate 20px and 16px solid icons drawn for those sizes, which read better than a 24px icon scaled down.

Define the scale once:

:root {
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-base: 24px;
  --icon-lg: 32px;
}

.icon { width: var(--icon-base); height: var(--icon-base); flex-shrink: 0; }

To set an icon's color the same way, see change SVG icon color with CSS.

Touch targets and icon buttons

The tap or click area matters more than the drawn icon. All three sources measure the target, not the glyph:

• Apple: 44x44pt default control size on iOS, iPadOS and watchOS, 28x28pt minimum. The HIG also suggests about 12pt of padding around elements with a bezel and about 24pt around elements without one.
• Android: at least 48x48dp per interactive element. In Jetpack Compose, Button, IconButton and ListItem already enforce this.
• WCAG 2.2 SC 2.5.8 (Level AA): at least 24x24 CSS px. A smaller target passes if a 24px circle centered on it does not touch another target or another small target's circle. Links inside sentences are exempt.
• WCAG SC 2.5.5 (Level AAA): at least 44x44 CSS px.

So a 24px icon in a 44px button passes iOS, WCAG AA and WCAG AAA. For Android, make it 48px.

<button type="button" aria-label="Delete" class="icon-button">
  <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">...</svg>
</button>

<style>
  .icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
</style>

An icon-only button needs an accessible name (aria-label on the button) and the icon itself hidden from screen readers. Full checklist: accessible SVG icons. For icons inside text buttons and CTAs, see SVG icons for buttons.

Mobile tab bar and navigation icons

• iOS: Apple's tab bar guidance recommends SF Symbols, which adapt automatically between regular and compact tab bars, so there is no single pixel size to hard-code. Keep each tab's target at 44x44pt or more and include a text label.
• Android and Material: 24dp icons (the Material Symbols default) in targets of at least 48x48dp.
• Mobile web: a 24px icon with a label, in a tab item at least 44px tall, meets both the Apple and the WCAG numbers. Use 48px to also meet Android's.

Icon sizes in UI frameworks

Defaults, read from each package's source or README:

MUI's numbers come from the SvgIcon source in @mui/material 9.5, which converts 20, 24 and 35px to rem. A 1em default means the icon follows the font size of its parent.

App icon dimensions

For web apps, the manifest needs 192x192 and 512x512 icons: see PWA icons and the web manifest. For browser tabs, see the favicon sizes guide, or make every size from one logo with the favicon generator.

FAQ