To make UI Bakery feel like a part of your own systems, you can apply your own branding using the following variables:

  • Change the title of the app in the browser tab:

  • Replace the UI Bakery logo with your own logo on the login screens:

  • Change the background image on all login screens:

  • Use a custom loader as an inline SVG with the class="loader-logo":

UI_BAKERY_BRANDING_LOADER='<?xml version="1.0" encoding="UTF-8"?>
<svg class="loader-logo" viewBox="0 0 27 39" xmlns="" xmlns:xlink="">
<path id="a" d="m14.266 30.487c-2.943 0.552-5.771-1.41-6.317-4.381-0.546-2.972 1.396-5.828 4.338-6.38 2.943-0.552 5.77 1.41 6.317 4.382 0.547 2.971-1.396 5.827-4.338 6.379m10.56-11.99c-3.616-6.441-11.716-8.704-18.095-5.053-6.379 3.65-8.619 11.83-5.004 18.272 3.615 6.441 11.715 8.704 18.093 5.054s8.619-11.832 5.004-18.273"/>
  • Customize the loader container's styles with inline CSS:

UI_BAKERY_BRANDING_LOADER_STYLES="background: #003D4C; transform: scale(2)"
  • Change the website's favicon:

  • Customize the logo at the top left corner of the workspace:


Other more specific branding settings are also available, check Branding environment variables.

Last updated