From 3ce462d4741c01cd2e4b162b2775478d67fd53a0 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Fri, 6 Nov 2026 10:29:36 +0000
Subject: [PATCH 1/6] fix(app): render the ClickStack name as text in the
 expanded sidebar

Show the logo symbol and the brand name as separate elements with an 8px
gap, instead of the outlined SVG wordmark. The name comes from
useBrandDisplayName so a downstream build can change it in one place.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .changeset/sidebar-wordmark-text.md           |  5 +++++
 packages/app/src/components/AppNav/AppNav.tsx | 14 ++++++++++----
 2 files changed, 15 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/sidebar-wordmark-text.md

diff --git a/.changeset/sidebar-wordmark-text.md b/.changeset/sidebar-wordmark-text.md
new file mode 100644
index 0000000000..4ce27f9bbb
--- /dev/null
+++ b/.changeset/sidebar-wordmark-text.md
@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+fix(app): render the ClickStack name as text in the expanded sidebar, 8px from the logo symbol.
diff --git a/packages/app/src/components/AppNav/AppNav.tsx b/packages/app/src/components/AppNav/AppNav.tsx
index ff77863ba2..75d1c83e20 100644
--- a/packages/app/src/components/AppNav/AppNav.tsx
+++ b/packages/app/src/components/AppNav/AppNav.tsx
@@ -20,7 +20,7 @@ import {
 } from '@tabler/icons-react';
 
 import api from '@/api';
-import { useLogomark, useWordmark } from '@/brand';
+import { useBrandDisplayName, useLogomark } from '@/brand';
 import { AlertStatusIcon } from '@/components/AlertStatusIcon';
 import { InstanceLabel } from '@/components/AppNav/InstanceLabel';
 import { useMobileNavOverlay } from '@/components/AppNav/useMobileNavOverlay';
