Shopware 6 Icons

Entdecke die vielseitigen Möglichkeiten von Shopware 6 Icons, um das Design deines Shops einzigartig und funktional zu gestalten. Auf dieser Seite findest du eine umfassende Übersicht der verfügbaren Icons, praktische Beispiele und Schritt-für-Schritt-Anleitungen für die optimale Integration in dein Shopware Theme.

ThemeWare® Themes nutzen in der Konfiguration (bzw. in Textbausteinen) das "default" Icon-Set. Das Shopware 6 "solid" Icon-Set kannst du nur in deinen eignen Twig-Dateien nutzen.

Inhaltsverzeichnis

Shopware 6 Icon-Sets
Shopware 6 Icons einbinden
Shopware 6 Icons downloaden

Shopware 6 Icon-Sets

Shopware 6 stellt dir zwei verschiedene Icon-Sets zur Verfügung:

Default-Set: Dieses Icon-Set ist in der Standardkonfiguration von ThemeWare®-Themes eingebunden. Es wird automatisch in Textbausteinen und der Shop-Konfiguration verwendet.
Solid-Set: Dieses Set enthält Icons mit einer kräftigeren Darstellung und ist ideal, wenn du eine stärkere visuelle Wirkung erzielen möchtest. Es kann jedoch nur direkt in deinen Twig-Dateien verwendet werden.

Wähle das passende Set für dein Design, je nach den Anforderungen und dem gewünschten visuellen Stil deines Shops.

3d-placeholder

address

alert

align-center

align-justify

align-left

align-right

arrow-360-left

arrow-360-right

arrow-circle-down

arrow-circle-left

arrow-circle-right

arrow-circle-up

arrow-down

arrow-head-down

arrow-head-left

arrow-head-right

arrow-head-up

arrow-left

arrow-move-horizontal-axis

arrow-move-vertical-axis

arrow-right

arrow-scroll

arrow-simple-long-right

arrow-switch

arrow-turn-left

arrow-turn-right

arrow-up-down

arrow-up

augmented

avatar-multiple

avatar

bag-product

bag

basket

beer

bell-bell

bell-crossed

blocked

bold

bookmark

books

briefcase

browser

bug

bulk-edit

calendar-empty

calendar

cart

chart-bar-filled

chart-bar

chart-pie

chart-sales

chart

checkmark-block

checkmark-circle

checkmark-wide-block

checkmark-wide

checkmark

circle-download

circle-upload

circle

clock

cloud-download

cloud-upload

cockpit

code

colorpicker

content

cube-3d-shade

dashboard

database

debug

desktop

document-view

drag-horizontal

drag-vertical

duplicate

editor-align-left

editor-align-right

editor-bold

editor-code

editor-expand

editor-italic

editor-link

editor-list-numberd

editor-list-unordered

editor-list

editor-media

editor-re-undo

editor-redo

editor-shrink

editor-strikethrough

editor-style

editor-subscript

editor-superscript

editor-table

editor-underline

editor-undo 2

editor-undo

emoji

envelope

error

euro

external

eye-crossed

eye-open

file

filter

flag

floor-ar-splash

folder-thumbnail

forward

gamecontroler

globe

gps

grab

graduate-cap

handtouch

harddisk

headset

heart-fill

heart

help

history

home

hourglass

image

inbox

infinity

info

italic

keyboard

lab-flask

laptop

layers

layout

lightbulb

link

list

loading-circle

loading-star

lock-closed

lock-fingerprint

lock-key

lock-open

log-in

log-out

map-closed

map-open

map

marker

marketing

medal

micophone

minus-block

minus-circle

minus-wide

minus

mobile

money-card

money-cash

money-wallet

moon

more-horizontal

more-vertical

move-file

package-closed

package-gift

package-open

paint

paper-pencil-signed

paper-pencil

paperclip

paperplane

pawn

pencil-brush

phone

photocamera

placeholder

plastic-bag

plug

plus-block

plus-circle

plus-wide

plus

preview

printer

products

pulse

pushpin

puzzle-piece

quickjump

quote

replace

rocket

rule

ruler-pencil

save

screen-full

screen-minimize

server

settings

shield

shop

shopware

sidebar-close

sidebar-open

sliders-horizontal

sliders

sofa

sort-down

sort-up

sparkles

speech-bubble

speech-bubbles

square

stack-block

stack-circle

stack

star-half

star

sun

surface

tablet

Shopware 6 Icons einbinden

Um Shopware 6 Icons einzubinden, gibt es mehrere Möglichkeiten, je nachdem wo genau du das gewünschte Icon verwenden möchtest.

Shopware 6 Icons in Template-Dateien einbinden

Um Icons in einer TWIG Template-Datei zu verwenden, kannst du das sw_icon-Tag nutzen. Die Einbindung erfolgt über den Tag: {% sw_icon 'icon-name' %}.

Suche dir einfach das passende Icon raus, kopiere den Namen und füge diesen als Argument (siehe 'icon-name') an. Ein Beispiel hierfür wäre:

Beispiel:

{% sw_icon 'truck' %}

Shopware 6 Icons in CMS-Blöcke einbinden

Um Shopware 6 Icons in Erlebniswelten einzubinden, kannst du einen CMS-Block vom Typ "Text" oder einen HTML-Block nutzen. Gebe dort den HTML-<img>-Tag für das gewünschte Icon im Ordner /bundles/storefront/assets/icon/... ein.

Beispiel:

<img src="/bundles/storefront/assets/icon/default/truck.svg" />

Aktuelle Shopware-Versionen:

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

Lade das gewünschte Icon am besten über die Medienverwaltung in deinen Shop hoch und klicke auf "Link kopieren". Du erhälst so den Link über welchen das Bild nun in der Storefront erreichbar ist. Füge diesen Link nun in dein CMS-Element ein.

Beispiel:

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

Shopware 6 Icons downloaden

Möchtest du die Icons in Grafiken oder als Bild über die Shopware 6 Medien-Verwaltung nutzen, kannst du die Icons als SVG-Datei runterladen. Die Icons findest du auf GitHub oder in folgendem Ordner:

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

Weiterführende Links:

ThemeWare® Tutorial: Shopware 6 Icons
Shopware Developer Documentation: Meteor icon kit