diff --git a/src/scss/02-tools/_m-text-icon.scss b/src/scss/02-tools/_m-text-icon.scss
new file mode 100644
index 00000000..d1cc9f84
--- /dev/null
+++ b/src/scss/02-tools/_m-text-icon.scss
@@ -0,0 +1,33 @@
+/**
+ * Add icon before text with mask to have the same color of the text
+ *
+ * @author Cédric Andrietti
+ *
+ * @param $icon
+ *
+ * Examples :
+ *
+ *      .my-element {
+ *          @include text-icon('search');
+ *      }
+ *
+ */
+
+@mixin text-icon($icon: "arrow", $position: after, $color: currentColor, $size: 12px) {
+    position: relative;
+    display: inline-flex;
+    gap: 8px;
+    align-items: center;
+
+    &::#{$position} {
+        display: block;
+        width: $size;
+        height: $size;
+        content: "";
+        background-color: $color;
+        mask-image: get-svg-url($icon);
+        mask-position: center;
+        mask-repeat: no-repeat;
+        transition: background-color .5s $ease-out-expo;
+    }
+}
diff --git a/src/scss/02-tools/tools.scss b/src/scss/02-tools/tools.scss
index bf62dfe1..cf776fbd 100644
--- a/src/scss/02-tools/tools.scss
+++ b/src/scss/02-tools/tools.scss
@@ -37,3 +37,4 @@
 @import "./m-not-acf";
 @import "./m-rtl";
 @import "./m-text";
+@import "./m-text-icon";
diff --git a/src/scss/03-base/_links.scss b/src/scss/03-base/_links.scss
index caef6deb..2e952751 100644
--- a/src/scss/03-base/_links.scss
+++ b/src/scss/03-base/_links.scss
@@ -3,7 +3,15 @@ a {
     text-decoration: underline;
     cursor: pointer;
 
+    &[target="_blank"] {
+        @include text-icon("external");
+    }
+
     @include hover {
         text-decoration: none;
     }
 }
+
+.link-external {
+    @include text-icon("external");
+}