Shopware 6 Icons

Welche Icons werden von Shopware in der Version 6 im Standard angeboten?

Shopware 6 Icons Set: Hier bekommst du eine aktuelle Übersicht, welche Icons Shopware von Haus aus im Theme mitliefert und wie du diese in deinem Theme nutzen kannst. Aktuell hat Shopware zwei Sets hinzugefügt. Das „default“ und das „solid“ Set. Die Ordner zu den Icons findest du im folgenden Dateipfad: platform/src/Storefront/Resources/app/storefront/dist/assets/icon

Wie kann ich die Shopware 6 Icons für mein Theme nutzen?

Suche dir einfach in der Übersicht das passende Icon raus, kopiere den Namen und füge diesen wie nachfolgend beschrieben in dein dafür vorgesehenes Template ein.

Die Einbindung erfolgt im TWIG Template über den Tag: {% sw_icon 'icon-name' %}.

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

Wie kann ich eigene Icons für mein Shopware 6 Theme nutzen?

Wenn du schon ein eigenes Theme angelegt hast, musst du den Pfad wie oben angeben in deinem Theme als Orderstruktur nachbilden. Im Order „icon“ legst du dann deinen Ordern an. In meinem Fall habe ich den Ordner einfach mal „testpack“ genannt. Dort legst du dann dein Icon ab. Da Shopware 6 nicht auf deinen Ordner zugreifen kann, ohne dass du angibst, wo deine Datei liegt, musst du die „icon.html.twig“ erweitern. Dazu legst du in deinem Theme den Ordner „utilities“ unter der folgenden Ordnerstruktur an: platform/src/Storefront/Resources/views/storefront/utilities/icon.html.twig

Mein Theme habe ich „MyTheme“ genannt und wie schon erwähnt den Ordner der Shopware 6 Icons  „testpack“.

icon-twig-html

Im letzten Schritt benötigst du nur noch das Template, wo du dein eigenes Icon einfügen möchtest. Ich habe als Beispiel das Icon der Suche im Header ausgewählt. Auch hier musst du erst einmal bei dir im Theme die „header.html.twig“ mit der richtigen Ordnerstruktur anlegen, bevor das Icon im Frontend überhaupt angezeigt wird. Hast du das gemacht, suche in der TWIG Datei, wo du dein Icon einfügen willst, die richtige Stelle und füge dein Snippet ein. Dazu muss das Snippet zusätzlich um ‚pack‘ : ‚Ordnername der Icons‘ als style Parameter mit ergänzt werden.

Also anstatt:

{% sw_icon 'search' %} sollte jetzt bei euch {% sw_icon 'search' style {'pack': 'testpack'} %} stehen.

Wenn alles klappt, sieht das Ergebnis wie folgt aus:

 

search-icon-default

Default Search Icon Shopware 6

search-icon-own

Eigenes Icon für die Suche

Du möchtest dein Template lieber von einer zertifizierten Shopware Agentur entwickeln lassen?

Dann melde dich einfach bei uns und wir reden darüber.

Kontaktformular

Sende uns dein Anliegen und wir melden uns bei dir zurück!





Eure Datenschutzerklärung habe ich gelesen - finde ich OK!