Icon-Größen auf dem Raster (16, 20, 24)

Die häufigsten UI-Icon-Größen — 16, 20, 24 und 32 Pixel — sind Bounding-Box-Größen: Jede Zahl benennt den quadratischen Container, in dem ein Icon gezeichnet wird, nicht die Zeichnung darin. Die Liste ist aus demselben Grund kurz, aus dem Abstandslisten kurz sind, und sie passt zu allem anderen: Alle vier Werte liegen auf dem 4px-Raster, und 16 und 32 sind exakte Stufen der modularen Skala, aus der viele Systeme ihre Abstände generieren.

Dieser Artikel behandelt, woher die Standardgrößen kommen, warum zwei Icons „gleicher Größe” unterschiedlich groß wirken können, welche Icon-Größe neben welche Textgröße gehört und wie du das Paar ausrichtest, wenn es gewählt ist — die Icon-förmige Ecke eines vollständigen Abstände-Systems.

Woher kommen die Standard-Icon-Größen?

Dieselben Zwänge, die das 8-Punkt-Raster hervorgebracht haben. Vielfache von 4 überstehen die Dichtefaktoren 1,5×, 2× und 3×, mit denen Bildschirme rendern, ohne auf halben Pixeln zu landen, und eine Bounding-Box, die ihre Arithmetik mit der Abstandsliste teilt, setzt sich sauber zusammen — ein 24px-Icon mit 12px Padding auf jeder Seite ergibt ein 48px-Steuerelement, ohne Rest. Innerhalb der Liste hat jede Größe eine Aufgabe: 16 passt zu dichten Text-UIs und Inline-Verwendung (sie entspricht der klassischen Fließtextgröße), 24 ist die komfortable Standardgröße, in der die meisten Icon-Sets gezeichnet sind, 20 trifft die Mitte für kompakte Interfaces, und 32 und größer bedienen Empty States und Feature-Illustrationen.

Auf einer gemeinsamen modularen Abstände-Skala — Basis 16, Verhältnis 2, zwei Zwischenwerte pro Verdopplung, die 8, 11, 16, 23, 32, 45, 64 erzeugt — landen die Icon-Größen auf oder nahe den Stufen: 16 und 32 sind exakt, 24 liegt einen Pixel über der 23er-Stufe, und 20 gehört zur 4pt-Ebene zwischen den Stufen. Auf oder nahe genügt. Was auf dem Raster bleiben muss, ist nicht das Icon allein, sondern die Summe — Box plus Padding — denn diese Summe ist die Größe, an der sich benachbarte Elemente ausrichten.

Warum wirken zwei Icons gleicher Größe unterschiedlich groß?

Weil die Zahl die Box benennt und Sets sich darin unterscheiden, wie viel der Box sie nutzen. Icon-Sets zeichnen ihre Glyphen innerhalb einer Live Area mit eingebautem Padding: Materials System-Icons zum Beispiel sind auf einem 24px-Raster entworfen, dessen Zeichnung innerhalb einer 20px großen Live Area bleibt, mit 2px Beschnitt auf jeder Seite. Ein „24px”-Material-Icon besteht in Wirklichkeit aus etwa 20px Zeichnung in einer 24px-Box.

Dieses Padding ist keine Verschwendung — so gleicht ein Set die optische Größe aus. Formen füllen das Auge ungleich: Ein ausgefülltes Quadrat, das auf dieselben Grenzen gezeichnet ist wie ein dünn umrissener Kreis, wirkt deutlich größer, deshalb geben Sets runden und diagonalen Formen etwas mehr Ausdehnung und dichten, quadratischen Formen etwas weniger — alles innerhalb eines gemeinsamen Containers. Die Konsistenz lebt in der Box; die Zeichnung variiert bewusst darin.

Die praktische Folge: Das Mischen von Icon-Sets ist der Grund, warum Interfaces subtil uneben werden. Wenn ein Set etwa 20px Zeichnung in seiner 24px-Box hält und ein anderes etwa 22px, rendern die Icons des zweiten Sets bei gleicher Nenngröße rund 10 % größer. Nichts ist messbar falsch — jede Box ist 24px — und doch wirkt die Toolbar uneinheitlich. Die verlässlichen Lösungen sind, innerhalb eines Sets zu bleiben oder importierte Glyphen vor dem Ausliefern auf die Live Area deines Sets zu skalieren.

