diff --git a/app/javascript/admin/controllers/svg_icon_upload_controller.js b/app/javascript/admin/controllers/svg_icon_upload_controller.js
new file mode 100644
index 000000000..d52fea697
--- /dev/null
+++ b/app/javascript/admin/controllers/svg_icon_upload_controller.js
@@ -0,0 +1,60 @@
+import { Controller } from 'stimulus';
+
+// eslint-disable-next-line no-restricted-syntax
+export default class SvgIconUploadController extends Controller {
+  static targets = [
+    'svgIconContent',
+    'svgIconPreview',
+    'svgIconMessageValidate',
+    'navId',
+  ];
+
+  selectSvgIcon(event) {
+    this.clearInvalidIconTypeMessage();
+
+    const icon = event.target.files[0];
+    if (icon.type !== 'image/svg+xml') {
+      this.invalidIconTypeMessage(icon.type);
+      const navigationLinkId = this.navIdTarget.attributes['nav-link-id'].value;
+
+      const ableToClearSvgIconContent =
+        !navigationLinkId && this.svgIconContentTarget.value;
+      if (ableToClearSvgIconContent) {
+        this.svgIconContentTarget.value = null;
+        this.setSvgIconPreview(null);
+      }
+      return;
+    }
+
+    const reader = new FileReader();
+    reader.readAsText(icon);
+
+    reader.onload = (content) => {
+      const result = content.target.result;
+      this.svgIconContentTarget.value = result;
+      this.setSvgIconPreview(result);
+    };
+  }
+
+  setSvgIconPreview(content) {
+    this.svgIconPreviewTarget.innerHTML = content;
+    if (content) this.svgIconPreviewTarget.classList.add('pb-3');
+    else if (this.svgIconPreviewTarget.classList.length !== 0)
+      this.svgIconPreviewTarget.classList.remove('pb-3');
+  }
+
+  clearInvalidIconTypeMessage() {
+    if (this.svgIconMessageValidateTarget.classList.length !== 0) {
+      this.svgIconMessageValidateTarget.classList.remove(
+        'alert',
+        'alert-danger',
+      );
+      this.svgIconMessageValidateTarget.innerHTML = null;
+    }
+  }
+
+  invalidIconTypeMessage(type) {
+    this.svgIconMessageValidateTarget.classList.add('alert', 'alert-danger');
+    this.svgIconMessageValidateTarget.innerHTML = `'${type}' is an invalid Icon type`;
+  }
+}
diff --git a/app/views/admin/navigation_links/_form.html.erb b/app/views/admin/navigation_links/_form.html.erb
index ec067886b..4417400f4 100644
--- a/app/views/admin/navigation_links/_form.html.erb
+++ b/app/views/admin/navigation_links/_form.html.erb
@@ -8,10 +8,21 @@
   <%= form.text_field :url, class: "form-control" %>
   <div class="alert alert-info">A full (external) or relative (internal) URL for the link</div>
 </div>
-<div class="form-group">
-  <%= form.label :icon %>
-  <%= form.text_area :icon, class: "form-control" %>
-  <div class="alert alert-info">An SVG icon should be pasted in the textarea</div>
+<div class="form-group" data-controller="svg-icon-upload">
+  <div data-svg-icon-upload-target="navId" nav-link-id="<%= form.object[:id] %>">
+    <%= form.label :icon %>
+    <div data-svg-icon-upload-target="svgIconPreview" class="<%= form.object[:id].nil? ? "" : "pb-3" %>" style="width: 48px;">
+      <%= form.object[:icon]&.html_safe %>
+    </div>
+    <%= form.hidden_field :icon, "data-svg-icon-upload-target": "svgIconContent" %>
+
+    <input
+      type="file" accept="image/svg+xml" class="form-control-file"
+      data-action="svg-icon-upload#selectSvgIcon" />
+
+    <div class="alert alert-info">An SVG icon should be uploaded</div>
+    <div data-svg-icon-upload-target="svgIconMessageValidate"></div>
+  </div>
 </div>
 <div class="form-group">
   <%= form.label :position %>