# How to customize navbar logo in 7.12.1

**URL:** <https://discuss.elastic.co/t/how-to-customize-navbar-logo-in-7-12-1/276170>\
**Category:** Kibana\
**Created:** [June 16, 2021, 4:57pm UTC](https://discuss.elastic.co/t/how-to-customize-navbar-logo-in-7-12-1/276170 "2021-06-16T16:57:24Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kanishk\_Madan](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/kanishk_madan/32/78928_2.png) [@Kanishk\_Madan](https://discuss.elastic.co/u/Kanishk_Madan)\
**Post date:** [June 16, 2021, 4:57pm UTC](https://discuss.elastic.co/t/how-to-customize-navbar-logo-in-7-12-1/276170/1 "2021-06-16T16:57:25Z")

</div>

hello community i want to change the navbar logo that is elastic how can I do it in 7.12.1.

 ![logo](https://us1.discourse-cdn.com/elastic/original/3X/5/6/56bfd2275aa5aed8eda9e126e862742cbe690e81.png)

---

<div class="post-metadata">

**Author:** ![lukeelmers](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/lukeelmers/32/35230_2.png) [@lukeelmers](https://discuss.elastic.co/u/lukeelmers)\
**Post date:** [June 16, 2021, 5:25pm UTC](https://discuss.elastic.co/t/how-to-customize-navbar-logo-in-7-12-1/276170/2 "2021-06-16T17:25:47Z")

</div>

At the moment there is no officially supported way to change the logo. However, this is a frequently requested feature, so we have [a Github issue](https://github.com/elastic/kibana/issues/17879) if you'd like to follow along for any future updates.

There are [several threads here in the forums](https://discuss.elastic.co/search?q=kibana%20logo%20category%3A7) going over ways you can make this customization by changing the source code. Notably this thread tends to be updated quite frequently with instructions for new releases: [Replace the kibana logo?](https://discuss.elastic.co/t/replace-the-kibana-logo/27547)

In 7.12.1 the SVG logo lives here: [kibana/elastic\_mark.tsx at v7.12.1 · elastic/kibana · GitHub](https://github.com/elastic/kibana/blob/v7.12.1/src/core/public/chrome/ui/header/elastic_mark.tsx)

I believe altering this SVG and [re-building Kibana](https://www.elastic.co/guide/en/kibana/master/building-kibana.html) would be all you need to do, but this isn't something I've tested.

---

<div class="post-metadata">

**Author:** ![Kanishk\_Madan](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/kanishk_madan/32/78928_2.png) [@Kanishk\_Madan](https://discuss.elastic.co/u/Kanishk_Madan)\
**Post date:** [June 16, 2021, 5:30pm UTC](https://discuss.elastic.co/t/how-to-customize-navbar-logo-in-7-12-1/276170/3 "2021-06-16T17:30:06Z")

</div>

ok let me try !!

---

<div class="post-metadata">

**Author:** ![Kanishk\_Madan](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/kanishk_madan/32/78928_2.png) [@Kanishk\_Madan](https://discuss.elastic.co/u/Kanishk_Madan)\
**Post date:** [June 16, 2021, 5:43pm UTC](https://discuss.elastic.co/t/how-to-customize-navbar-logo-in-7-12-1/276170/4 "2021-06-16T17:43:53Z")

</div>

there is no file name elastic\_mark.tsx in v7.12.1 .

---

<div class="post-metadata">

**Author:** ![Kanishk\_Madan](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/kanishk_madan/32/78928_2.png) [@Kanishk\_Madan](https://discuss.elastic.co/u/Kanishk_Madan)\
**Post date:** [June 17, 2021, 6:10am UTC](https://discuss.elastic.co/t/how-to-customize-navbar-logo-in-7-12-1/276170/5 "2021-06-17T06:10:33Z")

</div>

There is no file name elastic\_mark.tsx. Please suggest any other file

 ![path](https://us1.discourse-cdn.com/elastic/original/3X/7/6/76896443e8631ab96e84bb0ac4f1ef425bd7c189.png)

---

<div class="post-metadata">

**Author:** ![lukeelmers](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/lukeelmers/32/35230_2.png) [@lukeelmers](https://discuss.elastic.co/u/lukeelmers)\
**Post date:** [June 17, 2021, 1:41pm UTC](https://discuss.elastic.co/t/how-to-customize-navbar-logo-in-7-12-1/276170/6 "2021-06-17T13:41:53Z")

</div>

The location in the distribution, which is already built, is different from the location in the source.

This is where it can be found in the source: [kibana/elastic\_mark.tsx at v7.12.1 · elastic/kibana · GitHub](https://github.com/elastic/kibana/blob/v7.12.1/src/core/public/chrome/ui/header/elastic_mark.tsx)

My suggestion is to clone the Kibana repo, make the change, and re-build Kibana from source.

I'm not sure there's going to be an easy way to change the logo from the distribution -- I believe the SVG is inlined so you can't just overwrite a static image file somewhere. It would require digging through the built JavaScript files and finding the exact location where the logo SVG lives (which is possible, just a bit more challenging).

---

<div class="post-metadata">

**Author:** ![Kanishk\_Madan](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/kanishk_madan/32/78928_2.png) [@Kanishk\_Madan](https://discuss.elastic.co/u/Kanishk_Madan)\
**Post date:** [June 18, 2021, 9:59am UTC](https://discuss.elastic.co/t/how-to-customize-navbar-logo-in-7-12-1/276170/7 "2021-06-18T09:59:07Z")

</div>

can you tell me where is the file to change login elastic logo and the file elastic\_mark is not there in v7.12.1.  
could you suggest another file .

---

<div class="post-metadata">

**Author:** ![lukeelmers](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/lukeelmers/32/35230_2.png) [@lukeelmers](https://discuss.elastic.co/u/lukeelmers)\
**Post date:** [June 22, 2021, 6:47pm UTC](https://discuss.elastic.co/t/how-to-customize-navbar-logo-in-7-12-1/276170/8 "2021-06-22T18:47:38Z")

</div>

> [@Kanishk\_Madan](#):
>
> the file elastic\_mark is not there in v7.12.1

I linked to this file in my comment above: [Elastic](https://github.com/elastic/kibana/blob/v7.12.1/src/core/public/chrome/ui/header/elastic_mark.tsx)

Have you cloned the Kibana repo yet? You will not find this file in the distribution.

```auto
git clone https://github.com/elastic/kibana.git
git checkout v7.12.1
yarn kbn bootstrap

```

> [@Kanishk\_Madan](#):
>
> where is the file to change login elastic logo

The login logo lives in this file (again, this is in the Kibana source and not the distribution, which you'd need to clone and modify): [https://github.com/elastic/kibana/blob/v7.12.1/x-pack/plugins/security/public/authentication/login/login\_page.tsx#L94-L96](https://github.com/elastic/kibana/blob/v7.12.1/x-pack/plugins/security/public/authentication/login/login_page.tsx#L94-L96)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [July 20, 2021, 6:48pm UTC](https://discuss.elastic.co/t/how-to-customize-navbar-logo-in-7-12-1/276170/9 "2021-07-20T18:48:21Z")

</div>

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