Welche Icon-Größe gehört neben welche Textgröße?

Eine durchgerechnete Paarung aus der obigen Skala (Basis 16, Verhältnis 2, zwei Zwischenwerte), mit Zeilenhöhen auf ihrem 8px-Grundlinienraster — die Grundlinie ist die Hälfte der Basis, sodass Textrhythmus und Icon-Boxen ein gemeinsames Quantum teilen:

Lies die beiden rechten Spalten als konkurrierende Strategien. Die Spalte fest rastet jeden Kontext auf die nächste Größe ein, die das Icon-Set tatsächlich ausliefert (12, 16, 24, 32), sodass Glyphen in der Größe rendern, für die sie gezeichnet wurden, und Konturen auf ganzen Pixeln bleiben. Die Spalte 1em bemisst das Icon in em-Einheiten, sodass es seinem Text exakt folgt — ein Icon in einer 23px-Zwischenüberschrift rendert bei 23px, gezeichnete Größe hin oder her.

Öffne die Skala hinter dieser Tabelle in Scale Composer — Basis 16, Verhältnis 2, zwei Zwischenwerte — und lies die Stufen ab, aus denen die Textspalte stammt: 8, 11, 16, 23, 32, 45, 64, mit dem 8px-Grundlinienraster unter den Zeilenhöhen.

Sollten Icons in px oder em bemessen werden?

Feste Stufen gewinnen tendenziell in der UI-Chrome — Toolbars, Navigation, Buttons, Tabellenzeilen — wo die Nachbarn eines Icons andere Icons und rastergroße Steuerelemente sind statt Sätze. Schärfe zählt dort am meisten: Auf ganze Pixel gezeichnete Zeichnung kann beim Skalieren auf Bruchteilen landen, und eine Spalte von Icons neben gemischten Textgrößen will trotzdem eine einzige Icon-Größe, damit die Spalte als Spalte gelesen wird.

Die em-Bemessung gewinnt tendenziell innerhalb von fließendem Text: ein Pfeil für einen externen Link, ein Inline-Statuszeichen, ein Icon in einer Überschrift, das die Schrifteinstellungen der Nutzer skalieren können. Dort ist der einzige Nachbar des Icons sein eigener Text, dem Text zu folgen schlägt Pixelschärfe, und 1em folgt jeder künftigen Schriftgrößenänderung ohne weitere Buchführung. Viele Systeme fahren beide Strategien gleichzeitig, jeweils im eigenen Geltungsbereich — fest in der Chrome, em im Fließtext — und genau so ist die obige Tabelle zu lesen.

Wie richtest du ein Icon vertikal an seinem Text aus?

Optisch — an der x-Höhe oder Versalhöhe des Textes — nicht mathematisch an der Zeilenbox. Die visuelle Masse von Kleinbuchstaben liegt zwischen der Grundlinie und der x-Höhe, nicht in der Mitte der Zeilenbox, sodass ein auf der Box zentriertes Icon typischerweise ein, zwei Pixel neben dem liegt, was das Auge erwartet, und die Abweichung wächst, je großzügiger die Zeilenhöhe wird.

CSS erkennt das an: vertical-align: middle richtet die Mitte eines Inline-Elements an der Grundlinie des Elternelements plus der Hälfte seiner x-Höhe aus — eine an der x-Höhe zentrierte Ausrichtung, weshalb sie für Inline-Icons oft ohne Korrektur richtig aussieht. Wenn nicht, ist die Korrektur ein Schubs um 1–2px, und dieser Schubs ist legitim: Das Raster ist ein Entscheidungsreduzierer, kein Gesetz, und ein Icon, das um 1px verschoben wurde, um zentriert zu wirken, ist fertig, nicht kaputt.

Stell deine Icon-Größen neben deine Schriftgrößenskala

Eine Icon-Größe wird selten allein gewählt — sie wird gegen den Text gewählt, neben dem sie sitzen wird, und die obige Paarungstabelle ist eine Folge von drei Zahlen, die sich neu herleitet, wenn diese sich ändern. Sieh dir das an: öffne dieselbe Skala neben ihrer Schriftgrößen-Rampe und lies die Paarungen direkt ab — 11px Bildunterschriften, 16px Fließtext, 23px Zwischenüberschriften, 32px Titel, jeweils einen Icon-Schritt entfernt.