Farbkonfiguration

Overlay-Farbe

Feldtyp: Farbauswahl

Beispiel Wert: rgba(0, 0, 0, 0.5)

Pfad zur Einstellung: Tab "Layout" => Bereich "Modals" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-modal-backdrop-color

Glaseffekt [px] (Overlay)

Feldtyp: Nummernfeld

Beispiel Wert: 0

Pfad zur Einstellung: Tab "Layout" => Bereich "Modals" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-modal-backdrop-effect-blur

Feldtyp: Auswahlfeld

Verfügbare Werte: • Gefüllt (Standard) • Outline (leere Sterne) • Outline

Beispiel Wert: Gefüllt (Standard)

Pfad zur Einstellung: Tab "Layout" => Bereich "Produkt-Bewertung" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-product-review-point-style

Feldtyp: Farbauswahl

Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Layout" => Bereich "Buttons" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-color-primary-button

Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-secondary

Feldtyp: Farbauswahl

Beispiel Wert: #3cc261

Pfad zur Einstellung: Tab "Layout" => Bereich "Status-Ausgaben"

Technischer Name: sw-color-success

Feldtyp: Farbauswahl

Beispiel Wert: #26b6cf

Farbkonfiguration

Textfarbe

Feldtyp: Farbauswahl

Beispiel Wert: #000000

Pfad zur Einstellung: Tab "Layout" => Bereich "Dropdowns" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-dropdown-color

Linkfarbe

Feldtyp: Farbauswahl

Beispiel Wert: #000000

Pfad zur Einstellung: Tab "Layout" => Bereich "Dropdowns" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-dropdown-link-color

Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Layout" => Bereich "Dropdowns" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-dropdown-link-color-hover

Feldtyp: Farbauswahl

Beispiel Wert: #e0e0e0

Pfad zur Einstellung: Tab "Layout" => Bereich "Dropdowns" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-dropdown-border-color

Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Layout" => Bereich "Dropdowns" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-dropdown-background-color

Feldtyp: Auswahlfeld

Verfügbare Werte: • kein Schatten (Standard) • ThemeWare® Standard • Kleiner Schatten (Bootstrap) • Normaler Schatten (Bootstrap) • Größerer Schatten (Bootstrap)

Beispiel Wert: kein Schatten (Standard)

Pfad zur Einstellung: Tab "Layout" => Bereich "Dropdowns" => Abschnitt "Schlagschatten"

Technischer Name: twt-dropdown-box-shadow-type

Logo @Desktop (≥1200px)

Feldtyp: Medienauswahl

Beispiel Wert: app/storefront/src/assets/logo/modern-logo.webp

Pfad zur Einstellung: Tab "Layout" => Bereich "Bilder"

Technischer Name: sw-logo-desktop

Logo @Tablet (≥768px)

Feldtyp: Medienauswahl

Beispiel Wert: app/storefront/src/assets/logo/modern-logo.webp

Pfad zur Einstellung: Tab "Layout" => Bereich "Bilder"

Technischer Name: sw-logo-tablet

Feldtyp: Medienauswahl

Beispiel Wert: app/storefront/src/assets/logo/modern-logo.webp

Pfad zur Einstellung: Tab "Layout" => Bereich "Bilder"

Technischer Name: sw-logo-mobile

Feldtyp: Medienauswahl

Beispiel Wert: app/storefront/src/assets/logo/modern-share-icon.png

Pfad zur Einstellung: Tab "Layout" => Bereich "Bilder"

Technischer Name: sw-logo-share

Feldtyp: Medienauswahl

Beispiel Wert: app/storefront/src/assets/logo/modern-favicon.png

Pfad zur Einstellung: Tab "Layout" => Bereich "Bilder"

Technischer Name: sw-logo-favicon

Feldtyp: Medienauswahl

Beispiel Wert: app/storefront/src/assets/logo/modern-logo.webp

Pfad zur Einstellung: Tab "Layout" => Bereich "Bilder"

Technischer Name: twt-sticky-nav-main-logo-image

Feldtyp: Medienauswahl

Beispiel Wert: app/storefront/src/assets/logo/modern-logo.webp

Pfad zur Einstellung: Tab "Layout" => Bereich "Bilder"

