Navigation

Shopware 6 Icons

Entdecke die vielfältigen Möglichkeiten von Shopware 6 Icons. Hier findest du eine durchsuchbare Übersicht aller Icons, praktische Beispiele und Anleitungen für die Integration in dein Shopware-Theme – und dazu, wie jedes Icon in den 29 Iconsets von ThemeWare® aussieht.

Zu allen Icons

Alle Shopware 6 Icons

Shopware 6 stellt zwei Icon-Sets bereit: Default (in ThemeWare®-Themes für Textbausteine & Konfiguration) und Solid (kräftiger, nur in eigenen Twig-Dateien). Wähle das Set und suche nach dem Icon-Namen. In derselben Auswahl stehen die 29 Iconsets von ThemeWare®: Sie tauschen die Zeichnung hinter demselben Namen.

* = deckt alle Storefront-Icons ab. Ohne * tauscht das Set die gängigsten Motive (Essential Icons).
Einbinden Download
Tipp: Zum Vergleichen bei einem Icon auf ⇆ klicken, um es in allen Sets zu sehen – oder in der Set-Auswahl „Alle Sets vergleichen“ bzw. „Sets nebeneinander“ wählen.

Shopware 6 Icons einbinden

Icons bindest du immer über ihren Namen ein – zum Beispiel truck. Das gilt auch mit einem ThemeWare® Iconset: Das Set tauscht die Zeichnung hinter dem Namen aus, der Name bleibt der von Shopware. Namen aus den Bibliotheken selbst, etwa fa-user, funktionieren nicht.

In Template-Dateien einbinden

Um Icons in einer TWIG-Template-Datei zu verwenden, kannst du das sw_icon-Tag nutzen: {% sw_icon 'icon-name' %}. Suche dir das passende Icon, kopiere den Namen und füge ihn als Argument ein.

Beispiel:

{% sw_icon 'truck' %}

Mit einem ThemeWare® Iconset zeigt sw_icon die Zeichnung des gewählten Sets, sofern der eingestellte Umfang das Icon erfasst. Sonst bleibt das Shopware-Icon stehen.

In der USP-Bar und in Textbausteinen

Wo ThemeWare® einen Iconnamen erwartet, etwa in der USP-Bar oder bei den Badges, trägst du den Namen genauso ein. heart ist dabei immer der Umriss – für das gefüllte Herz nimmst du heart-fill, für den gefüllten Stern star-fill.

In Erlebniswelten einbinden

Um Shopware 6 Icons in Erlebniswelten einzubinden, nutze ein CMS-Element vom Typ „Text" oder einen HTML-Block und gib dort den <img>-Tag für das gewünschte Icon ein.

Aktuelle Shopware-Versionen

Der Pfad /bundles/storefront/assets/icon/default/[icon-name].svg funktioniert in aktuellen Shopware-Versionen nicht mehr, da Shopware die Storefront-Icons aus dem öffentlich erreichbaren Bundle-Ordner entfernt hat.

Lade das gewünschte Icon am besten über die Medienverwaltung in deinen Shop hoch und klicke auf „Link kopieren". Den so erhaltenen Link fügst du in dein CMS-Element ein.

Beispiel:

<img src="https://mein-shop.de/media/32/8c/f1/1777296709/truck.svg" />

Ein so eingebundenes Bild ist eine feste Datei – ein ThemeWare® Iconset tauscht es nicht aus.

Anleitung: Wie das Einbinden Schritt für Schritt geht, findest du mit Screenshots in der ThemeWare® Wissensdatenbank: Icons

Shopware 6 Icons downloaden

Möchtest du die Icons als Grafik oder über die Shopware-6-Medienverwaltung nutzen, kannst du sie als SVG herunterladen – auf GitHub im folgenden Ordner:

src/Storefront/Resources/app/storefront/dist/assets/icon/

Die Icons der ThemeWare® Iconsets sind Teil des Themes und stammen aus freien Bibliotheken. Welche das ist, steht bei jedem Set in der Nennung über dem Raster. Verwendest du Icons außerhalb deines Shops, gelten die Lizenzbedingungen der jeweiligen Bibliothek – bei Solar und Font Awesome (CC BY 4.0) gehört eine Namensnennung dazu.

Weiterführende Links