Navigation

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.

Inhaltsverzeichnis

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
3d-placeholder
address
address
alert
alert
align-center
align-center
align-justify
align-justify
align-left
align-left
align-right
align-right
arrow-360-left
arrow-360-left
arrow-360-right
arrow-360-right
arrow-circle-down
arrow-circle-down
arrow-circle-left
arrow-circle-left
arrow-circle-right
arrow-circle-right
arrow-circle-up
arrow-circle-up
arrow-down
arrow-down
arrow-head-down
arrow-head-down
arrow-head-left
arrow-head-left
arrow-head-right
arrow-head-right
arrow-head-up
arrow-head-up
arrow-left
arrow-left
arrow-move-horizontal-axis
arrow-move-horizontal-axis
arrow-move-vertical-axis
arrow-move-vertical-axis
arrow-right
arrow-right
arrow-scroll
arrow-scroll
arrow-simple-long-right
arrow-simple-long-right
arrow-switch
arrow-switch
arrow-turn-left
arrow-turn-left
arrow-turn-right
arrow-turn-right
arrow-up-down
arrow-up-down
arrow-up
arrow-up
augmented
augmented
avatar-multiple
avatar-multiple
avatar
avatar
bag-product
bag-product
bag
bag
basket
basket
beer
beer
bell-bell
bell-bell
bell-crossed
bell-crossed
blocked
blocked
bold
bold
bookmark
bookmark
books
books
briefcase
briefcase
browser
browser
bug
bug
bulk-edit
bulk-edit
calendar-empty
calendar-empty
calendar
calendar
cart
cart
chart-bar-filled
chart-bar-filled
chart-bar
chart-bar
chart-pie
chart-pie
chart-sales
chart-sales
chart
chart
checkmark-block
checkmark-block
checkmark-circle
checkmark-circle
checkmark-wide-block
checkmark-wide-block
checkmark-wide
checkmark-wide
checkmark
checkmark
circle-download
circle-download
circle-upload
circle-upload
circle
circle
clock
clock
cloud-download
cloud-download
cloud-upload
cloud-upload
cockpit
cockpit
code
code
colorpicker
colorpicker
content
content
cube-3d-shade
cube-3d-shade
dashboard
dashboard
database
database
debug
debug
desktop
desktop
document-view
document-view
drag-horizontal
drag-horizontal
drag-vertical
drag-vertical
duplicate
duplicate
editor-align-left
editor-align-left
editor-align-right
editor-align-right
editor-bold
editor-bold
editor-code
editor-code
editor-expand
editor-expand
editor-italic
editor-italic
editor-link
editor-link
editor-list-numberd
editor-list-numberd
editor-list-unordered
editor-list-unordered
editor-list
editor-list
editor-media
editor-media
editor-re-undo
editor-re-undo
editor-redo
editor-redo
editor-shrink
editor-shrink
editor-strikethrough
editor-strikethrough
editor-style
editor-style
editor-subscript
editor-subscript
editor-superscript
editor-superscript
editor-table
editor-table
editor-underline
editor-underline
editor-undo 2
editor-undo 2
editor-undo
editor-undo
emoji
emoji
envelope
envelope
error
error
euro
euro
external
external
eye-crossed
eye-crossed
eye-open
eye-open
file
file
filter
filter
flag
flag
floor-ar-splash
floor-ar-splash
folder-thumbnail
folder-thumbnail
forward
forward
gamecontroler
gamecontroler
globe
globe
gps
gps
grab
grab
graduate-cap
graduate-cap
handtouch
handtouch
harddisk
harddisk
headset
headset
heart-fill
heart-fill
heart
heart
help
help
history
history
home
home
hourglass
hourglass
image
image
inbox
inbox
infinity
infinity
info
info
italic
italic
keyboard
keyboard
lab-flask
lab-flask
laptop
laptop
layers
layers
layout
layout
lightbulb
lightbulb
link
link
list
list
loading-circle
loading-circle
loading-star
loading-star
lock-closed
lock-closed
lock-fingerprint
lock-fingerprint
lock-key
lock-key
lock-open
lock-open
log-in
log-in
log-out
log-out
map-closed
map-closed
map-open
map-open
map
map
marker
marker
marketing
marketing
medal
medal
micophone
micophone
minus-block
minus-block
minus-circle
minus-circle
minus-wide
minus-wide
minus
minus
mobile
mobile
money-card
money-card
money-cash
money-cash
money-wallet
money-wallet
moon
moon
more-horizontal
more-horizontal
more-vertical
more-vertical
move-file
move-file
package-closed
package-closed
package-gift
package-gift
package-open
package-open
paint
paint
paper-pencil-signed
paper-pencil-signed
paper-pencil
paper-pencil
paperclip
paperclip
paperplane
paperplane
pawn
pawn
pencil-brush
pencil-brush
phone
phone
photocamera
photocamera
placeholder
placeholder
plastic-bag
plastic-bag
plug
plug
plus-block
plus-block
plus-circle
plus-circle
plus-wide
plus-wide
plus
plus
preview
preview
printer
printer
products
products
pulse
pulse
pushpin
pushpin
puzzle-piece
puzzle-piece
quickjump
quickjump
quote
quote
replace
replace
reply
reply
rocket
rocket
rule
rule
ruler-pencil
ruler-pencil
save
save
screen-full
screen-full
screen-minimize
screen-minimize
search
search
server
server
settings
settings
share
share
shield
shield
shop
shop
shopware
shopware
sidebar-close
sidebar-close
sidebar-open
sidebar-open
sliders-horizontal
sliders-horizontal
sliders
sliders
sofa
sofa
sort-down
sort-down
sort-up
sort-up
sparkles
sparkles
speech-bubble
speech-bubble
speech-bubbles
speech-bubbles
square
square
stack-block
stack-block
stack-circle
stack-circle
stack
stack
star-half
star-half
star
star
sun
sun
surface
surface
tablet
tablet
tags
tags
target-big
target-big
target-with-block
target-with-block
terminal
terminal
text-table
text-table
thumb-down
thumb-down
thumb-up
thumb-up
tools
tools
traffic-pawn
traffic-pawn
trash
trash
tray-down
tray-down
tray-up
tray-up
triangle
triangle
trophy
trophy
truck
truck
underline
underline
variants
variants
video-camera
video-camera
view-compact
view-compact
view-grid
view-grid
view-normal
view-normal
view-split
view-split
warning
warning
x-block
x-block
x-circle
x-circle
x-wide
x-wide
x
x
arrow-360-left
arrow-360-left
arrow-360-right
arrow-360-right
arrow-double-double-right
arrow-double-double-right
arrow-double-down
arrow-double-down
arrow-double-left
arrow-double-left
arrow-double-right
arrow-double-right
arrow-double-up
arrow-double-up
arrow-down-line
arrow-down-line
arrow-down
arrow-down
arrow-external
arrow-external
arrow-large-double-down
arrow-large-double-down
arrow-large-double-left
arrow-large-double-left
arrow-large-double-right
arrow-large-double-right
arrow-large-double-top
arrow-large-double-top
arrow-large-down
arrow-large-down
arrow-large-left
arrow-large-left
arrow-large-right
arrow-large-right
arrow-large-up
arrow-large-up
arrow-left
arrow-left
arrow-medium-double-left
arrow-medium-double-left
arrow-medium-double-right
arrow-medium-double-right
arrow-medium-down
arrow-medium-down
arrow-medium-left
arrow-medium-left
arrow-medium-right
arrow-medium-right
arrow-medium-up
arrow-medium-up
arrow-next-line
arrow-next-line
arrow-reorder
arrow-reorder
arrow-right
arrow-right
arrow-up
arrow-up
checkmark-circle
checkmark-circle
checkmark-large
checkmark-large
checkmark-small
checkmark-small
checkmark-square
checkmark-square
checkmark
checkmark
circle-large
circle-large
circle-medium
circle-medium
circle-small
circle-small
circle-x-small
circle-x-small
collapse
collapse
copy
copy
exclamationmark
exclamationmark
expand
expand
eye
eye
h-collapse
h-collapse
h-expand
h-expand
heart
heart
help
help
image
image
lock-closed
lock-closed
lock-open
lock-open
minus-circle
minus-circle
minus-large
minus-large
minus-small
minus-small
minus-square
minus-square
minus
minus
more
more
pencil-paper
pencil-paper
pencil
pencil
plus-circle
plus-circle
plus-large
plus-large
plus-small
plus-small
plus-square
plus-square
plus
plus
printer
printer
questionmark
questionmark
rule
rule
search
search
settings
settings
sparkles
sparkles
square
square
stack-circle
stack-circle
stack-filter
stack-filter
stack-line
stack-line
stack-line2
stack-line2
stack-square
stack-square
star-half
star-half
star
star
textwrap
textwrap
thumb-down
thumb-down
thumb-up
thumb-up
translated
translated
trash
trash
traslated
traslated
trending-down
trending-down
trending-up
trending-up
x-circle
x-circle
x-drag-horizontal
x-drag-horizontal
x-drag-vertical
x-drag-vertical
x-large
x-large
x-small
x-small
x-square
x-square
x
x

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" />

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: