Custom brand logo tiny?

[noahgaertner]

Describe the bug Setting any image as a brand logo makes it like a quarter of the size of the default authentik one

To Reproduce Steps to reproduce the behavior:

• download slack logo from here (or literally any image, but that's what I used for this test)
• upload it to /media/public/brand_logo.svg. ensure you have /media mounted in docker compose file.
• make a new brand (or edit the existing/default one) to use that path as the brand logo. make sure it's domain is set such that it's the active brand.
• refresh webpage
• look at top left of admin interface

Issue seems unrelated to specific image, I tried a dozen different images formatted as svg, png, and jpeg and they all had the same issue.

Expected behavior Brand image the same size as the default authentik one

Screenshots expected behavior (top left of admin interface) actual behavior (also from top left of admin panel)

The same thing happens on the login page, though it doesn't appear to be scaled as differently

and also on the user interface page

Logs Output of docker-compose logs or kubectl logs respectively

{"event":"/media/public/brand_logo.svg","host":"auth.mydomain.com","level":"info","logger":"authentik.router","method":"GET","remote":"my_ip_addr","runtime":"0.377","scheme":"https","size":0,"status":304,"timestamp":"2025-05-24T01:47:13Z","user_agent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.5 Safari/605.1.15"}

Version and Deployment (please complete the following information):

• authentik version: 2025.4.1
• Deployment: docker-compose

[dominic-r]

Thanks for reporting this, I can replicate.

[GirlBossRush]

Hi @noahgaertner,

The issue you’re encountering with the custom brand logo appearing smaller than expected is likely due to the SVG file’s dimensions and whitespace.

The Slack logo SVG you mentioned includes significant whitespace and has fixed width and height attributes. This setup causes the rendering engine to scale the visible logo content down to fit within the defined dimensions, making it appear smaller than intended.

To ensure your SVG logo displays correctly, try the following steps:

1. Trim Whitespace: Use an SVG editor (like Inkscape, Sketch, or Adobe Illustrator) to remove unnecessary whitespace around the logo.
2. Adjust ViewBox: Ensure the SVG’s viewBox attribute tightly wraps the actual logo content. This helps in scaling the logo appropriately.
3. Remove Fixed Dimensions: Delete any fixed width and height attributes from the SVG. This allows the logo to scale responsively within its container.
4. Check if your SVG needs preserveAspectRatio to retain its shape when resized.

Design Recommendations:

• Wordmark Logos: Aim for an aspect ratio of approximately 7:1 (width to height).
• Icon Logos: Use a 1:1 aspect ratio, ensuring the icon fills the entire viewBox and is centered.
• When using an SVG, using SVGOMG can trim any excess metadata which may affect how the browser rasterizes the image.

By following these guidelines, your custom logo should display at an appropriate size, matching the default Authentik logo’s appearance.

Let us know if you need further assistance!

[authentik-automation[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.