bug(ui): Main logo resizes abnormally after replacing/loading custom SVG

[murattkoc]

Bug description

Bug Description

When replacing or loading a custom SVG, the main brand logo in the top navbar unexpectedly resizes and becomes overly large.

Steps to Reproduce

1. Configure a custom Loading.svg or replace default SVG assets in Superset.
2. Load/refresh any page in Superset.
3. Observe the main logo expanding/stretching during or after the loading phase.

Expected Behavior

The main logo should retain its fixed width/height dimensions (defined via APP_ICON_WIDTH or UI CSS) regardless of the loading SVG state.

Actual Behavior

The main logo stretches/enlarges, breaking the navbar alignment.

Environment

• Apache Superset Version: [Versiyonunu yaz, örn: 4.0.0]
• Browser: [Chrome / Firefox / Safari]

this my conf:
THEME_DEFAULT = {
"algorithm": "default",
"token": {
"brandSpinnerUrl": "/app/superset/static/assets/images/tvheryerde.svg",
}
}
but not working conf:
THEMET = {
"algorithm": "default",
"token": {
"brandSpinnerUrl": "/app/superset/static/assets/images/tvheryerde.svg",
}
}

Will you support me? @dosu

Screenshots/recordings

No response

Superset version

6.1.0

Python version

3.11

Node version

16

Browser

Chrome

Additional context

No response

Checklist

• I have searched Superset docs and Slack and didn't find a solution to my problem.
• I have searched the GitHub issue tracker and didn't find a similar bug report.
• I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

[dosubot[bot]]

@murattkoc there are a few things going on here, and they're worth untangling separately.

1. THEMET is just a typo — use THEME_DEFAULT. The correct config key is THEME_DEFAULT, not THEMET. Superset silently ignores unknown keys, so your second config block simply has no effect and you fall back to defaults. This isn't a bug — just rename THEMET to THEME_DEFAULT [1].

2. The oversized image is likely the loading spinner, not the navbar logo. These are two completely separate elements. The loading spinner (brandSpinnerUrl) is displayed while the app bootstraps and was introduced in PR #34764. It supports two tokens: brandSpinnerSvg (inline SVG, takes precedence) and brandSpinnerUrl (image URL fallback) [2]. The navbar brand logo is rendered afterward by Menu.tsx using theme.brandLogoUrl, brandLogoHeight, and brandLogoMargin — it has its own size constraints including max-width via brandIconMaxWidth and img { height: 100%; object-fit: contain } [3] [4].

What's most likely happening: your custom SVG referenced by brandSpinnerUrl doesn't have explicit width/height attributes or a viewBox with a defined aspect ratio, so the loading component renders it oversized. The Loading component defaults to width: 50px; height: unset [5], but an SVG without intrinsic dimensions can blow up with height: unset.

3. APP_ICON_WIDTH won't help here. Since v6.0, logo customization is fully controlled via theme tokens (brandLogoUrl, brandLogoHeight, brandLogoMargin), and the legacy APP_ICON/APP_ICON_WIDTH keys are deprecated and no longer used by the React SPA navbar [1]. APP_ICON_WIDTH only applies to the legacy Flask-AppBuilder navbar.html template.

To fix this:

• Ensure your SVG has explicit width/height attributes or a viewBox defining its intended dimensions — without these, the height: unset styling in the Loading component causes oversized rendering.
• Make sure you're setting brandSpinnerUrl for the bootstrap loader and brandLogoUrl for the navbar logo — they are separate tokens. Don't use the same oversized SVG for both unless it's sized correctly for each context.
• Use THEME_DEFAULT (not THEMET) for your config:

THEME_DEFAULT = {
    "token": {
        "brandSpinnerUrl": "/app/superset/static/assets/images/tvheryerde.svg",
        "brandLogoUrl": "/app/superset/static/assets/images/tvheryerde.svg",
        "brandLogoHeight": "24px",
    }
}

If the oversized element only appears briefly during page load and then the navbar looks normal, that confirms it's the spinner. If it persists after the app finishes loading, the issue is with the navbar logo rendering — let me know which scenario you're seeing and I can dig deeper.

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.