Technischer Name: twt-shopping-experiences-header-logo-image

Feldtyp: Farbauswahl

Beispiel Wert: #0c72a7

Pfad zur Einstellung: Tab "Layout" => Bereich "Hauptfarben"

Technischer Name: sw-color-brand-primary

Feldtyp: Farbauswahl

Beispiel Wert: #404b58

Feldtyp: Auswahlfeld

Verfügbare Werte: • Standard • unterstrichen

Beispiel Wert: unterstrichen

Pfad zur Einstellung: Tab "Layout" => Bereich "Formulare" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-forms-layout-type

Feldtyp: Farbauswahl

Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-secondary

Pfad zur Einstellung: Tab "Layout" => Bereich "E-Commerce"

Technischer Name: sw-color-price

Feldtyp: Farbauswahl

Beispiel Wert: #3d7f53

Farbkonfiguration

Textfarbe

Feldtyp: Farbauswahl

Beispiel Wert: #333333

Pfad zur Einstellung: Tab "Layout" => Bereich "Tabellen" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-table-body-color

Rahmenfarbe

Feldtyp: Farbauswahl

Beispiel Wert: #eeeeee

Pfad zur Einstellung: Tab "Layout" => Bereich "Tabellen" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-table-body-border-color

Feldtyp: Farbauswahl

Beispiel Wert: transparent

Pfad zur Einstellung: Tab "Layout" => Bereich "Tabellen" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-table-body-background-color

Feldtyp: Farbauswahl

Beispiel Wert: transparent

Pfad zur Einstellung: Tab "Layout" => Bereich "Tabellen" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-table-accent-background-color

Feldtyp: Farbauswahl

Beispiel Wert: $twt-table-body-color

Pfad zur Einstellung: Tab "Layout" => Bereich "Tabellen" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-table-hover-color

Feldtyp: Farbauswahl

Beispiel Wert: rgba(0, 0, 0, 0.075)

Pfad zur Einstellung: Tab "Layout" => Bereich "Tabellen" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-table-hover-background-color

Feldtyp: Farbauswahl

Beispiel Wert: $twt-table-hover-background-color

Pfad zur Einstellung: Tab "Layout" => Bereich "Tabellen" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-table-active-background-color

Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Layout" => Bereich "Tabellen" => Abschnitt "Tabellen-Kopf (helle Tabellen) [deprecated]"

Technischer Name: twt-table-head-color

Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Layout" => Bereich "Tabellen" => Abschnitt "Tabellen-Kopf (helle Tabellen) [deprecated]"

Technischer Name: twt-table-head-background-color

Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Layout" => Bereich "Tabellen" => Abschnitt "Dunkle Tabellen [deprecated]"

Technischer Name: twt-table-dark-color

Feldtyp: Farbauswahl

Beispiel Wert: #5b6770

Pfad zur Einstellung: Tab "Layout" => Bereich "Tabellen" => Abschnitt "Dunkle Tabellen [deprecated]"

Technischer Name: twt-table-dark-border-color

Feldtyp: Farbauswahl

Beispiel Wert: #4a545b

Pfad zur Einstellung: Tab "Layout" => Bereich "Tabellen" => Abschnitt "Dunkle Tabellen [deprecated]"

Technischer Name: twt-table-dark-background-color

Feldtyp: Farbauswahl

Beispiel Wert: rgba(255, 255, 255, 0.05)

Pfad zur Einstellung: Tab "Layout" => Bereich "Tabellen" => Abschnitt "Dunkle Tabellen [deprecated]"

Technischer Name: twt-table-dark-accent-background-color

Feldtyp: Farbauswahl

Beispiel Wert: $twt-table-dark-color

Pfad zur Einstellung: Tab "Layout" => Bereich "Tabellen" => Abschnitt "Dunkle Tabellen [deprecated]"

Technischer Name: twt-table-dark-hover-color

Feldtyp: Farbauswahl

Beispiel Wert: rgba(255, 255, 255, 0.075)

Pfad zur Einstellung: Tab "Layout" => Bereich "Tabellen" => Abschnitt "Dunkle Tabellen [deprecated]"

Technischer Name: twt-table-dark-hover-background-color

