ThemeWare® bringt eine Auswahl an Icon-Bibliotheken mit, sogenannte Iconsets. Damit tauschst du die Symbole deines Shops aus – vom Warenkorb im Header bis zu den Pfeilen in der Paginierung. Dieser Artikel zeigt dir, welche Iconsets es gibt und was du einstellen kannst.
Hinweis: Wie du ein Shopware-Icon selbst in ein Template oder eine Erlebniswelt einbindest, haben wir in der ThemeWare® Wissensdatenbank zusammengestellt:
https://wiki.themeware.design/wissensdatenbank/grundwissen/icons
Mitgelieferte Icons
Shopware bindet Icons über einen Namen ein, zum Beispiel cart, heart oder arrow-medium-right. Ein Iconset ersetzt die Zeichnungen hinter diesen Namen: Wählst du ein Set aus, wird aus Shopwares cart der Einkaufswagen dieser Bibliothek – der Name bleibt cart.
Wichtig: Ein Iconset stellt keine neuen Iconnamen bereit. Namen aus der jeweiligen Bibliothek – etwa fa-user bei Font Awesome oder bx-cart bei Boxicons – funktionieren nirgends im Shop. Das gilt auch dort, wo du selbst einen Iconnamen eintragen kannst, zum Beispiel in der USP-Bar.
Sets mit einem * decken alle Icons der Storefront ab. Sets ohne * tauschen nur die gängigsten Motive aus. Fehlt einem Set ein Motiv, zeichnet an dieser Stelle Shopwares eigenes Icon – der Shop bleibt also immer vollständig.
Neue Iconsets
| Iconset | Umfang | Stile | Strichstärke | Motive |
|---|---|---|---|---|
| Bootstrap Icons | Alle Storefront-Icons | Linie, Gefüllt | – | 182 |
| Boxicons v3 | Alle Storefront-Icons | Linie, Gefüllt | – | 185 |
| Boxicons v3 (Variation) | Alle Storefront-Icons | Linie, Gefüllt | – | 185 |
| Fluent UI System Icons | Alle Storefront-Icons | Linie, Gefüllt | – | 173 |
| Font Awesome v7 | Alle Storefront-Icons | Linie, Gefüllt | – | 190 |
| Heroicons | Alle Storefront-Icons | Linie, Gefüllt | ✓ | 159 |
| Iconoir | Alle Storefront-Icons | Linie | ✓ | 168 |
| Ionicons | Alle Storefront-Icons | Linie, Gefüllt | – | 167 |
| Line Awesome | Alle Storefront-Icons | Linie | – | 189 |
| Lucide | Alle Storefront-Icons | Linie | ✓ | 193 |
| Material Symbols | Alle Storefront-Icons | Linie, Gefüllt | – | 183 |
| Phosphor | Alle Storefront-Icons | Linie, Gefüllt, Duotone | – | 190 |
| Simple Line Icons | Essential Icons | Linie | – | 25 |
| Solar | Alle Storefront-Icons | Linie, Gefüllt, Broken | ✓ | 183 |
| Solar (Variation) | Alle Storefront-Icons | Linie, Gefüllt, Broken | ✓ | 183 |
| Tabler | Alle Storefront-Icons | Linie, Gefüllt | ✓ | 190 |
Bestehende Iconsets
| Iconset | Umfang | Stile | Strichstärke | Motive |
|---|---|---|---|---|
| Boxicons v2 | Essential Icons | Linie, Gefüllt | – | 17 |
| Boxicons v2 (Variation) | Essential Icons | Linie, Gefüllt | – | 17 |
| Feather | Essential Icons | — | – | 17 |
| Font Awesome v5 | Essential Icons | Gefüllt | – | 17 |
| Font Awesome v5 (Variation) | Essential Icons | — | – | 17 |
| Font Awesome v6 | Essential Icons | Gefüllt | – | 17 |
| Font Awesome v6 (Variation) | Essential Icons | — | – | 17 |
| Material Icons | Essential Icons | — | – | 17 |
| Shopware 6 | Essential Icons | — | – | 17 |
| ThemeWare® Light | Essential Icons | — | – | 16 |
| ThemeWare® One | Essential Icons | Linie, Gefüllt | – | 16 |
| ThemeWare® One thin | Essential Icons | — | – | 16 |
| ThemeWare® Six | Essential Icons | Linie, Gefüllt | – | 16 |
Alle Iconsets in ThemeWare®
Alle Iconsets im Bild findest du hier:
IconsetsKonfigurationsmöglichkeiten
Alle Einstellungen liegen zusammen im Tab "Layout" im Bereich "Icons". Technische Namen und Standardwerte findest du in der Konfiguration.
Icons
Hier wählst du das Iconset.
Beim Iconset "Standard" werden die Icons nicht verändert – das ist Shopwares unveränderte Darstellung.
Stil
Viele Bibliotheken zeichnen ihre Icons in mehreren Fassungen. Hier wählst du, welche davon verwendet wird:
| Stil | Was ihn ausmacht |
|---|---|
| Automatisch (wie das Iconset) (Standard) | die Fassung, in der das Iconset gezeichnet ist – zum Beispiel bei Font Awesome gefüllt und bei Lucide als Linie |
| Linie | die ungefüllte Fassung – auch bei Bibliotheken, die ihre Umrisse technisch als Fläche zeichnen |
| Gefüllt | dasselbe Motiv als ausgefüllte Silhouette |
| Broken | eine Linienfassung mit bewusst unterbrochenen Strichen |
| Duotone | eine gefüllte Fassung, bei der Teile der Form heller abgestuft sind – dieselbe Farbe, zwei Helligkeiten |
Nicht jede Bibliothek bietet jeden Stil. Bringt das Set den gewählten Stil nicht mit, zeigt es seine eigene Fassung wie bei "Automatisch". Welche Stile jedes Set kennt, steht in der Übersicht oben.
Tipp: Wenn du unsicher bist, wähle "Automatisch (wie das Iconset)". Dann sieht jedes Iconset so aus, wie es gezeichnet wurde.
Hinweis: Auch bei den bestehenden Sets Boxicons v2, ThemeWare® One und ThemeWare® Six wählst du die gefüllte Fassung hier.
Herz und Stern
Bei Herz und Stern hängt es von der Stelle ab, ob die Füllung eine Bedeutung hat.
Das Herz am Merkzettel-Button der Produktkarte zeigt einen Zustand. Shopware führt dafür zwei Namen:
| Name | Zeichnung | Bedeutung |
|---|---|---|
heart |
Umriss | nicht auf dem Merkzettel |
heart-fill |
gefüllt | auf dem Merkzettel |
Beide Zeichnungen gibt es in jedem Iconset – auch in einem gefüllten. Sonst könnte man "gemerkt" und "nicht gemerkt" nicht mehr unterscheiden.
Das Herz im Header zeigt dagegen keinen Zustand, es führt nur zum Merkzettel. Es passt sich deshalb dem Set an: Zeichnet das Set gefüllt, ist auch das Herz gefüllt, sonst folgt es der Fassung des Stils. Genauso verhalten sich Herz und Stern beim Feld "Icon: Vorteile".
Hinweis: Wo du einen Iconnamen selbst einträgst, etwa in der USP-Bar oder in den Textbausteinen der Badges, ist heart immer der Umriss. Für das gefüllte Herz trägst du heart-fill ein, für den gefüllten Stern star-fill.
Die Bewertungssterne unterscheidet Shopware über die Farbe, nicht über die Füllung: Vergebene und nicht vergebene Sterne sind beide gefüllt, nur verschieden eingefärbt. Ob leere oder alle Sterne stattdessen als Umriss erscheinen, legst du mit dem "Stern-Stil" fest – unabhängig vom Stil des Iconsets:
Tab "Layout" => Bereich "Produkt-Bewertung" => Abschnitt "Basiskonfiguration" => "Stern-Stil"
Steht der Umfang auf "Essential Icons" oder "Alle Storefront-Icons", kommt die Form der Sterne aus dem gewählten Iconset.
Umfang
Hier bestimmst du, wie weit das Iconset in den Shop eingreift.
- Ausgewählte Icons (ThemeWare®) (Standard) – nur die Stellen, die ThemeWare® selbst setzt: Header, Kaufen-Button, Newsletter und Service-Menü
- Essential Icons – die Motive, die überall sichtbar sind: Header, Merkzettel, Bewertungen, Mengenwahl, Akkordeons und Slider
- Alle Storefront-Icons – zusätzlich die selten genutzten Motive der Storefront
Damit ein neues Iconset überall sichtbar wird, stellst du den Umfang auf Essential Icons oder Alle Storefront-Icons. Den vollen Umfang bieten nur Sets mit *.
Strichstärke
Bei strichbasierten Sets lässt sich die Dicke der Linie einstellen.
Icons werden auf zwei Arten gezeichnet: als Strich – eine Linie mit einer bestimmten Dicke, so arbeiten Lucide, Tabler, Heroicons, Iconoir und Solar – oder als Fläche, bei der auch ein Umriss eine ausgefüllte Form mit einem Loch in der Mitte ist. Die Strichstärke wirkt nur bei der ersten Bauart; bei einem Flächen-Icon wäre eine andere Strichstärke eine andere Zeichnung.
Die Stufen sind relativ zu der Strichstärke, mit der die Bibliothek gezeichnet wurde – so behält jedes Set seine Proportionen. "Normal (Standard)" lässt jedes Set genau so, wie seine Zeichner es gemeint haben.
Hinweis: Die feinen Stufen sind für große Icons gedacht: Bei 16 Pixeln wird ein dünnerer Strich grau statt dünn.
Einzelne Icons
Drei Motive lassen sich unabhängig vom Set auswählen:
Beim Warenkorb hast du die Wahl zwischen Einkaufstasche, Einkaufskorb und Einkaufswagen. Das Icon der Vorteile gilt für jeden Eintrag der Liste – deshalb stehen dort nur Motive zur Wahl, die zu jedem Vorteil passen.
Icons per CSS ansprechen
Jedes Icon, das aus einem Iconset kommt, trägt eigene CSS-Klassen. Damit lassen sich Icons mit eigenem CSS gezielt anpassen:
| Klasse | Bedeutung |
|---|---|
twt-icon |
das Icon kommt aus dem gewählten Iconset |
twt-iconset-lucide |
die gewählte Bibliothek, in diesem Beispiel Lucide |
is-regular, is-solid, is-duotone, is-broken |
der Stil, der tatsächlich angezeigt wird |
Die Stil-Klasse zeigt, was wirklich gerendert wird: Wählst du "Gefüllt" bei einer Bibliothek ohne gefüllte Fassung, trägt das Icon is-regular.
Social Icons sind etwas anderes
Die Symbole für Facebook, Instagram, YouTube und Co. gehören nicht zum Iconset. Es sind Markenzeichen, die nicht ausgetauscht werden dürfen – sie werden deshalb getrennt konfiguriert und ändern sich nicht mit, wenn du ein anderes Iconset wählst:
Social-IconsWeiterführende Informationen
- Handbuch: Iconsets – alle Iconsets im Bild
- Handbuch: Konfiguration – alle Felder des Bereichs "Icons" mit technischem Namen
- Wissensdatenbank: Icons – Icons in Templates und Erlebniswelten einbinden