[Guide] Customize logo, text screen and loading in Kibana 7.x

STATUS: Updating ...
Hi everyone, i believe that have many people want to change logo kibana to owner company logo, like with me. After time for searching and reading source code i found solution to change Logo, Favicon, Welcome logo login, Header logo, SelectSpace logo and Loading image

  1. Login logo (welcome screen)
  2. Change login in Select Space
  3. Change login in Header
  4. Change loading screen
  5. Change favicon

1. Login logo (welcome screen)
Require : Logo must have size 80*80 pixel
Open file login_page.js and remove original svg logo

/usr/share/kibana/node_modules/x-pack/plugins/security/public/views/login/components/login_page/login_page.js

Inline remove line 54 change line 53 to

react_1.default.createElement("span", { className: "loginWelcome__logo" }),

It look like

react_1.default.createElement("span", { className: "loginWelcome__logo" }),
      react_1.default.createElement(eui_1.EuiTitle, { size: "l", className: "loginWelcome__title" },

Next, we need edit css. Open file index.dark.css and index.light.css. Find class .loginWelcome__logo {}
Remove background and add background-image

background-image: url(url_your_logo_company);

It look like

.loginWelcome__logo {
  display: inline-block;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  background-image: url(https://i.imgur.com/OJVk1hn.png);
  border-radius: 100%;
  padding: 16px;
  -webkit-box-shadow: 0 6px 12px -1px rgba(0, 0, 0, 0.2), 0 4px 4px -1px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 6px 12px -1px rgba(0, 0, 0, 0.2), 0 4px 4px -1px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
  margin-bottom: 32px; }
  .loginWelcome__logo .euiIcon {
    vertical-align: baseline; }

Note: Resize your logo to size 80*80 pixel.

Make change
To make change, i need install or remove 1 plugin, to get kibana rebuild.
You can try with :
Install any plugin :

/usr/share/kibana/bin/kibana-plugin install https://github.com/wtakase/kibana-own-home/releases/download/v7.1.0/own_home-7.1.0.zip
systemctl restart kibana

Wait in 10s, and type :

/usr/share/kibana/bin/kibana-plugin remove own_home
systemctl restart kibana

2. Change login in Select Space
Require : Logo must have size 80*80 pixel
Open file space_selector.js and remove original svg logo

vim /usr/share/kibana/node_modules/x-pack/plugins/spaces/public/views/space_selector/space_selector.js

Remove line 82 and add ")" to end of line 81, before comma. It look like

react_2.default.createElement("span", { className: "spcSpaceSelector__logo" }),
react_2.default.createElement(eui_1.EuiTitle, { size: "l" },
    react_2.default.createElement("h1", { tabIndex: 0, ref: this.setHeaderRef },

Next, we need edit css. Open file index.dark.css and index.light.css . Find class .spcSpaceSelector__logo {} (line 127)

vim /usr/share/kibana/built_assets/css/plugins/spaces/index.dark.css
vim /usr/share/kibana/built_assets/css/plugins/spaces/index.dark.css

Remove background-color and add background-image

.spcSpaceSelector__logo {
  margin-bottom: 32px;
  display: inline-block;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  background-image: url("https://i.imgur.com/OJVk1hn.png");
  border-radius: 100%;
  padding: 16px;
  -webkit-box-shadow: 0 6px 12px -1px rgba(0, 0, 0, 0.2), 0 4px 4px -1px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 6px 12px -1px rgba(0, 0, 0, 0.2), 0 4px 4px -1px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2); }
  .spcSpaceSelector__logo .euiIcon {
    vertical-align: baseline; }

Note : Resize your logo to size 80*80 pixel.
After that, you can make change (look in #1)

3. Change login in Header
Require : Logo must have size 48*48 pixel
Open file eui_theme_light.css and eui_theme_dark.css

vim /usr/share/kibana/node_modules/@elastic/eui/dist/eui_theme_light.css

And

vim /usr/share/kibana/node_modules/@elastic/eui/dist/eui_theme_darkcss

In class .euiHeaderLogo__icon, change opacity to 0 (line 6248)

.euiHeaderLogo__icon {
  opacity: 0;
  position: relative;
  top: -2px; }

In class .euiHeaderLogo, add background-image. (change url_your_logo to your url)

.euiHeaderLogo {
  text-align: left;
  position: relative;
  height: 48px;
  line-height: 48px;
  min-width: 49px;
  padding: 0 13px 0 12px;
  display: inline-block;
  vertical-align: middle;
  background-image: url("url_your_logo");
  white-space: nowrap; }

In class .euiHeaderLogo:focus, remove background

.euiHeaderLogo:focus {
    text-decoration: underline; }

4. Change loading screen
writing ......

5. Change favicon
writing ......

1 Like

Thanks for this guide, @tatdat !

However, when using this be aware that the way of changing this might break with every release of Kibana. Official support for this is tracked here: https://github.com/elastic/kibana/issues/17879