Feldtyp: Farbauswahl

Beispiel Wert: #dddddd

Pfad zur Einstellung: Tab "Layout" => Bereich "Tabellen" => Abschnitt "Erweiterte Tabellen [deprecated]"

Technischer Name: twt-table-border-color

Feldtyp: Farbauswahl

Beispiel Wert: rgba(0, 0, 0, 0)

Pfad zur Einstellung: Tab "Layout" => Bereich "Tabellen" => Abschnitt "Erweiterte Tabellen [deprecated]"

Technischer Name: twt-table-body-border-bottom-color

Feldtyp: Farbauswahl

Beispiel Wert: $twt-table-body-border-color

Pfad zur Einstellung: Tab "Layout" => Bereich "Tabellen" => Abschnitt "Erweiterte Tabellen [deprecated]"

Technischer Name: twt-table-head-border-bottom-color

Feldtyp: Farbauswahl

Beispiel Wert: $twt-table-dark-border-color

Pfad zur Einstellung: Tab "Layout" => Bereich "Tabellen" => Abschnitt "Erweiterte Tabellen [deprecated]"

Technischer Name: twt-table-dark-head-border-bottom-color

Basiskonfiguration

Grundlayout

Feldtyp: Auswahlfeld

Verfügbare Werte: • Full-width • Full-width Boxed • Boxed

Beispiel Wert: Full-width Boxed

Pfad zur Einstellung: Tab "Layout" => Bereich "Layout" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-container-layout

Abgerundete Ecken

Feldtyp: Nummernfeld

Beispiel Wert: 2

Pfad zur Einstellung: Tab "Layout" => Bereich "Layout" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-border-radius

Feldtyp: Medienauswahl

Beispiel Wert: ``

Pfad zur Einstellung: Tab "Layout" => Bereich "Layout" => Abschnitt "Hintergrundbild"

Technischer Name: twt-background-image

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen

Beispiel Wert: anzeigen

Pfad zur Einstellung: Tab "Layout" => Bereich "Layout" => Abschnitt "Hintergrundbild"

Technischer Name: twt-background-image-show

Feldtyp: Auswahlfeld

Verfügbare Werte: • Ursprüngliche Abmessungen (auto) • Hintergrund vollständig abdecken (cover) • Hintergrund vollständig abdecken (contain)

Beispiel Wert: Ursprüngliche Abmessungen (auto)

Pfad zur Einstellung: Tab "Layout" => Bereich "Layout" => Abschnitt "Hintergrundbild"

Technischer Name: twt-background-image-size

Feldtyp: Auswahlfeld

Verfügbare Werte: • Links, Oben • Links, Mitte • Links, Unten • Rechts, Oben • Rechts, Mitte • Rechts, Unten • Mitte, Oben • Mitte, Mitte • Mitte, Unten

Beispiel Wert: Links, Oben

Pfad zur Einstellung: Tab "Layout" => Bereich "Layout" => Abschnitt "Hintergrundbild"

Technischer Name: twt-background-image-position

Feldtyp: Auswahlfeld

Verfügbare Werte: • Keine Wiederholung (no-repeat) • Horizontal und vertikal (repeat) • Horizontal (repeat-x) • Vertikal (repeat-y)

Beispiel Wert: Horizontal und vertikal (repeat)

Pfad zur Einstellung: Tab "Layout" => Bereich "Layout" => Abschnitt "Hintergrundbild"

Technischer Name: twt-background-image-repeat

Feldtyp: Auswahlfeld

Verfügbare Werte: • Hintergrundbild scrollt mit der Seite (scroll) • Hintergrundbild bleibt fixier (fixed)

Beispiel Wert: Hintergrundbild bleibt fixier (fixed)

Pfad zur Einstellung: Tab "Layout" => Bereich "Layout" => Abschnitt "Hintergrundbild"

Technischer Name: twt-background-image-attachment

Feldtyp: Nummernfeld

Beispiel Wert: 1400

Pfad zur Einstellung: Tab "Layout" => Bereich "Layout" => Abschnitt "Container"

Technischer Name: twt-container-max-width

Feldtyp: Nummernfeld

Beispiel Wert: 10

