← Zurück zur Übersicht

Ravensberger Matratzen · Wissensbereich (Phase 2)

Icon-Sets im Vergleich

Grundlage ist das Meeting vom 20.05.2026: die alten Font-Awesome-Icons (Free · Solid) wirken „plump und dick" – und mischen sich aktuell mit Shopware-Standard-Icons und eigenen SVGs. Gewünscht sind ein einziges, konsistentes Set, dünnere Strichstärken/Outline bzw. Duotone, ausgebbar in den zwei Markenfarben und als schlankes Self-hosted-Set ladbar.

Diese Seite zeigt dieselben Icons, die wir wirklich brauchen, in vier Stilen nebeneinander – damit man den Unterschied direkt sieht statt nur auf dem Papier.

Ist-Zustand: drei Systeme auf der Live-Seite

Aus dem Live-Markup (ravensberger-matratzen.de) ausgelesen. Genau diese Mischung ist der „kein roter Faden"-Punkt aus dem Meeting.

1 · Shopware-Standard Sprite

Die Shop-UI: Suche, Warenkorb, Merkzettel (Herz), Konto, Bewertungssterne, Haken, Schließen, Slider-Pfeile, Telefon, E-Mail, Uhr, Info.

Dünne Linien-Icons aus dem Theme

2 · Font Awesome Free · Solid

Chevrons (angle-down/up) plus vereinzelt truck, bed, user, umbrella, trophy, globe, credit-card, calendar. Das sind die „dicken, alten" Icons – und nur die Free-Version, noch nicht Pro.

Der Kandidat zum Ablösen/Vereinheitlichen

3 · Eigene Marken-SVGs Illustration

Alle Produkt-/Kategorie-Icons im Menü: Matratzentypen (Gel/Visco, Kaltschaum, Latex, Federkern, Kinder, Boxspring), Lattenroste, Boxspringbett-Varianten, Topper & Bettwaren, Größen, Matratzenberater, CertiPUR, Award, Footer, Zahlungslogos.

Hausspezifisch – kein Icon-Pack deckt das ab

Konsequenz für die Entscheidung: Ein Icon-Pack ersetzt nur Block 1 + 2 (generische UI-/Trust-Icons). Die Produkt-Illustrationen (Block 3) bleiben eigene SVGs – sie müssen nur farblich/stilistisch zum neuen Set passen. Der Stil-Vergleich unten betrifft also die generischen Icons.

Die Icons, die wir wirklich brauchen

Abgeleitet aus dem Wissensbereich (Hilfe-/Serviceseiten, Kontakt, Vertrauen). Dargestellt im empfohlenen Stil (Phosphor Duotone, Markenfarbe).

Schlaf & Produkt

MatratzeProdukt / Kategorie
Schlaf & NachtRevo Schlaf-Report
LattenrostSchlaf-System / Aufbau

Service & Hilfe

RatgeberWissen & Beiträge
Häufige FragenHilfe-Center / FAQ
LieferungVersand & Aufbau
RückgabeWiderruf & Retoure
GarantieGewährleistung

Vertrauen & Kontakt

NachhaltigkeitZertifikate & Siegel
FilialenBeratung vor Ort
TelefonKontakt
E-MailKontakt

Stil-Vergleich

Dieselben zwölf Icons in vier Stilen. Alle in der Markenfarbe (bis auf den Ist-Zustand), damit nur der Stil vergleichbar ist. Auf Mobilgeräten seitlich scrollbar.

Icon & Verwendung Font Awesome · Solid Ist-Zustand Phosphor · Thin Empfehlung Phosphor · Duotone Wunsch-Stil Lucide · Line Free-Alternative
MatratzeProdukt / Kategorie
Schlaf & NachtRevo Schlaf-Report
LattenrostSchlaf-System / Aufbau
RatgeberWissen & Beiträge
Häufige FragenHilfe-Center / FAQ
LieferungVersand & Aufbau
RückgabeWiderruf & Retoure
GarantieGewährleistung
NachhaltigkeitZertifikate & Siegel
FilialenBeratung vor Ort
TelefonKontakt
E-MailKontakt

