diff --git a/cards/document-standard/template.hbs b/cards/document-standard/template.hbs
index 8be5d157f..afbc58c35 100644
--- a/cards/document-standard/template.hbs
+++ b/cards/document-standard/template.hbs
@@ -76,10 +76,10 @@
     {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon" data-component="IconComponent" data-opts='{
-        "iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}",
-        "iconName": "{{iconName}}"
-      }'></div>
+      {{> icons/iconPartial
+          iconName=iconName
+          iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+      }}
     </div>
     {{/if}}
     <div class='HitchhikerCTA-iconLabel'>
diff --git a/cards/event-standard/template.hbs b/cards/event-standard/template.hbs
index cd3982a77..6fd9a597e 100644
--- a/cards/event-standard/template.hbs
+++ b/cards/event-standard/template.hbs
@@ -73,13 +73,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
@@ -95,10 +97,11 @@
     {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon" data-component="IconComponent" data-opts='{
-        "iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}",
-        "iconName": "{{iconName}}"
-      }'>
+      <div class="HitchhikerCTA-icon">
+        {{> icons/iconPartial
+            iconName=iconName
+            iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+        }}
       </div>
     </div>
     {{/if}}
diff --git a/cards/faq-accordion/template.hbs b/cards/faq-accordion/template.hbs
index 944e712c0..fd73c014d 100644
--- a/cards/faq-accordion/template.hbs
+++ b/cards/faq-accordion/template.hbs
@@ -7,10 +7,8 @@
     <h3 class="HitchhikerFaqAccordion-title">
       {{{card.title}}}
     </h3>
-    <div class="HitchhikerFaqAccordion-icon js-HitchhikerFaqAccordion-icon{{#if card.isExpanded}} HitchhikerFaqAccordion-icon--expanded{{/if}}"
-      data-component="IconComponent"
-      data-opts='{"iconName": "chevron"}'
-      data-prop="icon">
+    <div class="HitchhikerFaqAccordion-icon js-HitchhikerFaqAccordion-icon{{#if card.isExpanded}} HitchhikerFaqAccordion-icon--expanded{{/if}}">
+      {{> icons/builtInIcon iconName='chevron' }}
     </div>
   </button>
   <div class="HitchhikerFaqAccordion-content js-HitchhikerFaqAccordion-content"
