# Shopware Font Icons durch eigene SVG ersetzen

**URL:** <https://forum.shopware.com/t/shopware-font-icons-durch-eigene-svg-ersetzen/70878>\
**Category:** Themes & Design\
**Created:** [13. November 2020 um 07:03 UTC](https://forum.shopware.com/t/shopware-font-icons-durch-eigene-svg-ersetzen/70878 "2020-11-13T07:03:10Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![michael21](https://avatars.discourse-cdn.com/v4/letter/m/b38774/32.png) [@michael21](https://forum.shopware.com/u/michael21)\
**Post date:** [13. November 2020 um 07:03 UTC](https://forum.shopware.com/t/shopware-font-icons-durch-eigene-svg-ersetzen/70878/1 "2020-11-13T07:03:10Z")

</div>

Hi zusammen,

ich habe ein paar wenige eigene SVG Icons, welche ich gerne in unserem Shop verwenden möchte (Herz, Lupe, Warenkorb… sowas). Wie kann ich die Icons aus der Shopware Icon Font durch diese ersetzen - ohne dafür nochmal eine eigene Icon Font einzubinden? Ich hab dazu leider noch nirgends eine Lösung gefunden.

Danke!

Gruß

Michael

---

<div class="post-metadata">

**Author:** ![graumatic](https://avatars.discourse-cdn.com/v4/letter/g/dec6dc/32.png) [@graumatic](https://forum.shopware.com/u/graumatic)\
**Post date:** [14. November 2020 um 14:39 UTC](https://forum.shopware.com/t/shopware-font-icons-durch-eigene-svg-ersetzen/70878/2 "2020-11-14T14:39:33Z")

</div>

Hi,

Ich habe die Font nicht verändert sondern die Font durch SVGs ersetzt.

&nbsp;In der&nbsp;/themes/Frontend/DeinTheme/widgets/checkout/ **info.tpl** beispielsweise habe ich

durch folgendes ersetzt

&nbsp;Dann habe ich noch folgendes in&nbsp;/themes/Frontend/DeinTheme/frontend/\_public/src/less/ **all.less** hinzugefügt:

```
.svgicon {
padding-left: 0px;
  display: inline-block;
  width: 40px;
  height: 40px;
  background-size: cover;
  background: none;
}

.svgicon-heart {
  background-image: url(/themes/Frontend/DeinTheme/frontend/_public/src/img/icons/x-heart.svg);
}
.svgicon-heart:hover,
.svgicon-heart:focus,
.svgicon-heart:active,
.svgicon-heart:checked{
  background-image: url(/themes/Frontend/DeinTheme/frontend/_public/src/img/icons/x-heart-color.svg);
}

```

Solltest du kein Hover-Effekt haben wollen kannst du das untere einfach weg lassen. Auch kann das SVG an einer beliebigen Stelle liegen

Das Prinzip lässt sich natürlich für alle Icons wiederholen.

&nbsp;

---

<div class="post-metadata">

**Author:** ![michael21](https://avatars.discourse-cdn.com/v4/letter/m/b38774/32.png) [@michael21](https://forum.shopware.com/u/michael21)\
**Post date:** [16. November 2020 um 09:14 UTC](https://forum.shopware.com/t/shopware-font-icons-durch-eigene-svg-ersetzen/70878/3 "2020-11-16T09:14:43Z")

</div>

Hi @graumatic,

vielen Dank für den Denkanstoss. 🙂

Hover Farbwechsel brauch ich zwar jetzt nicht, aber ist vielleicht auch etwas für dich um das zweite SVG zu sparen: mit dem Filter-CSS-Attribut arbeiten.

Ein blaues Icon bekomme ich z. B. damit:

.svg-blue {

filter: invert(74%) sepia(57%) saturate(3887%) hue-rotate(154deg) brightness(96%) contrast(88%);

-webkit-filter: invert(74%) sepia(57%) saturate(3887%) hue-rotate(154deg) brightness(96%) contrast(88%);

}

Grüße!

---

<div class="post-metadata">

**Author:** ![graumatic](https://avatars.discourse-cdn.com/v4/letter/g/dec6dc/32.png) [@graumatic](https://forum.shopware.com/u/graumatic)\
**Post date:** [18. November 2020 um 14:37 UTC](https://forum.shopware.com/t/shopware-font-icons-durch-eigene-svg-ersetzen/70878/4 "2020-11-18T14:37:28Z")

</div>

> filter: invert(74%) sepia(57%) saturate(3887%) hue-rotate(154deg) brightness(96%) contrast(88%);
> 
> -webkit-filter: invert(74%) sepia(57%) saturate(3887%) hue-rotate(154deg) brightness(96%) contrast(88%);&nbsp;

&nbsp;Hi, das ist ja eine super Sache! Vielen Dank für den Tipp.

Ich habe das mit den 2 SVGs gemacht, weil ich die Filterfunktion nicht kannte

Gruß