diff --git a/resources/skins.citizen.styles/common/typography.less b/resources/skins.citizen.styles/common/typography.less
index 33a0616d..2a79fd00 100644
--- a/resources/skins.citizen.styles/common/typography.less
+++ b/resources/skins.citizen.styles/common/typography.less
@@ -140,10 +140,20 @@ figcaption,
// External links
.mw-parser-output {
a.external {
- padding-right: 13px;
- background-image: url( images/external-link-ltr-icon.svg );
- background-position: center right;
- background-repeat: no-repeat;
+ &:after {
+ display: inline-block;
+ width: 0.75em;
+ height: 0.75em;
+ margin-left: 0.25em;
+ background-color: currentcolor;
+ content: '';
+ /* @embed */
+ -webkit-mask: url( images/linkExternal-ltr.svg ) no-repeat 50% 50%;
+ /* @embed */
+ mask: url( images/linkExternal-ltr.svg ) no-repeat 50% 50%;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ }
}
}
diff --git a/resources/skins.citizen.styles/images/external-link-ltr-icon.svg b/resources/skins.citizen.styles/images/external-link-ltr-icon.svg
deleted file mode 100644
index de5c4613..00000000
--- a/resources/skins.citizen.styles/images/external-link-ltr-icon.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
diff --git a/resources/skins.citizen.styles/images/external-link-rtl-icon.svg b/resources/skins.citizen.styles/images/external-link-rtl-icon.svg
deleted file mode 100644
index 09e38806..00000000
--- a/resources/skins.citizen.styles/images/external-link-rtl-icon.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
diff --git a/resources/skins.citizen.styles/images/linkExternal-ltr.svg b/resources/skins.citizen.styles/images/linkExternal-ltr.svg
new file mode 100644
index 00000000..eadfe652
--- /dev/null
+++ b/resources/skins.citizen.styles/images/linkExternal-ltr.svg
@@ -0,0 +1,8 @@
+
+
diff --git a/resources/skins.citizen.styles/images/linkExternal-rtl.svg b/resources/skins.citizen.styles/images/linkExternal-rtl.svg
new file mode 100644
index 00000000..288cb5d2
--- /dev/null
+++ b/resources/skins.citizen.styles/images/linkExternal-rtl.svg
@@ -0,0 +1,8 @@
+
+