hyperdxio · kodiakhq · Dec 15, 2025 · Dec 12, 2025 · Dec 12, 2025 · Dec 12, 2025
diff --git a/.changeset/hungry-cups-applaud.md b/.changeset/hungry-cups-applaud.md
@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+Swap out bootstrap icons for tabler icons across app
diff --git a/agent_docs/tech_stack.md b/agent_docs/tech_stack.md
@@ -8,6 +8,7 @@
 - **Charts/Visualization**: Recharts, uPlot
 - **Code Editor**: CodeMirror (for SQL/JSON editing)
 - **Styling**: Mantine's built-in system, SCSS modules when needed
+- **Icons**: Use `@tabler/icons-react`
 
 **UI Component Priority**: Mantine components first → Custom components on Mantine primitives → Custom SCSS modules as last resort
 

diff --git a/packages/app/.storybook/preview-head.html b/packages/app/.storybook/preview-head.html
@@ -1,7 +1,3 @@
-<link
-  rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
-/>
 <link
   rel="preconnect"
   href="https://fonts.gstatic.com"

diff --git a/packages/app/eslint.config.mjs b/packages/app/eslint.config.mjs
@@ -68,6 +68,15 @@ export default [
           ],
         },
       ],
+      // Temporary rule to enforce use of @tabler/icons-react instead of bi bi-icons
+      // Will remove after we've updated all icons and let some PRs merge.
+      'no-restricted-syntax': [
+        'error',
+        {
+          selector: 'Literal[value=/\\bbi-\\b/i]',
+          message: 'Please update to use @tabler/icons-react instead',
+        },
+      ],
       'react-hooks/exhaustive-deps': 'error',
       'no-console': ['error', { allow: ['warn', 'error'] }],
     },

