diff --git a/.loki/reference/chrome.laptop/Data_Display/Chip_Examples.png b/.loki/reference/chrome.laptop/Data_Display/Chip_Examples.png
index dd02e4bdd..a3751e759 100644
Binary files a/.loki/reference/chrome.laptop/Data_Display/Chip_Examples.png and b/.loki/reference/chrome.laptop/Data_Display/Chip_Examples.png differ
diff --git a/packages/ui/src/chip/Chip.stories.tsx b/packages/ui/src/chip/Chip.stories.tsx
index 58cdbdb25..ab5f6c044 100644
--- a/packages/ui/src/chip/Chip.stories.tsx
+++ b/packages/ui/src/chip/Chip.stories.tsx
@@ -1,6 +1,6 @@
 import { Chip } from '@material-ui/core';
 import { PropsLink } from '@superdispatch/ui-docs';
-import { Inline } from '..';
+import { Inline, Stack } from '..';
 
 export default {
   title: 'Data Display/Chip',
@@ -11,16 +11,23 @@ export default {
   },
 };
 
+const colors = ['default', 'primary', 'secondary'] as const;
+
 export const examples = () => (
-  <Inline>
-    <Chip label="Basic" />
-    <Chip label="Disabled" disabled={true} />
-    <Chip label="Clickable" clickable={true} />
-    <Chip
-      label="Deletable"
-      onDelete={() => {
-        alert('Delete!');
-      }}
-    />
-  </Inline>
+  <Stack>
+    {colors.map((color) => (
+      <Inline key={color}>
+        <Chip label="Basic" color={color} />
+        <Chip label="Disabled" disabled={true} color={color} />
+        <Chip label="Clickable" clickable={true} color={color} />
+        <Chip
+          color={color}
+          label="Deletable"
+          onDelete={() => {
+            alert('Delete!');
+          }}
+        />
+      </Inline>
+    ))}
+  </Stack>
 );
diff --git a/packages/ui/src/chip/ChipOverrides.tsx b/packages/ui/src/chip/ChipOverrides.tsx
index d8c2682ab..7ad8384f1 100644
--- a/packages/ui/src/chip/ChipOverrides.tsx
+++ b/packages/ui/src/chip/ChipOverrides.tsx
@@ -1,5 +1,5 @@
 import { SvgIcon } from '@material-ui/core';
-import { ColorDynamic } from '../theme/Color';
+import { Color, ColorDynamic } from '../theme/Color';
 import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
 
 export function overrideChip(theme: SuperDispatchTheme): void {
@@ -65,6 +65,18 @@ export function overrideChip(theme: SuperDispatchTheme): void {
       },
     },
 
+    colorPrimary: {
+      '& $deleteIcon svg': {
+        color: Color.White,
+      },
+    },
+
+    colorSecondary: {
+      '& $deleteIcon svg': {
+        color: Color.White,
+      },
+    },
+
     deleteIcon: {
       width: undefined,
       height: undefined,
diff --git a/packages/ui/src/chip/__tests__/Chip.spec.tsx b/packages/ui/src/chip/__tests__/Chip.spec.tsx
index 14a2fee5c..a31b7f9a1 100644
--- a/packages/ui/src/chip/__tests__/Chip.spec.tsx
+++ b/packages/ui/src/chip/__tests__/Chip.spec.tsx
@@ -89,11 +89,19 @@ it('checks component css', () => {
       background-color: Color.Blue300;
     }
 
+    .MuiChip-colorPrimary .MuiChip-deleteIcon svg {
+      color: Color.White;
+    }
+
     .MuiChip-colorSecondary {
       color: Color.White;
       background-color: #f50057;
     }
 
+    .MuiChip-colorSecondary .MuiChip-deleteIcon svg {
+      color: Color.White;
+    }
+
     .MuiChip-clickable {
       cursor: pointer;
       user-select: none;