diff --git a/src/SchemaFields/index.js b/src/SchemaFields/index.js
index 8ec4ea741..2b362b614 100644
--- a/src/SchemaFields/index.js
+++ b/src/SchemaFields/index.js
@@ -100,7 +100,11 @@ const ExternalLink = (props) => {
   const { idSchema: { id }, schema: { title: label }, formData:value } = props;
 
   return <div>
-    <label htmlFor={id}>{label} <ExternalLinkIcon /></label>
+    <label className={styles.linkLabel} htmlFor={id}>{label} 
+      <a target='_blank' rel='noopener noreferrer' href={value}>
+        <ExternalLinkIcon />
+      </a>
+    </label>
     <a target='_blank' rel='noopener noreferrer' href={value}>{value}</a>
   </div>;
 };
diff --git a/src/SchemaFields/styles.module.scss b/src/SchemaFields/styles.module.scss
index a7fd07f6f..f91cb95e2 100644
--- a/src/SchemaFields/styles.module.scss
+++ b/src/SchemaFields/styles.module.scss
@@ -9,4 +9,13 @@
   [class*=react-datetime-picker__wrapper] {
     width: 100%;
   }
+}
+
+.linkLabel {
+  align-items: flex-end;
+  display: flex;
+  margin-bottom: 0.25rem;
+  a {
+    margin-left: 0.25rem;
+  }
 }
\ No newline at end of file