Funktionale, expressive und narrative Icons haben unterschiedliche Zwecke – daraus ergeben sich Größe und Detailgrad.
Die Größe des Rasters und die Strichstärke bestimmen den Detailgrad der einzelnen Icons und die Möglichkeit, bestimmte Merkmale hinzuzufügen.
Daher weisen narrative Icons mehr Details auf als funktionale oder expressive Icons.
Leinwand (32 x 32 px)
Aktiver Bereich (28 x 28 px)
Nicht-orthogonale Kurve
Strichstärke (2 px)
Schrägstriche / Neigungen
Strichende
Überlagerung (2 px)
Um eine bessere Skalierbarkeit sicherzustellen, basiert das Raster auf einer Struktur von 32 x 32 px mit einer Strichstärke von 2 px.
Beschränke den Inhalt des Icons auf den aktiven Bereich von 28 x 28 px.
Beschränke den Inhalt des Icons auf den aktiven Bereich von 28 x 28 px.
Die meisten Icons sind so gestaltet, dass sie in den festgelegten aktiven Bereich passen. Bei breiteren oder höheren Icons kannst Du einen zusätzlichen Abstand verwenden, um eine einheitliche visuelle Dichte und Gewichtung im Raster sicherzustellen.
Expressive Icons sind für größere Darstellungen konzipiert und ermöglichen eine höhere Detailgenauigkeit.
Leinwand (64 x 64 px)
Aktiver Bereich (56 x 56 px)
Schrägstriche / Neigungen
Nicht-orthogonale Kurve
Strichstärke (2 px)
Freiraum (2 px)
Strichende (exakt)
Expressive Icons sind für die Verwendung in zwei Farben konzipiert, funktionieren aber auch in einfarbigen Anwendungen.
Narrative Icons verbinden Formen, Symbole und Diagramme, um Geschichten zu erzählen und Systeme und Ideen zu erklären.
Leinwand (28 x 128 px)
Aktiver Bereich (112 x 112 px)
Nicht-orthogonale Kurve
Schrägstriche / Neigung
Strichstärke (2 px)
Freiraum (2 px)
Strichende (exakt)
Narrative Icons verbinden lineare Zeichnungen mit farbigen Flächen, wodurch sie eher wie Illustrationen wirken. Diese ausgefüllten Flächen setzen Akzente und schaffen Kontraste, lenken die Aufmerksamkeit des Betrachtenden und unterstreichen die Erzählung.
Narrative Icons lassen sich mit funktionalen und expressiven Icons kombinieren, um vielschichtige Kompositionen zu schaffen. Diese Kombination sorgt für Einheitlichkeit und verbindet die narrativen Icons mit dem übrigen Icon-System.
Corporate Brand, Communications & Public Affairs