Auth0 Support Center - Displaying Per-Application Logos on Auth0 Universal Login

Displaying Per-Application Logos on Auth0 Universal Login

Dec 19, 2025

Overview

This article provides steps to display a unique logo for each application on the Auth0 Universal Login page. By default, the Universal Login page displays a single tenant-wide logo configured in the Branding settings, and the logo set in an individual application's settings only appears in the application list and User Consent Prompt.

Applies To

Auth0 Universal Login
New Universal Login Experience

Solution

This configuration requires the New Universal Login experience to be enabled. A custom domain is recommended for the Auth0 tenant, and custom logos must be hosted externally on a publicly accessible URL, such as a Content Delivery Network (CDN) or image host.

Navigate to the Auth0 Dashboard.
Choose Branding > Universal Login from the navigation menu.
Select the Advanced or Customization tab to find the Hypertext Markup Language (HTML) or Liquid Page Template editor.
Locate the <head> section in the editor.

Insert the following conditional logic into the <style> block to target the default logo element with Cascading Style Sheets (CSS). This logic checks the application requesting authentication and dynamically inserts the corresponding logo URL. Use application.name or application.client_id.

HTML

<head>
  {%- auth0:head -%}
  <style>
    /* Default/Fallback Logo CSS Rule */
    .auth0-lock-header-logo {
      background-image: url('{{ branding.logo_url }}'); /* Uses the Tenant-wide logo as fallback */
    }

    /* Conditional Logic for Per-App Logos */
    {% if application.name == "<application_name>" %}
      .auth0-lock-header-logo {
        /* OVERRIDE: Logo for the Development app */
        background-image: url('https://<your_cdn_domain>/<dev-logo.png>');
      }
    {% elsif application.name == "<application_name>" %}
      .auth0-lock-header-logo {
        /* OVERRIDE: Logo for the Production app */
        background-image: url('https://<your_cdn_domain>/<prod-logo.png>');
      }
    {% endif %}
  </style>
</head>

Select Save.
Publish the changes if prompted.
Test the login flow by navigating to the login page from each application to ensure the correct logo is displayed.

Troubleshooting tips include:

Old Logo Still Shows: This may be caused by browser or CDN caching of the previous logo. Clear the browser cache or use an Incognito mode window. Alternatively, use a new logo URL or filename in the template to force a cache refresh.
No Logo Shows or Broken Image: This usually indicates an incorrect URL in the Liquid block. Verify that the logo URL is publicly accessible and entered correctly in the conditional statement.
Logic Not Working: This may result from a typo in application.name or the use of the wrong variable. Use application.client_id or ensure the spelling of application.name exactly matches the application name in the Auth0 Dashboard.