Shopware 6 Icons - die aktuelle Übersicht

Hier finden Sie eine vollständige Übersicht aller Shopware 6 Icons sowie eine Anleitung zur Einbindung. Shopware 6 Icons sind eine wichtige Komponente für ein erfolgreiches Shop-Design. Shopware bietet eine große Auswahl an Icons, die in verschiedenen Sets verfügbar sind. Es gibt das "default" und das "solid" Set - Stand: 03.2023.

Die entsprechenden Icon-Ordner finden Sie in den folgenden Dateipfaden:
- vendor/shopware/storefront/Resources/app/storefront/dist/assets/icon
- public/bundles/storefront/assets/icon

In diesem Artikel bieten wir eine detaillierte Übersicht über die verfügbaren Shopware 6 Icons und ihre Verwendungszwecke. Wir zeigen auch, wie Sie die Icons in Ihrem Shopware 6 Theme nutzen können.

Der Shopware 6 Icons Service ist einer von vielen kostenlosen mitho® Shopware Services.

Shopware 6 Icons einbinden

Um Shopware 6 Icons in Ihr Template einzubinden, gibt es mehrere Möglichkeiten, je nachdem wo genau Sie die Icons verwenden möchten.

Shopware 6 Icons in Template-Dateien einbinden

Wenn Sie die Icons in einer Template-Datei einbinden möchten, können Sie das sw_icon-Tag verwenden. Sie müssen nur den Namen des Icons als Argument angeben, z.B.:

{% sw_icon 'sales' %}

Dieses Beispiel bindet das Icon mit dem Namen "sales" ein. Eine Liste aller verfügbaren Icons finden Sie im Verzeichnis platform/src/Administration/Resources/app/administration/src/icons.

Shopware 6 Icons in Twig-Variablen speichern

Wenn Sie das Icon in einer Variable speichern möchten, dann können Sie das sw_icon-Tag innerhalb eines Blocks verwenden, z.B.:

{% block content %}
    {% set icon %}
        {% sw_icon 'sales' %}
    {% endset %}
    <div class="my-icon">{{ icon }}</div>
{% endblock %}

Dieses Beispiel speichert das Icon mit dem Namen "sales" in der Variable icon und gibt es innerhalb eines HTML-Blocks aus.

Shopware 6 Icon-Sets in CMS Blöcke einbinden

Um Shopware 6 Icons in Erlebniswelten bzw. CMS-Blöcke einzubinden, gehen Sie wie folgt vor:

Erstellen Sie im CMS-Block ein HTML-Tag wie z.B. <img>.
Geben Sie dem <img>-Tag die folgende src-Adresse: "/bundles/storefront/assets/icon/default/der-name-des-gewünschten-shopware6-icons.svg".
Positionieren Sie das <img>-Tag wie gewünscht mit CSS.

Beispiel:

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

Dieser Eintrag erzeugt das Icon "alert".

Shopware 6 Icon-Sets mit CSS stylen

Um die SVG Icons zu stylen, können Sie folgendermaßen vorgehen:

Flächenfarbe ändern: Verwenden Sie die CSS-Eigenschaft "fill"
Beispiel:

svg {
   fill: red;
}

Linienfarbe ändern: Verwenden Sie die CSS-Eigenschaft "stroke"
Beispiel:

svg {
   stroke: red;
}

Weitere Beispiele finden Sie unter: wiki.selfhtml.org/wiki/SVG/Farben/Kontur

Shopware 6 Icon-Set: default

Durch einen einfachen Klick auf eines der Shopware 6 Icons können Sie den Namen oder das SVG zur Verwendung des Icons kopieren.

