Auth0 Support Center - Conditionally Display Custom Logos in New Universal Login for Organizations

Conditionally Display Custom Logos in New Universal Login for Organizations

Sep 10, 2025

Overview

This article provides a method to conditionally display a custom logo on the New Universal Login (UL) page. This allows for a different user interface (UI) experience depending on whether the login flow is for a specific organization or a general, non-organizational login.

Applies To

New Universal Login
Organizations
Custom Login Pages

Solution

Conditional logic can be used in the New Universal Login HTML template to apply different Cascading Style Sheets (CSS) based on the presence of an organization object. This method serves as a workaround to render a different user interface for organizational versus non-organizational logins. For more details on this topic, review the CSS Customization documentation.

Navigate to the Universal Login page template editor.
Insert a <style> block within the <head> section of the HTML template.
Inside the <style> block, add a conditional {% if organization %} statement. This logic checks for the presence of the organization object during the login flow.
Define separate CSS rules within the if/else block to target an element, such as #custom-prompt-logo, and set its background-image property to different logo URLs.
In the <body> tag, add the corresponding class or ID (e.g., _use-custom-prompt-logo) that the CSS targets.

Example Code:

<!DOCTYPE html>
<html lang="{{locale}}">

  <head>
    <title>Welcome to {{ application.name }} </title>
    {%- auth0:head -%}
    <style>
      {% if organization %}
      #custom-prompt-logo {
      background-image: url('YOUR ORGS LOGO');
      }
      {% else %}
      #custom-prompt-logo {
      background-image: url('NO ORG LOGO');
      }
      {% endif %}
  </style>

  </head>

  <body class="_widget-auto-layout _use-custom-prompt-logo">
    {%- auth0:widget -%}
  </body>

</html>