How to change logo size on Rocket.Chat login screen [5.4.1]


I would like to edit the size of the displayed logo on the login screen and its margin.
I found the corresponding configuration in css:

  @media all
.rcx-css-13sr1uc {
  max-height: 2.5rem !important;
  margin-inline: -0.5rem !important;

which points to:

<img src="" alt="Logo" class="rcx-box rcx-box--full rcx-css-13sr1uc">

The problem is that after adding:

  @media all
.rcx-css-13sr1uc {
  max-height: 5.5rem !important;
  margin-inline: -0.0rem !important;

to custom css nothing changes. I read in a thread on github that “important” entries cannot be overwritten or changed. Is this true?

Server Setup Information

  • Version of Rocket.Chat Server: 5.4.1
  • Deployment Method: docker
  • MongoDB Version: 4.4


Can you try the code below?

the .rcx-css-something is usually a random generated class, so you should not reference it directly.

 img[alt~="Logo"] {
     max-height: none !important;

Edit: trying to fix the ” != "

Let me know if this helps :slight_smile:


Unfortunately, it did not help - nothing has changed. The logo is still small.

Any further insights? I’ve got this issue too and would realy glad to see, how this works!

That’s strange. This worked for me.

Have you cleared the cache?

Also, try installing the latest 5.X version.

I am on Version 5.4.3 and added your code to custom CSS. Also deleted all Browserdata, but nothing changed, Logo is still to small




While copying and pasting the code, what for the “Logo”. I think that was the problem :slight_smile:

it should be " and not ”

img[alt~="Logo"] {
max-height: none !important;