So sieht es in den Kacheln aus

Icon-getriebene Themen-Kacheln für Hilfe-/Serviceseiten (wie bei Zalando, Home24, KitchenAid) – hier im Duotone-Stil, Markenfarbe.

Lieferung & Aufbau

Alles zu Versandzeiten, Speditionslieferung und Altmatratzen-Mitnahme.

Mehr erfahren →

Rückgabe & Widerruf

Probeschlafen, Fristen und wie die Rücksendung abläuft.

Mehr erfahren →

Garantie

Gewährleistung, Garantiedauer und Abwicklung im Detail.

Mehr erfahren →
Hinweis aus dem Meeting: Duotone auf farbigem Hintergrund kann kritisch werden. Das Beispiel rechts zeigt, wie ein Duotone-Icon auf der Markenfarbe an Kontrast verliert – auf farbigen Flächen daher eher einfarbig (Thin/Fill) einsetzen.

Duotone auf Markenfarbe

Kontrast wird schwach – hier besser Thin oder Weiß-Fill nutzen.

Thin, einfarbig

Funktioniert auf hellem wie farbigem Grund zuverlässig.

Empfehlung

Alle Kandidaten sind self-hostbar (als schlankes Subset), in jeder Farbe ausgebbar und als ein konsistentes Set nutzbar – genau die Kriterien aus dem Meeting. Preise: Richtwerte in Euro (aus USD umgerechnet, Kurs ~0,87, Stand Juli 2026), i. d. R. zzgl. MwSt. – vor Kauf prüfen.

Phosphor Icons Favorit

6 Gewichte inkl. Thin (moderne Richtung) und Duotone (Wunsch-Stil) in einer Familie. Trifft die Diskussion fast wörtlich, ist modern und self-hostbar. Kleinere Bibliothek als FA/Streamline – seltene Motive ggf. nachbauen.

Kostenlos · Open Source (MIT) · keine Lizenzkosten

phosphoricons.com →

Font Awesome Pro

Der pragmatische Weg: bekanntes Tooling, der Entwickler baut das Subset-Kit bereits. Dieselben Icons zusätzlich in Thin/Light/Duotone – sieht dann aus wie Spalte 2/3, nur im FA-Ökosystem. Riesige Bibliothek. Pro+ (~130 € netto) deckt sich mit den im Meeting genannten ~150 € (inkl. MwSt.).

Free 0 € · Pro ab ≈ 87 €/Jahr · Pro+ ≈ 130 €/Jahr · Team ≈ 44–65 €/Seat

fontawesome.com/plans →

Streamline

Größte Bibliothek am Markt, wächst ständig – vermutlich das im Meeting erwähnte „gleiches Geschäftsmodell, jedes Jahr hunderte neue". Mehrere konsistente Familien (Line/Solid/Duo). Beste Wahl, wenn viele spezifische Motive gebraucht werden. Achtung: Premium-Lizenz auf 100 Icons pro Projekt begrenzt (für den Wissensbereich meist ausreichend); einzelne Familien auch einmalig kaufbar.

Free-Tier · Icons ≈ 199 €/Jahr · Full Access ≈ 303 €/Jahr

streamlinehq.com →

Lucide (Line)

Kostenlose, sehr moderne Line-Alternative (Spalte 4). Klarer, dünner Stil, self-hostbar. Gutes Preis-Leistungs-Verhältnis, aber kleinere Bibliothek – gut als Ergänzung/Fallback.

Kostenlos · Open Source (ISC) · keine Lizenzkosten

lucide.dev →

Arbeitsstand · Evergreen Media. Icons via CDN (Font Awesome Free = Ist-Zustand, Phosphor, Lucide) – im Prototyp zur Stil-Abstimmung. Font-Awesome-Pro-Stile (Thin/Duotone) rendern nur mit Lizenz-Kit; Phosphor dient hier als sehr ähnlicher Stellvertreter.