@@ -105,8 +105,9 @@ const NAV_LINKS: NavLinkConfig[] = [
 ];
 
 export default function AppNav({ fixed = false }: { fixed?: boolean }) {
-  const wordmark = useWordmark();
+  const brandName = useBrandDisplayName();
   const logomark = useLogomark({ size: 22 });
+  const expandedLogomark = useLogomark({ size: 20 });
 
   useEffect(() => {
     let redirectUrl;
@@ -397,12 +398,17 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
                 <div className={styles.logoIconWrapper}>{logomark}</div>
               ) : (
                 <Group
-                  gap="xs"
+                  gap={8}
                   align="center"
                   wrap="nowrap"
                   style={{ minWidth: 0 }}
                 >
-                  {wordmark}
+                  <div className={styles.logoIconWrapper}>
+                    {expandedLogomark}
+                  </div>
+                  <Text fz={20} fw={600} lts="-0.02em" truncate="end">
+                    {brandName}
+                  </Text>
                   {/* Label and UTC badge are mutually exclusive - showing both
                       would be redundant and crowd this already-tight row. */}
                   <InstanceLabel

From de9934d67ee65f9e07c00669f5b59e4b92bf814f Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Fri, 6 Nov 2026 10:38:13 +0000
Subject: [PATCH 2/6] fix(app): use the new favicon set

Replace the favicon PNGs, ICO, and apple touch icon with the new set.
Drop the SVG favicon link: the new set has no SVG, and browsers that
prefer SVG would keep showing the old mark.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .changeset/update-favicon.md                  |   5 +++++
 packages/app/pages/_document.tsx              |   5 -----
 .../favicons/clickstack/apple-touch-icon.png  | Bin 3926 -> 7481 bytes
 .../favicons/clickstack/favicon-16x16.png     | Bin 341 -> 563 bytes
 .../favicons/clickstack/favicon-32x32.png     | Bin 589 -> 1141 bytes
 .../public/favicons/clickstack/favicon.ico    | Bin 1845 -> 15406 bytes
 .../public/favicons/clickstack/favicon.svg    |  13 -------------
 7 files changed, 5 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/update-favicon.md
 delete mode 100644 packages/app/public/favicons/clickstack/favicon.svg

diff --git a/.changeset/update-favicon.md b/.changeset/update-favicon.md
new file mode 100644
index 0000000000..5860ef2bb9
--- /dev/null
+++ b/.changeset/update-favicon.md
@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+fix(app): use the new favicon set in the browser tab, bookmarks, and touch icon.
diff --git a/packages/app/pages/_document.tsx b/packages/app/pages/_document.tsx
index 25d906b6c7..eab0805627 100644
--- a/packages/app/pages/_document.tsx
+++ b/packages/app/pages/_document.tsx
@@ -18,11 +18,6 @@ export default function Document() {
         {/* eslint-disable-next-line @next/next/no-sync-scripts */}
         <script src="/__ENV.js" />
         <link rel="icon" href="/favicons/clickstack/favicon.ico" sizes="any" />
-        <link
-          rel="icon"
-          type="image/svg+xml"
-          href="/favicons/clickstack/favicon.svg"
-        />
         <link
           rel="icon"
           type="image/png"
diff --git a/packages/app/public/favicons/clickstack/apple-touch-icon.png b/packages/app/public/favicons/clickstack/apple-touch-icon.png
index 5258791127f3ba5405ad3a166c0a944b54647960..ba7154fc89f43b5164f6f696a3aa8022f06790b7 100644
GIT binary patch
literal 7481
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

literal 3926
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
PW#G;&JyhvUtFZq7cjS3<

diff --git a/packages/app/public/favicons/clickstack/favicon-16x16.png b/packages/app/public/favicons/clickstack/favicon-16x16.png
index 07da0a227bb748aa66a0a81c918586352c48d7b5..8a47c081efd285b5cda9d127aa78ea26f96794dd 100644
GIT binary patch
delta 539
zcmV+$0_6SG0<#2=BYy$tNkl<Zcmb4BOGsN$6r7|%BNm~ptqm2@Qi?5f(N<`&AKP>j
z?WT%5H=+gv5d=R7f=ls-2=3JALd2yDKd7LBF2p=gaG?@6f=VQU3!gzWk;FSUFE_@#
zjd17Qb7tnu`&t3G1&#z_4+Ll24DgD<e1Vjelaqn2-XaOsDSu+T;f$97EaH^dtyT-F
zYd>ITzY@)@pCnk5qb4kOS3Uz2@#Cih>skedynm3FmnHddIEuZU3&~NVM+(NK0*1$2
zSXnE>m%`_U6hFE<cM%L;$%Yy|Bcm?ab5j8&rA}BZq>@;iKf%QK0lt2Frbv3+|D38<
z0g5q-qr*$Iw|{LTH`k8WZ?X+G{V)ySb2m0@Lf0cW*TeYxYZ-Ghf%Iv?m<G(xogfst
zL1v~E;p-?~I_xMZbqIU<G7b1&{t63AF4(hdc=9v@1A~QlWV`o*j4aatYWsd2`gsI>
z{h#F>kTZh{n4LaAES9urzB730-r~3GMUoU1J@krFE`JqJU$=_l?^DpUQz<x|*=TBc
zFYCmn`A(&W-UO!tNcc8_C@z{pP1OqC6+DK`c<w;pQgXZiJ@h8Pfa65NGa8MFpU01n
z1(WFM+LB;BG42O7dhXzu0Ukl5gos{z#t1sveG;Kigw%a-#&Zh*0RR6bXIv%#000I_
dL_t&o02EkgrD+)fN9zCp002ovPDHLkV1o2S@&*6^

delta 315
zcmV-B0mS~Z1l0nNBYyx1a7bBm0027<0027<0nE0cg8%>l2T4RhR5*=e`2PL7($Aki
z_y73u<JZrhKmQYhp=$Si|NdQ(0i>B&jacwL22yOs<`M>6l8+xh{-2+p`@f(d56s4;
zjsacZ%a<?zXU&@VUt3$_zr4K6e_dUz|N8nm|9g76{(t)P34gx<w{G3~Z*6S>)(FB1
z3bOy#uV43HU0nst2g!ld;51<W{(W%GAl%&C`2Wa}!zf}04(un+fPetM|6jj;{eSi9
z)&I4%)ubCxUtjnC`t@tzF!A;EBHaLad71wwPoDT+S64&47j7X1qK1a*|1DcKg98$#
znP4FPM2bcuBQ%5mIy#zg!-$H;pX4MYY9!@-6lEq*mIN`#$j*B~dI7MWS_^rpgk%5!
N002ovPDHLkV1gPJpfmsg

diff --git a/packages/app/public/favicons/clickstack/favicon-32x32.png b/packages/app/public/favicons/clickstack/favicon-32x32.png
index 3c269370a036f99ea17ce2612b7ca41c14fe79ef..b280c54d359ee64e7f64802c35758c25609204ec 100644
GIT binary patch
delta 1121
zcmV-n1fKiN1oa4zBYy-cNkl<ZcmcFkYitx%6#jPGT`d*btrQz}iKwx}8ZEJOkspd$
z(Acm6d_-)jgs4RS5K9q^_`}4YK_gT#4Pu&9Nt85%04)s!5}-|i^6G>4QhpFhq0enY
z0^Qwqmvini!|vSa?93)?=FC0!obP<+%icTp+7bJCX!wV0h<_~lh>d%2FYXBzz)mYQ
z{gli__NX83!M(VrhXrh)j?>93J$AbdpDdpxjD1VRF);Vszyf@+x%v02^YYMq{5{mv
zz9o!(j+tjrkv<l{e~B6~a@?LLP`kYZM_ZPn*gH*yvd^*F?F-;`XR2`%j*A5(#XX*p
zj_<xN!uiV|qkpVCA2yp@!m+aQ=W+f@nZR<5jFKZs1-$>^bLhOd3_twnMP_EY%<v%6
z({m3|`hFP0*mG3FwJhubM0c1_K;i7EICNw&{;zu*GiOfLEmnfJZ;xW>q9)wzzN>`r
zG}UnJ!NZHeTxvq&NCI-FWuW@6`8aX<1H3+;H>##WGk+Z$i=txH8QAEnaC;_cvJf21
z#hkgh8B$&nu)Dq#pRX)HTAI#6OXa}to37yW$syX5Il6m;OPGr}_cWC9G{GbRPG?#I
zz-ZERv>)5Hb_s~rJ5`KEFNY4dB*2IuKG)kjinXiT5Q)&vqeSuC9C}-SQW7ve9>wZa
zXE8V!6n`DFvYp7EHAVPVUnvRrW3wM8TL;x%bBc3dPl*ZQGE#}mI4#Zn*jjxx0ebPm
z2+Efo7xv{BrxJ3>CYE&f^#)N{@o?Q0@>_HWwVoINn<L#4rTKp#N_(yHYg+e#*t#pt
z<Hs2@CgG=zh4G=JzG=DRbl_yW9C)+jDPhyyiGPQR(`iT5pGBBFW#Z#nPmO5-=?)vV
zRL{Y-8m};q=G6P<+XB2?n61~tFlJgnJWDVbK}Y+r8d~^H9+t0oMx9%6QWDVF9zZZS
zF8c64@$)aUCp?A)$l#Td0ObsDIPBnc&&qNbv@lLd0!By2j4LR6iY^}-ux8y0bk&+)
zcYi%@Nr10(AGTC=A{>rz56QyeDB8{rp=4nmR($rXl-CP{iHkXzTbq{z3<vnIX+cq8
z9S-cjp~d4`*B!WAk747l=GL7#n5(j)1<b7_lmsY%%a;Q1z1x5#zDD@{BT86YI=lA1
zhOBJkb@%&+v1C!B;9xG5K;uj(K*2ROTz|(aFYUm(HODYA5)zkA&XZ0hEscy>TX~FX
z>d?6Fx|G)jk_zC0P$+`UzjdG>|3B3HeF=OWb3EQS#<>>>Q?;oBp-}8IjmPNuEFhql
z(2Mo=-NRQak6>Q$PBb^&QX%YfjB|a2Q4`6X01K#3j!Q(ew+&#y8@o~V(LrJCb6PAB
zWolN>0@f3>hs@H$x8u&bF0iq0sW=Aap6gjaH_hjg{Yz$gIS6a&(E)J}?!`U3?*jk;
n|Nqo+#E1X@00v1!K~w_(GrV7pubb5A00000NkvXXu0mjfsX8qQ

delta 565
zcmV-50?PgM2+ahLBYyx1a7bBm0027<0027<0nE0cg8%>l|4BqaR9J=0mrY9oK^Vv9
zgH*n(&?S&0*)-^l%I>A2VfY22ODR;^AykMiR+sz&={2vJpsk-mp#^CVQg|qxIXy9x
zD;3Tb>h3o1hu!7b`Turi=b3pB>NP@05MwN1jNb_%poeJR)PI8z5>S0vBZOS)WvZd9
zY92JfT$La7hQt&AjByp|Ip==>cta)*KNA}E#a62Yr>99KdTkg$x7&q${uX9uonWy{
zFgcwwkjvdbr_<3Fpjxef&$r$;{;Ac~B`B5d#}6ROGVJf~fz>)W&^R0p!otFQ|2`Vs
zg?ha{IzYSKhJTBTbC{lXaKBm<=Ri>u@Os5>&m9gMBofE)`uZ|FKqiys8dC{^6>2pJ
zWci63L;DySAe~NW0$g8TvA9AZ&yAsd=mHRl?9fEQ;$pD_V*$k8ysL5X_#uQsK@df^
z{s4kt1xb<y#-E%V=?{=foehjFmmk1po6;Y^;}O|#(|;wV#x<KwaJihu{)EY7qMw>6
zkm0MKSiEB~G*M|S)sX-)oJ2%ZvZ6e*y}@p`XabCsh}xV~ytcN&0NidD*LW<cm~b|u
z<>f{2`?t8}bTeu+8o&1YX8=`n$Tv4PjNgvQfCI_bWoOudg#3pi85y&X>Bn-6@uP_V
z6*>h06D|R^)%q}N0>Ec+sy13E(pt@c^1Raja)i(aB~(U{*C$=h00000NkvXXu0mjf
DSriC?

diff --git a/packages/app/public/favicons/clickstack/favicon.ico b/packages/app/public/favicons/clickstack/favicon.ico
index c2f759ca7145f586c8af888368d2cce98ae45cfd..ca9c0249eaae14227a79bd98499cd00da5aa0f75 100644
GIT binary patch
literal 15406
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

literal 1845
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
WpDFiWG_#Hs%xBK&+VcLnTz>*ITri{n

diff --git a/packages/app/public/favicons/clickstack/favicon.svg b/packages/app/public/favicons/clickstack/favicon.svg
deleted file mode 100644
index 8d47d5fdb2..0000000000
--- a/packages/app/public/favicons/clickstack/favicon.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="260" height="260" fill="none" viewBox="0 0 260 260">
-  <rect width="260" height="260" fill="#F9F9F9" rx="40" />
-  <g transform="translate(60.715 50) scale(3.5714)">
-    <path
-      fill="#1F1F1C"
-      d="M38.7979 11.2002V33.5996L19.3994 44.7998L0 33.5996V11.2002L19.3994 0L38.7979 11.2002Z"
-    />
-    <path
-      fill="#F9F9F9"
-      d="M24.2434 7.39081C24.5455 7.61204 24.6866 8.0663 24.5838 8.48686L21.8763 19.5618H26.8722C27.1721 19.5618 27.4433 19.7862 27.5622 20.1326C27.6812 20.4791 27.6251 20.8814 27.4196 21.1563L15.3924 37.2399C15.1527 37.5603 14.7692 37.6305 14.467 37.4093C14.1649 37.188 14.0237 36.7338 14.1266 36.3132L16.834 25.2383H11.8382C11.5383 25.2383 11.2671 25.0139 11.1481 24.6675C11.0291 24.321 11.0852 23.9187 11.2908 23.6438L23.318 7.56021C23.5576 7.23979 23.9411 7.16958 24.2434 7.39081Z"
-    />
-  </g>
-</svg>

From 8a12c04da76c0e9882f8f52cba1dd896ae93dfa7 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Fri, 6 Nov 2026 10:56:23 +0000
Subject: [PATCH 3/6] fix(app): match the sidebar name to the ClickStack lockup

Set the expanded sidebar name to Inter 18px, weight 500, and size the
symbol to the lockup's 23px height. The 8px gap is measured from the
hexagon itself.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/app/src/components/AppNav/AppNav.module.scss | 11 +++++++++++
 packages/app/src/components/AppNav/AppNav.tsx         |  6 +++---
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/components/AppNav/AppNav.module.scss b/packages/app/src/components/AppNav/AppNav.module.scss
index 405444075f..4f44f2f260 100644
--- a/packages/app/src/components/AppNav/AppNav.module.scss
+++ b/packages/app/src/components/AppNav/AppNav.module.scss
@@ -151,6 +151,17 @@ $transition-slow: 0.2s ease;
   justify-content: center;
 }
 
+// The mark's box is square, but the hexagon is taller than it is wide.
+// Hug the graphic so the group's 8px gap is measured from the symbol.
+.logoLockupMark {
+  display: flex;
+
+  svg {
+    width: calc(23px * 38.7979 / 44.7998);
+    height: 23px;
+  }
+}
+
 .collapseButton {
   /* Click UI token names are camelCase. */
   /* stylelint-disable custom-property-pattern */
diff --git a/packages/app/src/components/AppNav/AppNav.tsx b/packages/app/src/components/AppNav/AppNav.tsx
index 75d1c83e20..65e55e70e3 100644
--- a/packages/app/src/components/AppNav/AppNav.tsx
+++ b/packages/app/src/components/AppNav/AppNav.tsx
@@ -107,7 +107,7 @@ const NAV_LINKS: NavLinkConfig[] = [
 export default function AppNav({ fixed = false }: { fixed?: boolean }) {
   const brandName = useBrandDisplayName();
   const logomark = useLogomark({ size: 22 });
-  const expandedLogomark = useLogomark({ size: 20 });
+  const expandedLogomark = useLogomark({ size: 23 });
 
   useEffect(() => {
     let redirectUrl;
@@ -403,10 +403,10 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
                   wrap="nowrap"
                   style={{ minWidth: 0 }}
                 >
-                  <div className={styles.logoIconWrapper}>
+                  <div className={styles.logoLockupMark}>
                     {expandedLogomark}
                   </div>
-                  <Text fz={20} fw={600} lts="-0.02em" truncate="end">
+                  <Text fz={18} fw={500} truncate="end">
                     {brandName}
                   </Text>
                   {/* Label and UTC badge are mutually exclusive - showing both

From a9e02b852c8c69d8f5367ad78767004dbbadd171 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Fri, 6 Nov 2026 11:53:13 +0000
Subject: [PATCH 4/6] fix(app): keep the sidebar name inside the brand wordmark

AppNav was building its own mark-and-text lockup, so replacing the brand
module no longer changed the sidebar. The wordmark is that lockup now, and
the mark's box follows the hexagon instead of a square CSS override.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/app/src/brand/Logomark.tsx           |  6 ++-
 packages/app/src/brand/Wordmark.tsx           | 48 +++++++------------
 .../src/components/AppNav/AppNav.module.scss  | 11 -----
 packages/app/src/components/AppNav/AppNav.tsx | 14 ++----
 4 files changed, 26 insertions(+), 53 deletions(-)

diff --git a/packages/app/src/brand/Logomark.tsx b/packages/app/src/brand/Logomark.tsx
index a395275536..b905fc7cab 100644
--- a/packages/app/src/brand/Logomark.tsx
+++ b/packages/app/src/brand/Logomark.tsx
@@ -1,3 +1,7 @@
+// The hexagon is taller than it is wide. `size` is the height, and the
+// width follows the viewBox so the box hugs the symbol.
+const MARK_WIDTH_RATIO = 38.7979 / 44.7998;
+
 /**
  * ClickStack mark from the hexagon-and-bolt symbol.
  * The bolt uses the page background so it stays two-tone: white on the dark
@@ -6,7 +10,7 @@
 export default function Logomark({ size = 16 }: { size?: number }) {
   return (
     <svg
-      width={size}
+      width={size * MARK_WIDTH_RATIO}
       height={size}
       viewBox="0 0 38.7979 44.7998"
       fill="none"
diff --git a/packages/app/src/brand/Wordmark.tsx b/packages/app/src/brand/Wordmark.tsx
index 64f1042cae..fe46b06e6c 100644
--- a/packages/app/src/brand/Wordmark.tsx
+++ b/packages/app/src/brand/Wordmark.tsx
@@ -1,36 +1,22 @@
-import React from 'react';
+import { Group, Text } from '@mantine/core';
+
+import { useBrandDisplayName } from '@/brand';
+
+import Logomark from './Logomark';
+
+// Height of the symbol next to the name. The collapsed rail passes its own
+// size to Logomark and does not use this.
+const MARK_HEIGHT = 23;
 
 export default function Wordmark() {
+  const brandName = useBrandDisplayName();
+
   return (
-    <div className="align-items-center d-flex">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="121"
-        height="25"
-        fill="none"
-        viewBox="0 0 121 25"
-      >
-        <svg
-          x="1.875"
-          y="1.875"
-          width="17.536"
-          height="20.249"
-          viewBox="0 0 38.7979 44.7998"
-        >
-          <path
-            fill="currentColor"
-            d="M38.7979 11.2002V33.5996L19.3994 44.7998L0 33.5996V11.2002L19.3994 0L38.7979 11.2002Z"
-          />
-          <path
-            fill="var(--color-bg-body)"
-            d="M24.2434 7.39081C24.5455 7.61204 24.6866 8.0663 24.5838 8.48686L21.8763 19.5618H26.8722C27.1721 19.5618 27.4433 19.7862 27.5622 20.1326C27.6812 20.4791 27.6251 20.8814 27.4196 21.1563L15.3924 37.2399C15.1527 37.5603 14.7692 37.6305 14.467 37.4093C14.1649 37.188 14.0237 36.7338 14.1266 36.3132L16.834 25.2383H11.8382C11.5383 25.2383 11.2671 25.0139 11.1481 24.6675C11.0291 24.321 11.0852 23.9187 11.2908 23.6438L23.318 7.56021C23.5576 7.23979 23.9411 7.16958 24.2434 7.39081Z"
-          />
-        </svg>
-        <path
-          fill="currentColor"
-          d="M41.2 7.642q-.954 0-1.71.342-.756.324-1.296.972a4.7 4.7 0 0 0-.81 1.566q-.27.918-.27 2.07 0 1.512.45 2.628.45 1.098 1.35 1.692t2.268.594q.828 0 1.584-.144a16 16 0 0 0 1.566-.414v1.674q-.756.288-1.548.414-.792.144-1.836.144-1.962 0-3.276-.81-1.296-.81-1.944-2.304t-.648-3.492q0-1.458.396-2.664a6.1 6.1 0 0 1 1.188-2.106 5.1 5.1 0 0 1 1.908-1.35q1.152-.486 2.646-.486.972 0 1.908.216a7 7 0 0 1 1.692.576l-.72 1.62q-.63-.288-1.368-.504a5 5 0 0 0-1.53-.234M48.793 19h-1.908V5.32h1.908zm4.904-9.702V19h-1.908V9.298zm-.936-3.69q.432 0 .756.252t.324.846q0 .576-.324.846a1.2 1.2 0 0 1-.756.252 1.25 1.25 0 0 1-.792-.252q-.306-.27-.306-.846 0-.594.306-.846a1.25 1.25 0 0 1 .792-.252m7.838 13.572q-1.332 0-2.34-.522t-1.566-1.62q-.558-1.116-.558-2.826 0-1.8.594-2.916.612-1.116 1.638-1.638 1.044-.54 2.376-.54.81 0 1.512.18.72.162 1.188.378l-.576 1.548a9 9 0 0 0-1.08-.342 4.3 4.3 0 0 0-1.062-.144q-.9 0-1.494.396-.576.378-.864 1.152-.27.756-.27 1.908 0 1.098.288 1.854t.846 1.152q.576.378 1.422.378.81 0 1.422-.18t1.152-.468v1.656a4 4 0 0 1-1.134.45q-.612.144-1.494.144m6.808-7.02q0 .378-.036.864-.018.486-.054.9h.054l.342-.432.432-.54a10 10 0 0 1 .396-.468l2.97-3.186h2.214l-3.906 4.158L73.977 19h-2.25l-3.204-4.338-1.116.936V19h-1.89V5.32h1.89zm15.761 3.366q0 1.152-.558 1.962t-1.602 1.26q-1.044.432-2.484.432a10 10 0 0 1-1.35-.09 9 9 0 0 1-1.206-.216 5 5 0 0 1-.99-.36v-1.836q.72.324 1.692.594a7.9 7.9 0 0 0 1.98.252q.864 0 1.44-.234t.864-.648.288-.972q0-.594-.306-.99-.288-.414-.918-.756-.612-.36-1.656-.756-.72-.27-1.314-.594a5.2 5.2 0 0 1-1.026-.792q-.432-.45-.666-1.044t-.234-1.386q0-1.062.522-1.818.54-.756 1.476-1.152.936-.414 2.178-.414a8 8 0 0 1 1.926.216q.9.198 1.71.558l-.612 1.602q-.738-.306-1.494-.504a6.2 6.2 0 0 0-1.584-.198q-.72 0-1.206.216t-.738.594a1.64 1.64 0 0 0-.234.882q0 .594.27.99t.864.738q.594.324 1.566.72 1.08.414 1.836.9.774.486 1.17 1.17.396.666.396 1.674m5.793 2.106q.378 0 .774-.072t.684-.162v1.44q-.306.144-.828.234a5 5 0 0 1-1.044.108q-.792 0-1.458-.27-.648-.27-1.044-.936t-.396-1.854v-5.364h-1.35v-.864l1.422-.72.666-2.052h1.17v2.178h2.772v1.458h-2.772v5.328q0 .792.378 1.17.396.378 1.026.378m7.16-8.514q1.836 0 2.736.81.9.792.9 2.502V19h-1.35l-.378-1.35h-.072a5 5 0 0 1-.864.864 2.8 2.8 0 0 1-1.008.504q-.558.162-1.368.162a3.9 3.9 0 0 1-1.566-.306 2.5 2.5 0 0 1-1.08-.972q-.396-.666-.396-1.656 0-1.476 1.116-2.25 1.134-.774 3.438-.846l1.656-.054v-.54q0-1.08-.486-1.512t-1.368-.432q-.756 0-1.44.216a9 9 0 0 0-1.296.522l-.612-1.386a7.5 7.5 0 0 1 1.566-.594 7 7 0 0 1 1.872-.252m.45 5.256q-1.656.072-2.304.558-.63.468-.63 1.332 0 .756.45 1.098.468.342 1.17.342 1.134 0 1.872-.63t.738-1.89v-.846zm10.03 4.806q-1.332 0-2.34-.522t-1.566-1.62q-.558-1.116-.558-2.826 0-1.8.594-2.916.612-1.116 1.638-1.638 1.044-.54 2.376-.54.81 0 1.512.18.72.162 1.188.378l-.576 1.548a9 9 0 0 0-1.08-.342 4.3 4.3 0 0 0-1.062-.144q-.9 0-1.494.396-.576.378-.864 1.152-.27.756-.27 1.908 0 1.098.288 1.854t.846 1.152q.576.378 1.422.378.81 0 1.422-.18t1.152-.468v1.656a4 4 0 0 1-1.134.45q-.612.144-1.494.144m6.808-7.02q0 .378-.036.864-.018.486-.054.9h.054l.342-.432.432-.54a10 10 0 0 1 .396-.468l2.97-3.186h2.214l-3.906 4.158L119.979 19h-2.25l-3.204-4.338-1.116.936V19h-1.89V5.32h1.89z"
-        ></path>
-      </svg>
-    </div>
+    <Group gap={8} align="center" wrap="nowrap" miw={0}>
+      <Logomark size={MARK_HEIGHT} />
+      <Text fz={18} fw={500} truncate="end" miw={0}>
+        {brandName}
+      </Text>
+    </Group>
   );
 }
diff --git a/packages/app/src/components/AppNav/AppNav.module.scss b/packages/app/src/components/AppNav/AppNav.module.scss
index 4f44f2f260..405444075f 100644
--- a/packages/app/src/components/AppNav/AppNav.module.scss
+++ b/packages/app/src/components/AppNav/AppNav.module.scss
@@ -151,17 +151,6 @@ $transition-slow: 0.2s ease;
   justify-content: center;
 }
 
-// The mark's box is square, but the hexagon is taller than it is wide.
-// Hug the graphic so the group's 8px gap is measured from the symbol.
-.logoLockupMark {
-  display: flex;
-
-  svg {
-    width: calc(23px * 38.7979 / 44.7998);
-    height: 23px;
-  }
-}
-
 .collapseButton {
   /* Click UI token names are camelCase. */
   /* stylelint-disable custom-property-pattern */
diff --git a/packages/app/src/components/AppNav/AppNav.tsx b/packages/app/src/components/AppNav/AppNav.tsx
index 65e55e70e3..ff77863ba2 100644
--- a/packages/app/src/components/AppNav/AppNav.tsx
+++ b/packages/app/src/components/AppNav/AppNav.tsx
@@ -20,7 +20,7 @@ import {
 } from '@tabler/icons-react';
 
 import api from '@/api';
-import { useBrandDisplayName, useLogomark } from '@/brand';
+import { useLogomark, useWordmark } from '@/brand';
 import { AlertStatusIcon } from '@/components/AlertStatusIcon';
 import { InstanceLabel } from '@/components/AppNav/InstanceLabel';
 import { useMobileNavOverlay } from '@/components/AppNav/useMobileNavOverlay';
@@ -105,9 +105,8 @@ const NAV_LINKS: NavLinkConfig[] = [
 ];
 
 export default function AppNav({ fixed = false }: { fixed?: boolean }) {
-  const brandName = useBrandDisplayName();
+  const wordmark = useWordmark();
   const logomark = useLogomark({ size: 22 });
-  const expandedLogomark = useLogomark({ size: 23 });
 
   useEffect(() => {
     let redirectUrl;
@@ -398,17 +397,12 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
                 <div className={styles.logoIconWrapper}>{logomark}</div>
               ) : (
                 <Group
-                  gap={8}
+                  gap="xs"
                   align="center"
                   wrap="nowrap"
                   style={{ minWidth: 0 }}
                 >
-                  <div className={styles.logoLockupMark}>
-                    {expandedLogomark}
-                  </div>
-                  <Text fz={18} fw={500} truncate="end">
-                    {brandName}
-                  </Text>
+                  {wordmark}
                   {/* Label and UTC badge are mutually exclusive - showing both
                       would be redundant and crowd this already-tight row. */}
                   <InstanceLabel

From db6915ea4d02d027432d4c5a327a7ed17080a1e2 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Fri, 6 Nov 2026 12:00:26 +0000
Subject: [PATCH 5/6] fix(app): add the SVG favicon back

Browsers that prefer SVG had no icon after the raster set replaced the
old mark. Serve the new artwork as an SVG alongside the PNG and ICO.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .changeset/update-favicon.md                        | 2 +-
 packages/app/pages/_document.tsx                    | 5 +++++
 packages/app/public/favicons/clickstack/favicon.svg | 5 +++++
 3 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 packages/app/public/favicons/clickstack/favicon.svg

diff --git a/.changeset/update-favicon.md b/.changeset/update-favicon.md
index 5860ef2bb9..430940f57d 100644
--- a/.changeset/update-favicon.md
+++ b/.changeset/update-favicon.md
@@ -2,4 +2,4 @@
 '@hyperdx/app': patch
 ---
 
-fix(app): use the new favicon set in the browser tab, bookmarks, and touch icon.
+fix(app): use the new favicon set, including an SVG, in the browser tab, bookmarks, and touch icon.
diff --git a/packages/app/pages/_document.tsx b/packages/app/pages/_document.tsx
index eab0805627..25d906b6c7 100644
--- a/packages/app/pages/_document.tsx
+++ b/packages/app/pages/_document.tsx
@@ -18,6 +18,11 @@ export default function Document() {
         {/* eslint-disable-next-line @next/next/no-sync-scripts */}
         <script src="/__ENV.js" />
         <link rel="icon" href="/favicons/clickstack/favicon.ico" sizes="any" />
+        <link
+          rel="icon"
+          type="image/svg+xml"
+          href="/favicons/clickstack/favicon.svg"
+        />
         <link
           rel="icon"
           type="image/png"
diff --git a/packages/app/public/favicons/clickstack/favicon.svg b/packages/app/public/favicons/clickstack/favicon.svg
new file mode 100644
index 0000000000..a709623539
--- /dev/null
+++ b/packages/app/public/favicons/clickstack/favicon.svg
@@ -0,0 +1,5 @@
+<svg width="260" height="260" viewBox="0 0 260 260" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="260" height="260" rx="34" fill="black"/>
+<path d="M225.999 74.4258V185.277L130 240.702L34 185.277V74.4258L130 19L225.999 74.4258Z" fill="#FAFF69"/>
+<path d="M153.974 55.5749C155.469 56.6697 156.167 58.9177 155.658 60.9989L142.26 115.806H166.983C168.467 115.806 169.809 116.916 170.398 118.63C170.987 120.345 170.709 122.336 169.692 123.696L110.173 203.289C108.987 204.875 107.089 205.222 105.593 204.128C104.098 203.032 103.4 200.785 103.908 198.703L117.307 143.897H92.5839C91.0999 143.897 89.7576 142.787 89.1691 141.072C88.5802 139.358 88.8578 137.367 89.8749 136.006L149.394 56.4132C150.58 54.8275 152.478 54.4801 153.974 55.5749Z" fill="#1F1F1C"/>
+</svg>

From 6f260c608a0ebd38b61d9ed5ce94d3382aabf84c Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Fri, 6 Nov 2026 12:11:33 +0000
Subject: [PATCH 6/6] fix(app): keep the logomark square outside the wordmark

Pass the brand name into Wordmark so it does not import the brand barrel
that imports it. Hug the hexagon only in the wordmark. Other callers keep
the square box they sized against.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/app/src/brand/Logomark.tsx           | 24 +++++++++---
 packages/app/src/brand/Wordmark.tsx           | 15 +++-----
 .../app/src/brand/__tests__/Wordmark.test.tsx | 37 +++++++++++++++++++
 packages/app/src/brand/index.tsx              |  2 +-
 4 files changed, 62 insertions(+), 16 deletions(-)
 create mode 100644 packages/app/src/brand/__tests__/Wordmark.test.tsx

diff --git a/packages/app/src/brand/Logomark.tsx b/packages/app/src/brand/Logomark.tsx
index b905fc7cab..701296ef57 100644
--- a/packages/app/src/brand/Logomark.tsx
+++ b/packages/app/src/brand/Logomark.tsx
@@ -1,18 +1,30 @@
-// The hexagon is taller than it is wide. `size` is the height, and the
-// width follows the viewBox so the box hugs the symbol.
-const MARK_WIDTH_RATIO = 38.7979 / 44.7998;
+const VIEWBOX_WIDTH = 38.7979;
+const VIEWBOX_HEIGHT = 44.7998;
 
 /**
  * ClickStack mark from the hexagon-and-bolt symbol.
  * The bolt uses the page background so it stays two-tone: white on the dark
  * surface, dark on the light one.
+ *
+ * `size` is the box height. The default box is square, which is what the
+ * collapsed rail and the other callers size against. `fit="symbol"` hugs the
+ * hexagon, which is taller than it is wide, and is what the wordmark uses.
  */
-export default function Logomark({ size = 16 }: { size?: number }) {
+export default function Logomark({
+  size = 16,
+  fit = 'square',
+}: {
+  size?: number;
+  fit?: 'square' | 'symbol';
+}) {
+  const width =
+    fit === 'symbol' ? size * (VIEWBOX_WIDTH / VIEWBOX_HEIGHT) : size;
+
   return (
     <svg
-      width={size * MARK_WIDTH_RATIO}
+      width={width}
       height={size}
-      viewBox="0 0 38.7979 44.7998"
+      viewBox={`0 0 ${VIEWBOX_WIDTH} ${VIEWBOX_HEIGHT}`}
       fill="none"
       aria-hidden
     >
diff --git a/packages/app/src/brand/Wordmark.tsx b/packages/app/src/brand/Wordmark.tsx
index fe46b06e6c..8671da9b9d 100644
--- a/packages/app/src/brand/Wordmark.tsx
+++ b/packages/app/src/brand/Wordmark.tsx
@@ -1,21 +1,18 @@
 import { Group, Text } from '@mantine/core';
 
-import { useBrandDisplayName } from '@/brand';
-
 import Logomark from './Logomark';
 
-// Height of the symbol next to the name. The collapsed rail passes its own
-// size to Logomark and does not use this.
+// The brand lockup: a 23px symbol, an 8px gap, and the name in Inter 18px
+// medium. The name is passed in so this file does not import the brand barrel,
+// which imports this file.
 const MARK_HEIGHT = 23;
 
-export default function Wordmark() {
-  const brandName = useBrandDisplayName();
-
+export default function Wordmark({ name }: { name: string }) {
   return (
     <Group gap={8} align="center" wrap="nowrap" miw={0}>
-      <Logomark size={MARK_HEIGHT} />
+      <Logomark size={MARK_HEIGHT} fit="symbol" />
       <Text fz={18} fw={500} truncate="end" miw={0}>
-        {brandName}
+        {name}
       </Text>
     </Group>
   );
diff --git a/packages/app/src/brand/__tests__/Wordmark.test.tsx b/packages/app/src/brand/__tests__/Wordmark.test.tsx
new file mode 100644
index 0000000000..3cdf08fec5
--- /dev/null
+++ b/packages/app/src/brand/__tests__/Wordmark.test.tsx
@@ -0,0 +1,37 @@
+import { MantineProvider } from '@mantine/core';
+import { render, screen } from '@testing-library/react';
+
+import { useLogomark, useWordmark } from '@/brand';
+
+function Lockup() {
+  return useWordmark();
+}
+
+function SquareMark() {
+  return useLogomark({ size: 22 });
+}
+
+describe('Wordmark', () => {
+  it('renders the brand name beside a mark that hugs the hexagon', () => {
+    const { container } = render(
+      <MantineProvider>
+        <Lockup />
+      </MantineProvider>,
+    );
+
+    expect(screen.getByText('ClickStack')).toBeInTheDocument();
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveAttribute('height', '23');
+    expect(Number(svg?.getAttribute('width'))).toBeLessThan(23);
+  });
+});
+
+describe('Logomark', () => {
+  it('keeps a square box unless the wordmark asks it to hug the symbol', () => {
+    const { container } = render(<SquareMark />);
+
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveAttribute('width', '22');
+    expect(svg).toHaveAttribute('height', '22');
+  });
+});
diff --git a/packages/app/src/brand/index.tsx b/packages/app/src/brand/index.tsx
index 7a691496ba..004210be08 100644
--- a/packages/app/src/brand/index.tsx
+++ b/packages/app/src/brand/index.tsx
@@ -29,7 +29,7 @@ export function usePageTitle(page?: string): string {
 // during render. A downstream build replaces this module to change the
 // name and the marks without editing each call site.
 export function useWordmark() {
-  return useMemo(() => <Wordmark />, []);
+  return useMemo(() => <Wordmark name={BRAND_DISPLAY_NAME} />, []);
 }
 
 export function useLogomark(props?: { size?: number }) {