Icons

Icons stellen auf einfache und direkte Art Informationen und Interaktionen dar. Das Erscheinungsbild muss klar, einfach und reduziert sein, komplexe und detailreiche Icons sollten vermieden werden.

Format SVG

Icons sind vektorbasiert im Format .SVG einzubinden. Dies hat den Vorteil, dass diese im Vergleich zu Rastergrafiken ohne Qualitätsverlust stufenlos vergrößert werden können.

Als SVG-Fallback für ältere Browser kann ergänzend auf ein .PNG zurückgegriffen werden.

HTML einbetten

Icons können mit Hilfe von Klassen direkt in den Code eingebunden werden. Eigenschaften wie Größe und Farbe werden ebenfalls direkt über Klassen deklariert.

.ic-find-document... Icon Farbe -b Schwarz oder -w Weiß.

Klein (20x20px) .ic-sm
Default (24x24px) .ic-md
Groß (48x48px) .ic-lg

Icon Button

Icon Buttons werden eingesetzt, um klassische Systeminteraktionen aufzurufen (Speichern, Drucken oder Herunterladen...) . Der Icon Button wird bevorzugt ohne Text Label verwendet und steht in 3 festgelegten Größen zur Verfügung. Transparenzen je Status werden nach Icon Vorgaben dargestellt.

Icon-Set

Link UI bietet System-Icons, welche häufig genutzte Aktionen wie z.B. Suchen, Drucken und Speichern repräsentieren. Systemicons dürfen nicht für andere Interaktionen als die angegebenen verwendet werden.

Produktspezifische Icons werden individuell gehandelt, folgen jedoch den gleichen Kriterien und Regeln. Es ist darauf zu achten, das nur generell verständliche Icons verwendet werden.

Ist ein Icon nicht verständlich, sollte komplett darauf verzichtet werden und stattdessen ein Text-Link gesetzt werden. Produktspezifische Icons sollten niemals den Nutzen eines System Icons konkretisieren.

Die farbliche Darstellung wird nur durch den Hintergrund bestimmt, der Status durch die jeweilige Transparenz.

Navbar

Menü

Reserviertfür die eingeklappte Sidebar in der responsive-Ansicht. Sollte nicht für weitere Menüs verwendet werden.

Download SVG Download SVG

HTML/Icon

HTML/Button

Suche / Filter

Wird zwar für die globale Suche verwendet, darf aber kontextbezogen erneut für "Suchen" oder "Filtern" eingesetzt werden. Unterscheidet sich von "Dokumenteninhalt durchsuchen"

Download SVG Download SVG

HTML/Icon

HTML/Button

Apps

ReserviertÖffnet das Menü aller Kunden-Applikationen. Darf nicht für andere "Apps" verwendet werden.

Download SVG Download SVG

HTML/Icon

HTML/Button

Abmelden

Zum abmelden aus einem gesicherten Breich.

Download SVG Download SVG

HTML/Icon

HTML/Button

Navigation

Zurück / Vorheriges Element

Zurück in einer seriellen Abfolge von Elementen. Nicht zu Verwelchseln mit der Richtung "links" oder der Funktion "Rückgängig"

Download SVG Download SVG

HTML/Icon

HTML/Button

Weiter / Nächstes Element

Weiter in einer seriellen Abfolge von Elementen. Nicht zu Verwelchseln mit der Richtung "rechts" oder der Funktion "Wiederherstellen"

Download SVG Download SVG

HTML/Icon

HTML/Button

Hoch / Element einklappen

Doppelbedeutung. Entweder "Hoch" beim Bewegen im Zweidimensionalen Raum oder am Ende eines Listenkopfes für "Element einklappen"

Download SVG Download SVG

HTML/Icon

HTML/Button

Runter

Doppelbedeutung. Entweder "runter" beim Bewegen im Zweidimensionalen Raum oder am Ende eines Listenkopfes für "Element aufklappen"

Download SVG Download SVG

HTML/Icon

HTML/Button

Links

Rechts

"rechts" beim Bewegen im Zweidimensionalen Raum. Nicht "Wiederherstellen" oder "nächstes Element"

Download SVG Download SVG

HTML/Icon

HTML/Button

Element offen

Statusanzeige für "Element aufgeklappt"

Download SVG Download SVG

HTML/Icon

HTML/Button

Element geschlossen

Statusanzeige für "Element zugeklappt"

Download SVG Download SVG

HTML/Icon

HTML/Button

Mehr Menüpunkte / Mehr Optionen

Zeigt weitere Menüpunkte an, die aus Platzgründen nicht angezeigt werden können. Kann aber auch alle Menüpunkte oder sekundäre Menüpunkte dauerthaft beherbergen. Nicht verwechseln mit "Einstellungen", "Einstellungen" öffnet eine Seite, dieses Icon ein Kontextmenü.

Download SVG Download SVG