diff --git a/packages/app/pages/_document.tsx b/packages/app/pages/_document.tsx
@@ -17,10 +17,6 @@ export default function Document() {
         <script src="/__ENV.js" />
         {/* eslint-disable-next-line @next/next/no-sync-scripts */}
         <script src="https://cdn.jsdelivr.net/pyodide/v0.27.2/full/pyodide.js"></script>
-        <link
-          rel="stylesheet"
-          href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
-        />
       </Head>
       <body>
         <Main />

diff --git a/packages/app/src/AlertsPage.tsx b/packages/app/src/AlertsPage.tsx
@@ -20,7 +20,17 @@ import {
   Tooltip,
 } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
-import { IconBell } from '@tabler/icons-react';
+import {
+  IconAlertTriangle,
+  IconBell,
+  IconBrandSlack,
+  IconChartLine,
+  IconCheck,
+  IconChevronRight,
+  IconHelpCircle,
+  IconInfoCircleFilled,
+  IconTableRow,
+} from '@tabler/icons-react';
 import { useQueryClient } from '@tanstack/react-query';
 
 import { ErrorBoundary } from '@/components/ErrorBoundary';
@@ -312,7 +322,7 @@ function AlertDetails({ alert }: { alert: AlertsPageItem }) {
           {alert.dashboard?.name}
           {tileName ? (
             <>
-              <i className="bi bi-chevron-right fs-8 mx-1 " />
+              <IconChevronRight size={14} className="mx-1" />
               {tileName}
             </>
           ) : null}
@@ -338,11 +348,11 @@ function AlertDetails({ alert }: { alert: AlertsPageItem }) {
   const alertIcon = (() => {
     switch (alert.source) {
       case AlertSource.TILE:
-        return 'bi-graph-up';
+        return <IconChartLine size={14} />;
       case AlertSource.SAVED_SEARCH:
-        return 'bi-layout-text-sidebar-reverse';
+        return <IconTableRow size={14} />;
       default:
-        return 'bi-question';
+        return <IconHelpCircle size={14} />;
     }
   })();
 
@@ -359,9 +369,9 @@ function AlertDetails({ alert }: { alert: AlertsPageItem }) {
   const notificationMethod = React.useMemo(() => {
     if (alert.channel.type === 'webhook') {
       return (
-        <span>
-          Notify via <i className="bi bi-slack"></i> Webhook
-        </span>
+        <Group gap={2}>
+          Notify via <IconBrandSlack size={16} /> Webhook
+        </Group>
       );
     }
   }, [alert]);
@@ -400,8 +410,10 @@ function AlertDetails({ alert }: { alert: AlertsPageItem }) {
               className={styles.alertLink}
               title={linkTitle}
             >
-              <i className={`bi ${alertIcon} me-2 fs-8`} />
-              {alertName}
+              <Group gap={2}>
+                {alertIcon}
+                {alertName}
+              </Group>
             </Link>
           </div>
           <div className="fs-8 d-flex gap-2">
@@ -435,18 +447,18 @@ function AlertCardList({ alerts }: { alerts: AlertsPageItem[] }) {
     <div className="d-flex flex-column gap-4">
       {alarmAlerts.length > 0 && (
         <div>
-          <div className={styles.sectionHeader}>
-            <i className="bi bi-exclamation-triangle"></i> Triggered
-          </div>
+          <Group className={styles.sectionHeader}>
+            <IconAlertTriangle size={14} /> Triggered
+          </Group>
           {alarmAlerts.map((alert, index) => (
             <AlertDetails key={index} alert={alert} />
           ))}
         </div>
       )}
       <div>
-        <div className={styles.sectionHeader}>
-          <i className="bi bi-check-lg"></i> OK
-        </div>
+        <Group className={styles.sectionHeader}>
+          <IconCheck size={14} /> OK
+        </Group>
         {okData.length === 0 && (
           <div className="text-center my-4 fs-8">No alerts</div>
         )}
@@ -472,7 +484,7 @@ export default function AlertsPage() {
       <div className="my-4">
         <Container maw={1500}>
           <Alert
-            icon={<i className="bi bi-info-circle-fill " />}
+            icon={<IconInfoCircleFilled size={16} />}
             color="gray"
             py="xs"
             mt="md"

diff --git a/packages/app/src/AppNav.components.tsx b/packages/app/src/AppNav.components.tsx
@@ -14,8 +14,19 @@ import {
   UnstyledButton,
 } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
+import {
+  IconBook,
+  IconBrandDiscord,
+  IconBulb,
+  IconChevronDown,
+  IconChevronRight,
+  IconChevronUp,
+  IconHelp,
+  IconLogout,
+  IconSettings,
+  IconUserCog,
+} from '@tabler/icons-react';
 
-import { Icon } from '@/components/Icon';
 import InstallInstructionModal from '@/InstallInstructionsModal';
 import { useSources } from '@/source';
 
@@ -132,7 +143,7 @@ export const AppNavUserMenu = ({
                     </Text>
                   </div>
                 </Tooltip>
-                <Icon name="chevron-right" className="fs-8 " />
+                <IconChevronRight size={14} />
               </>
             )}
           </Group>
@@ -146,14 +157,14 @@ export const AppNavUserMenu = ({
             data-testid="team-settings-menu-item"
             href="/team"
             component={Link}
-            leftSection={<Icon name="gear" />}
+            leftSection={<IconSettings size={16} />}
           >
             Team Settings
           </Menu.Item>
         )}
         <Menu.Item
           data-testid="user-preferences-menu-item"
-          leftSection={<Icon name="person-gear" />}
+          leftSection={<IconUserCog size={16} />}
           onClick={onClickUserPreferences}
         >
           User Preferences
@@ -164,7 +175,7 @@ export const AppNavUserMenu = ({
             <Menu.Item
               data-testid="logout-menu-item"
               color="red"
-              leftSection={<Icon name="box-arrow-left" />}
+              leftSection={<IconLogout size={16} />}
               component={Link}
               href={logoutUrl}
             >
@@ -221,7 +232,7 @@ export const AppNavHelpMenu = ({
           <Menu.Target>
             <UnstyledButton data-testid="help-menu-trigger" w="100%">
               <Group align="center" justify="center" h={28}>
-                <Icon name="question-lg" />
+                <IconHelp size={16} />
               </Group>
             </UnstyledButton>
           </Menu.Target>
@@ -239,13 +250,13 @@ export const AppNavHelpMenu = ({
               data-testid="documentation-menu-item"
               href="https://clickhouse.com/docs/use-cases/observability/clickstack"
               component="a"
-              leftSection={<Icon name="book" />}
+              leftSection={<IconBook size={16} />}
             >
               Documentation
             </Menu.Item>
             <Menu.Item
               data-testid="discord-menu-item"
-              leftSection={<Icon name="discord" />}
+              leftSection={<IconBrandDiscord size={16} />}
               component="a"
               href="https://hyperdx.io/discord"
               target="_blank"
@@ -254,7 +265,7 @@ export const AppNavHelpMenu = ({
             </Menu.Item>
             <Menu.Item
               data-testid="setup-instructions-menu-item"
-              leftSection={<Icon name="lightbulb" />}
+              leftSection={<IconBulb size={16} />}
               onClick={onAddDataClick}
             >
               Setup Instructions
@@ -321,11 +332,11 @@ export const AppNavLink = ({
           size="sm"
           onClick={onToggle}
         >
-          <i
-            className={`fs-8 bi bi-chevron-${
-              isExpanded ? 'up' : 'down'
-            } text-muted-hover`}
-          />
+          {isExpanded ? (
+            <IconChevronUp size={14} className="text-muted-hover" />
+          ) : (
+            <IconChevronDown size={14} className="text-muted-hover" />
+          )}
         </ActionIcon>
       )}
     </Group>

diff --git a/packages/app/src/AppNav.tsx b/packages/app/src/AppNav.tsx
@@ -27,10 +27,15 @@ import {
 import { useDisclosure, useLocalStorage } from '@mantine/hooks';
 import {
   IconBell,
+  IconBellFilled,
   IconChartDots,
+  IconChevronDown,
+  IconChevronRight,
+  IconCommand,
   IconDeviceLaptop,
   IconLayoutGrid,
   IconLayoutSidebarLeftCollapse,
+  IconSearch,
   IconSettings,
   IconSitemap,
   IconTable,
@@ -135,7 +140,7 @@ function SearchInput({
     return (
       <div className={styles.kbd}>
         {window.navigator.platform?.toUpperCase().includes('MAC') ? (
-          <i className="bi bi-command" />
+          <IconCommand size={8} />
         ) : (
           <span style={{ letterSpacing: -2 }}>Ctrl</span>
         )}
@@ -161,7 +166,7 @@ function SearchInput({
       onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
         onChange(e.currentTarget.value)
       }
-      leftSection={<i className="bi bi-search fs-8 ps-1 " />}
+      leftSection={<IconSearch size={16} className="ps-1" />}
       onKeyDown={handleKeyDown}
       rightSection={
         value ? (
@@ -208,7 +213,11 @@ const AppNavGroupLabel = ({
 }) => {
   return (
     <div className={styles.listGroupName} onClick={onClick}>
-      <i className={`bi bi-chevron-${collapsed ? 'right' : 'down'}`} />
+      {collapsed ? (
+        <IconChevronRight size={14} />
+      ) : (
+        <IconChevronDown size={14} />
+      )}
       <div>{name}</div>
     </div>
   );
@@ -486,20 +495,25 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
         draggable
         data-savedsearchid={savedSearch.id}
       >
-        <div className="d-inline-block text-truncate">{savedSearch.name}</div>
-        {Array.isArray(savedSearch.alerts) && savedSearch.alerts.length > 0 ? (
-          savedSearch.alerts.some(a => a.state === AlertState.ALERT) ? (
-            <i
-              className="bi bi-bell float-end text-danger ms-1"
-              title="Has Alerts and is in ALERT state"
-            ></i>
-          ) : (
-            <i
-              className="bi bi-bell float-end ms-1"
-              title="Has Alerts and is in OK state"
-            ></i>
-          )
-        ) : null}
+        <Group gap={2}>
+          <div className="d-inline-block text-truncate">{savedSearch.name}</div>
+          {Array.isArray(savedSearch.alerts) &&
+          savedSearch.alerts.length > 0 ? (
+            savedSearch.alerts.some(a => a.state === AlertState.ALERT) ? (
+              <IconBellFilled
+                size={14}
+                className="float-end text-danger ms-1"
+                aria-label="Has Alerts and is in ALERT state"
+              />
+            ) : (
+              <IconBell
+                size={14}
+                className="float-end ms-1"
+                aria-label="Has Alerts and is in OK state"
+              />
+            )
+          ) : null}
+        </Group>
       </Link>
     ),
     [

diff --git a/packages/app/src/AuthPage.tsx b/packages/app/src/AuthPage.tsx
@@ -14,6 +14,7 @@ import {
   Stack,
   TextInput,
 } from '@mantine/core';
+import { IconAt, IconLock } from '@tabler/icons-react';
 
 import api from './api';
 import * as config from './config';
@@ -150,7 +151,7 @@ export default function AuthPage({ action }: { action: 'register' | 'login' }) {
                     withAsterisk={false}
                     placeholder="[email protected]"
                     type="email"
-                    leftSection={<i className="bi bi-at fs-5" />}
+                    leftSection={<IconAt size={18} />}
                     error={errors.email?.message}
                     required
                     {...form.email}
@@ -159,7 +160,7 @@ export default function AuthPage({ action }: { action: 'register' | 'login' }) {
                     size="md"
                     label="Password"
                     withAsterisk={false}
-                    leftSection={<i className="bi bi-lock-fill" />}
+                    leftSection={<IconLock size={16} />}
                     error={errors.password?.message}
                     required
                     placeholder="Password"
@@ -179,7 +180,7 @@ export default function AuthPage({ action }: { action: 'register' | 'login' }) {
                         size="md"
                         required
                         withAsterisk={false}
-                        leftSection={<i className="bi bi-lock-fill" />}
+                        leftSection={<IconLock size={16} />}
                         error={errors.confirmPassword?.message}
                         placeholder="Confirm Password"
                         {...form.confirmPassword}

diff --git a/packages/app/src/ClickhousePage.tsx b/packages/app/src/ClickhousePage.tsx
@@ -22,6 +22,7 @@ import {
   Text,
   Tooltip,
 } from '@mantine/core';
+import { IconRefresh } from '@tabler/icons-react';
 import ReactCodeMirror from '@uiw/react-codemirror';
 
 import { ConnectionSelectControlled } from '@/components/ConnectionSelect';
@@ -529,7 +530,7 @@ function ClickhousePage() {
               aria-label="Refresh dashboard"
               px="xs"
             >
-              <i className="bi bi-arrow-clockwise fs-5"></i>
+              <IconRefresh size={18} />
             </Button>
           </Tooltip>
         </Group>