Pfad zur Einstellung: Tab "Layout" => Bereich "Layout" => Abschnitt "Container"

Technischer Name: twt-container-padding-left-right

Feldtyp: Nummernfeld

Beispiel Wert: 30

Pfad zur Einstellung: Tab "Layout" => Bereich "Layout" => Abschnitt "Container (Grundlayout "boxed")"

Technischer Name: twt-container-layout-margin-top-bottom

Feldtyp: Textfeld

Beispiel Wert: 0 0 30px

Pfad zur Einstellung: Tab "Layout" => Bereich "Layout" => Abschnitt "Container (Grundlayout "boxed")"

Technischer Name: twt-container-layout-box-shadow

Feldtyp: Farbauswahl

Beispiel Wert: rgba(0, 0, 0, 0.3)

Pfad zur Einstellung: Tab "Layout" => Bereich "Layout" => Abschnitt "Container (Grundlayout "boxed")"

Technischer Name: twt-container-layout-box-shadow-color

Feldtyp: Nummernfeld

Beispiel Wert: 20

Pfad zur Einstellung: Tab "Layout" => Bereich "Layout" => Abschnitt "Container (Nicht CMS-Seiten)"

Technischer Name: twt-container-main-margin-top

Feldtyp: Nummernfeld

Beispiel Wert: 20

Pfad zur Einstellung: Tab "Layout" => Bereich "Layout" => Abschnitt "Container (Nicht CMS-Seiten)"

Technischer Name: twt-container-main-margin-bottom

Feldtyp: Nummernfeld

Beispiel Wert: 8

Pfad zur Einstellung: Tab "Layout" => Bereich "Layout" => Abschnitt "Container (Nicht CMS-Seiten)"

Technischer Name: twt-container-main-padding-phone-xs

Feldtyp: Nummernfeld

Beispiel Wert: 15

Pfad zur Einstellung: Tab "Layout" => Bereich "Layout" => Abschnitt "Container (Nicht CMS-Seiten)"

Technischer Name: twt-container-main-padding-phone

Feldtyp: Nummernfeld

Beispiel Wert: 20

Pfad zur Einstellung: Tab "Layout" => Bereich "Layout" => Abschnitt "Container (Nicht CMS-Seiten)"

Technischer Name: twt-container-main-padding-tablet

Feldtyp: Nummernfeld

Beispiel Wert: 30

Pfad zur Einstellung: Tab "Layout" => Bereich "Layout" => Abschnitt "Container (Nicht CMS-Seiten)"

Technischer Name: twt-container-main-padding

Feldtyp: Farbauswahl

Beispiel Wert: #eeeeee

Pfad zur Einstellung: Tab "Layout" => Bereich "Layout" => Abschnitt "Container (Nicht CMS-Seiten)"

Technischer Name: twt-container-main-border-color

Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Layout" => Bereich "Layout" => Abschnitt "Container (Nicht CMS-Seiten)"

Technischer Name: twt-container-main-background-color

Responsive Skalierung

Schriftgröße in % @Phone (<576px)

Feldtyp: Nummernfeld

Beispiel Wert: 80

Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Responsive Skalierung"

Technischer Name: twt-font-size-html-xs

Schriftgröße in % @Phone (landscape) (≥576px)

Feldtyp: Nummernfeld

Beispiel Wert: 90

Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Responsive Skalierung"

Technischer Name: twt-font-size-html-sm

Feldtyp: Nummernfeld

Beispiel Wert: 100

Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Responsive Skalierung"

Technischer Name: twt-font-size-html-xl

Feldtyp: Schriftart

Beispiel Wert: 'Inter', sans-serif

Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Text"

Technischer Name: sw-font-family-base

Feldtyp: Farbauswahl

Beispiel Wert: #111111

Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Text"

Technischer Name: sw-text-color

Feldtyp: Nummernfeld

Beispiel Wert: 16

Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Text"

Technischer Name: twt-font-size-base

Feldtyp: Schriftart

Beispiel Wert: 'Inter', sans-serif

Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"

Technischer Name: sw-font-family-headline

Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"

Technischer Name: sw-headline-color

Feldtyp: Nummernfeld

Beispiel Wert: 36

Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"

