Icons
Einführung
Icons übersetzen komplexe Ideen, Objekte oder Aktionen in klare, wiedererkennbare Symbole. Wir nutzen Icons, um die Navigation zu unterstützen, Informationen hervorzuheben und die visuelle Kommunikation innerhalb des AGRANA‑Corporate‑Designs zu verbessern. Gestaltet als Ergänzung zu unserer Schrift sorgen unsere Icons in allen Anwendungen für Konsistenz und Klarheit.
Iconstil
Unser Iconstil ist von der Schrift AGRANA Serif Pro inspiriert und so gestaltet, dass er, wie in unserer Typografie, nahtlos mit der Schrift Be Vietnam Pro zusammenarbeitet.
Konstruktionen
Das Erstellen von Icons auf einem Pixelraster stellt präzise Ausrichtung und Schärfe sicher und steigert visuelle Klarheit und Konsistenz. So lassen sie sich nahtlos in digitale Interfaces integrieren und bleiben über verschiedene Bildschirmauflösungen hinweg gut lesbar und skalierbar.
Zeichenfläche
Alle Icons werden auf einem 32 × 32 px Raster gestaltet.
Schutzbereich
Ein 2-px-Schutzbereich hält das Icon frei und verhindert visuelle Enge.
Geometrie
Damit alle Icons wie eine zusammengehörige Familie wirken, gestalten wir sie anhand eines festen Satzes definierter Referenzformen.
Linienstärke
Verwende durchgehend eine Strichstärke von 2 px für alle Icons, um Ausgewogenheit und Lesbarkeit sicherzustellen.
Primärfarb-Nutzung
Icons orientieren sich an den selben Farbprinzipien wie die Typografie, mit Kontrast und Klarheit als oberster Priorität.
Barrierefreiheit definiert die Regeln für die Kombination der Primärfarben. Alle Primärfarb-Kombinationen entsprechen anerkannten Accessibility-Standards und sichern ausreichenden Kontrast und Lesbarkeit.
Sekundärfarb-Nutzung
Barrierefreiheit definiert die Regeln für die Kombination von Sekundär- und Primärfarben. Alle Kombinationen folgen anerkannten Accessibility-Standards und stellen ausreichenden Kontrast sowie Lesbarkeit sicher.
Dunkel
Nur Weiß & helle Farben
Nur Weiß & helle Farben
Nur Weiß & helle Farben
Nur Weiß & helle Farben
Nur Weiß & helle Farben
Nur Weiß & helle Farben
Mittel
Nur Schwarz & helle Farben
Nur Schwarz & helle Farben
Nur Schwarz & helle Farben
Nur Schwarz & helle Farben
Nur Schwarz & helle Farben
Nur Schwarz & helle Farben
Hell
Nur Schwarz & dunkle Farben + AGRANA Red
Nur Schwarz & dunkle Farben + AGRANA Red
Nur Schwarz & dunkle Farben + AGRANA Red
Nur Schwarz & dunkle Farben + AGRANA Red
Nur Schwarz & dunkle Farben + AGRANA Red
Nur Schwarz & dunkle Farben + AGRANA Red
Siehe das Kapitel „Farben“ für detaillierte Farbwerte.
Einsatzbereiche
Unsere Icons sind hilfreiche Werkzeuge im Identity‑Baukasten. Für Konsistenz über alle Plattformen hinweg ist ein gezielter Einsatz wichtig. Dieser Abschnitt beschreibt die wichtigsten Kontexte, in denen Icons verwendet werden sollten, und deren jeweilige Funktion.
App-Navigation
Verwende Icons als funktionale Marker für Menüs, Aktionen und Einstellungen.
Setze Icons ein, um Features hervorzuheben, Interaktionselemente zu unterstützen und Textblöcke aufzulockern.
Marketing & Social Media
Verwende Icons dekorativ, um Persönlichkeit und Akzente hinzuzufügen.
Präsentationen & Infografiken
Setze Icons ein, um Ideen zu veranschaulichen und die Informationsklarheit zu erhöhen.
Don'ts
Icons sollten konsistent und gemäß unseren Guidelines verwendet werden. Die folgenden Beispiele zeigen, was zu vermeiden ist, um Integrität und Wirkung unserer visuellen Kommunikation zu wahren – stets im Sinne unserer Werte und unseres Stils.
Wir verändern Proportionen oder Linienstärke der Icons nicht
Icons behalten ihre feste Strichstärke und ihre Proportionen bei und werden nicht angepasst.
Wir verwenden keine Icons aus anderen Quellen
Nutze ausschließlich Icons aus unserer AGRANA‑Bibliothek.
Wir verwenden keine kontrastarmen Farbkombinationen
Icons müssen der Markenpalette folgen und ihre Lesbarkeit wahren.
Wir verwenden Icons nicht für Storytelling oder Illustrationen
Icons bleiben schlicht, minimal und frei von komplexen Details.
Wir füllen Icons nicht
Alle Icons sind als Umrissgrafiken gestaltet und dürfen keine gefüllten Elemente enthalten.
Downloads
Downloads
