Wählen Sie unten einen Interface-Kontext, um die empfohlene Icon-Größe, die minimale Touch-Zone und die zugehörige Plattformregel zu sehen.
Icon (maßstabsgetreu)
Touch-Zone (maßstabsgetreu)
Diese Werte folgen den üblichen Vorgaben aus Apple HIG, Material Design und BITV/WCAG. Das Einhalten einer Größenempfehlung allein stellt keine vollständige digitale Barrierefreiheit sicher.
Warum die Größe von Icons und Touch-Zonen geregelt ist
Ein zu kleines Icon lässt sich auf einen Blick schlecht erkennen, und eine zu kleine Touch-Zone ist schwer präzise zu treffen, besonders für Menschen mit eingeschränkter Feinmotorik, größeren Fingern oder bei Einhandbedienung unterwegs. Apples Human Interface Guidelines, Googles Material Design und die Barrierefreie-Informationstechnik-Verordnung (BITV) legen genau aus diesem Grund Mindestgrößen fest: Unterhalb einer bestimmten Größe steigt die Fehlerrate auf Touchscreens deutlich, und Icon-Beschriftungen werden bei normalem Betrachtungsabstand unlesbar. Diese Werte sind nicht willkürlich, sondern beruhen auf gemessener Treffgenauigkeit und Lesbarkeitsstudien, die als plattformweite Standardwerte dienen.
Vollständige Referenztabelle: Icon-Größe nach Kontext
| Kontext | Icon-Größe | Touch-Zone | Plattform |
|---|---|---|---|
| Icon in der mobilen Navigationsleiste | 24 x 24px | 44 x 44pt (iOS) / 48 x 48dp (Android) | iOS / Android |
| Icon in der Desktop-Symbolleiste | 16 bis 24px (üblich 20px) | Mindestens 32 x 32px | Desktop (Windows, macOS, Web) |
| Favicon | 16, 32 und 48px (mehrere Auflösungen) | Nicht zutreffend | Browser |
| Floating Action Button (FAB) | 24 x 24dp Icon | 56 x 56dp Button | Android / Material Design |
| Icon in einer Liste oder einem Menü | 24 x 24px | 48 x 48dp Zeilenhöhe | iOS / Android / Web |
| iOS-System-App-Icon | 1024 x 1024px (App Store) / 180 x 180px (Startbildschirm, 60pt bei 3x) | Gesamte Icon-Fläche | iOS |
| Android- / Material-App-Icon | 512 x 512px (Play Store) / 108 x 108dp adaptives Icon (72dp Sicherheitszone) | Gesamte Icon-Fläche | Android |
| Allgemeine Mindest-Touch-Zone | Nicht zutreffend | 44 x 44px CSS (BITV/WCAG 2.2 AA) / 24 x 24px (AAA) / 48 x 48dp (Material Design) | Plattformübergreifend, Web-Barrierefreiheit |
Deutscher Rechtsrahmen für digitale Barrierefreiheit
In Deutschland verpflichtet die Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) öffentliche Stellen zur barrierefreien Gestaltung ihrer Websites und Apps nach WCAG-Kriterien. Ab dem 28. Juni 2025 gilt zusätzlich das Barrierefreiheitsstärkungsgesetz (BFSG), das die Anforderungen erstmals auf viele private Unternehmen ausweitet, darunter Online-Shops, Banken und digitale Dienstleistungen. Die Größe von Touch-Zonen fällt unter das WCAG-Erfolgskriterium 2.5.8 (Zielgröße, Minimum), das 24 x 24 CSS-Pixel als Mindestwert auf Stufe AA festlegt, wobei 44 x 44 CSS-Pixel als bessere Praxis empfohlen werden. Ein Verstoß gegen das BFSG kann für betroffene Unternehmen ab 2025 mit Bußgeldern geahndet werden.
Grenzen dieser Referenz
Eine empfohlene Icon- oder Touch-Zonen-Größe einzuhalten ist nur ein Teil der digitalen Barrierefreiheit, nicht ihr gesamter Umfang. Farbkontrast, Tastaturnavigation, Beschriftung für Screenreader und Fokusreihenfolge sind eigene Kriterien, zu denen ein richtig dimensioniertes Icon nichts aussagt. Nutzen Sie dieses Werkzeug als schnelle Größenreferenz für Design und Entwicklung, nicht als Nachweis der Barrierefreiheit. Für Abstände und Rasteraufbau rund um diese Icons siehe den Rastersystem-Generator.