[murattkoc]

Is changing the loading spinner normally a trouble-free process in v6? And could you share an example SVG loading image? @dosu

[dosubot[bot]]

Yes, changing the loading spinner in v6 is straightforward — it's a config-only change, no frontend rebuild required. A merged PR explicitly documents and tests this path [1].

How to do it: Add brandSpinnerUrl to your superset_config.py:

THEME_DEFAULT = {
    "token": {
        "brandSpinnerUrl": "/static/assets/images/my-custom-spinner.svg",
    }
}

Place your SVG (or GIF) at the corresponding static path and restart Superset. The custom image will appear during loading [1].

Sizing caveat: The frontend Loading component renders the spinner as an <img> with width: 50px and height: unset. If your custom SVG doesn't have a roughly square aspect ratio or lacks a proper viewBox, it may appear stretched or oversized. Using a square canvas (e.g. viewBox="0 0 64 64") avoids this.

Things to be aware of:

• In packaged/pip installs (without the frontend source tree), the backend previously tried to load the default spinner SVG from a path that doesn't exist, producing a harmless warning in logs. This was fixed and doesn't affect your custom brandSpinnerUrl [2].
• There's an open PR that changes how brandSpinnerSvg (inline SVG content, distinct from brandSpinnerUrl) is rendered — switching from raw inline SVG to a base64 <img> data URI for security hardening [3]. This doesn't change the visual behavior.

Example minimal SVG spinner (square viewBox to scale cleanly):

<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
  <circle cx="32" cy="32" r="26" stroke="#2893B3" stroke-width="6" fill="none"
          stroke-linecap="round" stroke-dasharray="120 40">
    <animateTransform attributeName="transform" type="rotate"
                       from="0 32 32" to="360 32 32" dur="1s" repeatCount="indefinite"/>
  </circle>
</svg>

Save that as e.g. /static/assets/images/my-spinner.svg and point brandSpinnerUrl at it. If you'd like help debugging the sizing of a specific SVG you're already using, feel free to share its <svg> opening tag attributes.

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.

[murattkoc]

Can the issue where the main logo in the top-left corner gets distorted and enlarged in version 6.1.0 be fixed using the method you mentioned? Because I switched to theme_default and the spinner changed, but the main logo became enlarged and distorted.

The logo is distorted; the image is above.

Could you tell me what I need to do for a step-by-step solution?

@dosu

[dosubot[bot]]

@murattkoc Yes, the enlarged/distorted logo is fixable through theme configuration — no code changes needed. Here's what's happening and how to fix it step by step:

Why the logo gets distorted: In Superset 6.x, the old APP_ICON config key is deprecated and ignored by the frontend [1] [2]. The navbar logo is now controlled entirely by theme tokens (brandLogoUrl, brandLogoHeight, brandLogoMargin) rendered in Menu.tsx. If you only set brandSpinnerUrl in your theme without also setting the logo tokens, the logo falls back to defaults that may not match your custom image's dimensions, causing it to appear oversized or stretched.

Step-by-step fix:

1. Set all brand logo tokens together in your superset_config.py. Note that the backend config key is THEME [3], though it's commonly set via THEME_DEFAULT depending on your setup [1]:

THEME_DEFAULT = {
    "token": {
        "brandLogoUrl": "/static/assets/images/your-logo.svg",
        "brandLogoAlt": "Your Company",
        "brandLogoHeight": "24px",       # fixed height; width auto-scales
        "brandLogoMargin": "18px 0",     # vertical spacing
        "brandSpinnerUrl": "/static/assets/images/tvheryerde.svg",
    }
}

The built-in defaults are brandLogoHeight: "24px" and brandLogoMargin: "18px" [1]. Adjust brandLogoHeight if your logo needs to be taller.

2. Check your SVG file's attributes. Your logo SVG's <svg> tag needs a proper viewBox with a sensible aspect ratio (e.g., viewBox="0 0 200 50" for a wide logo). Without a viewBox or with an unusual one, the browser can't scale it proportionally within the height constraint, causing the stretched/enlarged appearance. The .navbar-brand container sets height: 100% and object-fit: contain on the <img> [4], and the container's width is capped by brandIconMaxWidth [5], so a very wide logo could get clipped.

