diff --git a/lib/ui/src/components/sidebar/Brand.tsx b/lib/ui/src/components/sidebar/Brand.tsx
index ff45f35a5eb7..3d08654da09b 100644
--- a/lib/ui/src/components/sidebar/Brand.tsx
+++ b/lib/ui/src/components/sidebar/Brand.tsx
@@ -31,41 +31,28 @@ export const LogoLink = styled.a(({ theme }) => ({
},
}));
-export const Brand = withTheme(
- ({
- theme: {
- brand: { title = 'Storybook', url = './', image },
- },
- }) => {
- const targetValue = url === './' ? '' : '_blank';
- if (image === undefined && url === null) {
- return ;
- }
- if (image === undefined && url) {
- return (
-
-
-
- );
- }
- if (image === null && url === null) {
- return title;
- }
- if (image === null && url) {
- return (
-
- );
- }
- if (image && url === null) {
- return ;
- }
- if (image && url) {
- return (
-
-
-
- );
- }
- return null;
+export const Brand = withTheme(({ theme }) => {
+ const { title = 'Storybook', url = './', image } = theme.brand;
+ const targetValue = url === './' ? '' : '_blank';
+
+ // When image is explicitly set to null, enable custom HTML support
+ if (image === null) {
+ if (title === null) return null;
+ // eslint-disable-next-line react/no-danger
+ if (!url) return
;
+ return ;
+ }
+
+ const logo = image ? : ;
+
+ if (url) {
+ return (
+
+ {logo}
+
+ );
}
-);
+
+ // The wrapper div serves to prevent image misalignment
+ return {logo}
;
+});