Rekin updated Icons

.prettierrc

@@ -0,0 +1,8 @@
+{
+	"singleQuote": true,
+	"jsxSingleQuote": true,
+	"semi": false,
+	"tabWidth": 4,
+	"useTabs": true,
+	"printWidth": 150
+}

README.md

@@ -30,7 +30,7 @@ yarn
 3. Now build it.
 
 ```sh
-yarn build
+t 
 ```
 
 ## Contributors

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@aftershootco/unicorn-icons",
-	"version": "1.0.12",
+	"version": "1.1.43",
 	"description": "",
 	"author": "AfterShoot",
 	"license": "ISC",
@@ -19,36 +19,36 @@
 		"react-dom": "^18.2.0"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.20.2",
-		"@rollup/plugin-babel": "^6.0.2",
-		"@rollup/plugin-commonjs": "^23.0.2",
+		"@babel/core": "^7.20.7",
+		"@rollup/plugin-babel": "^6.0.3",
+		"@rollup/plugin-commonjs": "^24.0.0",
 		"@rollup/plugin-node-resolve": "^15.0.1",
-		"@rollup/plugin-typescript": "^9.0.2",
+		"@rollup/plugin-typescript": "^10.0.1",
 		"@rollup/plugin-url": "^8.0.1",
 		"@svgr/rollup": "^6.5.1",
-		"@types/react": "^18.0.25",
-		"@types/react-dom": "^18.0.9",
+		"@types/react": "^18.0.26",
+		"@types/react-dom": "^18.0.10",
 		"autoprefixer": "^10.4.13",
 		"babel-loader": "^9.1.0",
-		"css-loader": "^6.7.2",
+		"css-loader": "^6.7.3",
 		"husky": "^8.0.2",
 		"node-sass": "^8.0.0",
-		"postcss": "^8.4.19",
+		"postcss": "^8.4.20",
 		"postcss-flexbugs-fixes": "^5.0.2",
 		"postcss-url": "^10.1.3",
-		"rollup": "^3.3.0",
-		"rollup-plugin-dts": "^5.0.0",
+		"rollup": "^3.9.0",
+		"rollup-plugin-dts": "^5.1.0",
 		"rollup-plugin-images": "^1.0.0",
 		"rollup-plugin-peer-deps-external": "^2.2.4",
 		"rollup-plugin-postcss": "^4.0.2",
-		"rollup-plugin-scss": "^3.0.0",
+		"rollup-plugin-scss": "^4.0.0",
 		"rollup-plugin-svg": "^2.0.0",
 		"rollup-plugin-svg-import": "^1.6.0",
 		"rollup-plugin-terser": "^7.0.2",
 		"sass-loader": "^13.2.0",
 		"style-loader": "^3.3.1",
 		"tslib": "^2.4.1",
