diff --git a/packages/component-library/src/icons/.svgrrc.js b/packages/component-library/src/icons/.svgrrc.js
index 3d9e0f9719..8c6d91bfdb 100644
--- a/packages/component-library/src/icons/.svgrrc.js
+++ b/packages/component-library/src/icons/.svgrrc.js
@@ -18,7 +18,7 @@ module.exports = {
     babelConfig: {
       plugins: [
         [
-          './add-attribute',
+          './add-attribute.ts',
           {
             elements: ['path', 'Path', 'rect', 'Rect'],
             attributes: [
diff --git a/packages/component-library/src/icons/add-attribute.js b/packages/component-library/src/icons/add-attribute.ts
similarity index 59%
rename from packages/component-library/src/icons/add-attribute.js
rename to packages/component-library/src/icons/add-attribute.ts
index ace9124659..cc453a9da0 100644
--- a/packages/component-library/src/icons/add-attribute.js
+++ b/packages/component-library/src/icons/add-attribute.ts
@@ -1,10 +1,26 @@
+import type BabelTemplate from '@babel/template';
+import type { NodePath } from '@babel/traverse';
+import type * as BabelTypes from '@babel/types';
+import type { Attribute, Options } from '@svgr/babel-plugin-add-jsx-attribute';
+
+type PluginAPI = {
+  types: typeof BabelTypes;
+  template: typeof BabelTemplate;
+};
+
 const positionMethod = {
   start: 'unshiftContainer',
   end: 'pushContainer',
-};
+} as const;
 
-const addJSXAttribute = ({ types: t, template }, opts) => {
-  function getAttributeValue({ literal, value }) {
+const addJSXAttribute = ({ types: t, template }: PluginAPI, opts: Options) => {
+  function getAttributeValue({
+    literal,
+    value,
+  }: Pick<Attribute, 'literal' | 'value'>):
+    | BabelTypes.JSXExpressionContainer
+    | BabelTypes.StringLiteral
+    | null {
     if (typeof value === 'boolean') {
       return t.jsxExpressionContainer(t.booleanLiteral(value));
     }
@@ -14,7 +30,7 @@ const addJSXAttribute = ({ types: t, template }, opts) => {
     }
 
     if (typeof value === 'string' && literal) {
-      return t.jsxExpressionContainer(template.ast(value).expression);
+      return t.jsxExpressionContainer(template.expression.ast(value));
     }
 
     if (typeof value === 'string') {
@@ -24,7 +40,7 @@ const addJSXAttribute = ({ types: t, template }, opts) => {
     return null;
   }
 
-  function getAttribute({ spread, name, value, literal }) {
+  function getAttribute({ spread, name, value, literal }: Attribute) {
     if (spread) {
       return t.jsxSpreadAttribute(t.identifier(name));
     }
@@ -37,7 +53,8 @@ const addJSXAttribute = ({ types: t, template }, opts) => {
 
   return {
     visitor: {
-      JSXOpeningElement(path) {
+      JSXOpeningElement(path: NodePath<BabelTypes.JSXOpeningElement>) {
+        if (!t.isJSXIdentifier(path.node.name)) return;
         if (!opts.elements.includes(path.node.name.name)) return;
 
         opts.attributes.forEach(
@@ -52,7 +69,11 @@ const addJSXAttribute = ({ types: t, template }, opts) => {
             const newAttribute = getAttribute({ spread, name, value, literal });
             const attributes = path.get('attributes');
 
-            const isEqualAttribute = attribute => {
+            const isEqualAttribute = (
+              attribute: NodePath<
+                BabelTypes.JSXAttribute | BabelTypes.JSXSpreadAttribute
+              >,
+            ) => {
               if (spread) {
                 return attribute.get('argument').isIdentifier({ name });
               }
@@ -67,7 +88,11 @@ const addJSXAttribute = ({ types: t, template }, opts) => {
 
               // Only add the color if it doesn't explicitly say no
               // color
-              if (attribute.get('value').node.value !== 'none') {
+              const attrValue = attribute.get('value');
+              if (
+                !attrValue.isStringLiteral() ||
+                attrValue.node.value !== 'none'
+              ) {
                 attribute.replaceWith(newAttribute);
               }
 
@@ -84,4 +109,4 @@ const addJSXAttribute = ({ types: t, template }, opts) => {
   };
 };
 
-module.exports = addJSXAttribute;
+export default addJSXAttribute;
diff --git a/upcoming-release-notes/7417.md b/upcoming-release-notes/7417.md
new file mode 100644
index 0000000000..cae887ec2a
--- /dev/null
+++ b/upcoming-release-notes/7417.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [JSkinnerUK]
+---
+
+Migrate svg add-attribute plugin to typescript