diff --git a/com.twin.app.shoptime/src/components/TabLayout/iconComponents/CartIcon.jsx b/com.twin.app.shoptime/src/components/TabLayout/iconComponents/CartIcon.jsx
index 3461408e..17ca49c4 100644
--- a/com.twin.app.shoptime/src/components/TabLayout/iconComponents/CartIcon.jsx
+++ b/com.twin.app.shoptime/src/components/TabLayout/iconComponents/CartIcon.jsx
@@ -1,12 +1,13 @@
 import React from "react";
+import { scaleW } from "../../../utils/helperMethods";
 
 import { convertThemeColor } from "./convertThemeColor";
 
 const CartIcon = ({ iconType = "normal" }) => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48">
+    <svg xmlns="http://www.w3.org/2000/svg" width={scaleW(48)} height={scaleW(48)} viewBox="0 0 48 48">
       <path
-        fill-rule="evenodd"
+        fillRule="evenodd"
         fill={convertThemeColor(iconType)}
         d="M5.501 5.882c-.832 0-1.508.68-1.508 1.52s.676 1.52 1.508 1.52h2.663a1.51 1.51 0 0 1 1.476 1.216l4.544 22.494c.429 2.124 2.281 3.651 4.431 3.651h.292a3.041 3.041 0 0 0-1.347 2.532c0 1.679 1.348 3.04 3.014 3.04 1.666 0 3.015-1.361 3.015-3.04a3.042 3.042 0 0 0-1.348-2.532h10.734a3.044 3.044 0 0 0-1.347 2.532c0 1.679 1.349 3.04 3.014 3.04 1.665 0 3.015-1.361 3.015-3.04a3.042 3.042 0 0 0-1.348-2.532h1.348c.832 0 1.507-.681 1.507-1.521 0-.84-.675-1.52-1.507-1.52H18.615a1.508 1.508 0 0 1-1.476-1.217l-.573-2.837h22.136a3.022 3.022 0 0 0 2.957-2.443l2.09-10.545c.235-1.181-.599-2.307-1.788-2.415l-29.045-2.663-.322-1.59c-.429-2.124-2.281-3.65-4.43-3.65H5.501z"
       />
diff --git a/com.twin.app.shoptime/src/components/TabLayout/iconComponents/CategoryIcon.jsx b/com.twin.app.shoptime/src/components/TabLayout/iconComponents/CategoryIcon.jsx
index 69313b92..b7c0fc4c 100644
--- a/com.twin.app.shoptime/src/components/TabLayout/iconComponents/CategoryIcon.jsx
+++ b/com.twin.app.shoptime/src/components/TabLayout/iconComponents/CategoryIcon.jsx
@@ -1,12 +1,13 @@
 import React from "react";
+import { scaleW } from "../../../utils/helperMethods";
 
 import { convertThemeColor } from "./convertThemeColor";
 
 const CategoryIcon = ({ iconType = "normal" }) => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48">
+    <svg xmlns="http://www.w3.org/2000/svg" width={scaleW(48)} height={scaleW(48)} viewBox="0 0 48 48">
       <path
-        fill-rule="evenodd"
+        fillRule="evenodd"
         fill={convertThemeColor(iconType)}
         d="M11 7.1c-1.657 0-3.9 2.243-3.9 3.9v8.1c0 2.556 2.243 3 3.9 3h8.1c2.557 0 3.9-.444 3.9-3V11c0-1.657-1.343-3.9-3.9-3.9H11zm0 18.899c-1.657 0-3.9 1.344-3.9 3.001v8.1c0 2.556 2.243 3 3.9 3h8.1c2.557 0 3.9-.444 3.9-3V29c0-1.657-1.343-3.001-3.9-3.001H11zM25.999 29A3.002 3.002 0 0 1 29 25.999h8.1c2.557 0 3 1.344 3 3.001v8.1c0 2.556-.443 3-3 3H29c-1.657 0-3.001-.444-3.001-3V29zm7.501-6.9c-.829 0-1.501.172-1.501-.727v-3.374c0-.551-.447-1.899-1.899-1.899h-2.474c-.899 0-1.627.228-1.627-.6s.728-1.501 1.627-1.501H30.1c1.452 0 1.899-.447 1.899-1.899V9.626c0-.898.672-2.526 1.501-2.526.829 0 1.501 1.628 1.501 2.526V12.1c0 1.452.447 1.899.099 1.899h4.274c.898 0 .726.673.726 1.501 0 .828.172.6-.726.6H35.1c.348 0-.099 1.348-.099 1.899v3.374c0 .899-.672.727-1.501.727z"
       />
