# Customize logo in Kibana 7.6 **URL:** \ **Category:** Kibana\ **Created:** [May 28, 2020, 3:30pm UTC](https://discuss.elastic.co/t/customize-logo-in-kibana-7-6/234771 "2020-05-28T15:30:23Z")\ **Posts on this page:** 17\ **Page:** 1
**Author:** ![marrel](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@marrel](https://discuss.elastic.co/u/marrel)\ **Post date:** [May 28, 2020, 3:30pm UTC](https://discuss.elastic.co/t/customize-logo-in-kibana-7-6/234771/1 "2020-05-28T15:30:23Z")
Hello to everyone! I am trying to customize kibana 7.6. I have successfully changed the logo in Header ( the logo in the tab), the logo in loading screen, and I have replaced the favicons folder. I have used this topic to do [the above](https://discuss.elastic.co/t/logo-change/226370/6). However, I am facing problem in changing logo in 1. left menu next to Select Space 2. Login page 3. Select Space page I have read several topics here such as [1](https://discuss.elastic.co/t/replace-the-kibana-logo-in-version-7-4/204161/8), [2](https://discuss.elastic.co/t/change-colors-of-kibana-sidebar-pink-kibana-header/94256/2), [3](https://discuss.elastic.co/t/replace-the-kibana-logo-in-version-7-4/204161/9) and many others in the last 4 days but without success. Taking into consideration that for every version in Kibana, the directories and files change, have anyone tried to change the above in Kibana 7.6. ? Any help would be greatly appreciated. ---
**Author:** ![majagrubic](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/majagrubic/32/74459_2.png) [@majagrubic](https://discuss.elastic.co/u/majagrubic)\ **Post date:** [May 28, 2020, 5:00pm UTC](https://discuss.elastic.co/t/customize-logo-in-kibana-7-6/234771/2 "2020-05-28T17:00:35Z")
Hi, could you just clarify which logo exactly are you trying to change under 1.? Is it the header logo in the navbar? ![Screenshot 2020-05-28 at 17.59.52](https://us1.discourse-cdn.com/elastic/original/3X/2/9/29eb64752e80092eac4a82a002abba7c006578ca.png) ---
**Author:** ![majagrubic](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/majagrubic/32/74459_2.png) [@majagrubic](https://discuss.elastic.co/u/majagrubic)\ **Post date:** [May 28, 2020, 5:03pm UTC](https://discuss.elastic.co/t/customize-logo-in-kibana-7-6/234771/3 "2020-05-28T17:03:58Z")
Also, just a sidenote that Elastic doesn't officially support whitelabeling Kibana. Since it's open source, we won't stop you, but any help with this is purely on a best-effort basis. ---
**Author:** ![marrel](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@marrel](https://discuss.elastic.co/u/marrel)\ **Post date:** [May 29, 2020, 10:03am UTC](https://discuss.elastic.co/t/customize-logo-in-kibana-7-6/234771/4 "2020-05-29T10:03:58Z")
Yes this is the logo I want to replace, as per your first comment. Any help or advice would be greatly appreciated. ---
**Author:** ![chbas](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/chbas/32/42023_2.png) [@chbas](https://discuss.elastic.co/u/chbas)\ **Post date:** [May 29, 2020, 1:49pm UTC](https://discuss.elastic.co/t/customize-logo-in-kibana-7-6/234771/5 "2020-05-29T13:49:11Z")
Hi, as long as there is no official way to do it, you can try using this hacky-way: - First, go to : > src/core/server/rendering/views/styles.tsx you will find some css rules defined in 'dangerouslySetInnerHTML'. - Apply the changes mentioned [here](https://discuss.elastic.co/t/replace-the-kibana-logo-in-version-7-4/204161/7) by adding these rules: > a[data-test-subj="logo"] \* { > display: none; > } > a[data-test-subj="logo"] { > background: url(URL TO YOUR LOGO) no-repeat 0 0; > background-size: auto 26px; > border-bottom: none; > background-position: 10px 10px; > } and the logo should be changed! ---
**Author:** ![marrel](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@marrel](https://discuss.elastic.co/u/marrel)\ **Post date:** [June 3, 2020, 8:32am UTC](https://discuss.elastic.co/t/customize-logo-in-kibana-7-6/234771/6 "2020-06-03T08:32:54Z")
> [@chbas](#): > > Apply the changes mentioned [here](https://discuss.elastic.co/t/replace-the-kibana-logo-in-version-7-4/204161/7) by adding these rules: Thank you very much for your detailed reply @chbas! One question only, where to save the custom plugin folder in kibana's directory? `C:\.......\kibana-7.6.0\built_assets\css\plugins` or `C:\......\kibana-7.6.0\plugins` Thank you in advance! ---
**Author:** ![chbas](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/chbas/32/42023_2.png) [@chbas](https://discuss.elastic.co/u/chbas)\ **Post date:** [June 3, 2020, 9:06am UTC](https://discuss.elastic.co/t/customize-logo-in-kibana-7-6/234771/7 "2020-06-03T09:06:50Z")
Neither! I was just referring to the place where I've found how to replace the logo. For my adaptation, just add the css rules inside `src/core/server/rendering/views/styles.tsx` ---
**Author:** ![marrel](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@marrel](https://discuss.elastic.co/u/marrel)\ **Post date:** [June 3, 2020, 1:08pm UTC](https://discuss.elastic.co/t/customize-logo-in-kibana-7-6/234771/8 "2020-06-03T13:08:10Z")
Where exactly should add the css rules inside`src/core/server/rendering/views/styles.tsx`? Below I share a part of the styles.tsx in which there is a line with `background-image` in base24 format: ``` .kibanaWelcomeLogo { width: 60px; height: 60px; margin: 10px 0 10px 10px; background-repeat: no-repeat; background-size: contain; /* SVG optimized according to http://codepen.io/tigt/post/optimizing-svgs-in-data-uris */ background-image: url('data:image/svg+xml;base64, '); } ``` ---
**Author:** ![chbas](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/chbas/32/42023_2.png) [@chbas](https://discuss.elastic.co/u/chbas)\ **Post date:** [June 3, 2020, 1:40pm UTC](https://discuss.elastic.co/t/customize-logo-in-kibana-7-6/234771/9 "2020-06-03T13:40:35Z")
just after that rule. ---
**Author:** ![marrel](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@marrel](https://discuss.elastic.co/u/marrel)\ **Post date:** [June 4, 2020, 10:20am UTC](https://discuss.elastic.co/t/customize-logo-in-kibana-7-6/234771/10 "2020-06-04T10:20:57Z")
Thank you very much @chbas. It works. But one comment, when I click on my logo (which returns my on `Home` page), my logo just disappears and when I click anywhere in kibana my logo comes back. Do you know why this is happening? ---
**Author:** ![chbas](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/chbas/32/42023_2.png) [@chbas](https://discuss.elastic.co/u/chbas)\ **Post date:** [June 4, 2020, 11:23am UTC](https://discuss.elastic.co/t/customize-logo-in-kibana-7-6/234771/11 "2020-06-04T11:23:11Z")
Hi @marrel, well that can be easily fixed by adding the same css rules when the logo is clicked, something like this: > a[data-test-subj="logo"]:focus { > ... // same css rules I hope this is clear now 🙂 ---
**Author:** ![marrel](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@marrel](https://discuss.elastic.co/u/marrel)\ **Post date:** [June 4, 2020, 11:59am UTC](https://discuss.elastic.co/t/customize-logo-in-kibana-7-6/234771/12 "2020-06-04T11:59:58Z")
Dear @chbas I cannot describe how happy I am! I am really new in working with CSS so I want to thank you very much both for your time and for your prompt replies. It works! you made my day! 🙂 ---
**Author:** ![marrel](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@marrel](https://discuss.elastic.co/u/marrel)\ **Post date:** [June 10, 2020, 6:47am UTC](https://discuss.elastic.co/t/customize-logo-in-kibana-7-6/234771/13 "2020-06-10T06:47:51Z")
I am wondering @chbas if you have any idea regarding the other two issues: 1. logo from `Login` page 2. logo from `Select Space` page I tried to change the logo from the `Select Space` page but I cannot remove the kibana logo, and from my last attempt I have two logos together, one on top of the other 😆 Do you have any idea for these? thank you in advance!!! ---
**Author:** ![chbas](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/chbas/32/42023_2.png) [@chbas](https://discuss.elastic.co/u/chbas)\ **Post date:** [June 11, 2020, 10:22am UTC](https://discuss.elastic.co/t/customize-logo-in-kibana-7-6/234771/14 "2020-06-11T10:22:08Z")
Hi @marrel, Please take a look [here](https://github.com/ch-bas/changeKibanaLogo7.6). ---
**Author:** ![marrel](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@marrel](https://discuss.elastic.co/u/marrel)\ **Post date:** [June 12, 2020, 7:06am UTC](https://discuss.elastic.co/t/customize-logo-in-kibana-7-6/234771/15 "2020-06-12T07:06:26Z")
Hi @chbas, thank you for the link. I have managed to change the logo/text when Kibana first loads, browser logo/title and with your valuable advices the side bar logo. From the link I did not see details about changing logo from `Login` page and logo from `Select Space` page. Have you found a way to do these two changes? Thank you in advance for any help. ---
**Author:** ![chbas](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/chbas/32/42023_2.png) [@chbas](https://discuss.elastic.co/u/chbas)\ **Post date:** [June 12, 2020, 8:25am UTC](https://discuss.elastic.co/t/customize-logo-in-kibana-7-6/234771/16 "2020-06-12T08:25:44Z")
For the login logo, I already replied to [that](https://github.com/ch-bas/changeKibanaLogo7.6/blob/a0376fce33a40ffdd2683921bb3cf5ea90c957bc/custom_css/public/main.less#L18). For the second one, go to : `x-pack/legacy/plugins/spaces/public/space_selector/space_selector.tsx` and change 'logoKibana' to the url of your svg logo, as explained [here](https://elastic.github.io/eui/#/display/icons). ---
**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\ **Post date:** [July 10, 2020, 8:25am UTC](https://discuss.elastic.co/t/customize-logo-in-kibana-7-6/234771/17 "2020-07-10T08:25:46Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.