Technischer Name: twt-font-size-h1

Feldtyp: Nummernfeld

Beispiel Wert: 28

Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"

Technischer Name: twt-font-size-h2

Feldtyp: Nummernfeld

Beispiel Wert: 24

Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"

Technischer Name: twt-font-size-h3

Feldtyp: Nummernfeld

Beispiel Wert: 20

Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"

Technischer Name: twt-font-size-h4

Feldtyp: Nummernfeld

Beispiel Wert: 16

Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"

Technischer Name: twt-font-size-h5

Feldtyp: Nummernfeld

Beispiel Wert: 14

Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"

Technischer Name: twt-font-size-h6

Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Links"

Technischer Name: twt-link-color

Feldtyp: Nummernfeld

Beispiel Wert: 400

Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Strichstärke"

Technischer Name: twt-font-weight-light

Feldtyp: Nummernfeld

Beispiel Wert: 400

Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Strichstärke"

Technischer Name: twt-font-weight-normal

Feldtyp: Nummernfeld

Beispiel Wert: 600

Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Strichstärke"

Technischer Name: twt-font-weight-bold

Feldtyp: Auswahlfeld

Verfügbare Werte: • nein • ja

Beispiel Wert: nein

Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Google Fonts"

Technischer Name: twt-google-font-import

Feldtyp: Textfeld

Beispiel Wert: 400,600

Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Google Fonts"

Technischer Name: twt-font-family-base-font-weight

Feldtyp: Textfeld

Beispiel Wert: 400,600

Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Google Fonts"

Technischer Name: twt-font-family-headline-font-weight

Modifizierte Icons in ThemeWare®

Neben den Standard-Icons von Shopware bieten wir in ThemeWare® auch spezifisch gestaltete Icons, die die Standard-Icons überlagern. Diese modifizierten Icons gewährleisten eine einheitliche und markenspezifische Benutzeroberfläche. Hier sind einige der wichtigsten modifizierten Icons und deren Verwendung:

• Home-Icon (home): Modifiziert für die Startseite, erscheint in der Kopfzeile (Klasse .home-link .icon-home)

• Wunschzettel-Icon (heart): Verwendet in der Kopfzeile für die Wunschliste (Klasse .header-wishlist .icon-heart)

• Benutzer-Icon (avatar): Angepasst für das Benutzerkonto-Menü, ebenfalls in der Kopfzeile (Klasse .account-menu .icon-avatar)

• Warenkorb-Icon (cart): Zu sehen in der Kopfzeile für den Warenkorb (Klasse .header-cart .icon-bag)

Um diese Icons in Ihrem Shop zu sehen, können sie testweise zugewiesen werden und sind dann im Shop sichtbar.

Feldtyp: Auswahlfeld

Verfügbare Werte: • Standard (Shopware 6) • ThemeWare® One • ThemeWare® One solid (new) • ThemeWare® One thin (new) • ThemeWare® Light • ThemeWare® Six (new) • ThemeWare® Six solid (new) • Boxicons • Boxicons (Variation) • Boxicons solid • Boxicons solid (Variation) • Font Awesome v5 • Font Awesome v5 (Variation) • Font Awesome v6 • Font Awesome v6 (Variation) • Feather • Material Icons • Shopware 6

Beispiel Wert: Standard (Shopware 6)

Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Iconset"

Technischer Name: twt-iconset

Feldtyp: Auswahlfeld

Verfügbare Werte: • Einkaufstasche (Standard) • Einkaufskorb • Einkaufswagen

Beispiel Wert: Einkaufstasche (Standard)

Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Iconset"

Technischer Name: twt-icon-cart

Feldtyp: Auswahlfeld

Verfügbare Werte: • Pfeil nach rechts (Standard) • Briefumschlag • Papierflugzeug

Beispiel Wert: Briefumschlag

Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Iconset"

Technischer Name: twt-icon-newsletter-submit

Feldtyp: Auswahlfeld

Verfügbare Werte: • Häkchen (Standard) • Herz • Stern • Trophäe

Beispiel Wert: Häkchen (Standard)

Pfad zur Einstellung: Tab "Layout" => Bereich "Typografie" => Abschnitt "Iconset"

Technischer Name: twt-icon-benefits