diff --git a/packages/grafana-ui/src/components/Table/HeaderRow.tsx b/packages/grafana-ui/src/components/Table/HeaderRow.tsx
index 1b513d5baf9..434852eec4c 100644
--- a/packages/grafana-ui/src/components/Table/HeaderRow.tsx
+++ b/packages/grafana-ui/src/components/Table/HeaderRow.tsx
@@ -61,7 +61,7 @@ function renderHeaderCell(column: any, tableStyles: TableStyles, field?: Field,
             title={column.render('Header')}
           >
             {showTypeIcons && (
-              <Icon name={getFieldTypeIcon(field)} title={field?.type} size="sm" style={{ marginRight: '8px' }} />
+              <Icon name={getFieldTypeIcon(field)} title={field?.type} size="sm" className={tableStyles.typeIcon} />
             )}
             <div>{column.render('Header')}</div>
             <div>
diff --git a/packages/grafana-ui/src/components/Table/styles.ts b/packages/grafana-ui/src/components/Table/styles.ts
index e11fa50dd83..9182ec63bd1 100644
--- a/packages/grafana-ui/src/components/Table/styles.ts
+++ b/packages/grafana-ui/src/components/Table/styles.ts
@@ -170,6 +170,10 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
       cursor: pointer;
       padding: 0 ${theme.spacing(0.025)};
     `,
+    typeIcon: css`
+      margin-right: ${theme.spacing(1)};
+      color: ${theme.colors.text.secondary};
+    `,
     noData: css`
       align-items: center;
       display: flex;