diff --git a/web/src/components/ui/charts/BusterChartLegend/LegendDot.tsx b/web/src/components/ui/charts/BusterChartLegend/LegendDot.tsx
index ce39513c4..cda3d1307 100644
--- a/web/src/components/ui/charts/BusterChartLegend/LegendDot.tsx
+++ b/web/src/components/ui/charts/BusterChartLegend/LegendDot.tsx
@@ -1,9 +1,10 @@
 import { createStyles } from 'antd-style';
 import React, { useMemo } from 'react';
 import { useMemoizedFn } from 'ahooks';
-import { AppMaterialIcons } from '@/components/ui';
 import { BusterChartLegendItem } from './interfaces';
 import { ChartType } from '../interfaces';
+import { Target } from '../../icons';
+import { cn } from '@/lib/classMerge';
 
 export const LegendItemDot: React.FC<{
   color: string | undefined;
@@ -55,11 +56,13 @@ export const LegendItemDot: React.FC<{
           onClick={onFocusItemPreflight}
           className="absolute hidden w-full items-center justify-center overflow-hidden group-hover:flex">
           <div className="focus-item flex h-full w-full items-center justify-center">
-            <AppMaterialIcons
-              size={size === 'sm' ? 8 : 12}
-              className={cx(styles.focusDot, size)}
-              icon="target"
-            />
+            <div
+              className={cn(
+                'flex items-center justify-center',
+                size === 'sm' ? 'text-xxs' : 'text-sm'
+              )}>
+              <Target />
+            </div>
           </div>
         </div>
       )}
diff --git a/web/src/styles/tailwind.css b/web/src/styles/tailwind.css
index b9e575d1e..2d47852e6 100644
--- a/web/src/styles/tailwind.css
+++ b/web/src/styles/tailwind.css
@@ -17,6 +17,10 @@
   --default-border-width: 0.5px;
 
   /* font size */
+  --text-3xs: 6px;
+  --text-3xs--line-height: 1;
+  --text-2xs: 8px;
+  --text-2xs--line-height: 1;
   --text-xxs: 10px;
   --text-xxs--line-height: 1;
   --text-xs: 11px;