Shopware bringt von Haus aus eine umfangreiche Icon-Bibliothek mit. Wer weiß, wie das System aufgebaut ist, spart Zeit bei der Theme-Entwicklung, vermeidet typische Fehler und kann eigene Icons sauber integrieren.
Hier erhältst du eine Übersicht aller Shopware 6 Icons und Shopware 5 Icons
Du möchtest individuelle Shopware Icons für deinen Shop? Kontaktiere unsere Shopware Agentur für ein unverbindliches Angebot.
Eine Übersicht aller Icons die in Shopware 5.5 verfügbar sind.
Alternativ bieten wir Dir über 130 weitere Icons im Flat Style
-> Zum Shopware Store
Du möchtest individuell gestaltete Icons?
Wir stehen dir als Shopware Agentur dabei zur Seite!
Kontaktier uns einfach!
Shopware 6 liefert zwei Icon-Sets mit:
Der entscheidende Unterschied liegt in der Verwendbarkeit. Das default-Set funktioniert überall, also in Twig-Templates und in Erlebniswelten (CMS). Das solid-Set ist auf Twig beschränkt. Wer es in einer Erlebniswelt per -Tag verwenden will, wird scheitern, weil der benötigte Asset-Pfad für das solid-Set im Frontend nicht so aufgelöst wird wie erwartet.
Als Faustregel gilt: Im Zweifel immer mit dem default-Set arbeiten.
Die vollständige Liste mit allen Icon-Namen können in der interaktive Übersicht eingesehen werden, da Shopware mit jeder Version vereinzelt Icons ergänzt. Die Dokumentation im Quellcode ist unter folgendem Pfad einsehbar:
vendor/shopware/storefront/Resources/app/storefront/dist/assets/icon/
Es gibt zwei relevante Pfade, und sie haben jeweils eine andere Funktion.
vendor/shopware/storefront/Resources/app/storefront/dist/assets/icon/
Darunter liegen zwei Unterordner:
/default/
/solid/
In diesen Ordnern liegen die einzelnen SVG-Dateien. Jede Datei entspricht einem Icon, zum Beispiel arrow-left.svg oder bag-product.svg.
Dieser Pfad ist der Quellpfad im Dateisystem. Er ist relevant, wenn Du eigene Icons hinzufügen oder bestehende überschreiben willst. Im Frontend-Browser ist dieser Pfad nicht direkt erreichbar.
/bundles/storefront/assets/icon/default/[icon-name].svg
Dieser Pfad ist der einzige, der im Browser funktioniert. Shopware stellt die Assets beim Build-Prozess unter diesem Pfad zur Verfügung. Wer in einer Erlebniswelt ein Icon per -Tag einbindet, muss diesen Pfad verwenden.
Beispiel:
Die sauberste und empfohlene Methode in Twig-Dateien ist das sw_icon-Tag
{% sw_icon 'arrow-left' %}
Das reicht für die meisten Fälle. Der Icon-Name entspricht dem Dateinamen ohne die Endung .svg.
| Parameter | Beschreibung | Beispiel |
|---|---|---|
| namespace | Gibt an, aus welchem Bundle das Icon geladen wird | namespace='Storefront' |
| pack | Wählt das Icon-Set: "default" oder "solid" | pack='solid' |
| style | Inline-CSS für den Icon-Container | style='color: red' |
| class | Zusätzliche CSS-Klassen | class='my-icon' |
Ein vollständiges Beispiel mit Parametern:
{% sw_icon 'arrow-left' style={
pack: 'solid',
namespace: 'Storefront'
} %}
namespace-Parameter brauchst Du, sobald Du Icons aus einem eigenen Plugin oder Theme einbindest, das einen eigenen Icon-Pack definiert. Bei Standard-Icons aus dem Storefront-Bundle ist er optional.
![]()
Welche Icons sind in Shopware 6 standardmäßig enthalten?
Shopware 6 liefert zwei Icon-Sets mit: "default" und "solid". Beide Sets enthalten Icons für Navigation, Shop-Funktionen, Kommunikation, Social Media, Account-Bereiche und allgemeine Interface-Elemente. Die vollständige interaktive Übersicht findest Du unter https://www.8mylez.com/shopware-6-iconset/.
Wie binde ich ein Icon in eine Twig-Datei ein?
Mit dem sw_icon-Tag: {% sw_icon 'icon-name' %}. Der Icon-Name entspricht dem Dateinamen der SVG-Datei ohne Endung. Optionale Parameter sind pack, namespace, style und class.
Kann ich eigene Icons in Shopware 6 verwenden?
Ja. Es gibt zwei Wege: Entweder legst Du SVG-Dateien im Plugin-Ordner unter dist/assets/icon/default/ ab, oder Du konfigurierst ab SW 6.4.1.0 einen eigenen Icon-Pfad über die theme.json. Der zweite Weg ist für App-basierte Themes Pflicht.
Was ist der Unterschied zwischen "default" und "solid"?
Das default-Set zeigt Icons mit dünneren Linien und offenen Formen. Das solid-Set hat gefülltere, kräftigere Formen. Der wichtigere Unterschied liegt in der Verwendbarkeit: Das default-Set funktioniert in Twig-Templates und in Erlebniswelten. Das solid-Set ist auf Twig-Templates beschränkt.
Wie style ich SVG-Icons mit CSS?
SVG-Icons reagieren auf fill (Flächenfarbe) und stroke (Linienfarbe). Welche Property greift, hängt von der SVG-Struktur des jeweiligen Icons ab. Sieh Dir das SVG im Quellcode an, um zu sehen, ob Pfade per fill oder stroke gezeichnet sind. Über das sw_icon-Tag kannst Du zusätzlich den style-Parameter nutzen.
Funktionieren Shopware 5 Icons auch in Shopware 6?
Nein. Shopware 5 und Shopware 6 nutzen grundlegend verschiedene Icon-Systeme. SW5 arbeitet mit Icon-Fonts und CSS-Klassen, SW6 mit einzelnen SVG-Dateien und dem sw_icon-Tag. Eine direkte Übertragung ist nicht möglich. Bei einer Migration von SW5 auf SW6 muss das Icon-System neu aufgesetzt werden. Weitere Informationen zur Migration findest Du hier: Shopware Migration
Das Icon-System ist einer von vielen Bausteinen eines sauber aufgebauten Shopware-Shops. Wer Theme-Anpassungen, Plugin-Entwicklung oder einen vollständigen Relaunch plant und dabei auf ein Team setzt, das Shopware in- und auswendig kennt, ist bei uns richtig.
Sprich uns an oder starte mit einer Potenzialanalyse: Wir schauen uns Deinen Shop an und zeigen Dir, wo Optimierungspotenzial liegt.
Unsere Standorte
Zentrale
Technologiepark 23
33100 Paderborn
Leipzig
Berliner Strasse 13
04105 Leipzig
Kontakt
E-Mail: [email protected]
Telefon: +49 (0) 5251 284 710
Shopware Dienstleistungen
Über 8mylez
✓ 38 Mitarbeiter
✓ Shopware Platin Partner
✓ 40.000+ Plugin Downloads
✓ 160+ betreute Shops
✓ Full-Service Shopware Agentur
✓ 70 Shopware Videos auf Youtube
✓ Alle Shopware Zertifizierungen
Social
