Shopware 6 Agentur

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:

  1. Erstellen Sie im CMS-Block ein HTML-Tag wie z.B. <img>.
  2. Geben Sie dem <img>-Tag die folgende src-Adresse: "/bundles/storefront/assets/icon/default/der-name-des-gewünschten-shopware6-icons.svg".
  3. 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

Kontakt