# Replace Kibana logo and loading icon in Kibana 7.0
**URL:** https://discuss.elastic.co/t/replace-kibana-logo-and-loading-icon-in-kibana-7-0/177854
**Category:** Kibana
**Created:** [April 22, 2019, 1:40pm UTC](https://discuss.elastic.co/t/replace-kibana-logo-and-loading-icon-in-kibana-7-0/177854 "2019-04-22T13:40:25Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@Rahul\_Tandon](https://discuss.elastic.co/u/Rahul_Tandon)
#### Post date: [April 22, 2019, 1:40pm UTC](https://discuss.elastic.co/t/replace-kibana-logo-and-loading-icon-in-kibana-7-0/177854/1 "2019-04-22T13:40:25Z")
How can we change kibana logo and loading icon in Kibana 7.0?
---
### Author:  [@rashmi](https://discuss.elastic.co/u/rashmi)
#### Post date: [April 22, 2019, 9:02pm UTC](https://discuss.elastic.co/t/replace-kibana-logo-and-loading-icon-in-kibana-7-0/177854/2 "2019-04-22T21:02:24Z")
> [@Rahul\_Tandon](#):
>
> o and loading icon in Kibana 7.0?
Have you tried changing it by replacing the file for ex: "abcd.svg" present under the directory "/usr/share/kibana/optimize/bundles/".Images with png extension works as well.
Refreshing the browser alone is sufficient.
Path; /usr/share/kibana/optimize/bundles/src/ui/public/images
More discuss posts with more info
> [@Changing Kibana logo on the top left hand side](https://discuss.elastic.co/t/changing-kibana-logo-on-the-top-left-hand-side/115128):
>
> I am currently on Kibana 6.0 and I used these steps below suggested by tatdatTat Dat Pham and still not able to see my company logo, please advise. Reena For change logo, find file "global\_nav.less" (kibana directory)/src/ui/public/chrome/directives/global\_nav/global\_nav.less Change to background-image: url("~ui/images/your-company-logo.png"); -- line 35 You must upload your logo in folder (kibana directory)/src/ui/public/images/
> [@Replace the kibana logo?](https://discuss.elastic.co/t/replace-the-kibana-logo/27547):
>
> Does anyone know if it is possible to replace the kibana logo with my company's logo? Only for corporate use.
> [@How to change the loading logo and text](https://discuss.elastic.co/t/how-to-change-the-loading-logo-and-text/75686):
>
> how to change the loading logo and text by no changing the source code, use hack.js instead?
Thanks
Rashmi
---
### Author:  [@Sjaak01](https://discuss.elastic.co/u/Sjaak01)
#### Post date: [April 23, 2019, 2:54am UTC](https://discuss.elastic.co/t/replace-kibana-logo-and-loading-icon-in-kibana-7-0/177854/3 "2019-04-23T02:54:50Z")
Logo
> [@KB7 Custom Logo](https://discuss.elastic.co/t/kb7-custom-logo/176753/3):
>
> Okay I found a way to add your own logo. Probably pretty hacky but it works. Open one of these files depending on the theme you're using: /node\_modules/@elastic/eui/dist/eui\_theme\_light.css /node\_modules/@elastic/eui/dist/eui\_theme\_dark.css Find .euiHeaderLogo\_\_Icon and change opacity to 0. This will hide the original logo. Next look for euiHeaderLogo, should be right above .euiHeaderLogo\_\_Icon. Add some css such as background-image and background-repeat to add your own logo. Now look for .…
Loading icon
> [@Customize Kibana 6.5 Login Page](https://discuss.elastic.co/t/customize-kibana-6-5-login-page/157153/3):
>
> In case somebody else is looking into customizing Kibana 6.5 I've found the files that need to be edited for most of the basic stuff. Browser title and loading logo (1) kibana-6.5.0/src/ui/ui\_render/views/chrome.pug Look for "kibana" and change that to a different text if you want a different title displayed in the browser. If you want to change the Kibana logo in the circular loading logo, look for a base64 string and replace this with a base64 of your own image. You can also change the hex…
Keep in mind that in 7.0 the location of the mentioned files has changed. I can't check right now but I believe it is something like build\_assets/legacy. Just run a search for the text in the mentioned files and you should be able to quickly find the correct path.
---
### Author:  [@Rahul\_Tandon](https://discuss.elastic.co/u/Rahul_Tandon)
#### Post date: [April 23, 2019, 6:15am UTC](https://discuss.elastic.co/t/replace-kibana-logo-and-loading-icon-in-kibana-7-0/177854/4 "2019-04-23T06:15:53Z")
Its not working in Kibana 7.0
---
### Author:  [@whoami](https://discuss.elastic.co/u/whoami)
#### Post date: [May 7, 2019, 7:59am UTC](https://discuss.elastic.co/t/replace-kibana-logo-and-loading-icon-in-kibana-7-0/177854/5 "2019-05-07T07:59:27Z")
I guess hack by js is a better way
---
### Author:  [@blueren](https://discuss.elastic.co/u/blueren)
#### Post date: [May 14, 2019, 8:02am UTC](https://discuss.elastic.co/t/replace-kibana-logo-and-loading-icon-in-kibana-7-0/177854/6 "2019-05-14T08:02:09Z")
> [@Rahul\_Tandon](#):
>
> ow can we change kibana logo and loading icon in Kibana 7.0?
If this is still of importance -
For 7.X
> Location: /usr/share/kibana/src/legacy/ui/ui\_render/views/
> Files: chrome.pug, ui\_app.pug
> Relavent lines: .kibanaWelcomeLogo --\> background-image
---
### Author:  [@abhimanyu.arora](https://discuss.elastic.co/u/abhimanyu.arora)
#### Post date: [June 6, 2019, 10:05am UTC](https://discuss.elastic.co/t/replace-kibana-logo-and-loading-icon-in-kibana-7-0/177854/7 "2019-06-06T10:05:01Z")
by using kibanaWelcomeLogo I was able to change the loading sign but still no luck with the kibana icon on top left. Any lead for that?
---
### Author:  [@blueren](https://discuss.elastic.co/u/blueren)
#### Post date: [June 6, 2019, 11:01am UTC](https://discuss.elastic.co/t/replace-kibana-logo-and-loading-icon-in-kibana-7-0/177854/8 "2019-06-06T11:01:50Z")
Do elaborate your attempt! I believe the below method as quoted by @Sjaak01 should work.
You will not be able to see the node\_modules if you've cloned kibana's repo via git since node\_modules are usually ignored (check their .gitignore file)
> [@Sjaak01](#):
>
> Okay I found a way to add your own logo. Probably pretty hacky but it works. Open one of these files depending on the theme you're using: /node\_modules/@elastic/eui/dist/eui\_theme\_light.css /node\_modules/@elastic/eui/dist/eui\_theme\_dark.css Find .euiHeaderLogo\_\_Icon and change opacity to 0. This will hide the original logo. Next look for euiHeaderLogo, should be right above .euiHeaderLogo\_\_Icon. Add some css such as background-image and background-repeat to add your own logo. Now look for .…
I was able to find the below inside my kibana docker container.
```
$ docker run -it kibana-img:7.1.0 sh
sh-4.2$ ls -ltr
total 1864
-rw-rw-r-- 1 kibana root 738 May 16 01:09 package.json
drwxrwsr-x 2 kibana root 4096 May 16 01:09 data
-rw-rw-r-- 1 kibana root 4048 May 16 01:09 README.txt
-rw-rw-r-- 1 kibana root 1797013 May 16 01:09 NOTICE.txt
-rw-rw-r-- 1 kibana root 13675 May 16 01:09 LICENSE.txt
drwxrwsr-x 2 kibana root 4096 May 16 01:16 webpackShims
drwxrwsr-x 3 kibana root 4096 May 16 01:16 target
drwxrwsr-x 1 kibana root 4096 May 16 01:16 src
drwxrwsr-x 3 kibana root 4096 May 16 01:16 optimize
drwxrwsr-x 1161 kibana root 36864 May 16 01:16 node_modules
drwxrwsr-x 6 kibana root 4096 May 16 01:16 node
drwxrwsr-x 4 kibana root 4096 May 16 01:16 built_assets
drwxrwsr-x 2 kibana root 4096 May 16 01:16 bin
drwxrwsr-x 1 kibana root 4096 May 16 01:18 config
drwxrwsr-x 1 kibana root 4096 Jun 6 09:41 plugins
sh-4.2$ grep -irl 'euiHeaderLogo__Icon'
node_modules/@elastic/eui/dist/eui_theme_dark.css
node_modules/@elastic/eui/dist/eui_theme_k6_dark.min.css
node_modules/@elastic/eui/dist/eui_theme_k6_dark.css
node_modules/@elastic/eui/dist/eui_theme_k6_light.min.css
node_modules/@elastic/eui/dist/eui_theme_dark.min.css
node_modules/@elastic/eui/dist/eui_theme_light.min.css
node_modules/@elastic/eui/dist/eui_theme_k6_light.css
node_modules/@elastic/eui/dist/eui_theme_light.css
sh-4.2$ cd node_modules/@elastic/eui/dist
sh-4.2$ grep -i 'euiHeaderLogo__Icon' eui_theme_light.css
.euiHeaderLogo__icon {
.euiHeaderLogo__icon.euiIcon--xLarge {
sh-4.2$
```
---
### Author:  [@system](https://discuss.elastic.co/u/system)
#### Post date: [July 4, 2019, 11:01am UTC](https://discuss.elastic.co/t/replace-kibana-logo-and-loading-icon-in-kibana-7-0/177854/9 "2019-07-04T11:01:51Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.