# Custom icon

**URL:** <https://forum.shopware.com/t/custom-icon/62651>\
**Category:** Programming (EN)\
**Created:** [28. Oktober 2019 um 14:09 UTC](https://forum.shopware.com/t/custom-icon/62651 "2019-10-28T14:09:00Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![ivanb](https://avatars.discourse-cdn.com/v4/letter/i/958977/32.png) [@ivanb](https://forum.shopware.com/u/ivanb)\
**Post date:** [28. Oktober 2019 um 14:09 UTC](https://forum.shopware.com/t/custom-icon/62651/1 "2019-10-28T14:09:00Z")

</div>

Hello,

Is it possible to create a custom icon that will be used on the administration module, since I don’t want to use existing icons?

---

<div class="post-metadata">

**Author:** ![brettvormkopp](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/brettvormkopp/32/7788_2.png) [@brettvormkopp](https://forum.shopware.com/u/brettvormkopp)\
**Post date:** [28. Oktober 2019 um 14:14 UTC](https://forum.shopware.com/t/custom-icon/62651/2 "2019-10-28T14:14:48Z")

</div>

Are you looking for this?:&nbsp;[https://component-library.shopware.com/components/sw-icon/](https://component-library.shopware.com/components/sw-icon/)

---

<div class="post-metadata">

**Author:** ![ivanb](https://avatars.discourse-cdn.com/v4/letter/i/958977/32.png) [@ivanb](https://forum.shopware.com/u/ivanb)\
**Post date:** [28. Oktober 2019 um 14:24 UTC](https://forum.shopware.com/t/custom-icon/62651/3 "2019-10-28T14:24:54Z")

</div>

Actually no. I am looking for a way to create the custom icon that I will use as a component. For example

```
​
Shopware.Module.register('custom-module', { 
  type: 'plugin', 
  name: 'Custom', 
  title: 'Custom module', 
  description: 'Description for your custom module', 
  color: '#62ff80', 
  icon: 'my-custom-icon', 
});

​

```

Is there a way to create ‘my-custom-icon’ ?

---

<div class="post-metadata">

**Author:** ![Pascal1988](https://avatars.discourse-cdn.com/v4/letter/p/a88e57/32.png) [@Pascal1988](https://forum.shopware.com/u/Pascal1988)\
**Post date:** [31. Januar 2020 um 13:36 UTC](https://forum.shopware.com/t/custom-icon/62651/4 "2020-01-31T13:36:51Z")

</div>

> [@ivanb schrieb:](https://forum.shopware.com/profile/32589/ivanb "ivanb")
> 
> Actually no. I am looking for a way to create the custom icon that I will use as a component. For example
> 
> ​  
> Shopware.Module.register(‚custom-module‘, {  
> type: ‚plugin‘,  
> name: ‚Custom‘,  
> title: ‚Custom module‘,  
> description: ‚Description for your custom module‘,  
> color: ‚#62ff80‘,  
> icon: ‚my-custom-icon‘,  
> });
> 
> ​
> 
> Is there a way to create ‚my-custom-icon‘ ?

I would like to know this aswell :)&nbsp;

---

<div class="post-metadata">

**Author:** ![wao\_io](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/wao_io/32/18905_2.png) [@wao\_io](https://forum.shopware.com/u/wao_io)\
**Post date:** [19. März 2020 um 10:37 UTC](https://forum.shopware.com/t/custom-icon/62651/5 "2020-03-19T10:37:36Z")

</div>

I want to know, too.

---

<div class="post-metadata">

**Author:** ![m.krueger](https://avatars.discourse-cdn.com/v4/letter/m/e68b1a/32.png) [@m.krueger](https://forum.shopware.com/u/m.krueger)\
**Post date:** [26. März 2021 um 11:00 UTC](https://forum.shopware.com/t/custom-icon/62651/6 "2021-03-26T11:00:47Z")

</div>

Over a year now… any new hints on this?

---

<div class="post-metadata">

**Author:** ![jfranke](https://avatars.discourse-cdn.com/v4/letter/j/a5b964/32.png) [@jfranke](https://forum.shopware.com/u/jfranke)\
**Post date:** [31. März 2021 um 09:59 UTC](https://forum.shopware.com/t/custom-icon/62651/7 "2021-03-31T09:59:11Z")

</div>

Heyo! I found some solutions for this. I’m not sure if it might be what you’re looking for or if it’s going to help someone. It has been more than 6 months since the last time I used this. Not sure if something has changed

**Using own .SVG files:**

- copy .svg to " custom/plugins/[THEME\_NAME]/src/Resources/app/storefront/dist/assets/icon/[PACK\_NAME]/[ICON\_NAME].svg "

- run " bin/console asset:install "

- copy logic/block of " vendor/shopware/storefront/Resources/views/storefront/utilities/icon.html.twig "

- add the path of pack you created to the logic

- use icon as followed:  
` {% sw_icon '[ICON_NAME]' style {'pack': '[PACK_NAME]', 'size': '3x'} %}`

**Using SVG custom icon-set:**

- copy SVG code & paste it on specific block
- think about the color & change it in a class style
- think about the size
- set color on class & use „fill=„currentColor““ to change icon’s color
- [Bootstrap icons](https://icons.getbootstrap.com/)

**Using shopware 6 icon-set:**

- [Shopware icons](https://component-library.shopware.com/icons/)

- Most of the names are wrong on website. Try the main word of the icon. For example if u wanna use the icon **„default-action-save“** and you copy the name as it is, it wont work. If you use only the word **„save“** for the icon, then the icon will show.

**Set custom icons**

- [German topic about setting custom icons](https://forum.shopware.com/discussion/69422/wie-kann-man-das-bestehende-icon-system-mit-eigenen-svgs-erweitern#latest)

---

<div class="post-metadata">

**Author:** ![Moorleiche](https://avatars.discourse-cdn.com/v4/letter/m/6f9a4e/32.png) [@Moorleiche](https://forum.shopware.com/u/Moorleiche)\
**Post date:** [24. April 2021 um 15:02 UTC](https://forum.shopware.com/t/custom-icon/62651/8 "2021-04-24T15:02:33Z")

</div>

For Backend/Admin still not available. The webpack.config.js from Shopware blocks the `svg-inline-loader` and all custom SVG are resolved as url.

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/d/dc4f61c917eb17ec04f67b6dc914fe574202b95d.png)

Shopware SVG after load:

 ![sw-icon](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/8/80631187b61eff8e746a3527b46ada728d9563e0.jpeg)

My custom SVG after load:

 ![dewa-icon](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/2/28f05d6e0c4bf7a50a2e147a04e18c73d06ce6c0.jpeg)