# Locally stored image for UI Page icon

**URL:** <https://discourse.nodered.org/t/locally-stored-image-for-ui-page-icon/97408>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [4 June 2025 00:08 UTC](https://discourse.nodered.org/t/locally-stored-image-for-ui-page-icon/97408 "2025-06-04T00:08:49Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![amhaziq](https://avatars.discourse-cdn.com/v4/letter/a/eb8c5e/32.png) [@amhaziq](https://discourse.nodered.org/u/amhaziq)\
**Post date:** [4 June 2025 00:08 UTC](https://discourse.nodered.org/t/locally-stored-image-for-ui-page-icon/97408/1 "2025-06-04T00:08:49Z")

</div>

I already have an icon saved in /data/static folder and able to open in browser. What should i type at UI Page icon setting to use stored image?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [4 June 2025 06:17 UTC](https://discourse.nodered.org/t/locally-stored-image-for-ui-page-icon/97408/2 "2025-06-04T06:17:39Z")

</div>

Are you serving the image?

I.e. did you add http-in -\> file read -\> http-response ([example](https://cookbook.nodered.org/http/serve-a-local-file)) OR modify your settings.js file to add `httpStatic` ([docs](https://nodered.org/docs/user-guide/runtime/configuration))

---

<div class="post-metadata">

**Author:** ![amhaziq](https://avatars.discourse-cdn.com/v4/letter/a/eb8c5e/32.png) [@amhaziq](https://discourse.nodered.org/u/amhaziq)\
**Post date:** [4 June 2025 09:32 UTC](https://discourse.nodered.org/t/locally-stored-image-for-ui-page-icon/97408/3 "2025-06-04T09:32:36Z")

</div>

Im using settings.js and enable httpStatic route.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [4 June 2025 09:36 UTC](https://discourse.nodered.org/t/locally-stored-image-for-ui-page-icon/97408/4 "2025-06-04T09:36:19Z")

</div>

ok, can you access the image in your browser? for example, if your image is named `test.png` can you access it using the node-red main url + any static path setting + `/test.png`?

If you are unsure, show us your node-red start up log (it lists out http static entries and the path they will use)

also, which settings.js file have you modified? (full path please)

---

<div class="post-metadata">

**Author:** ![amhaziq](https://avatars.discourse-cdn.com/v4/letter/a/eb8c5e/32.png) [@amhaziq](https://discourse.nodered.org/u/amhaziq)\
**Post date:** [4 June 2025 09:59 UTC](https://discourse.nodered.org/t/locally-stored-image-for-ui-page-icon/97408/5 "2025-06-04T09:59:34Z")

</div>

Yes. I can access image in browser.

Settings.js I only uncomment httpStatic.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [4 June 2025 11:00 UTC](https://discourse.nodered.org/t/locally-stored-image-for-ui-page-icon/97408/6 "2025-06-04T11:00:48Z")

</div>

Ah, so rereading your first post, the issue isnt hosting/viewing the image, it is setting the pages icon on the side menu? You might have to do this via scripting (in a ui-template) or custom CSS (also in a ui-template).

Do a bit digging in devtools. In the mean time, someone who has time to look into this might pop in with a solution for you.

---

<div class="post-metadata">

**Author:** ![amhaziq](https://avatars.discourse-cdn.com/v4/letter/a/eb8c5e/32.png) [@amhaziq](https://discourse.nodered.org/u/amhaziq)\
**Post date:** [4 June 2025 11:19 UTC](https://discourse.nodered.org/t/locally-stored-image-for-ui-page-icon/97408/7 "2025-06-04T11:19:16Z")

</div>

Okay I managed to using locally stored icon using below command

```auto
.v-navigation-drawer--rail .v-list .v-list-item:nth-of-type(2) .v-icon {
  background-image: url("/assets/icons/homecustom.png"); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  width: 36px !important;
  height: 36px !important;

  font-size: 0 !important; /* Hide default MDI icon */
  color: transparent !important;
}

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [18 June 2025 11:20 UTC](https://discourse.nodered.org/t/locally-stored-image-for-ui-page-icon/97408/8 "2025-06-18T11:20:12Z")

</div>

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