diff --git a/com.twin.app.shoptime/src/components/TabLayout/iconComponents/FeaturedBrandIcon.jsx b/com.twin.app.shoptime/src/components/TabLayout/iconComponents/FeaturedBrandIcon.jsx
index 2ffd8e8a..680d1b6c 100644
--- a/com.twin.app.shoptime/src/components/TabLayout/iconComponents/FeaturedBrandIcon.jsx
+++ b/com.twin.app.shoptime/src/components/TabLayout/iconComponents/FeaturedBrandIcon.jsx
@@ -1,12 +1,12 @@
 import React from "react";
-
+import { scaleW } from "../../../utils/helperMethods";
 import { convertThemeColor } from "./convertThemeColor";
 
 const FeaturedBrandIcon = ({ iconType = "normal" }) => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48">
+    <svg xmlns="http://www.w3.org/2000/svg" width={scaleW(48)} height={scaleW(48)} viewBox="0 0 48 48">
       <path
-        fill-rule="evenodd"
+        fillRule="evenodd"
         fill={convertThemeColor(iconType)}
         d="M42.1 17.999c0 2.762-2.672 5.166-5.434 5.166s-5.833-2.238-5.833-4.999c0 2.761-4.071 4.999-6.833 4.999-2.761 0-6.833-2.238-6.833-4.999 0 2.761-3.072 4.999-5.834 4.999-2.761 0-7.233-2.404-7.233-5.166 0-.284.854-.727 0-1.899l3.772-8.406C7.944 6.831 9.133 5.1 10.001 5.1h27.998c.869 0 2.057 1.731 2.129 2.594L42.1 16.1c.945 1.172 0 1.615 0 1.899zm-24.933 5.759c1.327 1.187 4.912 1.91 6.833 1.91 1.922 0 5.506-.723 6.833-1.91 1.327 1.187 3.912 1.91 5.833 1.91a7.473 7.473 0 0 0 3.334-.78v13.445c0 1.841-1.158 2.767-3.9 2.767H29v-9c0-.021-1.079-2-2.9-2h-5.101c-.919 0-1.999 1.979-1.999 2v9h-8c-1.841 0-3.001-.926-3.001-2.767V24.888a7.476 7.476 0 0 0 3.334.78c1.922 0 4.506-.723 5.834-1.91z"
       />
diff --git a/com.twin.app.shoptime/src/components/TabLayout/iconComponents/HomeIcon.jsx b/com.twin.app.shoptime/src/components/TabLayout/iconComponents/HomeIcon.jsx
index ae747884..6d6106e5 100644
--- a/com.twin.app.shoptime/src/components/TabLayout/iconComponents/HomeIcon.jsx
+++ b/com.twin.app.shoptime/src/components/TabLayout/iconComponents/HomeIcon.jsx
@@ -1,13 +1,13 @@
 import React from "react";
-
+import { scaleW } from "../../../utils/helperMethods";
 import { convertThemeColor } from "./convertThemeColor";
 
 const HomeIcon = ({ iconType = "normal" }) => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48">
+    <svg xmlns="http://www.w3.org/2000/svg" width={scaleW(48)} height={scaleW(48)} viewBox="0 0 48 48">
       <path opacity=".302" fill="none" d="M0 0h48v48H0V0z" />
       <path
-        fill-rule="evenodd"
+        fillRule="evenodd"
         fill={convertThemeColor(iconType)}
         d="M8.827 16.606a4.039 4.039 0 0 0-1.828 3.383V36.95c0 2.226 1.792 4.029 4.002 4.029H37c2.21 0 4-1.803 4-4.029V19.989c0-1.367-.687-2.64-1.827-3.383L25.087 7.425a1.988 1.988 0 0 0-2.173 0L8.827 16.606zM29.001 40.1v-9.23A2.007 2.007 0 0 0 27 28.856h-6.9c-.204 0-1.1.901-1.1 2.014v9.23"
       />