HTML/Icon

HTML/Button

Aktionen

Bearbeiten

Bearbeitet das aktuelle Element. Ändert das aktuelle Formular in einen Editierungsmodus oder öffnet das (Listen-)Element in einem Bearbeitungsmodus

Download SVG Download SVG

HTML/Icon

HTML/Button

Speichern

Speichert das Element ab, welches in einem Bearbeitungsmodus geöffne ist.

Download SVG Download SVG

HTML/Icon

HTML/Button

Löschen

Löscht das Element.

Download SVG Download SVG

HTML/Icon

HTML/Button

Hinzufügen / Wert erhöhen

Fügt ein Element hinzu. Was hinzugefügt wird soll entweder aus dem Kontext klar werden oder wird durch ein Label ergänzt. Außnahmen:"Benutzer hinzufügen", "Benutzergruppe hinzufügen", "Ordner anlegen", "Foto hinzufügen", "Zeile hinzufügen". In Kombination mit "Reduzieren" steht das Icon auch für Erhöhen.

Download SVG Download SVG

HTML/Icon

HTML/Button

Wert reduzieren

In Kombination mit "Wert erhöhen" für "Wert reduzieren", nicht "Löschen".

Download SVG Download SVG

HTML/Icon

HTML/Button

Zeile hinzufügen

Bei einem Inline-Editor eine Zeile hinzufügen

Download SVG Download SVG

HTML/Icon

HTML/Button

Zeile entfernen

Bei einem Inline-Editor eine Zeile entfernen

Download SVG Download SVG

HTML/Icon

HTML/Button

Rückgängig

Vorgang rückgängig machen, nicht verwechseln mit "Links" oder "Zurück"

Download SVG Download SVG

HTML/Icon

HTML/Button

Wiederherstellen

Vorgang wiederherstellen, nicht verwechseln mit "Rechts" oder "Vor"

Download SVG Download SVG

HTML/Icon

HTML/Button

Schließen

Schließen eines Modals, Fensters oder ähnliches. Nicht Logout.

Download SVG Download SVG

HTML/Icon

HTML/Button

Hilfe

Kontextbezogene oder allgemeine Hilfe

Download SVG Download SVG

HTML/Icon

HTML/Button

Information

Kontextbezogene oder allgemeine Information

Download SVG Download SVG

HTML/Icon

HTML/Button

Warnung

Kontextbezogene oder allgemeine Warnung

Download SVG Download SVG

HTML/Icon

HTML/Button

Chat

Chat, Chat starten. Nicht "E-Mail" oder "Nachricht"

Download SVG Download SVG

HTML/Icon

HTML/Button

E-Mail

E-Mail, nicht "Nachricht", "Chat" oder "Brief"

Download SVG Download SVG

HTML/Icon

HTML/Button

Kopie / Kopieren

Kopie des aktuellen Elementes anlegen.

Download SVG Download SVG

HTML/Icon

HTML/Button

Hochladen

Hochladen vom lokalen Speicher.

Download SVG Download SVG

HTML/Icon

HTML/Button

Download

Auf den lokalen Speicher herunterladen.

Download SVG Download SVG

HTML/Icon

HTML/Button

Drucken

Drucken der aktuellen Auswahl / des aktuellen Elements

Download SVG Download SVG

HTML/Icon

HTML/Button

Suche / Filter

Wird zwar für die globale Suche verwendet, darf aber kontextbezogen erneut für "Suchen" oder "Filtern" eingesetzt werden. Unterscheidet sich von "Dokumenteninhalt durchsuchen"

Download SVG Download SVG

HTML/Icon

HTML/Button

Bestätigen / Bestätigt

Statusanzeige für bestätigtes Objekt oder Icon zum "Bestätigen".

Download SVG Download SVG

HTML/Icon

HTML/Button

Drag n Drop Bewegen

Klickfläche zum freien Bewegen des Objektes mit der Maus.

Download SVG Download SVG

HTML/Icon

HTML/Button

Ort (auf Karte)

Zeigt einen Ort an, eventuell als Nadel auf einer Karte, aber auch stellvertretend bei einem Adressfeld.

Download SVG Download SVG

HTML/Icon

HTML/Button

Historie

Dokumenten- oder Elementshistorie.

Download SVG Download SVG

HTML/Icon

HTML/Button

Warenkorb

"Zum Warenkorb" nicht verwechseln mit "Kaufen".

Download SVG Download SVG

HTML/Icon

HTML/Button

Schlüssel

Indikator für Passwörter

Download SVG Download SVG

HTML/Icon

HTML/Button

Dokumente

Anhang

"Anhang hinzufügen" oder Status für "Enthält Anhang" oder "Anhänge anzeigen".

Download SVG Download SVG

HTML/Icon

HTML/Button

Cloud

Statusanzeige für "in der Cloud".

Download SVG Download SVG

HTML/Icon