-		"typescript": "^4.8.4",
+		"typescript": "^4.9.4",
 		"webpack": "^5.75.0"
 	},
 	"files": [

src/Icons/Reskin/AddFolderIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+const AddFolderIcon: React.FC<React.HtmlHTMLAttributes<any>> = (props) => {
+	return (
+		<svg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+			<path
+				d='M26.616 18.377v5.6a2.8 2.8 0 0 1-2.8 2.8h-19.6a2.8 2.8 0 0 1-2.8-2.8v-5.6'
+				stroke='#1DA0BC'
+				stroke-width='2'
+				stroke-linecap='round'
+				stroke-linejoin='round'
+			/>
+			<path d='m7.015 11.377 7 7 7-7m-6.999 6.999v-16.8' stroke='#fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' />
+		</svg>
+	)
+}
+
+export default React.memo(AddFolderIcon)

src/Icons/Reskin/AfterShootLogo.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+
+const AfterShootLogo: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+	return (
+		<svg width='41' height='38' viewBox='0 0 41 38' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+			<path
+				d='M26.2932 37.913C24.5097 37.8888 22.7369 37.632 21.0189 37.1489C17.7957 36.2612 14.6079 34.6638 12.7064 32.9806C9.50811 30.1522 8.15524 26.1201 9.34185 22.9484C10.0588 21.0286 12.3094 17.8108 19.3169 17.8108H29.6369C29.3103 16.5517 28.9205 15.31 28.469 14.0906C25.9607 7.35987 22.3323 3.9474 17.6835 3.9474C14.8261 3.9474 12.4383 5.44847 10.383 8.53644C8.59164 11.2308 7.1307 15.0474 6.04384 19.8792C4.1465 28.3204 4.08209 36.9186 4.08209 37.0044L0.25 36.9877C0.25 36.6213 0.312337 27.9289 2.29488 19.0816C3.48358 13.7724 5.12947 9.50994 7.18475 6.40941C9.96737 2.22232 13.5002 0.0869141 17.6835 0.0869141C24.0052 0.0869141 28.974 4.46032 32.0559 12.734C32.6659 14.394 33.1766 16.0893 33.5854 17.8108H40.25V21.6713H34.3689C34.8232 24.3051 35.0719 26.9706 35.1128 29.6435C35.1128 33.146 33.5792 35.7734 30.7945 37.0442C29.3834 37.6848 27.8082 37.913 26.2932 37.913ZM19.3231 21.6713C15.8838 21.6713 13.5522 22.6322 12.9266 24.3092C12.3011 25.9861 13.2571 28.3309 15.2313 30.079C16.7047 31.3791 19.3709 32.6938 22.0289 33.4286C24.9674 34.2367 27.5858 34.2661 29.213 33.5312C30.1004 33.1272 31.2807 32.2751 31.2807 29.6477C31.2282 26.9709 30.9564 24.3031 30.4682 21.6713H19.3231Z'
+				fill='url(#paint0_angular_13276_22209)'
+			/>
+			<defs>
+				<radialGradient
+					id='paint0_angular_13276_22209'
+					cx='0'
+					cy='0'
+					r='1'
+					gradientUnits='userSpaceOnUse'
+					gradientTransform='translate(22.6122 25.8341) rotate(-165.747) scale(23.8848 21.5005)'
+				>
+					<stop stop-color='#7E68B0' />
+					<stop offset='0.184461' stop-color='#008AD2' />
+					<stop offset='0.353157' stop-color='#21B24B' />
+					<stop offset='0.519702' stop-color='#FFC40E' />
+					<stop offset='0.687523' stop-color='#F6821F' />
+					<stop offset='0.853193' stop-color='#EF4023' />
+					<stop offset='1' stop-color='#7E68B0' />
+				</radialGradient>
+			</defs>
+		</svg>
+	)
+}
+
+export default React.memo(AfterShootLogo)

