Replace Kibana logo and loading icon in Kibana 7.0

[Rahul_Tandon]

How can we change kibana logo and loading icon in Kibana 7.0?

[rashmi (kulkarni)]

@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

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?

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

how to change the loading logo and text by no changing the source code, use hack.js instead?

Thanks
Rashmi

[Sjaak01 (Sjaak)]

Logo

KB7 Custom Logo

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

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.

[Rahul_Tandon]

Its not working in Kibana 7.0

[whoami]

I guess hack by js is a better way

[blueren (bluren)]

@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

[abhimanyu.arora]

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?

[blueren (bluren)]

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$