diff --git a/.gitignore b/.gitignore
index 34c4f5f31..55f756c3f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,6 @@
 node_modules
-assets
 .env
 coverage
+assets/*
+!assets/resources
+!assets/resources/*
diff --git a/assets/resources/icons-sprite.svg b/assets/resources/icons-sprite.svg
new file mode 100644
index 000000000..0fba73548
--- /dev/null
+++ b/assets/resources/icons-sprite.svg
@@ -0,0 +1,8 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
+  <defs>
+    <g id="shopping_cart">
+      <path
+        d="M280-80q-33 0-56.5-23.5T200-160q0-33 23.5-56.5T280-240q33 0 56.5 23.5T360-160q0 33-23.5 56.5T280-80Zm400 0q-33 0-56.5-23.5T600-160q0-33 23.5-56.5T680-240q33 0 56.5 23.5T760-160q0 33-23.5 56.5T680-80ZM208-800h590q23 0 35 20.5t1 41.5L692-482q-11 20-29.5 31T622-440H324l-44 80h480v80H280q-45 0-68-39.5t-2-78.5l54-98-144-304H40v-80h130l38 80Z"/>
+    </g>
+  </defs>
+</svg>
diff --git a/modules/ps_shoppingcart/ps_shoppingcart.tpl b/modules/ps_shoppingcart/ps_shoppingcart.tpl
index 3c793e919..e3bf0a3c9 100644
--- a/modules/ps_shoppingcart/ps_shoppingcart.tpl
+++ b/modules/ps_shoppingcart/ps_shoppingcart.tpl
@@ -10,7 +10,35 @@
       <span class="header-block__action-btn">
     {/if}
 
-    <i class="material-icons header-block__icon" aria-hidden="true">shopping_cart</i>
+    {*
+      OLD ICON
+      <i class="material-icons header-block__icon" aria-hidden="true">shopping_cart</i>
+    *}
+
+    {renderThemeIcon
+      iconName="cart"
+      extraAttributes=[
+        "aria-hidden" => "true",
+        "class" => "header-block__icon"
+      ]
+    }
+
+    {renderThemeIconSvg
+      iconName="cart"
+      extraAttributes=[
+        "aria-hidden" => "true",
+        "class" => "header-block__icon"
+      ]
+    }
+
+    {renderThemeIconSvgExternal
+      iconName="cart"
+      extraAttributes=[
+        "aria-hidden" => "true",
+        "class" => "header-block__icon"
+      ]
+    }
+
     <span class="d-none d-md-flex header-block__title">{l s='Cart' d='Shop.Theme.Checkout'}</span>
     <span class="header-block__badge">{$cart.products_count}</span>
 
diff --git a/src/scss/partials/_fonts.scss b/src/scss/partials/_fonts.scss
index b405009bc..3c97c3bf8 100644
--- a/src/scss/partials/_fonts.scss
+++ b/src/scss/partials/_fonts.scss
@@ -40,3 +40,16 @@
   /* Support for Firefox. */
   -moz-osx-font-smoothing: grayscale;
 }
+
+/**
+  * Generic svg-icon class that sets basic styles to make icons act like a icon font, but with the benefits of an svg.
+ */
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  fill: currentColor;
+  display: inline-block;
+  font-size: 24px; // To match the Material Icons font-size POC only
+  overflow: hidden;
+  vertical-align: middle;
+}
diff --git a/templates/_partials/helpers.tpl b/templates/_partials/helpers.tpl
index dd52efe44..95855e06e 100644
--- a/templates/_partials/helpers.tpl
+++ b/templates/_partials/helpers.tpl
@@ -14,3 +14,128 @@
     >
   </a>
 {/function}