```
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
```
```
arrow-up-down
```
```
avatar
```
```
avatar-multiple
```
```
bag
```
```
bag-product
```
```
basket
```
```
beer
```
```
bell-bell
```
```
bell-crossed
```
```
blocked
```
```
bold
```
```
bookmark
```
```
books
```
```
briefcase
```
```
browser
```
```
bug
```
```
bulk-edit
```
```
calendar
```
```
calendar-empty
```
```
cart
```
```
chart
```
```
chart-bar
```
```
chart-bar-filled
```
```
chart-pie
```
```
chart-sales
```
```
checkmark
```
```
checkmark-block
```
```
checkmark-circle
```
```
checkmark-wide
```
```
checkmark-wide-block
```
```
circle
```
```
circle-download
```
```
circle-upload
```
```
clock
```
```
cloud-download
```
```
cloud-upload
```
```
cockpit
```
```
code
```
```
colorpicker
```
```
content
```
```
dashboard
```
```
database
```
```
debug
```
```
desktop
```
```
document-view
```
```
drag-horizontal
```
```
drag-vertical
```
```
duplicate
```
```
emoji
```
```
envelope
```
```
error
```
```
euro
```
```
external
```
```
eye-crossed
```
```
eye-open
```
```
file
```
```
filter
```
```
flag
```
```
folder-thumbnail
```
```
forward
```
```
gamecontroler
```
```
globe
```
```
gps
```
```
grab
```
```
graduate-cap
```
```
harddisk
```
```
headset
```
```
heart
```
```
heart-fill
```
```
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
```
```
map-closed
```
```
map-open
```
```
marker
```
```
marketing
```
```
medal
```
```
micophone
```
```
minus
```
```
minus-block
```
```
minus-circle
```
```
minus-wide
```
```
mobile
```
```
money-card
```
```
money-cash
```
```
money-wallet
```
```
moon
```
```
more-horizontal
```
```
more-vertical
```
```
move-file
```
```
package-closed
```
```
package-gift
```
```
package-open
```
```
paint
```
```
paper-pencil
```
```
paper-pencil-signed
```
```
paperclip
```
```
paperplane
```
```
pawn
```
```
pencil-brush
```
```
photocamera
```
```
placeholder
```
```
plastic-bag
```
```
plug
```
```
plus
```
```
plus-block
```
```
plus-circle
```
```
plus-wide
```
```
preview
```
```
printer
```
```
products
```
```
pulse
```
```
pushpin
```
```
puzzle-piece
```
```
quickjump
```
```
quote
```
```
replace
```
```
reply
```
```
rocket
```
```
rule
```
```
ruler-pencil
```
```
save
```
```
screen-full
```
```
screen-minimize
```
```
search
```
```
server
```
```
settings
```
```
share
```
```
shield
```
```
shop
```
```
shopware
```
```
sidebar-close
```
```
sidebar-open
```
```
sliders
```
```
sliders-horizontal
```
```
sofa
```
```
sort-down
```
```
sort-up
```
```
speech-bubble
```
```
speech-bubbles
```
```
square
```
```
stack
```
```
stack-block
```
```
stack-circle
```
```
star
```
```
star-half
```
```
sun
```
```
tablet
```
```
tags
```

Shopware 6 Icons: Editor Icons

```
editor-align-left
```
```
editor-align-right
```
```
editor-bold
```
```
editor-code
```
```
editor-expand
```
```
editor-italic
```
```
editor-link
```
```
editor-list
```
```
editor-list-numberd
```
```
editor-list-unordered
```
```
editor-media
```
```
editor-re-undo
```
```
editor-redo
```
```
editor-shrink
```
```
editor-strikethrough
```
```
editor-style
```
```
editor-subscript
```
```
editor-superscript
```
```
editor-table
```
```
editor-underline
```
```
editor-undo
```
```
editor-undo 2
```

Shopware 6 Icon-Set: solid

```
arrow-360-left
```
```
arrow-360-right
```
```
arrow-double-double-right
```
```
arrow-double-down
```
```
arrow-double-left
```
```
arrow-double-right
```
```
arrow-double-up
```
```
arrow-down
```
```
arrow-down-line
```
```
arrow-external
```
```
arrow-large-double-down
```
```
arrow-large-double-left
```
```
arrow-large-double-right
```
```
arrow-large-double-top
```
```
arrow-large-down
```
```
arrow-large-left
```
```
arrow-large-right
```
```
arrow-large-up
```
```
arrow-left
```
```
arrow-medium-double-left
```
```
arrow-medium-double-right
```
```
arrow-medium-down
```
```
arrow-medium-left
```
```
arrow-medium-right
```
```
arrow-medium-up
```
```
arrow-next-line
```
```
arrow-reorder
```
```
arrow-right
```
```
arrow-up
```
```
checkmark
```
```
checkmark-circle
```
```
checkmark-large
```
```
checkmark-small
```
```
checkmark-square
```
```
circle-large
```
```
circle-medium
```
```
circle-small
```
```
circle-x-small
```
```
collapse
```
```
copy
```
```
exclamationmark
```
```
expand
```
```
eye
```
```
h-collapse
```
```
h-expand
```
```
heart
```
```
help
```
```
image
```
```
lock-closed
```
```
lock-open
```
```
minus
```
```
minus-circle
```
```
minus-large
```
```
minus-small
```
```
minus-square
```
```
more
```
```
pencil
```
```
pencil-paper
```
```
plus
```
```
plus-circle
```
```
plus-large
```
```
plus-small
```
```
plus-square
```
```
printer
```
```
questionmark
```
```
rule
```
```
search
```
```
settings
```
```
square
```
```
stack-circle
```
```
stack-filter
```
```
stack-line
```
```
stack-line2
```
```
stack-square
```
```
star
```
```
star-half
```
```
textwrap
```
```
thumb-down
```
```
thumb-up
```
```
translated
```
```
trash
```
```
traslated
```
```
trending-down
```
```
trending-up
```
```
x
```
```
x-circle
```
```
x-drag-horizontal
```
```
x-drag-vertical
```
```
x-large
```
```
x-small
```
```
x-square
```