diff --git a/packages/frontend-core/src/components/grid/lib/utils.js b/packages/frontend-core/src/components/grid/lib/utils.js
index 80bc3d9d67..12a46d3147 100644
--- a/packages/frontend-core/src/components/grid/lib/utils.js
+++ b/packages/frontend-core/src/components/grid/lib/utils.js
@@ -1,3 +1,5 @@
+import { FieldType, FieldTypeSubtypes } from "@budibase/types"
+
 export const getColor = (idx, opacity = 0.3) => {
   if (idx == null || idx === -1) {
     idx = 0
@@ -7,21 +9,21 @@ export const getColor = (idx, opacity = 0.3) => {
 
 const TypeIconMap = {
   text: "Text",
-  options: "Dropdown",
-  datetime: "Date",
-  barcodeqr: "Camera",
-  longform: "TextAlignLeft",
-  array: "Dropdown",
-  number: "123",
-  boolean: "Boolean",
-  attachment: "AppleFiles",
-  link: "DataCorrelated",
-  formula: "Calculator",
-  json: "Brackets",
-  bigint: "TagBold",
-  bb_reference: {
-    user: "User",
-    users: "UserGroup",
+  [FieldType.OPTIONS]: "Dropdown",
+  [FieldType.DATETIME]: "Date",
+  [FieldType.BARCODEQR]: "Camera",
+  [FieldType.LONGFORM]: "TextAlignLeft",
+  [FieldType.ARRAY]: "Dropdown",
+  [FieldType.NUMBER]: "123",
+  [FieldType.BOOLEAN]: "Boolean",
+  [FieldType.ATTACHMENT]: "AppleFiles",
+  [FieldType.LINK]: "DataCorrelated",
+  [FieldType.FORMULA]: "Calculator",
+  [FieldType.JSON]: "Brackets",
+  [FieldType.BIGINT]: "TagBold",
+  [FieldType.BB_REFERENCE]: {
+    [FieldTypeSubtypes.BB_REFERENCE.USER]: "User",
+    [FieldTypeSubtypes.BB_REFERENCE.USERS]: "UserGroup",
   },
 }