Custom Logo for Kibana 8.3.3 - Guide

I would like to change the header logo in Kibana 8.3.3. :innocent:

  • Change Header Logo and Text
    
  • Change loading Text and Logo
    
  • Change login page logo and text
    
  • Change Page Title
    

I have achieved it by editing following files and re-compressed and replace.

Page Title Name, Loaing Text

Edit template.js file

sudo nano /usr/share/kibana/src/core/server/rendering/views/template.js

Loaing Text
Find the following line and replace the text with your message.

}, i18n('core.ui.welcomeMessage', {
    defaultMessage: 'Change this'

Page Title Name
Find the following line and replace the text with your message.
/*#__PURE__*/_react.default.createElement("title", null, "Change this name"),

Login Page "Welcome to Elastic" Message

/usr/share/kibana/x-pack/plugins/security/target/public/security.chunk.8.js

Search for the text Welcome to Elastic and replace it with your custom message.

Logo Name, Header elastic logo.

Edit the File

/usr/share/kibana/src/core/target/public/core.entry.js

elastic Logo
Search for the text elasticMark and continuously you can find the svg data paths of elastic logo. Replace the paths/remove unwanted svg data paths line starting with Object(R.jsx)("path",{d:"

Logo Alternate Text
Object(R.jsx)("title",{id:"elasticMark"},"your-logo-name")

Elastic Logo SVG (Loading and Login)

/usr/share/kibana/src/core/server/rendering/views/logo.js

You can find svg paths for the elastic logo. You can change it to your own. This will effect login page logo.

Header Logo (small icon)

/usr/share/kibana/node_modules/@kbn/ui-shared-deps-npm/shared_built_assets/kbn-ui-shared-deps-npm.chunk.220.js

Search for the text LogoElastic and continuously you can find the svg data paths of elastic logo. Replace the paths, remove unwanted svg data paths line starting with
Object(d.jsx)("path",{className:"outline",fillRule:"evenodd",clipRule:"evenodd",d:""

Take a copy of the files into /tmp and edit the lines and create compressed files.

npx gzip-cli /tmp/core.entry.js -e=gz -e=br

npx gzip-cli /tmp/security.chunk.8.js -e=gz -e=br

npx gzip-cli /tmp/kbn-ui-shared-deps-npm.chunk.220.js -e=gz -e=br

Remove original and Copy the customized files to their respective directories

sudo rm /tmp/security.chunk.8.js /usr/share/kibana/x-pack/plugins/security/target/public/security.chunk.8.js
sudo rm /tmp/security.chunk.8.js.gz /usr/share/kibana/x-pack/plugins/security/target/public/security.chunk.8.js.gz
sudo rm /tmp/security.chunk.8.js.br /usr/share/kibana/x-pack/plugins/security/target/public/security.chunk.8.js.br
sudo rm /tmp/core.entry.js /usr/share/kibana/src/core/target/public/core.entry.js
sudo rm /tmp/core.entry.js.gz /usr/share/kibana/src/core/target/public/core.entry.js.gz
sudo rm /tmp/core.entry.js.br /usr/share/kibana/src/core/target/public/core.entry.js.br
sudo rm /tmp/logo.js /usr/share/kibana/src/core/server/rendering/views/logo.js
sudo rm /tmp/kbn-ui-shared-deps-npm.chunk.220.js /usr/share/kibana/node_modules/@kbn/ui-shared-deps-npm/shared_built_assets/kbn-ui-shared-deps-npm.chunk.220.js
sudo rm /tmp/kbn-ui-shared-deps-npm.chunk.220.js.gz /usr/share/kibana/node_modules/@kbn/ui-shared-deps-npm/shared_built_assets/kbn-ui-shared-deps-npm.chunk.220.js.gz
sudo rm /tmp/kbn-ui-shared-deps-npm.chunk.220.js.br /usr/share/kibana/node_modules/@kbn/ui-shared-deps-npm/shared_built_assets/kbn-ui-shared-deps-npm.chunk.220.js.br
sudo cp /tmp/security.chunk.8.js /usr/share/kibana/x-pack/plugins/security/target/public/security.chunk.8.js
sudo cp /tmp/security.chunk.8.js.gz /usr/share/kibana/x-pack/plugins/security/target/public/security.chunk.8.js.gz
sudo cp /tmp/security.chunk.8.js.br /usr/share/kibana/x-pack/plugins/security/target/public/security.chunk.8.js.br
sudo cp /tmp/core.entry.js /usr/share/kibana/src/core/target/public/core.entry.js
sudo cp /tmp/core.entry.js.gz /usr/share/kibana/src/core/target/public/core.entry.js.gz
sudo cp /tmp/core.entry.js.br /usr/share/kibana/src/core/target/public/core.entry.js.br
sudo cp /tmp/logo.js /usr/share/kibana/src/core/server/rendering/views/logo.js
sudo cp /tmp/kbn-ui-shared-deps-npm.chunk.220.js /usr/share/kibana/node_modules/@kbn/ui-shared-deps-npm/shared_built_assets/kbn-ui-shared-deps-npm.chunk.220.js
sudo cp /tmp/kbn-ui-shared-deps-npm.chunk.220.js.gz /usr/share/kibana/node_modules/@kbn/ui-shared-deps-npm/shared_built_assets/kbn-ui-shared-deps-npm.chunk.220.js.gz
sudo cp /tmp/kbn-ui-shared-deps-npm.chunk.220.js.br /usr/share/kibana/node_modules/@kbn/ui-shared-deps-npm/shared_built_assets/kbn-ui-shared-deps-npm.chunk.220.js.br

Reference: Custom Logo Kibana 7.10.0 (guide)

1 Like

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