HTML/Button

Ordner

Status für einen Ordner. Nicht "Ordner anlegen".

Download SVG Download SVG

HTML/Icon

HTML/Button

Ordner erstellen

Ordner anlegen.

Download SVG Download SVG

HTML/Icon

HTML/Button

Dokument

Status für "Ein Dokument"

Download SVG Download SVG

HTML/Icon

HTML/Button

Liste

Elemente als Liste anzeigen.

Download SVG Download SVG

HTML/Icon

HTML/Button

Dokumenteninhalt durchsuchen

Sucht nicht in einer Liste oder Menge an Datensätzen, sondern innerhalb eines abgeschlossenen Elements

Download SVG Download SVG

HTML/Icon

HTML/Button

Einstellungen

Benachrichtigungen / Benachrichtigungen an

ReserviertIn der Einzeldarstellung für Benachrichtigungen. In Kombination mit "Benachrichtigungen aus" steht dieses Icon für "Benachrichtigungen aktiviert"

Download SVG Download SVG

HTML/Icon

HTML/Button

Benachrichtigungen aus

Nur in Kombination mit "Benachrichtigungen an" steht dieses Icon für "Benachrichtigungen aus"

Download SVG Download SVG

HTML/Icon

HTML/Button

Einstellungen

Einstellungen. Nicht zu verwechseln mit "Bearbeiten"

Download SVG Download SVG

HTML/Icon

HTML/Button

Zeit / Uhrzeit / Zeitpunkt / Zeitraum

In Kombination mit "Datum" muss die Funktion klar abgegrenzt sein, ansonsten allgemein für Zeitraum/Zeitpunkt. In Kobination dann nur "Uhrzeit".

Download SVG Download SVG

HTML/Icon

HTML/Button

Datum

In Kombination mit "Zeit" muss die Funktion klar abgegrenzt sein. Alleinstehend ansonsten "Datum" oder auch "Kalenderansicht".

Download SVG Download SVG

HTML/Icon

HTML/Button

Hineinzoomen

Hineinzoomen, Vergrößern. Nicht "Details".

Download SVG Download SVG

HTML/Icon

HTML/Button

Herauszoomen

Herauszoomen, Verkleinern.

Download SVG Download SVG

HTML/Icon

HTML/Button

Sound / Sound an

Steht allein für "Klangeinstellungen", in Kombination mit "Sound aus" steht es für "Sound an".

Download SVG Download SVG

HTML/Icon

HTML/Button

Sound aus

Nur in Kombination oder in Wechsel mit "Sound"

Download SVG Download SVG

HTML/Icon

HTML/Button

Sichtbarkeit

Status sichtbar

Download SVG Download SVG

HTML/Icon

HTML/Button

Sichtbarkeit / Verbergen

Status unsichtbar

Download SVG Download SVG

HTML/Icon

HTML/Button

Favorit aktiv

Element als Favorit deklariert.

Download SVG Download SVG

HTML/Icon

HTML/Button

Favorit inaktiv

Element als Favorit deklarieren.

Download SVG Download SVG

HTML/Icon

HTML/Button

Media

Foto hinzufügen

Sonderform von "Hinzufügen" für Fotos.

Download SVG Download SVG

HTML/Icon

HTML/Button

Foto

Statussymbol für ein Foto.

Download SVG Download SVG

HTML/Icon

HTML/Button

Benutzer

Der/ein Benutzer

Download SVG Download SVG

HTML/Icon

HTML/Button

Benutzer hinzufügen

Sonderform von Hinzufügen nur für einzelne Benutzer. Auch "Benutzer dieser Auswahl hinzufügen"

Download SVG Download SVG

HTML/Icon

HTML/Button

Benutzergruppe

Die eigene / eine Benutzergruppe

Download SVG Download SVG

HTML/Icon

HTML/Button

Benutzergruppe hinzufügen

Sonderform von Hinzufügen nur für Benutzergruppen. Auch "Benutzergruppe dieser Auswahl hinzufügen"

Download SVG Download SVG

HTML/Icon

HTML/Button

Icon Größen

Klein

Die kleinste Darstellung beträgt 20x20px. Eine kleinere Darstellung ist nicht Möglich.

.ic-sm

Default

Die Standardgröße beträgt 24x24px und bietet den besten Mittelwert.

.ic-md

Groß

Für speziele Ausnahmen kann ein Icon in der Größe 48x48 dargestellt werden.

.ic-lg

Status

Die farbliche Darstellung wird nur durch den Hintergrund bestimmt, der Status durch die jeweilige Transparenz.

Dos und Don’ts

Keine farbingen Icons, diese werden durch den Hintergrund und Icon Transparenz bestimmt.

Keine inneren oder äusseren Schlagschatten.

Don't

Feine Konturen oder Details sind zu vermeiden.

Don't

Keine Symbole im Anschnitt.

Don't