Is there a way to customize Logo/Icons?

[gilgameshun]

The Issue: When I load the login page, my custom logo appears for a split second, but then the page refreshes/renders fully, and the default Vaultwarden logo takes over again. The custom styling seems to be applied initially but gets overridden or ignored after the specific page components initialize.

My Setup:

• Deployment: Docker (via CasaOS)

• Environment Variable: TEMPLATES_FOLDER=/data/templates

• Volumes:

  • Host: /DATA/.../vaultwarden/data mapped to Container: /data

  • Host: /DATA/.../Logos/SVG mapped to Container: /web-vault/images/custom

Verification:

• I have verified that the image URL is accessible. Browsing to https://my-vault-url/images/custom/Trueguard_Logo.svg loads the image correctly.

• I have set permissions to 777 on the templates folder to rule out permission issues.

• The TEMPLATES_FOLDER is pointing to the correct location inside the container (/data/templates), which maps to the host folder containing the scss subdirectory.

Current user.vaultwarden.scss.hbs content:

 /DATA/AppData/vaultwarden/data/templates/scss/user.vaultwarden.scss.hbs
                             
/* Use a custom login logo */
app-root img.new-logo-themed {
    content: url('/images/custom/Trueguard_Logo.svg') !important;
    width: 250px !important;
    height: auto !important;
}

/* Use a custom top left logo on login and locked screen page */
auth-anon-layout > main > a > bit-icon > svg {
  display: none !important;
}
auth-anon-layout > main > a > bit-icon::before {
  display: block;
  content: "" !important;
  width: 200px !important;
  height: 150px !important;
  background-image: url('/images/custom/Trueguard_Logo.svg') !important;
  background-repeat: no-repeat !important;
  background-size: contain;
  background-position: center;
}



/* (Sidebar - Vault & Admin) */
app-user-layout bit-nav-logo bit-icon > svg,
app-organization-layout bit-nav-logo bit-icon > svg {
  display: none !important;
}

app-user-layout bit-nav-logo bit-icon::before,
app-organization-layout bit-nav-logo bit-icon::before {
  display: block;
  content: "" !important;
  width: 220px !important;
  height: 50px !important;
  background-repeat: no-repeat !important;
  background-size: contain;
  background-position: center left;
}


app-user-layout bit-nav-logo bit-icon::before {
  background-image: url('/images/custom/Trueguard_withPW.svg') !important;
}
app-organization-layout bit-nav-logo bit-icon::before {
  background-image: url('/images/custom/Trueguard_withPW.svg') !important;
}

Question (@stefan0xC): Since you helped me previously: I believe I have set up the paths correctly now as the images are loading via direct URL. However, have you experienced this “flashing” behavior where the custom logo is visible for a moment and then disappears?

Is there a more specific CSS selector I should be using for the current version of the web-vault to ensure the custom logo stays persistent and isn’t overridden by the JS rendering?

Any advice is appreciated!