diff --git a/package-lock.json b/package-lock.json
index e4c8e3b7..b31e3ec6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4806,6 +4806,31 @@
         }
       }
     },
+    "@tanem/svg-injector": {
+      "version": "9.0.4",
+      "resolved": "https://registry.npmjs.org/@tanem/svg-injector/-/svg-injector-9.0.4.tgz",
+      "integrity": "sha512-Urcvygj12r/xXwFfidmfGGepwkENyeLyjmQbAU19mF+sHgOL7dxd2pBC7iXgiaJo+4yYMBPa/Mqx+p/gQI2U6Q==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "content-type": "^1.0.4",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.13.10",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.10.tgz",
+          "integrity": "sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "tslib": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
+          "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
+        }
+      }
+    },
     "@tippyjs/react": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/@tippyjs/react/-/react-4.1.0.tgz",
@@ -25283,6 +25308,16 @@
         }
       }
     },
+    "react-svg": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/react-svg/-/react-svg-12.1.0.tgz",
+      "integrity": "sha512-k93yg7ehkIb882o193VnMsWsTGFd2LkAESU7YnRJfu1DivFczjMBuQj3lcdBzsxNKDSk4PHT/6v5KASkX+H1SA==",
+      "requires": {
+        "@babel/runtime": "^7.12.18",
+        "@tanem/svg-injector": "^9.0.1",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-test-renderer": {
       "version": "16.14.0",
       "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.14.0.tgz",
diff --git a/package.json b/package.json
index 191f5326..7d993e46 100644
--- a/package.json
+++ b/package.json
@@ -102,6 +102,7 @@
     "react-input-mask": "^2.0.4",
     "react-modal": "~3.5.1",
     "react-scripts": "^4.0.3",
+    "react-svg": "^12.1.0",
     "rollup-plugin-postcss": "^2.9.0",
     "rollup-plugin-sass": "^1.2.2",
     "rxjs": "^6.6.2",
diff --git a/packages/alert/Readme.md b/packages/alert/Readme.md
index 3435f418..df9f574a 100644
--- a/packages/alert/Readme.md
+++ b/packages/alert/Readme.md
@@ -7,7 +7,7 @@ import Icon from '../icon/src/Icon';
   title="This is a success box!"
   onClose={() => console.log('closed')}
   closable={true}>
-  This is my child <Icon name="alarm-bell" />
+  This is my child <Icon name="test3" style={{stroke:'green'}} />
   </Alert>
 ```
 
diff --git a/packages/icon/src/Icon.js b/packages/icon/src/Icon.js
index d4262047..09634aab 100644
--- a/packages/icon/src/Icon.js
+++ b/packages/icon/src/Icon.js
@@ -1,4 +1,6 @@
 import React from 'react';
+import { render } from 'react-dom';
+import { ReactSVG } from 'react-svg';
 import classNames from 'classnames';
 
 type Props = {
@@ -17,17 +19,28 @@ type Props = {
 const Icon = ({ name, style, className, ariaLabel, onClick, qa }: Props) => {
 
   const iconClass = classNames(className, 'ai');
-  const xlinkHref = `http://cdn.antwerpen.be/core_branding_scss/5.0.0-beta.2/assets/images/ai.svg#${name}`;
-
+  // const iconUrl = `https://cdn.antwerpen.be/core_branding_scss/5.0.0-beta.2/assets/icons/${name}.svg`; // Works
+  const iconUrl = `https://cdn.antwerpen.be/core_branding_scss/5.0.0-beta.2/assets/images/ai.svg#${name}`; // Doesn't work
   return (
+
+    // Option 1
     <span className={iconClass} style={style} data-qa={qa} onClick={onClick}>
-      <svg aria-hidden="true"><use xlinkHref={xlinkHref} /></svg>
-      {ariaLabel && <span className="u-screen-reader-only">{ariaLabel}</span>}
+      <ReactSVG src={iconUrl} wrapper="span" className={iconClass} style={style} data-qa={qa} onClick={onClick} />
     </span>
   )
 
-  // const iconClass = classNames(className, `fa fa-${name} ${name}`);
+  // Option 2
+  // const iconClass = classNames(className, 'ai');
+  // const xlinkHref = `https://cdn.antwerpen.be/core_branding_scss/5.0.0-beta.2/assets/images/ai.svg#${name}`;
+  // return (
+  //   <span className={iconClass} style={style} data-qa={qa} onClick={onClick}>
+  //     <svg aria-hidden="true"><use href={xlinkHref} /></svg>
+  //     {ariaLabel && <span className="u-screen-reader-only">{ariaLabel}</span>}
+  //   </span>
+  // );
 
+  // Option 3
+  // const iconClass = classNames(className, `fa fa-${name} ${name}`);
   // return (
   //   <React.Fragment>
   //     <span className={iconClass} style={style} data-qa={qa} aria-hidden="true" onClick={onClick}></span>