3. Restart Superset (or wait ~60 seconds) after making changes. The bootstrap data that carries theme tokens to the frontend is cached for 60 seconds.

4. Verify the key name. A mistyped config key is silently ignored, and Superset falls back to defaults.

The spinner and the logo use completely separate code paths — Menu.tsx for the logo [6] and the Loading component / spa.html for the spinner [7] — so setting brandSpinnerUrl alone shouldn't affect the logo unless the theme override is incomplete.

If the distortion persists after setting all the tokens above, could you share the opening <svg ...> tag of your logo file and your full THEME_DEFAULT block? That would help determine whether it's an SVG dimension issue or something else.

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.

[murattkoc]

THEME_DEFAULT = {
"token": {
"brandLogoUrl": "/static/assets/images/turksat.png",
"brandLogoAlt": "Your Company",
"brandLogoHeight": "24px",
"brandLogoMargin": "18px 0",
"brandSpinnerUrl": "/static/assets/images/my-spinner.svg",
}
}

spinner is works but i recived full white page. Superset dont work. @dosu

[murattkoc]

"brandLogoMargin": "18px 0" caused a white screen. @dosu

[murattkoc]

`import os

--- Branding ---

APP_NAME = "Türksat Atlas"

FAVICONS = [
{
"href": "/static/assets/images/icon.png",
}
]

THEME_DEFAULT = {
"token": {
"brandLogoUrl": "/static/assets/images/turksat.png",
"brandLogoAlt": "Your Company",
"brandLogoHeight": "24px",
"brandSpinnerUrl": "/static/assets/images/my-spinner.svg",
}
}

BABEL_DEFAULT_LOCALE = 'tr'
LANGUAGES = {
'en': {'flag': 'us', 'name': 'English'},
'tr': {'flag': 'tr', 'name': 'Turkish'},
}

BABEL_TRANSLATION_DIRECTORIES = "/app/superset/translations"

FEATURE_FLAGS = {
"ALERT_REPORTS": True,
"ENABLE_TEMPLATE_PROCESSING": True,
"DASHBOARD_RBAC": True

}

SQLALCHEMY_DATABASE_URI = 'postgresql+psycopg2://superset:superset@postgres:5432/superset'
SECRET_KEY = "NoIkYT9QUXBmNSwslPiSkkH+gtqaLJuos3SVF1u3xP3mQwVCSSEp0rQq"

REDIS_HOST = "redis"
REDIS_PORT = "6379"

class CeleryConfig:
broker_url = f"redis://{REDIS_HOST}:{REDIS_PORT}/0"
imports = ("superset.tasks.celery_app",)
result_backend = f"redis://{REDIS_HOST}:{REDIS_PORT}/0"
worker_log_level = "info"
worker_prefetch_multiplier = 1
task_acks_late = True
task_annotations = {
"sql_json": {"rate_limit": "100/s"},
"email_reports.send": {"rate_limit": "1/s"},
}
beat_schedule = {
"reports.scheduler": {
"task": "reports.scheduler",
"schedule": 60.0,
},
"reports.prune_log": {
"task": "reports.prune_log",
"schedule": 3600.0,
},
}

CELERY_CONFIG = CeleryConfig
CELERY_TIMEZONE = "Europe/Istanbul"
TIMEZONE = "Europe/Istanbul"

EMAIL_REPORTS = True
ENABLE_SCHEDULED_EMAIL_REPORTS = True
EMAIL_NOTIFICATIONS = True

CELERY_ENABLE_UTC = False

SMTP_HOST = "posta.turksat.com.tr"
SMTP_PORT = 587
SMTP_USER = "superset@turksat.local"
SMTP_PASSWORD = "dCsa8El2trieGMHCttYk"
SMTP_MAIL_FROM = "superset@turksat.com.tr"
SMTP_STARTTLS = True
SMTP_SSL_SERVER_AUTH = False
SMTP_SSL = False

ALERT_REPORTS_NOTIFICATION_DRY_RUN = False

Raporların içindeki linklerin doğru çalışması için

WEBDRIVER_BASEURL = "http://superset:8088/"

WEBDRIVER_TYPE = "chrome"
WEBDRIVER_OPTION_ARGS = [
"--headless",
"--no-sandbox",
"--disable-dev-shm-usage",
"--disable-gpu",
"--window-size=1200,800"
]
THUMBNAIL_SELENIUM_USER = "admin"

from superset.translations.utils import get_language_pack

def bootstrap_overrides(bootstrap_data):
bootstrap_data["locale"] = "tr"
bootstrap_data["language_pack"] = get_language_pack("tr")
return bootstrap_data

COMMON_BOOTSTRAP_OVERRIDES_FUNC = bootstrap_overrides

from flask_appbuilder.models.sqla.filters import FilterContains
from flask_appbuilder.security.sqla.apis import PermissionViewMenuApi
from superset.security import SupersetSecurityManager

class SupersetPermissionViewMenuApi(PermissionViewMenuApi):
search_columns = ["id", "permission.name", "view_menu.name"]

def _init_properties(self) -> None:
    super()._init_properties()
    for col in ["permission.name", "view_menu.name"]:
        self._filters._search_filters[col] = [
            FilterContains(col, self.datamodel)
        ]

class CustomSecurityManager(SupersetSecurityManager):
permission_view_menu_api = SupersetPermissionViewMenuApi

CUSTOM_SECURITY_MANAGER = CustomSecurityManager

from flask import g
from flask_appbuilder.security.sqla.models import User

------------------------------------------------------------------

GEÇİCİ: OAuth2 credential'ları gelene kadar RLS için statik

değerler kullanılır. OAuth2 devreye girdiğinde tek yapılacak:

get_user_claim() fonksiyonunun gövdesini token/claim okuyacak

şekilde güncellemek. RLS tanımları (Jinja şablonları) hiç

değişmeyecek.

------------------------------------------------------------------

STATIC_CLAIMS = {
"personel_id": "8949",
# "birim_id": "12",
}

def get_user_claim(claim_name: str, default: str = "-1") -> str:
"""RLS'de: {{ get_user_claim('personel_id') }}, {{ get_user_claim('birim_id') }} ..."""
if not (g.user and g.user.is_authenticated):
return "-1"
return str(STATIC_CLAIMS.get(claim_name, default))

JINJA_CONTEXT_ADDONS = {
"get_user_claim": get_user_claim,
"get_personel_id": lambda: get_user_claim("personel_id"),
}`

