Zum Hauptinhalt springen
Icons & Emojis
Heyflow avatar
Verfasst von Heyflow
Vor über einem Monat aktualisiert

Füge kostenlos mehr als 40.000 Icons aus unserer integrierten Icon-Bibliothek und Emojis hinzu, um deine interaktiven Formulare und Landingpages ansprechend zu gestalten.


Wo können sie verwendet werden?

Icons und Emojis können in den folgenden Blöcken genutzt werden:

💡Tipp: Durch Drücken von [Windows] + [.] bzw. bei einem Mac [Control] + [Command] + [Leertaste] können auch in anderen Blöcken im Text Emojis eingesetzt werden.


Icons

In unserer Icondatenbank gibt es 5 Icon-Familien mit über 40.000 Icons. Für die meisten Icons ist keine Namensnennung bei der Nutzung mit Heyflow benötigt.

Jede Icon-Familie hat einen eigenen Stil, welchen du über ein Dropdown-Menü oben rechts einstellen kannst, z.B.

  • Streamline Icons: Fein, Fett, Normal

  • Phosphor Icons: Ausgefüllt, Dünn, Fein, Fett, Normal, Zweifarbig

  • Ionicons: Ausgefüllt, Kantig, Kontur

Außerdem kannst du im Design in den einzelnen Blöcken, die Icons anpassen, wie z.B. die Iconfarbe, die voreingestellt die Primärfarbe deines Flows ist.

In unserer Icondatenbank siehst du unten deine kürzlich verwendeten Icons, sodass du diese schneller auch in anderen Flows wiederverwenden kannst.

💡Tipp: Du kannst eigene Icons hochladen, und so bspw. die Iconfarbe innerhalb eines Flows wechseln. Dabei solltest du darauf achten, dass du die Icons immer in der gleichen Größe (bspw. 1x1) hochlädst, damit ein einheitliches Bild entsteht.


Emojis

Neben Icons kannst du auch Emojis einfügen, die den Nutzer:innen je nach Gerät entsprechend angezeigt werden. Sobald du auf Emoji auswählen klickst, kannst du nach einem bestimmten Emoji suchen, die einzelnen Emoji-Familien aufrufen oder auch oben aus den oft genutzten Emojis auswählen.


Best Practices

Einheitliches und responsives Design

Verwende Icons durchgängig im gesamten Flow und vermeide die Mischung mit bspw. Emojis, Bildern oder reinem Text. Halte dich an eine Icon-Familie, um ein einheitliches Design zu gewährleisten.

Icons sollten auf allen Bildschirmgrößen gut aussehen und skalierbar sein.

DO

DON'T

Barrierefreiheit

Stelle sicher, dass Icons eine unterstützende Funktion haben und auch für Nutzer mit Beeinträchtigungen verständlich sind.

DO

DON'T

Usability

Icons sollten selbsterklärend sein, um die Benutzerführung zu erleichtern und keine Verwirrung zu stiften.

DO

DON'T

Hat dies deine Frage beantwortet?