src/Icons/Reskin/AftershootEditsIcon.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+
+const AftershootEditsIcon: React.FC<React.SVGProps<SVGSVGElement>> = React.memo((props) => {
+	return (
+		<svg width='156' height='13' viewBox='0 0 156 13' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+			<path
+				d='M64.024 3.48c1.174 0 2.072.334 2.763 1.004.69.669 1.105 1.673 1.105 3.011v5.153h-2.694V7.897c0-.736-.138-1.272-.483-1.606-.346-.335-.76-.536-1.382-.536-.69 0-1.243.201-1.657.603-.415.401-.622 1.003-.622 1.807v4.483H58.36V.201h2.694v4.35c.345-.335.76-.603 1.312-.803a4.778 4.778 0 0 1 1.658-.268Zm10.434 9.303c-.967 0-1.865-.201-2.625-.603-.76-.401-1.381-.937-1.796-1.673-.414-.736-.69-1.472-.69-2.41 0-.936.207-1.672.69-2.408.415-.737 1.036-1.272 1.796-1.673.76-.402 1.658-.603 2.625-.603.967 0 1.865.201 2.624.603.76.401 1.382.936 1.796 1.673.415.736.69 1.472.69 2.409 0 .937-.206 1.673-.69 2.41-.414.735-1.036 1.27-1.796 1.672-.76.402-1.588.603-2.624.603Zm0-2.142c.69 0 1.243-.2 1.727-.67.483-.468.69-1.07.69-1.806s-.207-1.339-.69-1.807c-.415-.469-1.037-.67-1.727-.67-.69 0-1.243.201-1.727.67-.483.468-.69 1.07-.69 1.807 0 .736.207 1.338.69 1.807.484.401 1.036.669 1.727.669Zm11.528 2.142c-.967 0-1.865-.201-2.624-.603-.76-.401-1.382-.937-1.796-1.673-.415-.736-.69-1.472-.69-2.41 0-.936.206-1.672.69-2.408.414-.737 1.036-1.272 1.796-1.673.76-.402 1.657-.603 2.624-.603.967 0 1.865.201 2.625.603.76.401 1.381.936 1.796 1.673.414.736.69 1.472.69 2.409 0 .937-.207 1.673-.69 2.41-.415.735-1.036 1.27-1.796 1.672-.76.402-1.658.603-2.625.603Zm0-2.142c.691 0 1.243-.2 1.727-.67.484-.468.69-1.07.69-1.806s-.207-1.339-.69-1.807c-.414-.469-1.036-.67-1.727-.67-.69 0-1.243.201-1.726.67-.484.468-.691 1.07-.691 1.807 0 .736.207 1.338.69 1.807.415.401 1.037.669 1.727.669ZM9.6 10.106H3.938l-1.105 2.543H0L5.387.87H8.15l5.387 11.779h-2.97l-.966-2.543ZM8.704 8.03 6.769 3.547 4.835 8.031h3.868Zm8.354-4.215h2.417v2.007h-2.348v6.827h-2.694V5.822h-1.45V3.815h1.45v-.402c0-1.004.346-1.874.967-2.476C16.022.335 16.92 0 18.094 0c.414 0 .76.067 1.174.134.345.067.69.2.898.334l-.69 1.874c-.346-.2-.691-.334-1.106-.334-.829 0-1.243.468-1.243 1.338v.469h-.07Zm20.582 4.35s0 .268-.07.736h-7.044c.138.535.414 1.004.898 1.338.483.335 1.036.469 1.795.469a4.14 4.14 0 0 0 1.313-.2c.414-.135.76-.402 1.036-.67l1.45 1.54c-.898 1.003-2.141 1.472-3.868 1.472-1.036 0-2.003-.201-2.762-.603-.83-.401-1.45-.937-1.865-1.673-.415-.736-.691-1.472-.691-2.41 0-.87.207-1.672.622-2.408.414-.737 1.036-1.272 1.795-1.674.76-.401 1.589-.602 2.556-.602.898 0 1.727.2 2.486.602.76.402 1.313.937 1.727 1.674.414.602.622 1.472.622 2.409ZM32.805 5.42c-.622 0-1.105.2-1.52.535-.414.335-.69.803-.76 1.406h4.56c-.07-.603-.346-1.004-.76-1.339-.415-.401-.898-.602-1.52-.602Zm8.84-.601c.345-.469.76-.737 1.312-1.004a5.528 5.528 0 0 1 1.934-.335v2.41c-.276 0-.483-.068-.621-.068-.76 0-1.382.201-1.796.67-.414.401-.69 1.07-.69 1.874v4.283H39.09V3.614h2.555v1.205ZM51.8 12.85a9.503 9.503 0 0 1-2.762-.402c-.898-.268-1.589-.603-2.141-1.004l.966-2.075c.553.402 1.105.67 1.865.87.691.2 1.45.335 2.141.335.83 0 1.382-.134 1.796-.335.415-.268.553-.535.553-.937a.816.816 0 0 0-.346-.67c-.207-.2-.483-.334-.898-.468-.345-.133-.828-.267-1.45-.401-.898-.2-1.658-.402-2.28-.67a3.338 3.338 0 0 1-1.519-1.003c-.414-.469-.621-1.071-.621-1.874 0-.67.207-1.272.552-1.874a4.356 4.356 0 0 1 1.727-1.338c.76-.335 1.727-.469 2.832-.469.76 0 1.52.067 2.279.268.76.2 1.381.468 1.934.803L55.53 3.68c-1.105-.602-2.21-.936-3.384-.936-.76 0-1.382.133-1.727.401-.345.268-.553.602-.553 1.004s.208.736.622.937c.414.2 1.105.401 2.003.602.898.201 1.658.402 2.28.67.62.2 1.104.535 1.519 1.003.414.469.621 1.071.621 1.874 0 .67-.207 1.272-.621 1.874a4.355 4.355 0 0 1-1.727 1.338 9.99 9.99 0 0 1-2.763.402Zm-24.589-2.075v2.007h-2.9c-1.52 0-2.695-1.204-2.695-2.61v-4.35h-1.45V3.815h1.45V1.606h2.694v2.209h2.348v2.007H24.31v3.815c0 .602.553 1.138 1.174 1.138h1.727Zm71.07-.218v2.008h-2.97c-1.52 0-2.694-1.204-2.694-2.61v-4.35h-1.45V3.597h1.45V1.39h2.694v2.208h2.348v2.008h-2.348V9.42c0 .602.553 1.137 1.174 1.137h1.796Z'
+				fill='#fff'
+			/>
+			<path d='M108.281 9.903V7.146h5.53V5.003h-5.53V2.416h6.262V.204h-9.001v11.91h9.222v-2.21h-6.483Z' fill='url(#a)' />
+			<path
+				d='M116.957 12.115h5.411c3.896 0 6.568-2.348 6.568-5.955 0-3.608-2.672-5.956-6.568-5.956h-5.411v11.91Zm2.757-2.263V2.467h2.518c2.365 0 3.913 1.412 3.913 3.693 0 2.28-1.548 3.692-3.913 3.692h-2.518Z'
+				fill='url(#b)'
+			/>
+			<path d='M131.015 12.115h2.756V.205h-2.756v11.91Z' fill='url(#c)' />
+			<path d='M139.065 12.115h2.756V2.45h3.812V.204h-10.379V2.45h3.811v9.665Z' fill='url(#d)' />
+			<path
+				d='M150.946 12.32c3.404 0 5.054-1.702 5.054-3.693 0-4.373-6.925-2.859-6.925-5.054 0-.748.629-1.361 2.263-1.361 1.055 0 2.195.306 3.301.936l.851-2.093C154.384.357 152.852 0 151.355 0c-3.386 0-5.02 1.685-5.02 3.71 0 4.423 6.926 2.892 6.926 5.12 0 .733-.664 1.277-2.297 1.277-1.43 0-2.927-.51-3.931-1.242l-.936 2.076c1.055.817 2.961 1.378 4.849 1.378Z'
+				fill='url(#e)'
+			/>
+			<defs>
+				<linearGradient id='a' x1='104.832' y1='10.277' x2='156.716' y2='10.277' gradientUnits='userSpaceOnUse'>
+					<stop stop-color='#FF5757' />
+					<stop offset='.51' stop-color='#FC8D26' />
+					<stop offset='1' stop-color='#FFC657' />
+				</linearGradient>
+				<linearGradient id='b' x1='104.832' y1='10.277' x2='156.716' y2='10.277' gradientUnits='userSpaceOnUse'>
+					<stop stop-color='#FF5757' />
+					<stop offset='.51' stop-color='#FC8D26' />
+					<stop offset='1' stop-color='#FFC657' />
+				</linearGradient>
+				<linearGradient id='c' x1='104.832' y1='10.277' x2='156.716' y2='10.277' gradientUnits='userSpaceOnUse'>
+					<stop stop-color='#FF5757' />
+					<stop offset='.51' stop-color='#FC8D26' />
+					<stop offset='1' stop-color='#FFC657' />
+				</linearGradient>
+				<linearGradient id='d' x1='104.832' y1='10.277' x2='156.716' y2='10.277' gradientUnits='userSpaceOnUse'>
+					<stop stop-color='#FF5757' />
+					<stop offset='.51' stop-color='#FC8D26' />
+					<stop offset='1' stop-color='#FFC657' />
+				</linearGradient>
+				<linearGradient id='e' x1='104.832' y1='10.277' x2='156.716' y2='10.277' gradientUnits='userSpaceOnUse'>
+					<stop stop-color='#FF5757' />
+					<stop offset='.51' stop-color='#FC8D26' />
+					<stop offset='1' stop-color='#FFC657' />
+				</linearGradient>
+			</defs>
+		</svg>
+	)
+})
+
+export default AftershootEditsIcon

