# Wie kann man das bestehende Icon System mit eigenen SVGs erweitern?

**URL:** https://forum.shopware.com/t/wie-kann-man-das-bestehende-icon-system-mit-eigenen-svgs-erweitern/67707
**Category:** Programmierung
**Tags:** customelements
**Created:** [16. Juni 2020 um 14:56 UTC](https://forum.shopware.com/t/wie-kann-man-das-bestehende-icon-system-mit-eigenen-svgs-erweitern/67707 "2020-06-16T14:56:57Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![hillebrandlukas](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/hillebrandlukas/32/10506_2.png) [@hillebrandlukas](https://forum.shopware.com/u/hillebrandlukas)
#### Post date: [16. Juni 2020 um 14:56 UTC](https://forum.shopware.com/t/wie-kann-man-das-bestehende-icon-system-mit-eigenen-svgs-erweitern/67707/1 "2020-06-16T14:56:57Z")

</div>

Unter bestehenden Icon System meine Ich:

[https://component-library.shopware.com/components/sw-icon/](https://component-library.shopware.com/components/sw-icon/)

und dann als Verwedung:

sw-icon name=„mein-custom-icon“

---

<div class="post-metadata">

### Author: ![AlexGalax](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/alexgalax/32/9925_2.png) [@AlexGalax](https://forum.shopware.com/u/AlexGalax)
#### Post date: [22. Juni 2020 um 09:20 UTC](https://forum.shopware.com/t/wie-kann-man-das-bestehende-icon-system-mit-eigenen-svgs-erweitern/67707/2 "2020-06-22T09:20:28Z")

</div>

In deinem Theme/Plugin einfach eigene css-Regeln definieren.

---

<div class="post-metadata">

### Author: ![BCL](https://avatars.discourse-cdn.com/v4/letter/b/3ec8ea/32.png) [@BCL](https://forum.shopware.com/u/BCL)
#### Post date: [30. Juni 2020 um 06:36 UTC](https://forum.shopware.com/t/wie-kann-man-das-bestehende-icon-system-mit-eigenen-svgs-erweitern/67707/3 "2020-06-30T06:36:20Z")

</div>

is zwar schon eine weile her, aber man kann in **custom/plugins/DeinTheme/src/Resources/app/storefront/dist/assets/icon/** einen Ordner erstellen " **deinIconPaket**"

und dann per folgendem Code das Icon im SW6-Style einfügen

```
{% sw_icon 'svg-filename' style {'pack' : 'deinIconPaket'} %}

```

&nbsp;

---

<div class="post-metadata">

### Author: ![hillebrandlukas](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/hillebrandlukas/32/10506_2.png) [@hillebrandlukas](https://forum.shopware.com/u/hillebrandlukas)
#### Post date: [3. Juli 2020 um 09:17 UTC](https://forum.shopware.com/t/wie-kann-man-das-bestehende-icon-system-mit-eigenen-svgs-erweitern/67707/4 "2020-07-03T09:17:12Z")

</div>

Wenn ich das Storefront Template noch extende dann gehts:

**_platform/src/Storefront/Resources/views/storefront/utilities/icon.html.twig_**

&nbsp;

```
{% sw_extends '@Storefront/storefront/utilities/icon.html.twig' %}

{% block utilities_icon %}
    {% set styles = [size, color, rotation, flip, class] %}

    {% if pack is not defined %}
        {% set pack = 'default' %}
    {% endif %}

    
        {% if pack == 'DEINTHEME' %}
            {{ source('@DeinTheme/../app/storefront/dist/assets/icon/DEINTHEME/'~ name ~'.svg', ignore_missing = false) }}
        {% else %}
            {{ source('@Storefront/../app/storefront/dist/assets/icon/'~ pack ~'/'~ name ~'.svg', ignore_missing = true) }}
        {% endif %}
    
{% endblock %}
```

---

<div class="post-metadata">

### Author: ![BCL](https://avatars.discourse-cdn.com/v4/letter/b/3ec8ea/32.png) [@BCL](https://forum.shopware.com/u/BCL)
#### Post date: [7. Juli 2020 um 12:33 UTC](https://forum.shopware.com/t/wie-kann-man-das-bestehende-icon-system-mit-eigenen-svgs-erweitern/67707/5 "2020-07-07T12:33:54Z")

</div>

uhh yes… my bad…^

sorry das hatte ich irgendwann nebenbei gemacht. ja das extenden ist notwendig