diff --git a/com.twin.app.shoptime/src/components/TabLayout/iconComponents/HotPicksIcon.jsx b/com.twin.app.shoptime/src/components/TabLayout/iconComponents/HotPicksIcon.jsx
index b772129b..9f50c204 100644
--- a/com.twin.app.shoptime/src/components/TabLayout/iconComponents/HotPicksIcon.jsx
+++ b/com.twin.app.shoptime/src/components/TabLayout/iconComponents/HotPicksIcon.jsx
@@ -1,12 +1,12 @@
 import React from "react";
-
+import { scaleW } from "../../../utils/helperMethods";
 import { convertThemeColor } from "./convertThemeColor";
 
 const HotPicksIcon = ({ iconType = "normal" }) => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48">
+    <svg xmlns="http://www.w3.org/2000/svg" width={scaleW(48)} height={scaleW(48)} viewBox="0 0 48 48">
       <path
-        fill-rule="evenodd"
+        fillRule="evenodd"
         fill={convertThemeColor(iconType)}
         d="M22.723 42.112a2.016 2.016 0 0 1-2.852 0L5.614 27.856a2.018 2.018 0 0 1 0-2.852l19.962-19.96 15.695 1.44 1.413 15.669-19.961 19.959zm10.762-27.866a3.78 3.78 0 0 0-5.344 5.345 3.78 3.78 0 0 0 5.344-5.345z"
       />
diff --git a/com.twin.app.shoptime/src/components/TabLayout/iconComponents/MyPageIcon.jsx b/com.twin.app.shoptime/src/components/TabLayout/iconComponents/MyPageIcon.jsx
index 85c4a170..a7ee18ee 100644
--- a/com.twin.app.shoptime/src/components/TabLayout/iconComponents/MyPageIcon.jsx
+++ b/com.twin.app.shoptime/src/components/TabLayout/iconComponents/MyPageIcon.jsx
@@ -1,12 +1,12 @@
 import React from "react";
-
+import { scaleW } from "../../../utils/helperMethods";
 import { convertThemeColor } from "./convertThemeColor";
 
 const MyPageIcon = ({ iconType = "normal" }) => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48">
+    <svg xmlns="http://www.w3.org/2000/svg" width={scaleW(48)} height={scaleW(48)} viewBox="0 0 48 48">
       <path
-        fill-rule="evenodd"
+        fillRule="evenodd"
         fill={convertThemeColor(iconType)}
         d="M24 22c4.419 0 7.1-3.582 7.1-8.9 0-3.519-2.681-8-7.1-8-4.418 0-7.999 4.481-7.999 8 0 5.318 3.581 8.9 7.999 8.9zm-6.001 3.999C11.373 25.999 5.1 30.373 5.1 37v1.1c0 2.557 2.243 3 3.9 3h29.1c2.556 0 3-.443 3-3V37c0-6.627-4.473-11.001-11.1-11.001H17.999z"
       />
diff --git a/com.twin.app.shoptime/src/components/TabLayout/iconComponents/OnSaleIcon.jsx b/com.twin.app.shoptime/src/components/TabLayout/iconComponents/OnSaleIcon.jsx
index 0c36eda5..2ebf6707 100644
--- a/com.twin.app.shoptime/src/components/TabLayout/iconComponents/OnSaleIcon.jsx
+++ b/com.twin.app.shoptime/src/components/TabLayout/iconComponents/OnSaleIcon.jsx
@@ -1,13 +1,13 @@
 import React from "react";
-
+import { scaleW } from "../../../utils/helperMethods";
 import { convertThemeColor } from "./convertThemeColor";
 
 const OnSaleIcon = ({ iconType = "normal" }) => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48">
+    <svg xmlns="http://www.w3.org/2000/svg" width={scaleW(48)} height={scaleW(48)} viewBox="0 0 48 48">
       <path opacity=".302" fill="none" d="M0 0h48v48H0V0z" />
       <path
-        fill-rule="evenodd"
+        fillRule="evenodd"
         fill={convertThemeColor(iconType)}
         d="M24 42.999c10.493 0 19.001-8.506 19.001-19.899C43.001 13.506 34.493 5 24 5 13.507 5 5 13.506 5 23.1c0 11.393 8.507 19.899 19 19.899zm-6.147-22.351a2.795 2.795 0 1 0 0-5.588 2.795 2.795 0 0 0 0 5.588zm14.038-2.168a1.676 1.676 0 1 0-2.37-2.371L16.109 29.52a1.676 1.676 0 1 0 2.37 2.371L31.891 18.48zm1.051 11.667a2.794 2.794 0 1 1-5.589-.003 2.794 2.794 0 0 1 5.589.003z"
       />
