# How to change the top left header logo in kibana 7.9.2 **URL:** \ **Category:** Kibana\ **Created:** [September 27, 2020, 12:25pm UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084 "2020-09-27T12:25:06Z")\ **Posts on this page:** 20\ **Page:** 3
**Author:** ![ManuelF](https://avatars.discourse-cdn.com/v4/letter/m/e99b99/32.png) [@ManuelF](https://discuss.elastic.co/u/ManuelF)\ **Post date:** [October 2, 2020, 4:39pm UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/41 "2020-10-02T16:39:26Z")
Oh, I get it now. You can try adding a new line with `
` or` \n` inside the text object string, like in html: `external_kbnSharedDeps_React_default.a.createElement(external_kbnSharedDeps_KbnI18nRReact_["FormattedMessage"],{id:"xpack.security.loginPage.welcomeTitle",defaultMessage:"custom_text
new_text_line"}))` Or adding a new text object to the code right after the `welcomeTitle` text object (duplicate the text object): `external_kbnSharedDeps_React_default.a.createElement(external_kbnSharedDeps_KbnI18nRReact_["FormattedMessage"],{id:"xpack.security.loginPage.welcomeTitle",defaultMessage:"custom_text"}))` I have not tried any of these. It could be tricky dealing with the parenthesis... ---
**Author:** ![witcher](https://avatars.discourse-cdn.com/v4/letter/w/91b2a8/32.png) [@witcher](https://discuss.elastic.co/u/witcher)\ **Post date:** [October 2, 2020, 5:17pm UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/42 "2020-10-02T17:17:31Z")
@ManuelF thanks i will try it and revert. ---
**Author:** ![ManuelF](https://avatars.discourse-cdn.com/v4/letter/m/e99b99/32.png) [@ManuelF](https://discuss.elastic.co/u/ManuelF)\ **Post date:** [October 2, 2020, 5:21pm UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/43 "2020-10-02T17:21:50Z")
Hi @azasypkin, I am very glad to let you know that thanks to your help, I was able to successfully customize the `login logo` and the `navbar logo`. Also shared the steps so other users in need may benefit from it. Would you help me to do the same with the `Space Selector` and the `Exit Full Screen` logos? Thank you in advance ---
**Author:** ![witcher](https://avatars.discourse-cdn.com/v4/letter/w/91b2a8/32.png) [@witcher](https://discuss.elastic.co/u/witcher)\ **Post date:** [October 2, 2020, 5:37pm UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/44 "2020-10-02T17:37:29Z")
@ManuelF I followed your guide its not clear to me how to resize the login logo? ---
**Author:** ![ManuelF](https://avatars.discourse-cdn.com/v4/letter/m/e99b99/32.png) [@ManuelF](https://discuss.elastic.co/u/ManuelF)\ **Post date:** [October 2, 2020, 6:57pm UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/45 "2020-10-02T18:57:18Z")
Sorry about that. If your logo is not too big, just change the `size` option of the object and you don't have to remove any frame. You can choose any of these: `s`, `m`, `l`, `xl`, `xxl` and `original` `{type:"logoElastic",size:"xxl"}` If your logo does not fit in the frame, it will move out and won't look good. To prevent that from happening and you can also set a custom size beyond the options above, you need to remove the logo frame object from the code and leave only the logo object. Remove this block: `,external_kbnSharedDeps_React_default.a.createElement("span",{className:"loginWelcome__logo"},` and the last parenthesis from here: `… {type:"logoElastic",size:"xxl"})),…` Once done, you can use `size:"original”` and the logo will take the same size of the source image where the `SVG` or `base64` came from. ---
**Author:** ![witcher](https://avatars.discourse-cdn.com/v4/letter/w/91b2a8/32.png) [@witcher](https://discuss.elastic.co/u/witcher)\ **Post date:** [October 3, 2020, 4:12am UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/46 "2020-10-03T04:12:39Z")
> [@ManuelF](#): > > does not fit in the frame, it will move out and won't look good. To prevent that from happening and you can also set a custom size beyond the options above, you need to remove the logo frame object from the code and leave only the logo object. @ManuelF is it possible for you to share your files because when i make these changes the login page disappears ---
**Author:** ![azasypkin](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/azasypkin/32/42216_2.png) [@azasypkin](https://discuss.elastic.co/u/azasypkin)\ **Post date:** [October 5, 2020, 12:48pm UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/47 "2020-10-05T12:48:21Z")
> [@ManuelF](#): > > Would you help me to do the same with the `Space Selector` and the `Exit Full Screen` logos? - `Spaces Selector`: `"logoElastic"` near/before `xpack.spaces.spaceSelector.selectSpacesTitle` string in `..../kibana-7.9.2-linux-x86_64/x-pack/plugins/spaces/target/public/1.plugin.js` - `Exit Full Screen`: `"logoElastic"` near/before `kibana-react.exitFullScreenButton` string in `..../kibana-7.9.2-linux-x86_64/src/plugins/kibana_react/target/public/kibanaReact.plugin.js` (there is a chance you'll need to update this one in other files, but the idea is the same). Best, Oleg ---
**Author:** ![witcher](https://avatars.discourse-cdn.com/v4/letter/w/91b2a8/32.png) [@witcher](https://discuss.elastic.co/u/witcher)\ **Post date:** [October 5, 2020, 1:07pm UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/48 "2020-10-05T13:07:08Z")
@azasypkin hey mate can you tell me how should I load an svg file in the logo because whenever the svg gets too big it throws a reccursive error. ---
**Author:** ![azasypkin](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/azasypkin/32/42216_2.png) [@azasypkin](https://discuss.elastic.co/u/azasypkin)\ **Post date:** [October 5, 2020, 1:48pm UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/49 "2020-10-05T13:48:05Z")
> [@witcher](#): > > @azasypkin hey mate can you tell me how should I load an svg file in the logo because whenever the svg gets too big it throws a reccursive error. Hmm, this recursive error is weird, it'd be great if anyone can investigate that. But can't you just put your SVG file to, let's say, `..../kibana-7.9.2-linux-x86_64/src/core/server/core_app/assets/my_svg.svg` and reference it from the bundle like `type:"/ui/my_svg.svg`? ---
**Author:** ![ManuelF](https://avatars.discourse-cdn.com/v4/letter/m/e99b99/32.png) [@ManuelF](https://discuss.elastic.co/u/ManuelF)\ **Post date:** [October 5, 2020, 1:50pm UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/50 "2020-10-05T13:50:14Z")
I also had the recursive error at startup, but it was fixed when I reduced the size of the image. ---
**Author:** ![witcher](https://avatars.discourse-cdn.com/v4/letter/w/91b2a8/32.png) [@witcher](https://discuss.elastic.co/u/witcher)\ **Post date:** [October 5, 2020, 2:15pm UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/51 "2020-10-05T14:15:57Z")
> [@azasypkin](#): > > > [@witcher](#): > > > > @azasypkin hey mate can you tell me how should I load an svg file in the logo because whenever the svg gets too big it throws a reccursive error. > > Hmm, this recursive error is weird, it'd be great if anyone can investigate that. But can't you just put your SVG file to, let's say, `..../kibana-7.9.2-linux-x86_64/src/core/server/core_app/assets/my_svg.svg` and reference it from the bundle like `type:"/ui/my_svg.svg`? well tbh I did not know that thank you. is it possible to increase the size of the header logo? ---
**Author:** ![azasypkin](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/azasypkin/32/42216_2.png) [@azasypkin](https://discuss.elastic.co/u/azasypkin)\ **Post date:** [October 5, 2020, 3:26pm UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/52 "2020-10-05T15:26:40Z")
> [@witcher](#): > > is it possible to increase the size of the header logo? Maybe @ManuelF can suggest something here? if `size` property doesn't work for you, maybe the problem is in SVG file itself (e.g. too much white space around main element or something)? Have you tried other SVGs, are all of them small? I'm honestly not an expert in SVG 🙂 ---
**Author:** ![ManuelF](https://avatars.discourse-cdn.com/v4/letter/m/e99b99/32.png) [@ManuelF](https://discuss.elastic.co/u/ManuelF)\ **Post date:** [October 5, 2020, 4:16pm UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/53 "2020-10-05T16:16:12Z")
All I did was remove the frame that encloses the `EuiIcon` object from the code. This object restrict the size of the log you could use, so by removing that object from the code and leaving the `EuiIcon` object without frame, you can set the size that you want, with `size:"original"`. In my case I was using a source image of **721x689px** to generate the `base64` image. Apparently it was to big, so I reduced the size of the source image to **100x96px** (that's the size I need), then generated the `base64` image file. That did not rise any recursive errors and my logo looks great and centered. > [@ManuelF](#): > > Remove this block: > `,external_kbnSharedDeps_React_default.a.createElement("span",{className:"loginWelcome__logo"},` > [@ManuelF](#): > > and the last parenthesis from here: > `… {type:"logoElastic",size:"xxl"})),…` The above is to remove the frame object **className:"loginWelcome\_\_logo"** and leave only what comes right after in the code, which is the EuiIcon object (the logo) Result: `,external_kbnSharedDeps_React_default.a.createElement(external_kbnSharedDeps_ElasticEui_["EuiSpacer"],{size:"xxl"}),external_kbnSharedDeps_React_default.a.createElement(external_kbnSharedDeps_ElasticEui_["EuiIcon"],{type:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUg … JevgsIAAAAASUVORK5CYII=",size:"original”}),` **See the code before and after the edition so you can see what changed** Code before: `,external_kbnSharedDeps_React_default.a.createElement("span",{className:"loginWelcome__logo"},external_kbnSharedDeps_React_default.a.createElement(external_kbnSharedDeps_ElasticEui_["EuiIcon"],{type:"logoElastic",size:"xxl"})),` Code after: `,external_kbnSharedDeps_React_default.a.createElement(external_kbnSharedDeps_ElasticEui_["EuiSpacer"],{size:"xxl"}),external_kbnSharedDeps_React_default.a.createElement(external_kbnSharedDeps_ElasticEui_["EuiIcon"],{type:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUg … JevgsIAAAAASUVORK5CYII=",size:"original”}),` ---
**Author:** ![ManuelF](https://avatars.discourse-cdn.com/v4/letter/m/e99b99/32.png) [@ManuelF](https://discuss.elastic.co/u/ManuelF)\ **Post date:** [October 6, 2020, 3:30pm UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/54 "2020-10-06T15:30:47Z")
Hi @azasypkin, I was able to customize the Space Selector logo and the Exit-Full-Screen logo. Updated steps in my [tutorial](https://discuss.elastic.co/t/custom-logo-kibana-7-9-2-guide/250814). Thank you a lot!! 😁 👍 ---
**Author:** ![azasypkin](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/azasypkin/32/42216_2.png) [@azasypkin](https://discuss.elastic.co/u/azasypkin)\ **Post date:** [October 6, 2020, 3:54pm UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/55 "2020-10-06T15:54:36Z")
Glad to hear that and thanks for creating the tutorial! ---
**Author:** ![witcher](https://avatars.discourse-cdn.com/v4/letter/w/91b2a8/32.png) [@witcher](https://discuss.elastic.co/u/witcher)\ **Post date:** [October 6, 2020, 5:58pm UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/56 "2020-10-06T17:58:59Z")
Thanks for all the help @azasypkin and @ManuelF🙂 I am still trying to add a new line below the "Welcome to Elastic" line but it is not happening . ---
**Author:** ![ManuelF](https://avatars.discourse-cdn.com/v4/letter/m/e99b99/32.png) [@ManuelF](https://discuss.elastic.co/u/ManuelF)\ **Post date:** [October 6, 2020, 6:34pm UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/57 "2020-10-06T18:34:35Z")
@witcher, I am sorry that I can't help further, but honestly I have not tried that scenario. However, like I said before, you could try duplicating the text object in the code and see what happens. Open file: `$ sudo nano /usr/share/kibana/x-pack/plugins/security/target/public/4.plugin.js` After this string: `className:"loginWelcome__title"},external_kbnSharedDeps_React_default.a.createElement("h1",null,` Duplicate this object: `(external_kbnSharedDeps_KbnI18nReact_["FormattedMessage"],{id:"xpack.security.loginPage.welcomeTitle",defaultMessage:"CUSTOM_TEXT"})` to have this: `(external_kbnSharedDeps_KbnI18nReact_["FormattedMessage"],{id:"xpack.security.loginPage.welcomeTitle",defaultMessage:"CUSTOM_TEXT_1"}),(external_kbnSharedDeps_KbnI18nReact_["FormattedMessage"],{id:"xpack.security.loginPage.welcomeTitle",defaultMessage:"CUSTOM_TEXT_2"})` Becarefull with the parenthesis... You could also add more spaces after your 1st string. If the string is long enough, the text will be accommodated in a second line automatically. `(external_kbnSharedDeps_KbnI18nReact_["FormattedMessage"],{id:"xpack.security.loginPage.welcomeTitle",defaultMessage:"CUSTOM_TEXT_1 [space space space] CUSTOM_TEXT2"})` Good luck!! 🤞 🍀 ---
**Author:** ![azasypkin](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/azasypkin/32/42216_2.png) [@azasypkin](https://discuss.elastic.co/u/azasypkin)\ **Post date:** [October 7, 2020, 5:44am UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/58 "2020-10-07T05:44:31Z")
> [@witcher](#): > > Thanks for all the help @azasypkin and @ManuelF 🙂 I am still trying to add a new line below the "Welcome to Elastic" line but it is not happening . Just my 2 cents: I'd really encourage anyone trying to customize Kibana to use source code to experiment, it's much easier to work with (TypeScript, React, Sass etc.) and locate places you want to change. Although it's a bit heavy and slow when you run in it in the dev mode, it's **super easy** to get started (e.g. `yarn kbn bootstrap` ---\> `yarn es snapshot --license trial` to run required version of Elasticsearch in one tab, and `yarn start` in another to run Kibana from source), that's it. Play, inspect, change, no need to restart Kibana anymore and use complex heuristics to find a particular place in minimized JS files 🙂 Once all your changes work well in the dev mode, you can run the build (e.g. `NODE_OPTIONS=--max_old_space_size=8192 yarn build --skip-archives` - yeah, the build is quite heavy and requires quite a bit of time and resources to complete) and copy built artifacts that you need. Since you **always know** what git revision and git tag was used to build your original distributable you'll have exactly same outcome when you build it locally, so you can either use your new built version completely or just replace few files you need without a fear that something may be broken. The commands I shared above are mentioned in our dev docs as well, code is entirely open at GitHub, at Elastic we don't use anything to build or develop Kibana that's not available to you, so if you already can change minimized versions of the files, compress them and do all that magic you certainly can work with our source code much more efficiently (not to mention that you can then make a proper git diff when new version is released to know exactly what you may need to change) 😉 ---
**Author:** ![witcher](https://avatars.discourse-cdn.com/v4/letter/w/91b2a8/32.png) [@witcher](https://discuss.elastic.co/u/witcher)\ **Post date:** [October 7, 2020, 6:04am UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/59 "2020-10-07T06:04:00Z")
> [@ManuelF](#): > > "loginWelcome\_\_title"},external\_kbnSharedDeps\_React\_default.a.c did not work mate if I tried both of the cases the first one gives a recursive error and the second case just ignores more than one space ---
**Author:** ![witcher](https://avatars.discourse-cdn.com/v4/letter/w/91b2a8/32.png) [@witcher](https://discuss.elastic.co/u/witcher)\ **Post date:** [October 7, 2020, 9:37am UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/61 "2020-10-07T09:37:57Z")
@azasypkin Thanks for the advice appreciate it . I will surely try it out on my end 🙂 👍 [Previous page](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084.md?page=2) [Next page](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084.md?page=4)