src/Icons/Reskin/AlertIcon.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+const AlertIcon: React.FC<React.HtmlHTMLAttributes<any>> = (props) => {
+  return (
+    <svg
+      width='58'
+      height='52'
+      viewBox='0 0 58 52'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M29 38V38.03M29 20V26V20Z'
+        stroke='#D83D3D'
+        stroke-width='3'
+        stroke-linecap='round'
+        stroke-linejoin='round'
+      />
+      <path
+        d='M8.00155 50H50.0015C50.9805 49.9932 51.9428 49.7469 52.8047 49.2827C53.6666 48.8184 54.4018 48.1504 54.9462 47.3368C55.4906 46.5231 55.8276 45.5887 55.9279 44.6149C56.0282 43.6411 55.8887 42.6575 55.5215 41.75L34.2215 5.00005C33.7027 4.06224 32.9421 3.28054 32.0188 2.73621C31.0955 2.19187 30.0433 1.90479 28.9715 1.90479C27.8998 1.90479 26.8476 2.19187 25.9243 2.73621C25.001 3.28054 24.2404 4.06224 23.7215 5.00005L2.42155 41.75C2.06137 42.6368 1.91855 43.5968 2.005 44.55C2.09145 45.5031 2.40467 46.4218 2.9185 47.2293C3.43234 48.0367 4.13188 48.7095 4.95873 49.1915C5.78557 49.6736 6.71573 49.9508 7.67155 50'
+        stroke='#D83D3D'
+        stroke-width='3'
+        stroke-linecap='round'
+        stroke-linejoin='round'
+      />
+    </svg>
+  );
+};
+
+export default React.memo(AlertIcon);

