diff --git a/packages/calcite-components/src/components/link/link.scss b/packages/calcite-components/src/components/link/link.scss
index 6abf19beb89..312c34a4fba 100644
--- a/packages/calcite-components/src/components/link/link.scss
+++ b/packages/calcite-components/src/components/link/link.scss
@@ -1,5 +1,18 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-link-text-color: Specifies the text color of the component.
+ * @prop --calcite-link-icon-start-color: Specifies the color of the component's start position icon.
+ * @prop --calcite-link-icon-end-color: Specifies the color of the component's end position icon.
+ */
+
 :host {
   display: inline;
+  --calcite-link-text-color: var(--calcite-color-brand);
+  --calcite-link-icon-start-color: var(--calcite-color-brand);
+  --calcite-link-icon-end-color: var(--calcite-color-brand);
 }
 
 // link base
@@ -14,6 +27,7 @@
     justify-center
     rounded-none
     border-none;
+  color: var(--calcite-link-text-color);
   text-decoration: none;
   line-height: inherit;
   font-size: inherit;
@@ -47,17 +61,18 @@ calcite-icon {
 // icon positioning and styles
 :host .calcite-link--icon.icon-start {
   margin-inline-end: theme("margin.2");
+  color: var(--calcite-link-icon-start-color);
 }
 
 :host .calcite-link--icon.icon-end {
   margin-inline-start: theme("margin.2");
+  color: var(--calcite-link-icon-end-color);
 }
 
 :host {
   span,
   a {
-    @apply text-color-link
-      transition-default
+    @apply transition-default
       relative
       inline
       border-none
diff --git a/packages/calcite-components/src/demos/link.html b/packages/calcite-components/src/demos/link.html
index 250da720904..23b44de96e9 100644
--- a/packages/calcite-components/src/demos/link.html
+++ b/packages/calcite-components/src/demos/link.html
@@ -85,7 +85,7 @@
 
         <div class="child"><calcite-link icon-start="information" class="font-size--2">Link</calcite-link><br /></div>
 
-        <div class="child"><calcite-link icon-start="information" class="font-size--2">Link</calcite-link><br /></div>
+        <div class="child"><calcite-link icon-end="information" class="font-size--2">Link</calcite-link><br /></div>
 
         <div class="child">
           <calcite-link icon-start="information" icon-end="information" class="font-size--2">Link</calcite-link><br />
@@ -102,7 +102,7 @@
 
         <div class="child"><calcite-link icon-start="information" class="font-size--1">Link</calcite-link><br /></div>
 
-        <div class="child"><calcite-link icon-start="information" class="font-size--1">Link</calcite-link><br /></div>
+        <div class="child"><calcite-link icon-end="information" class="font-size--1">Link</calcite-link><br /></div>
 
         <div class="child">
           <calcite-link icon-start="information" icon-end="information" class="font-size--1">Link</calcite-link><br />
@@ -119,7 +119,7 @@
 
         <div class="child"><calcite-link icon-start="information" class="font-size-0">Link</calcite-link><br /></div>
 
-        <div class="child"><calcite-link icon-start="information" class="font-size-0">Link</calcite-link><br /></div>
+        <div class="child"><calcite-link icon-end="information" class="font-size-0">Link</calcite-link><br /></div>
 
         <div class="child">
           <calcite-link icon-start="information" icon-end="information" class="font-size-0">Link</calcite-link><br />
@@ -136,7 +136,7 @@
 
         <div class="child"><calcite-link icon-start="information" class="font-size-1">Link</calcite-link><br /></div>
 
-        <div class="child"><calcite-link icon-start="information" class="font-size-1">Link</calcite-link><br /></div>
+        <div class="child"><calcite-link icon-end="information" class="font-size-1">Link</calcite-link><br /></div>
 
         <div class="child">
           <calcite-link icon-start="information" icon-end="information" class="font-size-1">Link</calcite-link><br />
@@ -153,7 +153,7 @@
 
         <div class="child"><calcite-link icon-start="information" class="font-size-2">Link</calcite-link><br /></div>
 
-        <div class="child"><calcite-link icon-start="information" class="font-size-2">Link</calcite-link><br /></div>
+        <div class="child"><calcite-link icon-end="information" class="font-size-2">Link</calcite-link><br /></div>
 
         <div class="child">
           <calcite-link icon-start="information" icon-end="information" class="font-size-2">Link</calcite-link><br />