my all superset_config.py file. @dosu

[dosubot[bot]]

Good catch — "brandLogoMargin": "18px 0" isn't specifically the issue by itself; the problem is the partial THEME_DEFAULT override as a whole.

Root cause: When you define THEME_DEFAULT in superset_config.py, Python's from superset_config import * completely replaces the built-in THEME_DEFAULT dict rather than merging your keys into it [1]. The built-in theme has ~22 required token fields (fontFamily, colorLink, brandLogoHref, etc.). Your override only provides 5 of them, so the rest become undefined. The frontend then crashes when calling .startsWith() on a missing field like fontFamily, producing the white screen [2].

Adding brandLogoMargin likely just happened to be the change that tipped the theme into hitting a code path where a missing field was accessed — but the underlying bug exists any time you provide a partial THEME_DEFAULT.

This exact problem has been reported by other users on Superset 6.1.0 [3]. A fix (PR #41347) deep-merges partial theme overrides against the built-in defaults so omitted fields fall back safely. There are also follow-up fixes for ensureAppRoot() crashing on missing brandLogoHref [4] and ensureStaticPrefix() crashing on missing brandLogoUrl [5].

What to do:

1. Check your browser console (F12 → Console) when the white screen occurs. You'll likely see TypeError: Cannot read properties of undefined (reading 'startsWith'), which confirms this bug.

2. Immediate workaround — your current config without brandLogoMargin works by luck (the specific fields you set happen to cover the code paths hit at render time). To stay safe, either:

   • Keep only the tokens that work and avoid adding new ones, or
   • Upgrade/rebuild your Superset image to include the deep-merge fix from PR fix(theming): deep-merge partial THEME_DEFAULT overrides with built-in defaults #41347. If you're pulling apache/superset:6.1.0, check the image digest/build date — if it was built before the fix was merged, you'll need a newer image.

3. Alternative workaround — if upgrading isn't an option, you can explicitly provide all the built-in theme tokens alongside your custom ones, so nothing ends up undefined. You can find the full set of default tokens in the THEME_DEFAULT definition in superset/config.py of a post-fix build.

The rest of your config (custom security manager, bootstrap overrides, Jinja context, etc.) looks fine and shouldn't cause a white screen on its own.

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.

[murattkoc]

Is there no solution to this now?

APP_ICON = "/static/assets/images/turksat.png"
APP_ICON_WIDTH = 40
LOGO_TARGET_PATH = "/"

THEME_DEFAULT = {
"token": {
"brandLogoHeight": "24px",
"brandSpinnerUrl": "/static/assets/images/my-spinner.svg",
}
}

The broken logo is here.

@dosu

[dosubot[bot]]

@murattkoc there is a solution, but the approach you're using won't work as-is. Here's what's happening and how to fix it.

APP_ICON and APP_ICON_WIDTH are deprecated — since v6.0, logo customization moved entirely to the THEME_DEFAULT token system. APP_ICON is only used to populate the built-in THEME_DEFAULT base; overriding it in superset_config.py has no effect on the frontend unless you also override THEME_DEFAULT [1]. APP_ICON_WIDTH is similarly deprecated in favor of THEME_DEFAULT["token"]["brandLogoHeight"] [1]. A maintainer confirmed this in issue #34824.

The real bug — partial THEME_DEFAULT replaces the entire theme. When you set:

THEME_DEFAULT = {
    "token": {
        "brandLogoHeight": "24px",
        "brandSpinnerUrl": "/static/assets/images/my-spinner.svg",
    }
}

...you replace the entire theme dict, not just those two fields. Superset loads your config via from superset_config import *, which overwrites the attribute entirely [2]. Everything else — brandLogoUrl, brandLogoMargin, brandIconMaxWidth, fontFamily, etc. — becomes undefined for the frontend. This is why your logo is broken. The same issue caused white/black screens for other users with partial overrides [3].

This was fixed by PR #41347 (merged June 24, 2026), which deep-merges partial overrides with the built-in _THEME_DEFAULT_BASE. But if your build predates that fix, you need to specify all required tokens explicitly.

Fix — provide the full set of brand tokens:

THEME_DEFAULT = {
    "token": {
        "brandLogoUrl": "/static/assets/images/turksat.png",
        "brandLogoAlt": "Türksat",
        "brandLogoHeight": "24px",
        "brandLogoMargin": "18px 0",
        "brandLogoHref": "/",
        "brandIconMaxWidth": 37,
        "brandSpinnerUrl": "/static/assets/images/my-spinner.svg",
    },
    "algorithm": "default",
}

You can safely remove APP_ICON, APP_ICON_WIDTH, and LOGO_TARGET_PATH from your config. LOGO_TARGET_PATH does still sync into brandLogoHref via sync_theme_logo_href [1], but since you're already setting brandLogoHref directly in the theme, it's redundant.

If you can pull a build that includes PR #41347, even a partial THEME_DEFAULT with just the tokens you care about will work — the rest will fall back to the built-in defaults [2]. No frontend rebuild is needed; the theme config is read at request time [4].

If the logo still looks distorted after setting all the tokens above, the issue may be the dimensions of turksat.png itself not playing well with a 24px height constraint — could you share its pixel dimensions?

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.

[murattkoc]

turksat.png image size is 1200 x 235. @dosu

[dosubot[bot]]

Thanks for confirming — 1200×235 is a ~5.1:1 aspect ratio (very wide, short), which is not inherently a problem. Here's what's happening in the code and what to try:

The navbar renders your logo inside a Typography.Link with className="navbar-brand". When theme.brandLogoUrl is set, the wrapper gets an inline style with height: theme.brandLogoHeight (and minHeight: '0px'), but no explicit width on the <img> [1]. The .navbar-brand CSS rule provides max-width: ${theme.sizeUnit * theme.brandIconMaxWidth}px and img { height: 100%; object-fit: contain; } [2], which should constrain and aspect-preserve your logo correctly.

With sizeUnit: 4 and brandIconMaxWidth: 37, the container caps at 148px wide. Your logo scaled to 24px tall at a 5.1:1 ratio would be ~122px wide — well within that cap. So it should render fine if those theme tokens are present.

The distortion you're seeing is most likely because one or more of those tokens (brandIconMaxWidth, sizeUnit, etc.) are missing due to a partial THEME_DEFAULT override replacing the entire dict instead of merging. This matches a bug that was fixed via deep-merging partial overrides with built-in defaults [3].

What to try:

1. Apply the full explicit THEME_DEFAULT I gave earlier (all brand tokens, not just two) — a dropped brandIconMaxWidth from the partial-override issue is the most likely cause.
2. If still distorted, check if there's excess whitespace/padding baked into the PNG itself. Even though the file is 1200×235, if the actual logo art only occupies a portion of that canvas, the visual result can look off when scaled down. Trimming the PNG to just the logo content can help.
3. Sanity check: open /static/assets/images/turksat.png directly in your browser to confirm the file itself isn't corrupted or mis-encoded.

Could you share a screenshot of how it renders with the fully explicit THEME_DEFAULT applied? That'll clarify whether this is the partial-override issue or something specific to how this PNG scales.

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.

[murattkoc]

Changes have begun to happen.

logo is blurry. @dosu

[dosubot[bot]]

Good to see progress! The blurriness is almost certainly a raster-scaling artifact rather than a Superset bug. Here's what's happening and how to fix it:

The navbar renders the logo with object-fit: contain inside a .navbar-brand container [1], and when brandLogoUrl is set the height is constrained by brandLogoHeight (default 24px) [2]. Even though your PNG may have large pixel dimensions, browsers apply bilinear/bicubic interpolation when scaling images down, which softens sharp edges — especially on text-heavy or fine-detail logos. If the PNG also has compression artifacts or excess transparent padding around the visible logo art, the result looks blurry at small sizes.

Best fix — use an SVG instead of a PNG. SVGs stay crisp at any size since they're vector-based. The brandLogoUrl token accepts SVGs the same way [3]:

THEME_DEFAULT = {
    "token": {
        "brandLogoUrl": "/static/assets/images/turksat-logo.svg",
        "brandLogoHeight": "24px",
    },
}

If SVG isn't available, try these:

• Crop tightly — remove any transparent padding around the logo art so the full pixel resolution goes toward the visible content.
• Export at 2× the target display size — e.g. ~250×50px for a 24px-tall navbar slot — so it looks crisp on retina/high-DPI screens without relying on the browser to downsample a much larger image.

Do you have an SVG version of the Türksat logo? That would be the cleanest path to a crisp result.

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.

[murattkoc]

THEME_DEFAULT = {
"token": {
"brandLogoUrl": "/static/assets/images/turksat148.png",
"brandLogoAlt": "Türksat",
"brandLogoHeight": "24px",
"brandLogoMargin": "18px 0",
"brandLogoHref": "/",
"brandIconMaxWidth": 37,
"brandSpinnerUrl": "/static/assets/images/tvheryerde.svg",
},
"algorithm": "default",
}

its work for my.

Too thanks. I'm so glad to have you @dosu

[dosubot[bot]]

Glad it's working now! Great troubleshooting — using brandLogoHeight together with brandIconMaxWidth and a properly scaled image (rather than relying on the raw 1200x235 PNG) is the right approach to keep the navbar logo from stretching or blurring.

Feel free to reach back out if you run into anything else while customizing the theme.

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.

[dosubot[bot]]

Awesome, glad to hear it's working for you, @murattkoc! 🎉 Happy to help anytime — feel free to reach back if anything else comes up.

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.

[sadpandajoe]

Looks like ti's working so going to close this out as resolved.