src/Icons/Reskin/AlertIcon2.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+const AlertIcon2: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+	return (
+		<svg width='54' height='46' viewBox='0 0 54 46' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+			<path
+				d='M22.204 2.446.68 38.376A5.082 5.082 0 0 0 5.026 46h43.046a5.083 5.083 0 0 0 4.345-7.623L30.894 2.447a5.081 5.081 0 0 0-8.69 0Z'
+				fill='#1DA0BC'
+			/>
+			<path d='M26.552 15.507V25.67m0 10.165h.025' stroke='#fff' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' />
+		</svg>
+	)
+}
+
+export default AlertIcon2

src/Icons/Reskin/AppleIcon.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+const AppleIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+	return (
+		<svg width='17' height='20' viewBox='0 0 17 20' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+			<path
+				d='M13.934 10.57c-.01-1.64.727-2.876 2.215-3.787-.832-1.201-2.09-1.863-3.75-1.99-1.572-.125-3.29.923-3.92.923-.665 0-2.187-.88-3.384-.88C2.625 4.875 0 6.822 0 10.783c0 1.17.212 2.38.637 3.625.567 1.64 2.613 5.656 4.747 5.591 1.116-.026 1.905-.798 3.357-.798 1.41 0 2.139.798 3.383.798 2.153-.031 4.004-3.682 4.543-5.326-2.888-1.373-2.733-4.02-2.733-4.104Zm-2.506-7.332C12.638 1.79 12.528.474 12.492 0c-1.069.062-2.304.733-3.007 1.558-.775.884-1.23 1.978-1.133 3.211 1.154.089 2.208-.51 3.076-1.531Z'
+				fill='#fff'
+			/>
+		</svg>
+	)
+}
+
+export default React.memo(AppleIcon)

src/Icons/ArrowBackIcon.tsx → src/Icons/Reskin/ArrowBackIcon.tsx

@@ -2,14 +2,7 @@ import React from 'react'
 
 const ArrowBackIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
 	return (
-		<svg
-			xmlns='http://www.w3.org/2000/svg'
-			height='24px'
-			viewBox='0 0 24 24'
-			width='24px'
-			fill='#FFFFFF'
-			{...props}
-		>
+		<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='#FFFFFF' {...props}>
 			<path d='m22.35 38.95-13.9-13.9q-.25-.25-.35-.5Q8 24.3 8 24q0-.3.1-.55.1-.25.35-.5L22.4 9q.4-.4 1-.4t1.05.45q.45.45.45 1.05 0 .6-.45 1.05L13.1 22.5h24.8q.65 0 1.075.425.425.425.425 1.075 0 .65-.425 1.075-.425.425-1.075.425H13.1l11.4 11.4q.4.4.4 1t-.45 1.05q-.45.45-1.05.45-.6 0-1.05-.45Z' />
 		</svg>
 	)

src/Icons/ArrowDownIcon.tsx → src/Icons/Reskin/ArrowDownIcon.tsx

@@ -2,14 +2,7 @@ import React from 'react'
 
 const ArrowDownIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
 	return (
-		<svg
-			xmlns='http://www.w3.org/2000/svg'
-			height='24px'
-			viewBox='0 0 24 24'
-			width='24px'
-			fill='#FFFFFF'
-			{...props}
-		>
+		<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='#FFFFFF' {...props}>
 			<path d='M0 0h24v24H0V0z' fill='none' />
 			<path d='M11 5v11.17l-4.88-4.88c-.39-.39-1.03-.39-1.42 0-.39.39-.39 1.02 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0l6.59-6.59c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L13 16.17V5c0-.55-.45-1-1-1s-1 .45-1 1z' />
 		</svg>

src/Icons/Reskin/ArrowDownIcon2.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+const ArrowDownIcon2: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+	return (
+		<svg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+			<path
+				d='M16.94 1.412 9 9.354 1.059 1.412'
+				stroke='#fff'
+				stroke-opacity='.8'
+				stroke-width='1.5'
+				stroke-linecap='round'
+				stroke-linejoin='round'
+			/>
+		</svg>
+	)
+}
+
+export default React.memo(ArrowDownIcon2)