+
+{assign
+  var=iconsMap
+  value=[
+    "cart" => "shopping_cart"
+  ]
+  scope="global"
+}
+
+
+{** SVG SPRITE **}
+
+<svg class="d-none">
+  <defs>
+    <g id="shopping_cart">
+      <path
+        d="M280-80q-33 0-56.5-23.5T200-160q0-33 23.5-56.5T280-240q33 0 56.5 23.5T360-160q0 33-23.5 56.5T280-80Zm400 0q-33 0-56.5-23.5T600-160q0-33 23.5-56.5T680-240q33 0 56.5 23.5T760-160q0 33-23.5 56.5T680-80ZM208-800h590q23 0 35 20.5t1 41.5L692-482q-11 20-29.5 31T622-440H324l-44 80h480v80H280q-45 0-68-39.5t-2-78.5l54-98-144-304H40v-80h130l38 80Z"/>
+    </g>
+  </defs>
+</svg>
+
+
+{**
+ * @param string iconName
+ * @param array extraAttributes
+ * @return string
+ * @example
+ * {renderIcon name='cart' extraAttributes=['class' => 'my-extra-class']}
+ *}
+{function renderThemeIcon iconName="" extraAttributes=[]}
+    {if $iconName && !empty($iconsMap[$iconName])}
+
+      <span
+        class="material-icons {if !empty($extraAttributes['class'])}{$extraAttributes['class']}{/if}"
+        {foreach $extraAttributes as $key => $value}
+          {if $key != 'class'}
+            {$key}="{$value}"
+          {/if}
+        {/foreach}
+      >
+        {$iconsMap[$iconName]}
+      </span>
+    {/if}
+{/function}
+
+{assign
+  var=iconsMapSvg
+  value=[
+    "cart" => [
+      "name" => "shopping_cart",
+      "viewbox" => "0 -960 960 960"
+    ]
+  ]
+  scope="global"
+}
+
+
+{** DIFFERENT NAME ONLY FOR POC TO DISPLAY POSIBILITES **}
+{function renderThemeIconSvg iconName="" extraAttributes=[]}
+  {if $iconName && !empty($iconsMapSvg[$iconName])}
+    {$icon = $iconsMapSvg[$iconName]}
+
+    <svg
+      class="svg-icon {if !empty($extraAttributes['class'])}{$extraAttributes['class']}{/if}"
+      {foreach $extraAttributes as $key => $value}
+        {if $key != 'class'}
+          {$key}="{$value}"
+        {/if}
+      {/foreach}
+      {if !empty($icon.viewbox)}
+        viewBox="{$icon.viewbox}"
+      {/if}
+    >
+      <use xlink:href="#{$icon.name}"></use>
+    </svg>
+  {/if}
+{/function}
+
+{assign
+  var=externalSvgFileUrl
+  value="`$urls.theme_assets`resources/icons-sprite.svg"
+  scope="global"
+}
+
+{*
+  External svg file can be preloaded just like fonts
+  but be aware if you are using cdn you won't be able to use it
+  due to security reasons
+  You should find better way to build this url forexample inside module
+*}
+
+<link rel="preload" as="image" href="{$externalSvgFileUrl}" />
+
+{assign
+  var=iconsMapSvgExternal
+  value=[
+    "cart" => [
+      "name" => "shopping_cart",
+      "viewbox" => "0 -960 960 960"
+    ]
+  ]
+  scope="global"
+}
+
+{** DIFFERENT NAME ONLY FOR POC TO DISPLAY POSIBILITES **}
+{function renderThemeIconSvgExternal iconName="" extraAttributes=[]}
+  {if $iconName && !empty($iconsMapSvgExternal[$iconName])}
+    {$icon = $iconsMapSvgExternal[$iconName]}
+
+    <svg
+      class="svg-icon {if !empty($extraAttributes['class'])}{$extraAttributes['class']}{/if}"
+      {foreach $extraAttributes as $key => $value}
+          {if $key != 'class' && $value}
+              {$key}="{$value}"
+          {/if}
+      {/foreach}
+      {if !empty($icon.viewbox)}
+        viewBox="{$icon.viewbox}"
+      {/if}
+    >
+      <use xlink:href="{$externalSvgFileUrl}#{$icon.name}"></use>
+    </svg>
+  {/if}
+{/function}
+