# Change application icon

**URL:** <https://community.cumulocity.com/t/change-application-icon/2147>\
**Category:** Forum\
**Tags:** cumulocity\
**Created:** [September 12, 2022, 2:32pm UTC](https://community.cumulocity.com/t/change-application-icon/2147 "2022-09-12T14:32:29Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![dacsystemsw](https://avatars.discourse-cdn.com/v4/letter/d/e79b87/32.png) [@dacsystemsw](https://community.cumulocity.com/u/dacsystemsw)\
**Post date:** [September 12, 2022, 2:32pm UTC](https://community.cumulocity.com/t/change-application-icon/2147/1 "2022-09-12T14:32:29Z")

</div>

Hi all,  
it’s Luca from DacSystem.

Is it possible to change via GUI (i.e. not programmatically) the app icon (attached figure)?

Regards  
Luca

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/b/d/bde7cc606a9e46d2ef9dcd753269fb31278868fc.png)

---

<div class="post-metadata">

**Author:** ![Robert\_Neale](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/robert_neale/32/31965_2.png) [@Robert\_Neale](https://community.cumulocity.com/u/Robert_Neale)\
**Post date:** [September 12, 2022, 2:44pm UTC](https://community.cumulocity.com/t/change-application-icon/2147/2 "2022-09-12T14:44:21Z")

</div>

Luca,

No it has to be done as part of the custom application you have uploaded (DAC-DASHBOARD).

![image001.png](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/0/b/0b889ae619ff8321a7e4775c953054867ab0a128.png)

 ![image002.png](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/2/5/25e3739fe18d5cd51a9286d3f973495ed3b6e66c.png)

![image003.png](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/e/7/e781af460d2ef4176dac8760d9619da359d8c61a.png)

![image005.png](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/2/8/28cba139bba6de58ae19ef42b064d7f96a99fac7.png)

![image006.png](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/8/f/8f9b6a4713e1aaad2abc00bca400f62ccdd907bd.png)

![image007.png](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/e/f/efa11fd5963b34f7bd08b6876e548f198fecc1f6.png)

![image008.jpg](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/optimized/2X/d/d969ada2aef25ab0d07ed5d54e61cbbc18ff288a_2_690x85.jpeg)

![image009.png](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/0/4/040d65ae5da3724322621b5f4dc514e311da69c2.png)

---

<div class="post-metadata">

**Author:** ![dacsystemsw](https://avatars.discourse-cdn.com/v4/letter/d/e79b87/32.png) [@dacsystemsw](https://community.cumulocity.com/u/dacsystemsw)\
**Post date:** [September 13, 2022, 9:04am UTC](https://community.cumulocity.com/t/change-application-icon/2147/3 "2022-09-13T09:04:16Z")

</div>

mm ok. So is it possible to change it programmatically?

regards,  
Luca

---

<div class="post-metadata">

**Author:** ![Robert\_Neale](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/robert_neale/32/31965_2.png) [@Robert\_Neale](https://community.cumulocity.com/u/Robert_Neale)\
**Post date:** [September 13, 2022, 9:32am UTC](https://community.cumulocity.com/t/change-application-icon/2147/4 "2022-09-13T09:32:02Z")

</div>

This from KB 46467466

The icon can only be custom at version 10.5 onwards. At 10.4.6 it is not possible.

At 10.5 the applications package.json can have an icon option as follows (example from c8yicontest3 application)…

“c8y”: {

“application”: {

“name”: “c8yicontest3”,

“contextPath”: “c8yicontest3”,

“key”: “c8yicontest3-application-key”,

“icon”: { “url”: “url(/apps/c8yicontest3/icon3.jpg)”}

},

---

<div class="post-metadata">

**Author:** ![dacsystemsw](https://avatars.discourse-cdn.com/v4/letter/d/e79b87/32.png) [@dacsystemsw](https://community.cumulocity.com/u/dacsystemsw)\
**Post date:** [September 13, 2022, 10:31am UTC](https://community.cumulocity.com/t/change-application-icon/2147/5 "2022-09-13T10:31:40Z")

</div>

There’s no way I can find the article you mention.  
In the knowledge center query im doing something like this:

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/d/5/d56a360fe99629fa2653e18ed8ad07e11c113def.png)

What am I missing?

Luca

---

<div class="post-metadata">

**Author:** ![Robert\_Neale](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/robert_neale/32/31965_2.png) [@Robert\_Neale](https://community.cumulocity.com/u/Robert_Neale)\
**Post date:** [September 13, 2022, 11:00am UTC](https://community.cumulocity.com/t/change-application-icon/2147/6 "2022-09-13T11:00:37Z")

</div>

Search for ‘set custom application icon’

1799650 is perhaps most relevant.

---

<div class="post-metadata">

**Author:** ![dacsystemsw](https://avatars.discourse-cdn.com/v4/letter/d/e79b87/32.png) [@dacsystemsw](https://community.cumulocity.com/u/dacsystemsw)\
**Post date:** [September 13, 2022, 2:49pm UTC](https://community.cumulocity.com/t/change-application-icon/2147/7 "2022-09-13T14:49:24Z")

</div>

I know this shuld be easy but I cannot make it work.

Steps I followed so far:

1. I have an svg icon under the folder myProject/branding/cockpit.svg
2. Modified package.json:

```auto
"c8y": {
    "application": {
      "name": "dac-dashboard",
      "contextPath": "dac-dashboard",
      "key": "dac-dashboard-application-key",
      "tabsHorizontal": true,
      "upgrade": true,
      "rightDrawer": true,
      "breadcrumbs": false,
      "sensorAppOneLink": "http://onelink.to/pca6qe",
      "sensorPhone": true,
      "contentSecurityPolicy": "base-uri 'none'; default-src 'self' 'unsafe-inline' http: https: ws: wss:; connect-src 'self' http: https: ws: wss:; script-src 'self' open.mapquestapi.com *.twitter.com *.twimg.com *.aptrinsic.com 'unsafe-inline' 'unsafe-eval' data:; style-src * 'unsafe-inline' blob:; img-src * data:; font-src * data:; frame-src *; worker-src 'self' blob:;",
      "dynamicOptionsUrl": "/apps/public/public-options/options.json",
      "brandingEntry": "./src/branding.less",
      "icon": { "url": "url(/apps/dac-dashboard/branding/cockpit.svg)"}

    },

```

Result:

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/a/d/adb98d18bd5c8c58e24d6321b123b6232e758753.png)

Actually I would like to use from [here](https://styleguide.cumulocity.com/#/icons/cumulocity) the `c8y-icon-cockpit` icon. Is it possible?

Regards  
Luca

---

<div class="post-metadata">

**Author:** ![Robert\_Neale](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/robert_neale/32/31965_2.png) [@Robert\_Neale](https://community.cumulocity.com/u/Robert_Neale)\
**Post date:** [September 13, 2022, 3:06pm UTC](https://community.cumulocity.com/t/change-application-icon/2147/8 "2022-09-13T15:06:06Z")

</div>

When you build the app, in the resulting dist folder, is there dac-dashboard/branding/cockpit.svg?

I’ve only ever done this with png files, I don’t know about svg.

---

<div class="post-metadata">

**Author:** ![dacsystemsw](https://avatars.discourse-cdn.com/v4/letter/d/e79b87/32.png) [@dacsystemsw](https://community.cumulocity.com/u/dacsystemsw)\
**Post date:** [September 13, 2022, 3:21pm UTC](https://community.cumulocity.com/t/change-application-icon/2147/9 "2022-09-13T15:21:37Z")

</div>

Hi Robert,  
nope, no dac-dashboard/branding/cockpit.svg in dist

---

<div class="post-metadata">

**Author:** ![Robert\_Neale](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/robert_neale/32/31965_2.png) [@Robert\_Neale](https://community.cumulocity.com/u/Robert_Neale)\
**Post date:** [September 13, 2022, 3:23pm UTC](https://community.cumulocity.com/t/change-application-icon/2147/10 "2022-09-13T15:23:45Z")

</div>

OK, manually put it there, zip the dist folder conttnts (make sure you don’t zip any previous zips) and upload it to the tenant.

---

<div class="post-metadata">

**Author:** ![Tristan\_Bastian](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/tristan_bastian/32/18259_2.png) [@Tristan\_Bastian](https://community.cumulocity.com/u/Tristan_Bastian)\
**Post date:** [September 13, 2022, 3:42pm UTC](https://community.cumulocity.com/t/change-application-icon/2147/11 "2022-09-13T15:42:09Z")

</div>

Hi Luca,

if you want to use some of the default Cumulocity icons from the [https://styleguide.cumulocity.com/#/icons/cumulocity](https://styleguide.cumulocity.com/#/icons/cumulocity) you can use the `class` attribute instead of `url` (the interface is defined here: [Web SDK documentation](http://resources.cumulocity.com/documentation/websdk/ngx-components/classes/ApplicationOptions.html#icon)) e.g. like this:

```auto
"c8y":{
    "application":{
      "name":"dac-dashboard",
      "contextPath":"dac-dashboard",
      "key":"dac-dashboard-application-key",
      "tabsHorizontal":true,
      "upgrade":true,
      "rightDrawer":true,
      "breadcrumbs":false,
      "sensorAppOneLink":"http://onelink.to/pca6qe",
      "sensorPhone":true,
      "contentSecurityPolicy":"base-uri 'none'; default-src 'self' 'unsafe-inline' http: https: ws: wss:; connect-src 'self' http: https: ws: wss:; script-src 'self' open.mapquestapi.com *.twitter.com *.twimg.com *.aptrinsic.com 'unsafe-inline' 'unsafe-eval' data:; style-src * 'unsafe-inline' blob:; img-src * data:; font-src * data:; frame-src *; worker-src 'self' blob:;",
      "dynamicOptionsUrl":"/apps/public/public-options/options.json",
      "brandingEntry":"./src/branding.less",
      "icon":{
        "class":"c8y-icon-cockpit"
      }
    }
  }

```

---

<div class="post-metadata">

**Author:** ![dacsystemsw](https://avatars.discourse-cdn.com/v4/letter/d/e79b87/32.png) [@dacsystemsw](https://community.cumulocity.com/u/dacsystemsw)\
**Post date:** [September 14, 2022, 8:31am UTC](https://community.cumulocity.com/t/change-application-icon/2147/12 "2022-09-14T08:31:21Z")

</div>

Hi @Tristan_Bastian

I did what you suggested. The web sdk docs you linked for icon states that:

> Application icon to be displayed in app switcher and header bar.

But i’m getting this

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/0/1/011a580f3e6bbd64331fd13d96f46dbf863afea9.png)

The icon in the app switcher didn’t change

Am i missing something?

regards  
Luca

---

<div class="post-metadata">

**Author:** ![Tristan\_Bastian](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/tristan_bastian/32/18259_2.png) [@Tristan\_Bastian](https://community.cumulocity.com/u/Tristan_Bastian)\
**Post date:** [September 14, 2022, 10:11am UTC](https://community.cumulocity.com/t/change-application-icon/2147/13 "2022-09-14T10:11:44Z")

</div>

Hi Luca,

Are you trying this locally or have you deployed the app as well?

Try to remove the currently deployed app and upload it again if possible.

Regards,  
Tristan

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/system/32/31990_2.png) [@system](https://community.cumulocity.com/u/system)\
**Post date:** [March 13, 2023, 11:38am UTC](https://community.cumulocity.com/t/change-application-icon/2147/15 "2023-03-13T11:38:48Z")

</div>

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.