src/Icons/ArrowForwardIcon.tsx → src/Icons/Reskin/ArrowForwardIcon.tsx

@@ -2,14 +2,7 @@ import React from 'react'
 
 const ArrowForwardIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
 	return (
-		<svg
-			xmlns='http://www.w3.org/2000/svg'
-			height='24px'
-			viewBox='0 0 24 24'
-			width='24px'
-			fill='#FFFFFF'
-			{...props}
-		>
+		<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='#FFFFFF' {...props}>
 			<path d='M22.95 38.9q-.4-.4-.4-1.05t.4-1.05l11.3-11.3H9.5q-.65 0-1.075-.425Q8 24.65 8 24q0-.65.425-1.075Q8.85 22.5 9.5 22.5h24.75l-11.3-11.3q-.4-.4-.4-1.075 0-.675.4-1.075.4-.4 1.05-.4t1.05.4l13.9 13.9q.25.25.35.5.1.25.1.55 0 .25-.1.525t-.35.525l-13.9 13.9q-.4.4-1.05.375-.65-.025-1.05-.425Z' />
 		</svg>
 	)

src/Icons/Reskin/ArrowIcon.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const ArrowIcon: React.FC<React.SVGProps<SVGSVGElement>> = React.memo((props) => {
+	return (
+		<svg width='6' height='12' viewBox='0 0 6 12' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+			<path d='M0.25 11.5L5.75 6L0.25 0.5L0.25 11.5Z' fill='#777777' />
+		</svg>
+	)
+})
+
+export default ArrowIcon

src/Icons/Reskin/ArrowLeftIcon.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+const ArrowLeftIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+	return (
+		<svg width='10' height='18' viewBox='0 0 10 18' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+			<path
+				d='M8.706 16.94.765 9l7.94-7.941'
+				stroke='#fff'
+				stroke-opacity='.8'
+				stroke-width='1.5'
+				stroke-linecap='round'
+				stroke-linejoin='round'
+			/>
+		</svg>
+	)
+}
+
+export default React.memo(ArrowLeftIcon)

src/Icons/Reskin/ArrowRightIcon.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+const ArrowRightIcon: React.FC<React.HtmlHTMLAttributes<any>> = (props) => {
+	return (
+		<svg width='19' height='16' viewBox='0 0 19 16' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+			<path d='m10.8 15 7-7-7-7m7 7H1' stroke='#fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' />
+		</svg>
+	)
+}
+
+export default React.memo(ArrowRightIcon)

src/Icons/Reskin/ArrowRightIosIcon.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+const ArrowRightIosIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+	return (
+		<svg width='11' height='18' viewBox='0 0 11 18' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+			<path
+				d='M1.53 1.059 9.47 9l-7.94 7.941'
+				stroke='#fff'
+				stroke-opacity='.8'
+				stroke-width='1.5'
+				stroke-linecap='round'
+				stroke-linejoin='round'
+			/>
+		</svg>
+	)
+}
+
+export default React.memo(ArrowRightIosIcon)

src/Icons/ArrowUpIcon.tsx → src/Icons/Reskin/ArrowUpIcon.tsx

@@ -2,14 +2,7 @@ import React from 'react'
 
 const ArrowUpIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
 	return (
-		<svg
-			xmlns='http://www.w3.org/2000/svg'
-			height='24px'
-			viewBox='0 0 24 24'
-			width='24px'
-			fill='#FFFFFF'
-			{...props}
-		>
+		<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='#FFFFFF' {...props}>
 			<path d='M0 0h24v24H0V0z' fill='none' />
 			<path d='M13 19V7.83l4.88 4.88c.39.39 1.03.39 1.42 0 .39-.39.39-1.02 0-1.41l-6.59-6.59c-.39-.39-1.02-.39-1.41 0l-6.6 6.58c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L11 7.83V19c0 .55.45 1 1 1s1-.45 1-1z' />
 		</svg>