diff --git a/com.twin.app.shoptime/src/components/TabLayout/iconComponents/SearchIcon.jsx b/com.twin.app.shoptime/src/components/TabLayout/iconComponents/SearchIcon.jsx
index 6135a586..6c5fce4b 100644
--- a/com.twin.app.shoptime/src/components/TabLayout/iconComponents/SearchIcon.jsx
+++ b/com.twin.app.shoptime/src/components/TabLayout/iconComponents/SearchIcon.jsx
@@ -1,13 +1,13 @@
 import React from "react";
-
+import { scaleW } from "../../../utils/helperMethods";
 import { convertThemeColor } from "./convertThemeColor";
 
 const SearchIcon = ({ iconType = "normal" }) => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48">
+    <svg xmlns="http://www.w3.org/2000/svg" width={scaleW(48)} height={scaleW(48)} viewBox="0 0 48 48">
       <path opacity=".302" fill="none" d="M0 0h48v47.1H0V0z" />
       <path
-        fill-rule="evenodd"
+        fillRule="evenodd"
         fill={convertThemeColor(iconType)}
         d="M20.424 5.985c7.973 0 14.438 6.515 14.438 14.552 0 8.036-6.465 14.55-14.438 14.55-7.974 0-14.439-6.514-14.439-14.55 0-8.037 6.465-14.552 14.439-14.552zM35.082 32.209l6.32 6.369a2.012 2.012 0 0 1 0 2.831 1.974 1.974 0 0 1-2.808 0l-6.321-6.369a2.014 2.014 0 0 1 0-2.831 1.975 1.975 0 0 1 2.809 0z"
       />
diff --git a/com.twin.app.shoptime/src/components/TabLayout/iconComponents/TrendingNowIcon.jsx b/com.twin.app.shoptime/src/components/TabLayout/iconComponents/TrendingNowIcon.jsx
index b6cd691b..cdcbdea8 100644
--- a/com.twin.app.shoptime/src/components/TabLayout/iconComponents/TrendingNowIcon.jsx
+++ b/com.twin.app.shoptime/src/components/TabLayout/iconComponents/TrendingNowIcon.jsx
@@ -1,12 +1,12 @@
 import React from "react";
-
+import { scaleW } from "../../../utils/helperMethods";
 import { convertThemeColor } from "./convertThemeColor";
 
 const TrendingNowIcon = ({ iconType = "normal" }) => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48">
+    <svg xmlns="http://www.w3.org/2000/svg" width={scaleW(48)} height={scaleW(48)} viewBox="0 0 48 48">
       <path
-        fill-rule="evenodd"
+        fillRule="evenodd"
         fill={convertThemeColor(iconType)}
         d="m40.657 39.908-5.195-.883a1.091 1.091 0 0 0-1.207.685l-1.82 4.87c-.319.852-1.504.952-1.965.166l-7.221-12.308c.234.009.468.014.703.014 4.536 0 8.641-1.821 11.601-4.76l6.232 10.625c.46.786-.219 1.746-1.128 1.591zM23.951 29.241c-7.215 0-13.065-5.757-13.065-12.858 0-7.102 5.85-12.858 13.065-12.858s13.066 5.756 13.066 12.858c0 7.101-5.851 12.858-13.066 12.858zm4.836-15.436-1.989-.424a1.206 1.206 0 0 1-.785-.56L24.99 11.09c-.463-.782-1.611-.782-2.075 0l-1.024 1.731c-.169.286-.453.49-.783.56l-1.989.424c-.899.191-1.254 1.266-.641 1.941l1.357 1.494c.224.247.332.576.299.905l-.205 1.994c-.093.901.837 1.564 1.677 1.199l1.863-.807c.309-.133.66-.133.968 0l1.863.807c.84.365 1.771-.298 1.677-1.199l-.205-1.994a1.173 1.173 0 0 1 .299-.905l1.357-1.494c.612-.675.258-1.75-.641-1.941zM19.06 31.719l3.006 5.126-4.633 7.898c-.461.787-1.647.687-1.964-.165l-1.819-4.87a1.093 1.093 0 0 0-1.208-.686l-5.195.883c-.91.156-1.59-.804-1.128-1.591l6.231-10.622a16.372 16.372 0 0 0 6.71 4.027z"
       />