@@ -61,13 +59,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
@@ -83,10 +83,11 @@
    {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
   {{#if (any iconName iconUrl)}}
   <div class="HitchhikerCTA-iconWrapper">
-    <div class="HitchhikerCTA-icon" data-component="IconComponent" data-opts='{
-      "iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}",
-      "iconName": "{{iconName}}"
-    }'>
+    <div class="HitchhikerCTA-icon">
+      {{> icons/iconPartial
+          iconName=iconName
+          iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+      }}
     </div>
   </div>
   {{/if}}
diff --git a/cards/financial-professional-location/template.hbs b/cards/financial-professional-location/template.hbs
index 27698dedc..76021ecac 100644
--- a/cards/financial-professional-location/template.hbs
+++ b/cards/financial-professional-location/template.hbs
@@ -102,13 +102,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
@@ -172,10 +174,11 @@
     {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon" data-component="IconComponent" data-opts='{
-        "iconUrl": "{{iconUrl}}",
-        "iconName": "{{iconName}}"
-      }'>
+      <div class="HitchhikerCTA-icon">
+        {{> icons/iconPartial
+            iconName=iconName
+            iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+        }}
       </div>
     </div>
     {{/if}}
diff --git a/cards/job-standard/template.hbs b/cards/job-standard/template.hbs
index b373d71c1..6d95a2d34 100644
--- a/cards/job-standard/template.hbs
+++ b/cards/job-standard/template.hbs
@@ -65,13 +65,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
@@ -96,10 +98,10 @@
     {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon" data-component="IconComponent" data-opts='{
-        "iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}",
-        "iconName": "{{iconName}}"
-      }'></div>
+      {{> icons/iconPartial
+          iconName=iconName
+          iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+      }}
     </div>
     {{/if}}
     <div class='HitchhikerCTA-iconLabel'>
diff --git a/cards/link-standard/template.hbs b/cards/link-standard/template.hbs
index 4419dc700..0c2eb9499 100644
--- a/cards/link-standard/template.hbs
+++ b/cards/link-standard/template.hbs
@@ -62,13 +62,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
diff --git a/cards/location-standard/template.hbs b/cards/location-standard/template.hbs
index d0d127c13..a12a0ded0 100644
--- a/cards/location-standard/template.hbs
+++ b/cards/location-standard/template.hbs
@@ -90,10 +90,11 @@
     {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon" data-component="IconComponent" data-opts='{
-        "iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}",
-        "iconName": "{{iconName}}"
-      }'>
+      <div class="HitchhikerCTA-icon">
+        {{> icons/iconPartial
+            iconName=iconName
+            iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+        }}
       </div>
     </div>
     {{/if}}
@@ -185,13 +186,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
diff --git a/cards/menuitem-standard/template.hbs b/cards/menuitem-standard/template.hbs
index 546ab9a83..9c9966794 100644
--- a/cards/menuitem-standard/template.hbs
+++ b/cards/menuitem-standard/template.hbs
@@ -92,13 +92,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
@@ -116,10 +118,11 @@
     {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon" data-component="IconComponent" data-opts='{
-        "iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}",
-        "iconName": "{{iconName}}"
-      }'>
+      <div class="HitchhikerCTA-icon">
+        {{> icons/iconPartial
+            iconName=iconName
+            iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+        }}
       </div>
     </div>
     {{/if}}
diff --git a/cards/multilang-event-standard/template.hbs b/cards/multilang-event-standard/template.hbs
index cd3982a77..6fd9a597e 100644
--- a/cards/multilang-event-standard/template.hbs
+++ b/cards/multilang-event-standard/template.hbs
@@ -73,13 +73,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
@@ -95,10 +97,11 @@
     {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon" data-component="IconComponent" data-opts='{
-        "iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}",
-        "iconName": "{{iconName}}"
-      }'>
+      <div class="HitchhikerCTA-icon">
+        {{> icons/iconPartial
+            iconName=iconName
+            iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+        }}
       </div>
     </div>
     {{/if}}
diff --git a/cards/multilang-faq-accordion/template.hbs b/cards/multilang-faq-accordion/template.hbs
index 944e712c0..fd73c014d 100644
--- a/cards/multilang-faq-accordion/template.hbs
+++ b/cards/multilang-faq-accordion/template.hbs
@@ -7,10 +7,8 @@
     <h3 class="HitchhikerFaqAccordion-title">
       {{{card.title}}}
     </h3>
-    <div class="HitchhikerFaqAccordion-icon js-HitchhikerFaqAccordion-icon{{#if card.isExpanded}} HitchhikerFaqAccordion-icon--expanded{{/if}}"
-      data-component="IconComponent"
-      data-opts='{"iconName": "chevron"}'
-      data-prop="icon">
+    <div class="HitchhikerFaqAccordion-icon js-HitchhikerFaqAccordion-icon{{#if card.isExpanded}} HitchhikerFaqAccordion-icon--expanded{{/if}}">
+      {{> icons/builtInIcon iconName='chevron' }}
     </div>
   </button>
   <div class="HitchhikerFaqAccordion-content js-HitchhikerFaqAccordion-content"
@@ -61,13 +59,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
@@ -83,10 +83,11 @@
    {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
   {{#if (any iconName iconUrl)}}
   <div class="HitchhikerCTA-iconWrapper">
-    <div class="HitchhikerCTA-icon" data-component="IconComponent" data-opts='{
-      "iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}",
-      "iconName": "{{iconName}}"
-    }'>
+    <div class="HitchhikerCTA-icon">
+      {{> icons/iconPartial
+          iconName=iconName
+          iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+      }}
     </div>
   </div>
   {{/if}}
diff --git a/cards/multilang-financial-professional-location/template.hbs b/cards/multilang-financial-professional-location/template.hbs
index 6ed5d576b..a802076a3 100644
--- a/cards/multilang-financial-professional-location/template.hbs
+++ b/cards/multilang-financial-professional-location/template.hbs
@@ -102,13 +102,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
@@ -172,10 +174,11 @@
     {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon" data-component="IconComponent" data-opts='{
-        "iconUrl": "{{iconUrl}}",
-        "iconName": "{{iconName}}"
-      }'>
+      <div class="HitchhikerCTA-icon">
+        {{> icons/iconPartial
+            iconName=iconName
+            iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+        }}
       </div>
     </div>
     {{/if}}
diff --git a/cards/multilang-job-standard/template.hbs b/cards/multilang-job-standard/template.hbs
index b373d71c1..6d95a2d34 100644
--- a/cards/multilang-job-standard/template.hbs
+++ b/cards/multilang-job-standard/template.hbs
@@ -65,13 +65,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
@@ -96,10 +98,10 @@
     {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon" data-component="IconComponent" data-opts='{
-        "iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}",
-        "iconName": "{{iconName}}"
-      }'></div>
+      {{> icons/iconPartial
+          iconName=iconName
+          iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+      }}
     </div>
     {{/if}}
     <div class='HitchhikerCTA-iconLabel'>
diff --git a/cards/multilang-link-standard/template.hbs b/cards/multilang-link-standard/template.hbs
index 4419dc700..0c2eb9499 100644
--- a/cards/multilang-link-standard/template.hbs
+++ b/cards/multilang-link-standard/template.hbs
@@ -62,13 +62,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
diff --git a/cards/multilang-location-standard/template.hbs b/cards/multilang-location-standard/template.hbs
index a718100ac..afbc93210 100644
--- a/cards/multilang-location-standard/template.hbs
+++ b/cards/multilang-location-standard/template.hbs
@@ -90,10 +90,11 @@
     {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon" data-component="IconComponent" data-opts='{
-        "iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}",
-        "iconName": "{{iconName}}"
-      }'>
+      <div class="HitchhikerCTA-icon">
+        {{> icons/iconPartial
+            iconName=iconName
+            iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+        }}
       </div>
     </div>
     {{/if}}
@@ -185,13 +186,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
diff --git a/cards/multilang-menuitem-standard/template.hbs b/cards/multilang-menuitem-standard/template.hbs
index 546ab9a83..9c9966794 100644
--- a/cards/multilang-menuitem-standard/template.hbs
+++ b/cards/multilang-menuitem-standard/template.hbs
@@ -92,13 +92,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
@@ -116,10 +118,11 @@
     {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon" data-component="IconComponent" data-opts='{
-        "iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}",
-        "iconName": "{{iconName}}"
-      }'>
+      <div class="HitchhikerCTA-icon">
+        {{> icons/iconPartial
+            iconName=iconName
+            iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+        }}
       </div>
     </div>
     {{/if}}
diff --git a/cards/multilang-product-prominentimage/template.hbs b/cards/multilang-product-prominentimage/template.hbs
index 52d39db04..9314c43f0 100644
--- a/cards/multilang-product-prominentimage/template.hbs
+++ b/cards/multilang-product-prominentimage/template.hbs
@@ -74,13 +74,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
@@ -107,9 +109,11 @@
     {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon"
-        data-component="IconComponent"
-        data-opts='{"iconName": "{{iconName}}","iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}"}'>
+      <div class="HitchhikerCTA-icon">
+        {{> icons/iconPartial
+            iconName=iconName
+            iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+        }}
       </div>
     </div>
     {{/if}}
diff --git a/cards/multilang-product-prominentvideo/template.hbs b/cards/multilang-product-prominentvideo/template.hbs
index a25c5f932..d01f4a9d3 100644
--- a/cards/multilang-product-prominentvideo/template.hbs
+++ b/cards/multilang-product-prominentvideo/template.hbs
@@ -76,13 +76,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
@@ -109,9 +111,11 @@
     {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon"
-        data-component="IconComponent"
-        data-opts='{"iconName": "{{iconName}}","iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}"}'>
+      <div class="HitchhikerCTA-icon">
+        {{> icons/iconPartial
+            iconName=iconName
+            iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+        }}
       </div>
     </div>
     {{/if}}
diff --git a/cards/multilang-product-standard/template.hbs b/cards/multilang-product-standard/template.hbs
index 7b6147899..a1a245d6d 100644
--- a/cards/multilang-product-standard/template.hbs
+++ b/cards/multilang-product-standard/template.hbs
@@ -70,13 +70,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
@@ -94,8 +96,11 @@
     {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon" data-component="IconComponent"
-        data-opts='{"iconName": "{{iconName}}", "iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}"}'>
+      <div class="HitchhikerCTA-icon">
+        {{> icons/iconPartial
+            iconName=iconName
+            iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+        }}
       </div>
     </div>
     {{/if}}
diff --git a/cards/multilang-professional-location/template.hbs b/cards/multilang-professional-location/template.hbs
index 27bffed6d..a20c75bfd 100644
--- a/cards/multilang-professional-location/template.hbs
+++ b/cards/multilang-professional-location/template.hbs
@@ -99,13 +99,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
@@ -169,10 +171,11 @@
     {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon" data-component="IconComponent" data-opts='{
-        "iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}",
-        "iconName": "{{iconName}}"
-      }'>
+      <div class="HitchhikerCTA-icon">
+        {{> icons/iconPartial
+            iconName=iconName
+            iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+        }}
       </div>
     </div>
     {{/if}}
diff --git a/cards/multilang-professional-standard/template.hbs b/cards/multilang-professional-standard/template.hbs
index 08d6234a1..41b49ae16 100644
--- a/cards/multilang-professional-standard/template.hbs
+++ b/cards/multilang-professional-standard/template.hbs
@@ -65,13 +65,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
@@ -133,10 +135,10 @@
     {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon" data-component="IconComponent" data-opts='{
-        "iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}",
-        "iconName": "{{iconName}}"
-      }'></div>
+      {{> icons/iconPartial
+          iconName=iconName
+          iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+      }}
     </div>
     {{/if}}
     <div class='HitchhikerCTA-iconLabel'>
diff --git a/cards/multilang-standard/template.hbs b/cards/multilang-standard/template.hbs
index bc52487d3..8b2662ae0 100644
--- a/cards/multilang-standard/template.hbs
+++ b/cards/multilang-standard/template.hbs
@@ -65,13 +65,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
@@ -98,10 +100,10 @@
     {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon" data-component="IconComponent" data-opts='{
-        "iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}",
-        "iconName": "{{iconName}}"
-      }'></div>
+      {{> icons/iconPartial
+          iconName=iconName
+          iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+      }}
     </div>
     {{/if}}
     <div class='HitchhikerCTA-iconLabel'>
diff --git a/cards/product-prominentimage/template.hbs b/cards/product-prominentimage/template.hbs
index 170c96471..677aeb8e0 100644
--- a/cards/product-prominentimage/template.hbs
+++ b/cards/product-prominentimage/template.hbs
@@ -74,13 +74,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
@@ -107,9 +109,11 @@
     {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon"
-        data-component="IconComponent"
-        data-opts='{"iconName": "{{iconName}}","iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}"}'>
+      <div class="HitchhikerCTA-icon">
+        {{> icons/iconPartial
+            iconName=iconName
+            iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+        }}
       </div>
     </div>
     {{/if}}
diff --git a/cards/product-prominentvideo/template.hbs b/cards/product-prominentvideo/template.hbs
index a25c5f932..d01f4a9d3 100644
--- a/cards/product-prominentvideo/template.hbs
+++ b/cards/product-prominentvideo/template.hbs
@@ -76,13 +76,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
@@ -109,9 +111,11 @@
     {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon"
-        data-component="IconComponent"
-        data-opts='{"iconName": "{{iconName}}","iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}"}'>
+      <div class="HitchhikerCTA-icon">
+        {{> icons/iconPartial
+            iconName=iconName
+            iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+        }}
       </div>
     </div>
     {{/if}}
diff --git a/cards/product-standard/template.hbs b/cards/product-standard/template.hbs
index 7b6147899..a1a245d6d 100644
--- a/cards/product-standard/template.hbs
+++ b/cards/product-standard/template.hbs
@@ -70,13 +70,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
@@ -94,8 +96,11 @@
     {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon" data-component="IconComponent"
-        data-opts='{"iconName": "{{iconName}}", "iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}"}'>
+      <div class="HitchhikerCTA-icon">
+        {{> icons/iconPartial
+            iconName=iconName
+            iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+        }}
       </div>
     </div>
     {{/if}}
diff --git a/cards/professional-location/template.hbs b/cards/professional-location/template.hbs
index 4adc7ff19..83c8763ab 100644
--- a/cards/professional-location/template.hbs
+++ b/cards/professional-location/template.hbs
@@ -99,13 +99,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
@@ -169,10 +171,11 @@
     {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon" data-component="IconComponent" data-opts='{
-        "iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}",
-        "iconName": "{{iconName}}"
-      }'>
+      <div class="HitchhikerCTA-icon">
+        {{> icons/iconPartial
+            iconName=iconName
+            iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+        }}
       </div>
     </div>
     {{/if}}
diff --git a/cards/professional-standard/template.hbs b/cards/professional-standard/template.hbs
index 08d6234a1..41b49ae16 100644
--- a/cards/professional-standard/template.hbs
+++ b/cards/professional-standard/template.hbs
@@ -65,13 +65,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
@@ -133,10 +135,10 @@
     {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon" data-component="IconComponent" data-opts='{
-        "iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}",
-        "iconName": "{{iconName}}"
-      }'></div>
+      {{> icons/iconPartial
+          iconName=iconName
+          iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+      }}
     </div>
     {{/if}}
     <div class='HitchhikerCTA-iconLabel'>
diff --git a/cards/standard/template.hbs b/cards/standard/template.hbs
index bc52487d3..8b2662ae0 100644
--- a/cards/standard/template.hbs
+++ b/cards/standard/template.hbs
@@ -65,13 +65,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
@@ -98,10 +100,10 @@
     {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon" data-component="IconComponent" data-opts='{
-        "iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}",
-        "iconName": "{{iconName}}"
-      }'></div>
+      {{> icons/iconPartial
+          iconName=iconName
+          iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+      }}
     </div>
     {{/if}}
     <div class='HitchhikerCTA-iconLabel'>
diff --git a/commands/helpers/utils/argumentmetadata.js b/commands/helpers/utils/argumentmetadata.js
index 49c546995..7e1ce1abf 100644
--- a/commands/helpers/utils/argumentmetadata.js
+++ b/commands/helpers/utils/argumentmetadata.js
@@ -16,9 +16,9 @@ Object.freeze(ArgumentType);
 class ArgumentMetadata {
   constructor(type, description, isRequired, defaultValue, itemType) {
     this._type = type;
+    this._description = description;
     this._isRequired = isRequired;
     this._defaultValue = defaultValue;
-    this._description = description;
     this._itemType = itemType;
   }
 
diff --git a/directanswercards/allfields-standard/template.hbs b/directanswercards/allfields-standard/template.hbs
index 1eb3e93ea..661dfb719 100644
--- a/directanswercards/allfields-standard/template.hbs
+++ b/directanswercards/allfields-standard/template.hbs
@@ -19,14 +19,12 @@
 
 {{#*inline 'icon'}}
 {{#if (any iconName iconUrl)}}
-<div class="HitchhikerAllFieldsStandard-titleIconWrapper"
-  data-component="IconComponent"
-  data-opts='{
-    "iconName": "{{iconName}}",
-    "iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}"
-  }'
-  data-prop="icon"
-></div>
+<div class="HitchhikerAllFieldsStandard-titleIconWrapper"></div>
+  {{> icons/iconPartial
+      iconName=iconName
+      iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+  }}
+</div>
 {{/if}}
 {{/inline}}
 
@@ -132,11 +130,9 @@
         {{footerText}}
       </legend>
       <label class="HitchhikerAllFieldsStandard-thumb">
-        <span class="HitchhikerAllFieldsStandard-thumbUpIcon"
-              data-component="IconComponent"
-              data-opts='{"iconName": "thumb"}'
-              data-prop="icon"
-        ></span>
+        <span class="HitchhikerAllFieldsStandard-thumbUpIcon">
+          {{> icons/builtInIcon iconName='thumb' }}
+        </span>
         <input type="radio"
                 name="feedback"
                 value="true"
@@ -146,11 +142,9 @@
         </span>
       </label>
       <label class="HitchhikerAllFieldsStandard-thumb">
-        <span class="HitchhikerAllFieldsStandard-thumbDownIcon"
-              data-component="IconComponent"
-              data-opts='{"iconName": "thumb"}'
-              data-prop="icon"
-        ></span>
+        <span class="HitchhikerAllFieldsStandard-thumbDownIcon">
+          {{> icons/builtInIcon iconName='thumb' }}
+        </span>
         <input type="radio"
                 name="feedback"
                 value="false"
@@ -176,10 +170,10 @@
     target="{{#if target}}{{target}}{{else}}{{#if linkTarget}}{{linkTarget}}{{else}}_blank{{/if}}{{/if}}">
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon" data-component="IconComponent" data-opts='{
-        "iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}",
-        "iconName": "{{iconName}}"
-      }'></div>
+      {{> icons/iconPartial
+          iconName=iconName
+          iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+      }}
     </div>
     {{/if}}
     <div class='HitchhikerCTA-iconLabel'>
diff --git a/directanswercards/documentsearch-standard/template.hbs b/directanswercards/documentsearch-standard/template.hbs
index 92bc84ef6..59d16c18c 100644
--- a/directanswercards/documentsearch-standard/template.hbs
+++ b/directanswercards/documentsearch-standard/template.hbs
@@ -61,11 +61,9 @@
           {{footerText}}
         </legend>
         <label class="HitchhikerDocumentSearchStandard-thumb">
-          <span class="HitchhikerDocumentSearchStandard-thumbUpIcon"
-                data-component="IconComponent"
-                data-opts='{"iconName": "thumb"}'
-                data-prop="icon"
-          ></span>
+          <span class="HitchhikerDocumentSearchStandard-thumbUpIcon">
+            {{> icons/builtInIcon iconName='thumb' }}
+          </span>
           <input type="radio"
                   name="feedback"
                   value="true"
@@ -75,11 +73,9 @@
           </span>
         </label>
         <label class="HitchhikerDocumentSearchStandard-thumb">
-          <span class="HitchhikerDocumentSearchStandard-thumbDownIcon"
-                data-component="IconComponent"
-                data-opts='{"iconName": "thumb"}'
-                data-prop="icon"
-          ></span>
+          <span class="HitchhikerDocumentSearchStandard-thumbDownIcon">
+            {{> icons/builtInIcon iconName='thumb' }}
+          </span>
           <input type="radio"
                   name="feedback"
                   value="false"
@@ -105,10 +101,12 @@
       target="{{#if target}}{{target}}{{else}}{{#if linkTarget}}{{linkTarget}}{{else}}_blank{{/if}}{{/if}}">
       {{#if (any iconName iconUrl)}}
       <div class="HitchhikerCTA-iconWrapper">
-        <div class="HitchhikerCTA-icon" data-component="IconComponent" data-opts='{
-          "iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}",
-          "iconName": "{{iconName}}"
-        }'></div>
+        <div class="HitchhikerCTA-icon" data-component="IconComponent">
+          {{> icons/iconPartial
+              iconName=iconName
+              iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+          }}
+        </div>
       </div>
       {{/if}}
       <div class='HitchhikerCTA-iconLabel'>
diff --git a/directanswercards/multilang-allfields-standard/template.hbs b/directanswercards/multilang-allfields-standard/template.hbs
index e0bfeca43..d5241fce9 100644
--- a/directanswercards/multilang-allfields-standard/template.hbs
+++ b/directanswercards/multilang-allfields-standard/template.hbs
@@ -19,14 +19,12 @@
 
 {{#*inline 'icon'}}
 {{#if (any iconName iconUrl)}}
-<div class="HitchhikerAllFieldsStandard-titleIconWrapper"
-  data-component="IconComponent"
-  data-opts='{
-    "iconName": "{{iconName}}",
-    "iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}"
-  }'
-  data-prop="icon"
-></div>
+<div class="HitchhikerAllFieldsStandard-titleIconWrapper">
+  {{> icons/iconPartial
+      iconName=iconName
+      iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+  }}
+</div>
 {{/if}}
 {{/inline}}
 
@@ -132,11 +130,9 @@
         {{footerText}}
       </legend>
       <label class="HitchhikerAllFieldsStandard-thumb">
-        <span class="HitchhikerAllFieldsStandard-thumbUpIcon"
-              data-component="IconComponent"
-              data-opts='{"iconName": "thumb"}'
-              data-prop="icon"
-        ></span>
+        <span class="HitchhikerAllFieldsStandard-thumbUpIcon">
+          {{> icons/builtInIcon iconName='thumb' }}
+        </span>
         <input type="radio"
                 name="feedback"
                 value="true"
@@ -146,11 +142,9 @@
         </span>
       </label>
       <label class="HitchhikerAllFieldsStandard-thumb">
-        <span class="HitchhikerAllFieldsStandard-thumbDownIcon"
-              data-component="IconComponent"
-              data-opts='{"iconName": "thumb"}'
-              data-prop="icon"
-        ></span>
+        <span class="HitchhikerAllFieldsStandard-thumbDownIcon">
+          {{> icons/builtInIcon iconName='thumb' }}
+        </span>
         <input type="radio"
                 name="feedback"
                 value="false"
@@ -176,10 +170,10 @@
     target="{{#if target}}{{target}}{{else}}{{#if linkTarget}}{{linkTarget}}{{else}}_blank{{/if}}{{/if}}">
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon" data-component="IconComponent" data-opts='{
-        "iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}",
-        "iconName": "{{iconName}}"
-      }'></div>
+      {{> icons/iconPartial
+          iconName=iconName
+          iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+      }}
     </div>
     {{/if}}
     <div class='HitchhikerCTA-iconLabel'>
diff --git a/hbshelpers/relativePathHandler.js b/hbshelpers/relativePathHandler.js
index f63b7f01d..81465c396 100644
--- a/hbshelpers/relativePathHandler.js
+++ b/hbshelpers/relativePathHandler.js
@@ -4,13 +4,14 @@ const isNonRelativeUrl = require('./isNonRelativeUrl');
  * If the url is not relative, return it. If it is relative,
  * append relativePath to it.
  * 
- * @param {string} url 
  * @param {import('handlebars').HelperOptions} options
+ * @param {string} options.hash.relativePath
+ * @param {string} options.hash.url
  * @returns {string}
  */
 module.exports = function relativePathHandler(options) {
   const { relativePath, url } = options.hash || {};
-  if (isNonRelativeUrl(url) || !relativePath) {
+  if (isNonRelativeUrl(url) || !relativePath || !url) {
     return url;
   }
   return relativePath + '/' + url;
diff --git a/hbshelpers/sdkAssetUrl.js b/hbshelpers/sdkAssetUrl.js
index a67880b23..a9b459a0a 100644
--- a/hbshelpers/sdkAssetUrl.js
+++ b/hbshelpers/sdkAssetUrl.js
@@ -1,5 +1,6 @@
 const RELEASE_BRANCH_REGEX = /^release\/v[0-9.]+$/;
 const HOTFIX_BRANCH_REGEX = /^hotfix\/v[0-9.]+$/;
+const I18N_FEATURE_BRANCH_REGEX = /^feature\/.+-i18n$/;
 const SEM_VER_REGEX = /^[1-9]+$|^[1-9]+\.[0-9]+$|^[1-9]+\.[0-9]+\.[0-9]+$/;
 
 /**
@@ -25,8 +26,9 @@ module.exports = function sdkAssetUrl(branch, locale, assetName) {
 
   const isPreReleaseBranch = 
     RELEASE_BRANCH_REGEX.test(branch) || HOTFIX_BRANCH_REGEX.test(branch);
+  const isI18nFeatureBranch = I18N_FEATURE_BRANCH_REGEX.test(branch);
   const isLocalizationSupported = 
-    (isReleasedBranch || isPreReleaseBranch) && 
+    (isReleasedBranch || isPreReleaseBranch || isI18nFeatureBranch) && 
     !(locale.startsWith('en') || assetName === 'answers.css') ;
   
   const parsedAssetName = isLocalizationSupported ?
diff --git a/package.json b/package.json
index 95b204d2f..845d64051 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,8 @@
   },
   "jest": {
     "collectCoverageFrom": [
-      "static/**/*.js"
+      "static/**/*.js",
+      "hbshelpers/*.js"
     ],
     "verbose": true,
     "moduleFileExtensions": [
diff --git a/script/core.hbs b/script/core.hbs
index e8acc0e47..8faff737e 100644
--- a/script/core.hbs
+++ b/script/core.hbs
@@ -73,14 +73,32 @@
          * Determine whether a URL is absolute or not.
          * Common examples: "mailto:slapshot@gmail.com", "//yext.com", "https://yext.com"
          */
-        ANSWERS.registerHelper('isNonRelativeUrl', function(str) {
+        function isNonRelativeUrl(str) {
           const absoluteURLRegex = /^(\/|[a-zA-Z]+:)/;
           return str && str.match(absoluteURLRegex);
-        });
+        }
+        ANSWERS.registerHelper('isNonRelativeUrl', isNonRelativeUrl);
 
         ANSWERS.registerHelper('close-card-svg', () => {
           return ANSWERS.renderer.SafeString({{{stringifyPartial (read 'static/assets/images/close-card') }}});
         });
+
+        /**
+        * If the url is not relative, return it. If it is relative,
+        * append relativePath to it.
+        *
+        * @param {import('handlebars').HelperOptions} options
+        * @param {string} options.hash.relativePath
+        * @param {string} options.hash.url
+        * @returns {string}
+        */
+        ANSWERS.registerHelper('relativePathHandler', function relativePathHandler(options) {
+          const { relativePath, url } = options.hash || {};
+          if (isNonRelativeUrl(url) || !relativePath || !url) {
+            return url;
+          }
+          return relativePath + '/' + url;
+        });
       }
     }).catch(err => {
       window.AnswersExperience.AnswersInitializedPromise.reject('Answers failed to initialized.');
diff --git a/test-site/.gitignore b/test-site/.gitignore
index 199e15194..ac0661c47 100644
--- a/test-site/.gitignore
+++ b/test-site/.gitignore
@@ -1,15 +1,17 @@
+public/*
+config/*
+pages/*
+cards/*
+directanswercards/*
+Gruntfile.js
+package-lock.json
+package.json
+webpack-config.js
+
+!cards/custom-cta-icons/
 !config/global_config.json
 !config/locale_config.json
 !config/index.json
 !pages/index.html.hbs
 !public/iframe_test.html
-!public/overlay.html
-public/
-config/
-pages/
-cards/
-directanswercards/
-Gruntfile.js
-package-lock.json
-package.json
-webpack-config.js
\ No newline at end of file
+!public/overlay.html
\ No newline at end of file
diff --git a/test-site/cards/custom-cta-icons/component.js b/test-site/cards/custom-cta-icons/component.js
new file mode 100644
index 000000000..87ee03701
--- /dev/null
+++ b/test-site/cards/custom-cta-icons/component.js
@@ -0,0 +1,56 @@
+{{> cards/card_component componentName='custom-cta-icons' }}
+
+class custom_cta_iconsCardComponent extends BaseCard['custom-cta-icons'] {
+  constructor(config = {}, systemConfig = {}) {
+    super(config, systemConfig);
+  }
+
+  dataForRender(profile) {
+    const linkTarget = AnswersExperience.runtimeConfig.get('linkTarget') || '_top';
+    
+    return {
+      title: profile.name, 
+      url: profile.website,
+      target: linkTarget,
+      titleEventOptions: this.addDefaultEventOptions(),
+      date: Formatter.bigDate(profile),
+      subtitle: Formatter.dateRange(profile),
+      details: profile.description,
+      CTA1: {
+        label: 'Hitchhiker Thumb!',
+        /**
+         * @Test a custom icon url without iconName in the CTA
+         * @Expect the custom icon to show up
+         */
+        iconUrl: 'static/assets/hitchhiker-thumb.jpeg',
+        url: 'testUrl',
+        target: linkTarget,
+        eventType: 'RSVP',
+        eventOptions: this.addDefaultEventOptions(),
+      },
+      CTA2: {
+        label: 'AYAYA',
+        iconName: 'star',
+        /**
+         * @Test a custom icon url hen an iconName already exists
+         * @Expect the custom icon to show up
+         */
+        iconUrl: 'static/assets/ayaya.png',
+        url: 'testUrl',
+        target: linkTarget,
+        eventType: 'DRIVING_DIRECTIONS',
+        eventOptions: this.addDefaultEventOptions(),
+      }
+    };
+  }
+
+  static defaultTemplateName (config) {
+    return 'cards/custom-cta-icons';
+  }
+}
+
+ANSWERS.registerTemplate(
+  'cards/custom-cta-icons',
+  {{{stringifyPartial (read 'cards/event-standard/template') }}}
+);
+ANSWERS.registerComponentType(custom_cta_iconsCardComponent);
diff --git a/test-site/config-overrides/events_custom_cta_icons.es.json b/test-site/config-overrides/events_custom_cta_icons.es.json
new file mode 100644
index 000000000..fffbba91e
--- /dev/null
+++ b/test-site/config-overrides/events_custom_cta_icons.es.json
@@ -0,0 +1,8 @@
+{
+  "verticalsToConfig": {
+    "events": {
+      "cardType": "custom-cta-icons",
+      "label": "Eventos"
+    }
+  }
+}
diff --git a/test-site/config-overrides/events_custom_cta_icons.json b/test-site/config-overrides/events_custom_cta_icons.json
new file mode 100644
index 000000000..829116a85
--- /dev/null
+++ b/test-site/config-overrides/events_custom_cta_icons.json
@@ -0,0 +1,7 @@
+{
+  "verticalsToConfig": {
+    "events": {
+      "cardType": "custom-cta-icons"
+    }
+  }
+}
diff --git a/test-site/config-overrides/people.json b/test-site/config-overrides/people.json
index 078e66334..04e824c16 100644
--- a/test-site/config-overrides/people.json
+++ b/test-site/config-overrides/people.json
@@ -29,7 +29,8 @@
   },
   "verticalsToConfig": {
     "people": {
-      "label": "People"
+      "label": "People",
+      "iconUrl": "static/assets/ayaya.png"
     }
   }
 }
\ No newline at end of file
diff --git a/test-site/config/global_config.json b/test-site/config/global_config.json
index 23988d98c..6e3097195 100644
--- a/test-site/config/global_config.json
+++ b/test-site/config/global_config.json
@@ -1,5 +1,5 @@
 {
-  "sdkVersion": "1.9", // The version of the Answers SDK to use
+  "sdkVersion": "feature/develop-i18n", // The version of the Answers SDK to use
   "apiKey": "2d8c550071a64ea23e263118a2b0680b", // The answers api key found on the experiences page. This will be provided automatically by the Yext CI system
   // "experienceVersion": "<REPLACE ME>", // the Answers Experience version to use for API requests. This will be provided automatically by the Yext CI system
   // "businessId": "<REPLACE ME>", // The business ID of the account. This will be provided automatically by the Yext CI system
diff --git a/test-site/config/index.json b/test-site/config/index.json
index b0d8b9a16..7a2179928 100644
--- a/test-site/config/index.json
+++ b/test-site/config/index.json
@@ -40,7 +40,7 @@
       "mapConfig": {
         "mapProvider": "Google"
       },
-      "icon": "static/assets/slapshot.png"
+      "iconUrl": "static/assets/slapshot.png"
     },
     "products": {
       "universalSectionTemplate": "grid-three-columns",
diff --git a/test-site/scripts/create-verticals.js b/test-site/scripts/create-verticals.js
index c89935ad7..a7f5e16dc 100644
--- a/test-site/scripts/create-verticals.js
+++ b/test-site/scripts/create-verticals.js
@@ -10,6 +10,10 @@ const verticalConfiguration = {
     template: 'vertical-standard',
     cardName: 'event-custom'
   },
+  events_custom_cta_icons: {
+    verticalKey: 'events',
+    template: 'vertical-standard'
+  },
   faqs: {
     verticalKey: 'faq',
     template: 'vertical-standard',
@@ -90,7 +94,12 @@ const testSiteDir = path.resolve(__dirname, '..');
 process.chdir(testSiteDir);
 
 Object.entries(verticalConfiguration).forEach(([pageName, config]) => {
-  execSync(`npx jambo vertical --name ${pageName} --verticalKey ${config.verticalKey} --template ${config.template} --cardName ${config.cardName} --locales es`);
+  let verticalCommand =
+    `npx jambo vertical --name ${pageName} --verticalKey ${config.verticalKey} --template ${config.template} --locales es`
+  if (config.cardName) {
+    verticalCommand += ` --cardName ${config.cardName}`
+  }
+  execSync(verticalCommand);
   configMerger.mergeConfigForPage(pageName);
   pagePatcher.applyPatchToPage(pageName);
   configMerger.mergeConfigForPage(pageName + '.es');
diff --git a/test-site/static/assets/ayaya.png b/test-site/static/assets/ayaya.png
new file mode 100644
index 000000000..668e92103
Binary files /dev/null and b/test-site/static/assets/ayaya.png differ
diff --git a/test-site/static/assets/hitchhiker-thumb.jpeg b/test-site/static/assets/hitchhiker-thumb.jpeg
new file mode 100644
index 000000000..80018e274
Binary files /dev/null and b/test-site/static/assets/hitchhiker-thumb.jpeg differ
diff --git a/tests/hbshelpers/relativePathHandler.js b/tests/hbshelpers/relativePathHandler.js
new file mode 100644
index 000000000..ca4645f4e
--- /dev/null
+++ b/tests/hbshelpers/relativePathHandler.js
@@ -0,0 +1,56 @@
+import relativePathHandler from '../../hbshelpers/relativePathHandler';
+
+it('works for undefined url', () => {
+  const hash = {
+    url: undefined,
+    relativePath: '.'
+  };
+  expect(relativePathHandler({ hash })).toEqual(undefined);
+});
+
+it('works for null url', () => {
+  const hash = {
+    url: null,
+    relativePath: '.'
+  };
+  expect(relativePathHandler({ hash })).toEqual(null);
+});
+
+it('works for blank string url', () => {
+  const hash = {
+    url: '',
+    relativePath: '.'
+  };
+  expect(relativePathHandler({ hash })).toEqual('');
+});
+
+it('works for relative url with relativePath', () => {
+  const hash = {
+    url: 'mySpecialAsset.jpg',
+    relativePath: '.'
+  };
+  expect(relativePathHandler({ hash })).toEqual('./mySpecialAsset.jpg');
+});
+
+it('works for relative url with relativePath that points back a level', () => {
+  const hash = {
+    url: 'mySpecialAsset.jpg',
+    relativePath: '../..'
+  };
+  expect(relativePathHandler({ hash })).toEqual('../../mySpecialAsset.jpg');
+});
+
+it('works when no relativePath', () => {
+  const hash = {
+    url: 'mySpecialAsset.jpg'
+  };
+  expect(relativePathHandler({ hash })).toEqual('mySpecialAsset.jpg');
+});
+
+it('works with absolute url', () => {
+  const hash = {
+    url: '/mySpecialAsset.jpg',
+    relativePath: '../../'
+  };
+  expect(relativePathHandler({ hash })).toEqual('/mySpecialAsset.jpg');
+});
\ No newline at end of file
diff --git a/tests/percy/photographer.js b/tests/percy/photographer.js
index d49b3797a..4769bbdb9 100644
--- a/tests/percy/photographer.js
+++ b/tests/percy/photographer.js
@@ -53,6 +53,9 @@ class Photographer {
     await this._pageNavigator.gotoVerticalPage('events', { query: 'vrginia' });
     await this._camera.snapshot('vertical-search--spellcheck');
 
+    await this._pageNavigator.gotoVerticalPage('events_custom_cta_icons');
+    await this._camera.snapshot('vertical-search--custom-cta-icons');
+
     await this._pageNavigator.gotoVerticalPage('financial_professionals', { query: 'connor' });
     await this._camera.snapshot('vertical-search--financial-professional-location');
     
@@ -101,6 +104,10 @@ class Photographer {
     await this._pageNavigator.click(mapboxPinSelector);
     await this._camera.snapshotMobileOnly('vertical-full-page-map__mobile-detail-view');
 
+    await this._pageNavigator
+      .gotoVerticalPage('locations_full_page_map_with_filters', { query: 'people' });
+    await this._camera.snapshot('vertical-full-page-map--alternative-verticals');
+
     await this._pageNavigator
       .gotoVerticalPage('locations_full_page_map', { query: 'office sparce'});
     await this._camera.snapshotDesktopOnly('vertical-full-page-map--spellcheck__desktop-view');
diff --git a/theme-components/vertical-full-page-map-alternative-verticals/alternativeverticals.hbs b/theme-components/vertical-full-page-map-alternative-verticals/alternativeverticals.hbs
index df57e822b..d141826fb 100644
--- a/theme-components/vertical-full-page-map-alternative-verticals/alternativeverticals.hbs
+++ b/theme-components/vertical-full-page-map-alternative-verticals/alternativeverticals.hbs
@@ -16,12 +16,11 @@
             <a class="yxt-AlternativeVerticals-suggestionLink"
                 href="{{url}}">
               {{#if hasIcon}}
-                <div class="yxt-AlternativeVerticals-verticalIconWrapper"
-                      data-component="IconComponent"
-                      data-opts='{
-                        "iconName": "{{iconName}}",
-                        "iconUrl": "{{iconUrl}}"
-                      }'>
+                <div class="yxt-AlternativeVerticals-verticalIconWrapper">
+                  {{> icons/iconPartial
+                      iconName=iconName
+                      iconUrl=iconUrl
+                  }}
                 </div>
               {{/if}}
               <div class="yxt-AlternativeVerticals-suggestionLink--copy">
@@ -32,11 +31,8 @@
                   {{translate phrase='([[resultsCount]] result)' pluralForm='([[resultsCount]] results)' count=resultsCount resultsCount=resultsCount escapeHTML=false }}
                 </span>
               </div>
-              <div class="yxt-AlternativeVerticals-arrowIconWrapper"
-                    data-component="IconComponent"
-                    data-opts='{
-                      "iconName": "chevron"
-                    }'>
+              <div class="yxt-AlternativeVerticals-arrowIconWrapper">
+                {{> icons/builtInIcon iconName='chevron' }}
               </div>
             </a>
           </li>
diff --git a/theme-components/vertical-full-page-map/script.js b/theme-components/vertical-full-page-map/script.js
index 5c3353d19..a8c251736 100644
--- a/theme-components/vertical-full-page-map/script.js
+++ b/theme-components/vertical-full-page-map/script.js
@@ -32,9 +32,16 @@ ANSWERS.addComponent('VerticalFullPageMapOrchestrator', Object.assign({},
         {{#with (lookup verticalsToConfig verticalKey)}}
         {{#if isFirst}}isFirst: {{isFirst}},{{/if}}
         {{#if icon}}icon: "{{{icon}}}",{{/if}}
-        {{#if iconUrl}}iconUrl: "{{#unless (isNonRelativeUrl iconUrl)}}{{relativePath}}/{{/unless}}{{{iconUrl}}}",{{/if}}
+        {{#if iconUrl}}iconUrl: "{{{relativePathHandler url=iconUrl relativePath=@root.relativePath}}}",{{/if}}
         label: {{> verticalLabel overridedLabel=label verticalKey=../verticalKey fallback=@key}},
-        url: "{{#if url}}{{{url}}}{{else if ../url}}{{../../relativePath}}/{{{../url}}}{{else}}{{{@key}}}.html{{/if}}",
+        url: 
+          {{#if url}}
+            "{{{relativePathHandler url=url relativePath=@root.relativePath}}}",
+          {{else if ../url}}
+            "{{{relativePathHandler url=../url relativePath=@root.relativePath}}}",
+          {{else}}
+            "{{{@key}}}.html",
+          {{/if}}
         {{/with}}
       }{{#unless @last}},{{/unless}}
       {{else}}
@@ -43,7 +50,14 @@ ANSWERS.addComponent('VerticalFullPageMapOrchestrator', Object.assign({},
         {{#if isFirst}}isFirst: {{isFirst}},{{/if}}
         {{#if icon}}icon: "{{{icon}}}",{{/if}}
         label: {{#if label}}"{{{label}}}"{{else}}"{{{@key}}}"{{/if}},
-        url: "{{#if url}}{{{url}}}{{else if ../url}}{{../../relativePath}}/{{{../url}}}{{else}}{{{@key}}}.html{{/if}}",
+        url:
+          {{#if url}}
+            "{{{relativePathHandler url=url relativePath=@root.relativePath}}}",
+          {{else if ../url}}
+            "{{{relativePathHandler url=../url relativePath=@root.relativePath}}}",
+          {{else}}
+            "{{{@key}}}.html",
+          {{/if}}
       {{/with}}
       }{{#unless @last}},{{/unless}}
       {{/if}}
diff --git a/universalsectiontemplates/grid-four-columns.hbs b/universalsectiontemplates/grid-four-columns.hbs
index 5114c72b3..517f859d5 100644
--- a/universalsectiontemplates/grid-four-columns.hbs
+++ b/universalsectiontemplates/grid-four-columns.hbs
@@ -22,9 +22,9 @@
   <div class="HitchhikerResultsGridFourColumns-title">
     {{#if _config.icon}}
       {{#if iconIsBuiltIn}}
-        <div data-component="IconComponent" data-opts='{ "iconName": "{{ _config.icon }}" }'></div>
+        <div>{{> icons/builtInIcon iconName=_config.icon }}</div>
       {{else}}
-        <div data-component="IconComponent" data-opts='{ "iconUrl": "{{ _config.icon }}" }'></div>
+        <div>{{> icons/iconPartial iconUrl=_config.icon }}</div>
       {{/if}}
     {{/if}}
     <div class="HitchhikerResultsGridFourColumns-titleLabel">{{_config.title}}</div>
@@ -61,7 +61,7 @@
          data-eventoptions='{{eventOptions}}'
       >
         <div class="HitchhikerResultsGridFourColumns-viewMoreLabel">{{_config.viewMoreLabel}}</div>
-        <div data-component="IconComponent" data-opts='{ "iconName": "chevron" }'></div>
+        <div>{{> icons/builtInIcon iconName='chevron' }}</div>
       </a>
     </div>
   {{/if}}
diff --git a/universalsectiontemplates/grid-three-columns.hbs b/universalsectiontemplates/grid-three-columns.hbs
index d15a51906..354e1ae1b 100644
--- a/universalsectiontemplates/grid-three-columns.hbs
+++ b/universalsectiontemplates/grid-three-columns.hbs
@@ -23,9 +23,9 @@
   <div class="HitchhikerResultsGridThreeColumns-title">
     {{#if _config.icon}}
       {{#if iconIsBuiltIn}}
-        <div data-component="IconComponent" data-opts='{ "iconName": "{{ _config.icon }}" }'></div>
+        <div>{{> icons/builtInIcon iconName=_config.icon }}</div>
       {{else}}
-        <div data-component="IconComponent" data-opts='{ "iconUrl": "{{ _config.icon }}" }'></div>
+        <div>{{> icons/iconPartial iconUrl=_config.icon }}</div>
       {{/if}}
     {{/if}}
     <div class="HitchhikerResultsGridThreeColumns-titleLabel">{{_config.title}}</div>
@@ -62,7 +62,7 @@
          data-eventoptions='{{eventOptions}}'
       >
         <div class="HitchhikerResultsGridThreeColumns-viewMoreLabel">{{_config.viewMoreLabel}}</div>
-        <div data-component="IconComponent" data-opts='{ "iconName": "chevron" }'></div>
+        <div>{{> icons/builtInIcon iconName='chevron' }}</div>
       </a>
     </div>
   {{/if}}
diff --git a/universalsectiontemplates/grid-two-columns.hbs b/universalsectiontemplates/grid-two-columns.hbs
index c0540dba8..bd72de27d 100644
--- a/universalsectiontemplates/grid-two-columns.hbs
+++ b/universalsectiontemplates/grid-two-columns.hbs
@@ -23,9 +23,9 @@
   <div class="HitchhikerResultsGridTwoColumns-title">
     {{#if _config.icon}}
       {{#if iconIsBuiltIn}}
-        <div data-component="IconComponent" data-opts='{ "iconName": "{{ _config.icon }}" }'></div>
+        <div>{{> icons/builtInIcon iconName=_config.icon }}</div>
       {{else}}
-        <div data-component="IconComponent" data-opts='{ "iconUrl": "{{ _config.icon }}" }'></div>
+        <div>{{> icons/iconPartial iconUrl=_config.icon }}</div>
       {{/if}}
     {{/if}}
     <div class="HitchhikerResultsGridTwoColumns-titleLabel">{{_config.title}}</div>
@@ -62,7 +62,7 @@
          data-eventoptions='{{eventOptions}}'
       >
         <div class="HitchhikerResultsGridTwoColumns-viewMoreLabel">{{_config.viewMoreLabel}}</div>
-        <div data-component="IconComponent" data-opts='{ "iconName": "chevron" }'></div>
+        <div>{{> icons/builtInIcon iconName='chevron' }}</div>
       </a>
     </div>
   {{/if}}
diff --git a/universalsectiontemplates/standard.hbs b/universalsectiontemplates/standard.hbs
index 93c10e8c2..352328237 100644
--- a/universalsectiontemplates/standard.hbs
+++ b/universalsectiontemplates/standard.hbs
@@ -23,9 +23,9 @@
   <div class="HitchhikerResultsStandard-title">
     {{#if _config.icon}}
       {{#if iconIsBuiltIn}}
-        <div data-component="IconComponent" data-opts='{ "iconName": "{{ _config.icon }}" }'></div>
+        <div>{{> icons/builtInIcon iconName=_config.icon }}</div>
       {{else}}
-        <div data-component="IconComponent" data-opts='{ "iconUrl": "{{ _config.icon }}" }'></div>
+        <div>{{> icons/iconPartial iconUrl=_config.icon }}</div>
       {{/if}}
     {{/if}}
     <div class="HitchhikerResultsStandard-titleLabel">{{_config.title}}</div>
@@ -62,7 +62,7 @@
          data-eventoptions='{{eventOptions}}'
       >
         <div class="HitchhikerResultsStandard-viewMoreLabel">{{_config.viewMoreLabel}}</div>
-        <div data-component="IconComponent" data-opts='{ "iconName": "chevron" }'></div>
+        <div>{{> icons/builtInIcon iconName='chevron' }}</div>
       </a>
     </div>
   {{/if}}