fix(icons): Minify icons with svgo

compassion-global-experience · Mar 24, 2021 · 22267c9 · 22267c9
1 parent 531649b
commit 22267c9
Show file tree

Hide file tree

Showing 48 changed files with 190 additions and 276 deletions.
diff --git a/packages/components/react-web/package.json b/packages/components/react-web/package.json
@@ -24,7 +24,8 @@
     "prop-types": "^15.7.2",
     "react": "^16.0.0",
     "react-file-drop": "^3.1.2",
-    "react-number-format": "^4.4.3"
+    "react-number-format": "^4.4.3",
+    "svgo": "^2.2.2"
   },
   "repository": {
     "type": "git",

diff --git a/packages/components/react-web/src/Icon/buildIconComponents.mjs b/packages/components/react-web/src/Icon/buildIconComponents.mjs
@@ -3,6 +3,7 @@
 import svgr from '@svgr/core';
 import elements from '@compassion-gds/elements';
 import prettier from 'prettier';
+import svgo from 'svgo';
 
 import fs from 'fs';
 import path from 'path';
@@ -45,7 +46,18 @@ let indexJs = '';
 
 Object.entries(iconSources).forEach((iconSource) => {
   const name = iconSource[0];
-  const rawSvg = iconSource[1];
+
+  const rawSvg = svgo.optimize(iconSource[1], [
+    {
+      name: 'removeDesc',
+      active: false,
+    },
+    {
+      name: 'removeTitle',
+      active: false,
+    },
+  ]).data;
+
   const componentName = `Icon${capitalize(name)}`;
 
   indexJs += `export { default as ${componentName} } from './icons/${componentName}';\n`;
@@ -65,9 +77,7 @@ Object.entries(iconSources).forEach((iconSource) => {
           className: 'gds-icon',
           css: '{iconStyles}',
         },
-        prettierConfig: {
-          proseWrap: 'always',
-        },
+        svgo: false,
       },
       { componentName }
     )

diff --git a/packages/components/react-web/src/Icon/icons/IconAccessibility.jsx b/packages/components/react-web/src/Icon/icons/IconAccessibility.jsx
@@ -20,7 +20,6 @@ function IconAccessibility(props) {
       css={iconStyles}
       {...props}
     >
-      <title>{"Accessibility"}</title>
       <circle
         fill="none"
         stroke="currentColor"

diff --git a/packages/components/react-web/src/Icon/icons/IconAdd.jsx b/packages/components/react-web/src/Icon/icons/IconAdd.jsx
@@ -20,14 +20,13 @@ function IconAdd(props) {
       css={iconStyles}
       {...props}
     >
-      <title>{"Add"}</title>
       <path
         fill="none"
         stroke="currentColor"
         strokeLinecap="round"
         strokeLinejoin="round"
         strokeWidth={32}
-        d="M256 112v288M400 256H112"
+        d="M256 112v288m144-144H112"
       />
     </svg>
   );

diff --git a/packages/components/react-web/src/Icon/icons/IconAddCircle.jsx b/packages/components/react-web/src/Icon/icons/IconAddCircle.jsx
@@ -20,7 +20,6 @@ function IconAddCircle(props) {
       css={iconStyles}
       {...props}
     >
-      <title>{"Add Circle"}</title>
       <path
         d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z"
         fill="none"
@@ -34,7 +33,7 @@ function IconAddCircle(props) {
         strokeLinecap="round"
         strokeLinejoin="round"
         strokeWidth={32}
-        d="M256 176v160M336 256H176"
+        d="M256 176v160m80-80H176"
       />
     </svg>
   );

diff --git a/packages/components/react-web/src/Icon/icons/IconArrowClockwise.jsx b/packages/components/react-web/src/Icon/icons/IconArrowClockwise.jsx
@@ -13,7 +13,6 @@ function IconArrowClockwise(props) {
     <svg
       width={props.width}
       height={props.height}
-      viewBox="0 0 32 32"
       xmlns="http://www.w3.org/2000/svg"
       fill={props.fill}
       className="gds-icon"
@@ -23,12 +22,12 @@ function IconArrowClockwise(props) {
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M28.021 5.46448C28.5733 5.46448 29.021 5.91219 29.021 6.46448V12.4645C29.021 13.0168 28.5733 13.4645 28.021 13.4645H22.021C21.4687 13.4645 21.021 13.0168 21.021 12.4645C21.021 11.9122 21.4687 11.4645 22.021 11.4645H27.021V6.46448C27.021 5.91219 27.4687 5.46448 28.021 5.46448Z"
+        d="M28.021 5.464a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-6a1 1 0 1 1 0-2h5v-5a1 1 0 0 1 1-1z"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M17.9509 6.19215C16.0111 5.8063 14.0004 6.00433 12.1732 6.76121C10.3459 7.51809 8.78412 8.79981 7.6853 10.4443C6.58649 12.0888 6 14.0222 6 16C6 17.9778 6.58649 19.9112 7.6853 21.5557C8.78412 23.2002 10.3459 24.4819 12.1732 25.2388C14.0004 25.9957 16.0111 26.1937 17.9509 25.8079C19.8907 25.422 21.6725 24.4696 23.0711 23.0711C23.4616 22.6805 24.0948 22.6805 24.4853 23.0711C24.8758 23.4616 24.8758 24.0948 24.4853 24.4853C22.8071 26.1635 20.6689 27.3064 18.3411 27.7694C16.0133 28.2325 13.6005 27.9948 11.4078 27.0866C9.21509 26.1783 7.34094 24.6402 6.02236 22.6668C4.70379 20.6935 4 18.3734 4 16C4 13.6266 4.70379 11.3066 6.02236 9.33316C7.34094 7.35977 9.21509 5.8217 11.4078 4.91345C13.6005 4.0052 16.0133 3.76756 18.3411 4.23058C20.6689 4.6936 22.8071 5.83649 24.4853 7.51472L28.7279 11.7574C29.1184 12.1479 29.1184 12.7811 28.7279 13.1716C28.3374 13.5621 27.7042 13.5621 27.3137 13.1716L23.0711 8.92894C21.6725 7.53041 19.8907 6.578 17.9509 6.19215Z"
+        d="M17.95 6.192a10 10 0 1 0 5.121 16.88 1 1 0 1 1 1.414 1.413 12 12 0 1 1 0-16.97l4.243 4.242a1 1 0 0 1-1.414 1.415L23.07 8.929a10 10 0 0 0-5.12-2.737z"
       />
     </svg>
   );

diff --git a/packages/components/react-web/src/Icon/icons/IconArrowDown.jsx b/packages/components/react-web/src/Icon/icons/IconArrowDown.jsx
@@ -13,7 +13,6 @@ function IconArrowDown(props) {
     <svg
       width={props.width}
       height={props.height}
-      viewBox="0 0 32 32"
       xmlns="http://www.w3.org/2000/svg"
       fill={props.fill}
       className="gds-icon"
@@ -23,12 +22,12 @@ function IconArrowDown(props) {
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M16 28C15.4477 28 15 27.5523 15 27L15 5C15 4.44772 15.4477 4 16 4C16.5523 4 17 4.44772 17 5V27C17 27.5523 16.5523 28 16 28Z"
+        d="M16 28a1 1 0 0 1-1-1V5a1 1 0 1 1 2 0v22a1 1 0 0 1-1 1z"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M6.29289 17.2929C6.68342 16.9024 7.31658 16.9024 7.70711 17.2929L16 25.5858L24.2929 17.2929C24.6834 16.9024 25.3166 16.9024 25.7071 17.2929C26.0976 17.6834 26.0976 18.3166 25.7071 18.7071L16.7071 27.7071C16.3166 28.0976 15.6834 28.0976 15.2929 27.7071L6.29289 18.7071C5.90237 18.3166 5.90237 17.6834 6.29289 17.2929Z"
+        d="M6.293 17.293a1 1 0 0 1 1.414 0L16 25.586l8.293-8.293a1 1 0 0 1 1.414 1.414l-9 9a1 1 0 0 1-1.414 0l-9-9a1 1 0 0 1 0-1.414z"
       />
     </svg>
   );

diff --git a/packages/components/react-web/src/Icon/icons/IconArrowLeft.jsx b/packages/components/react-web/src/Icon/icons/IconArrowLeft.jsx
@@ -13,7 +13,6 @@ function IconArrowLeft(props) {
     <svg
       width={props.width}
       height={props.height}
-      viewBox="0 0 32 32"
       xmlns="http://www.w3.org/2000/svg"
       fill={props.fill}
       className="gds-icon"
@@ -23,12 +22,12 @@ function IconArrowLeft(props) {
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M4 16C4 15.4477 4.44772 15 5 15H27C27.5523 15 28 15.4477 28 16C28 16.5523 27.5523 17 27 17H5C4.44772 17 4 16.5523 4 16Z"
+        d="M4 16a1 1 0 0 1 1-1h22a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1z"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M14.7071 6.29289C15.0976 6.68342 15.0976 7.31658 14.7071 7.70711L6.41421 16L14.7071 24.2929C15.0976 24.6834 15.0976 25.3166 14.7071 25.7071C14.3166 26.0976 13.6834 26.0976 13.2929 25.7071L4.29289 16.7071C3.90237 16.3166 3.90237 15.6834 4.29289 15.2929L13.2929 6.29289C13.6834 5.90237 14.3166 5.90237 14.7071 6.29289Z"
+        d="M14.707 6.293a1 1 0 0 1 0 1.414L6.414 16l8.293 8.293a1 1 0 0 1-1.414 1.414l-9-9a1 1 0 0 1 0-1.414l9-9a1 1 0 0 1 1.414 0z"
       />
     </svg>
   );

diff --git a/packages/components/react-web/src/Icon/icons/IconArrowRight.jsx b/packages/components/react-web/src/Icon/icons/IconArrowRight.jsx
@@ -13,7 +13,6 @@ function IconArrowRight(props) {
     <svg
       width={props.width}
       height={props.height}
-      viewBox="0 0 32 32"
       xmlns="http://www.w3.org/2000/svg"
       fill={props.fill}
       className="gds-icon"
@@ -23,12 +22,12 @@ function IconArrowRight(props) {
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M28 16C28 16.5523 27.5523 17 27 17L5 17C4.44772 17 4 16.5523 4 16C4 15.4477 4.44772 15 5 15L27 15C27.5523 15 28 15.4477 28 16Z"
+        d="M28 16a1 1 0 0 1-1 1H5a1 1 0 1 1 0-2h22a1 1 0 0 1 1 1z"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M17.2929 25.7071C16.9024 25.3166 16.9024 24.6834 17.2929 24.2929L25.5858 16L17.2929 7.70711C16.9024 7.31658 16.9024 6.68342 17.2929 6.29289C17.6834 5.90237 18.3166 5.90237 18.7071 6.29289L27.7071 15.2929C28.0976 15.6834 28.0976 16.3166 27.7071 16.7071L18.7071 25.7071C18.3166 26.0976 17.6834 26.0976 17.2929 25.7071Z"
+        d="M17.293 25.707a1 1 0 0 1 0-1.414L25.586 16l-8.293-8.293a1 1 0 0 1 1.414-1.414l9 9a1 1 0 0 1 0 1.414l-9 9a1 1 0 0 1-1.414 0z"
       />
     </svg>
   );

diff --git a/packages/components/react-web/src/Icon/icons/IconArrowUp.jsx b/packages/components/react-web/src/Icon/icons/IconArrowUp.jsx
@@ -13,7 +13,6 @@ function IconArrowUp(props) {
     <svg
       width={props.width}
       height={props.height}
-      viewBox="0 0 32 32"
       xmlns="http://www.w3.org/2000/svg"
       fill={props.fill}
       className="gds-icon"
@@ -23,12 +22,12 @@ function IconArrowUp(props) {
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M16 4C16.5523 4 17 4.44772 17 5V27C17 27.5523 16.5523 28 16 28C15.4477 28 15 27.5523 15 27L15 5C15 4.44772 15.4477 4 16 4Z"
+        d="M16 4a1 1 0 0 1 1 1v22a1 1 0 1 1-2 0V5a1 1 0 0 1 1-1z"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M25.7071 14.7071C25.3166 15.0976 24.6834 15.0976 24.2929 14.7071L16 6.41421L7.70711 14.7071C7.31658 15.0976 6.68342 15.0976 6.29289 14.7071C5.90237 14.3166 5.90237 13.6834 6.29289 13.2929L15.2929 4.29289C15.6834 3.90237 16.3166 3.90237 16.7071 4.29289L25.7071 13.2929C26.0976 13.6834 26.0976 14.3166 25.7071 14.7071Z"
+        d="M25.707 14.707a1 1 0 0 1-1.414 0L16 6.414l-8.293 8.293a1 1 0 0 1-1.414-1.414l9-9a1 1 0 0 1 1.414 0l9 9a1 1 0 0 1 0 1.414z"
       />
     </svg>
   );

diff --git a/packages/components/react-web/src/Icon/icons/IconArrowsLeftRight.jsx b/packages/components/react-web/src/Icon/icons/IconArrowsLeftRight.jsx
@@ -13,7 +13,6 @@ function IconArrowsLeftRight(props) {
     <svg
       width={props.width}
       height={props.height}
-      viewBox="0 0 32 32"
       xmlns="http://www.w3.org/2000/svg"
       fill={props.fill}
       className="gds-icon"
@@ -23,22 +22,17 @@ function IconArrowsLeftRight(props) {
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M23.2929 17.2929C23.6834 16.9024 24.3166 16.9024 24.7071 17.2929L28.7071 21.2929C29.0976 21.6834 29.0976 22.3166 28.7071 22.7071L24.7071 26.7071C24.3166 27.0976 23.6834 27.0976 23.2929 26.7071C22.9024 26.3166 22.9024 25.6834 23.2929 25.2929L26.5858 22L23.2929 18.7071C22.9024 18.3166 22.9024 17.6834 23.2929 17.2929Z"
+        d="M23.293 17.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L26.586 22l-3.293-3.293a1 1 0 0 1 0-1.414z"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M3 22C3 21.4477 3.44772 21 4 21H28C28.5523 21 29 21.4477 29 22C29 22.5523 28.5523 23 28 23H4C3.44772 23 3 22.5523 3 22Z"
+        d="M3 22a1 1 0 0 1 1-1h24a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1zM8.707 5.293a1 1 0 0 1 0 1.414L5.414 10l3.293 3.293a1 1 0 1 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 0z"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M8.70711 5.29289C9.09763 5.68342 9.09763 6.31658 8.70711 6.70711L5.41421 10L8.70711 13.2929C9.09763 13.6834 9.09763 14.3166 8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289L7.29289 5.29289C7.68342 4.90237 8.31658 4.90237 8.70711 5.29289Z"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M3 10C3 9.44772 3.44772 9 4 9H28C28.5523 9 29 9.44772 29 10C29 10.5523 28.5523 11 28 11H4C3.44772 11 3 10.5523 3 10Z"
+        d="M3 10a1 1 0 0 1 1-1h24a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1z"
       />
     </svg>
   );

diff --git a/packages/components/react-web/src/Icon/icons/IconCamera.jsx b/packages/components/react-web/src/Icon/icons/IconCamera.jsx
@@ -13,7 +13,6 @@ function IconCamera(props) {
     <svg
       width={props.width}
       height={props.height}
-      viewBox="0 0 32 32"
       xmlns="http://www.w3.org/2000/svg"
       fill={props.fill}
       className="gds-icon"
@@ -23,12 +22,12 @@ function IconCamera(props) {
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M11.1672 4.4453C11.3527 4.1671 11.6649 4 11.9993 4H19.9993C20.3336 4 20.6459 4.1671 20.8313 4.4453L22.5345 7H26C26.7957 7 27.5587 7.31607 28.1213 7.87868C28.6839 8.44129 29 9.20435 29 10V24C29 24.7957 28.6839 25.5587 28.1213 26.1213C27.5587 26.6839 26.7957 27 26 27H6C5.20435 27 4.44129 26.6839 3.87868 26.1213C3.31607 25.5587 3 24.7957 3 24V10C3 9.20435 3.31607 8.44129 3.87868 7.87868C4.44129 7.31607 5.20435 7 6 7H9.46408L11.1672 4.4453ZM12.5345 6L10.8313 8.5547C10.6459 8.8329 10.3336 9 9.99927 9H6C5.73478 9 5.48043 9.10536 5.29289 9.29289C5.10536 9.48043 5 9.73478 5 10V24C5 24.2652 5.10536 24.5196 5.29289 24.7071C5.48043 24.8946 5.73478 25 6 25H26C26.2652 25 26.5196 24.8946 26.7071 24.7071C26.8946 24.5196 27 24.2652 27 24V10C27 9.73478 26.8946 9.48043 26.7071 9.29289C26.5196 9.10536 26.2652 9 26 9H21.9993C21.6649 9 21.3527 8.8329 21.1672 8.5547L19.4641 6H12.5345Z"
+        d="M11.167 4.445A1 1 0 0 1 12 4h8a1 1 0 0 1 .832.445L22.535 7H26a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V10a3 3 0 0 1 3-3h3.464l1.703-2.555zM12.534 6l-1.703 2.555A1 1 0 0 1 10 9H6a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h20a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1h-4a1 1 0 0 1-.833-.445L19.464 6h-6.93z"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M16 13C14.067 13 12.5 14.567 12.5 16.5C12.5 18.433 14.067 20 16 20C17.933 20 19.5 18.433 19.5 16.5C19.5 14.567 17.933 13 16 13ZM10.5 16.5C10.5 13.4624 12.9624 11 16 11C19.0376 11 21.5 13.4624 21.5 16.5C21.5 19.5376 19.0376 22 16 22C12.9624 22 10.5 19.5376 10.5 16.5Z"
+        d="M16 13a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7zm-5.5 3.5a5.5 5.5 0 1 1 11 0 5.5 5.5 0 0 1-11 0z"
       />
     </svg>
   );

diff --git a/packages/components/react-web/src/Icon/icons/IconChatText.jsx b/packages/components/react-web/src/Icon/icons/IconChatText.jsx
@@ -13,7 +13,6 @@ function IconChatText(props) {
     <svg
       width={props.width}
       height={props.height}
-      viewBox="0 0 32 32"
       xmlns="http://www.w3.org/2000/svg"
       fill={props.fill}
       className="gds-icon"
@@ -23,17 +22,12 @@ function IconChatText(props) {
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M3.58579 4.58579C3.96086 4.21071 4.46957 4 5 4H27C27.5304 4 28.0391 4.21071 28.4142 4.58579C28.7893 4.96086 29 5.46957 29 6V22C29 22.5304 28.7893 23.0391 28.4142 23.4142C28.0391 23.7893 27.5304 24 27 24H10.3854L10.2564 24.047L6.28696 27.3839C5.99542 27.629 5.63996 27.7857 5.26239 27.8357C4.88482 27.8856 4.50083 27.8268 4.15558 27.666C3.81033 27.5052 3.51817 27.2491 3.31346 26.9279C3.10875 26.6068 3 26.2338 3 25.853V6C3 5.46957 3.21071 4.96086 3.58579 4.58579ZM27 6L5 6L5 25.853L9.1046 22.4025C9.19401 22.3273 9.29589 22.2684 9.40563 22.2284L9.86642 22.0605C9.97616 22.0205 10.0921 22 10.2089 22H27V6Z"
+        d="M3.586 4.586A2 2 0 0 1 5 4h22a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H10.385l-.129.047-3.969 3.337A2 2 0 0 1 3 25.853V6a2 2 0 0 1 .586-1.414zM27 6H5v19.853l4.105-3.45a1 1 0 0 1 .3-.175l.461-.168a1 1 0 0 1 .343-.06H27V6z"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M11 11.9999C11 11.4477 11.4477 10.9999 12 10.9999H20C20.5523 10.9999 21 11.4477 21 11.9999C21 12.5522 20.5523 12.9999 20 12.9999H12C11.4477 12.9999 11 12.5522 11 11.9999Z"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M11 15.9999C11 15.4477 11.4477 14.9999 12 14.9999H20C20.5523 14.9999 21 15.4477 21 15.9999C21 16.5522 20.5523 16.9999 20 16.9999H12C11.4477 16.9999 11 16.5522 11 15.9999Z"
+        d="M11 12a1 1 0 0 1 1-1h8a1 1 0 0 1 0 2h-8a1 1 0 0 1-1-1zM11 16a1 1 0 0 1 1-1h8a1 1 0 0 1 0 2h-8a1 1 0 0 1-1-1z"
       />
     </svg>
   );

diff --git a/packages/components/react-web/src/Icon/icons/IconCheck.jsx b/packages/components/react-web/src/Icon/icons/IconCheck.jsx
@@ -13,7 +13,6 @@ function IconCheck(props) {
     <svg
       width={props.width}
       height={props.height}
-      viewBox="0 0 32 32"
       xmlns="http://www.w3.org/2000/svg"
       fill={props.fill}
       className="gds-icon"
@@ -23,7 +22,7 @@ function IconCheck(props) {
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M27.7071 8.29353C28.0976 8.68407 28.0976 9.31723 27.7071 9.70775L13.7071 23.7071C13.3166 24.0976 12.6834 24.0976 12.2929 23.7071L5.29292 16.7078C4.90238 16.3173 4.90235 15.6841 5.29286 15.2936C5.68337 14.903 6.31653 14.903 6.70708 15.2935L13 21.5858L26.2929 8.2935C26.6834 7.90299 27.3166 7.903 27.7071 8.29353Z"
+        d="M27.707 8.294a1 1 0 0 1 0 1.414l-14 14a1 1 0 0 1-1.414 0l-7-7a1 1 0 1 1 1.414-1.414L13 21.585 26.293 8.294a1 1 0 0 1 1.414 0z"
       />
     </svg>
   );

diff --git a/packages/components/react-web/src/Icon/icons/IconChevronDown.jsx b/packages/components/react-web/src/Icon/icons/IconChevronDown.jsx
@@ -13,7 +13,6 @@ function IconChevronDown(props) {
     <svg
       width={props.width}
       height={props.height}
-      viewBox="0 0 32 32"
       xmlns="http://www.w3.org/2000/svg"
       fill={props.fill}
       className="gds-icon"
@@ -23,7 +22,7 @@ function IconChevronDown(props) {
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M5.29289 11.2929C5.68342 10.9024 6.31658 10.9024 6.70711 11.2929L16 20.5858L25.2929 11.2929C25.6834 10.9024 26.3166 10.9024 26.7071 11.2929C27.0976 11.6834 27.0976 12.3166 26.7071 12.7071L16.7071 22.7071C16.3166 23.0976 15.6834 23.0976 15.2929 22.7071L5.29289 12.7071C4.90237 12.3166 4.90237 11.6834 5.29289 11.2929Z"
+        d="M5.293 11.293a1 1 0 0 1 1.414 0L16 20.586l9.293-9.293a1 1 0 0 1 1.414 1.414l-10 10a1 1 0 0 1-1.414 0l-10-10a1 1 0 0 1 0-1.414z"
       />
     </svg>
   );

diff --git a/packages/components/react-web/src/Icon/icons/IconChevronLeft.jsx b/packages/components/react-web/src/Icon/icons/IconChevronLeft.jsx
@@ -13,7 +13,6 @@ function IconChevronLeft(props) {
     <svg
       width={props.width}
       height={props.height}
-      viewBox="0 0 32 32"
       xmlns="http://www.w3.org/2000/svg"
       fill={props.fill}
       className="gds-icon"
@@ -23,7 +22,7 @@ function IconChevronLeft(props) {
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M20.7071 5.29289C21.0976 5.68342 21.0976 6.31658 20.7071 6.70711L11.4142 16L20.7071 25.2929C21.0976 25.6834 21.0976 26.3166 20.7071 26.7071C20.3166 27.0976 19.6834 27.0976 19.2929 26.7071L9.29289 16.7071C8.90237 16.3166 8.90237 15.6834 9.29289 15.2929L19.2929 5.29289C19.6834 4.90237 20.3166 4.90237 20.7071 5.29289Z"
+        d="M20.707 5.293a1 1 0 0 1 0 1.414L11.414 16l9.293 9.293a1 1 0 0 1-1.414 1.414l-10-10a1 1 0 0 1 0-1.414l10-10a1 1 0 0 1 1.414 0z"
       />
     </svg>
   );

diff --git a/packages/components/react-web/src/Icon/icons/IconChevronRight.jsx b/packages/components/react-web/src/Icon/icons/IconChevronRight.jsx
@@ -13,7 +13,6 @@ function IconChevronRight(props) {
     <svg
       width={props.width}
       height={props.height}
-      viewBox="0 0 32 32"
       xmlns="http://www.w3.org/2000/svg"
       fill={props.fill}
       className="gds-icon"
@@ -23,7 +22,7 @@ function IconChevronRight(props) {
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M11.2929 5.29289C11.6834 4.90237 12.3166 4.90237 12.7071 5.29289L22.7071 15.2929C23.0976 15.6834 23.0976 16.3166 22.7071 16.7071L12.7071 26.7071C12.3166 27.0976 11.6834 27.0976 11.2929 26.7071C10.9024 26.3166 10.9024 25.6834 11.2929 25.2929L20.5858 16L11.2929 6.70711C10.9024 6.31658 10.9024 5.68342 11.2929 5.29289Z"
+        d="M11.293 5.293a1 1 0 0 1 1.414 0l10 10a1 1 0 0 1 0 1.414l-10 10a1 1 0 0 1-1.414-1.414L20.586 16l-9.293-9.293a1 1 0 0 1 0-1.414z"
       />
     </svg>
   );

diff --git a/packages/components/react-web/src/Icon/icons/IconChevronUp.jsx b/packages/components/react-web/src/Icon/icons/IconChevronUp.jsx
@@ -13,7 +13,6 @@ function IconChevronUp(props) {
     <svg
       width={props.width}
       height={props.height}
-      viewBox="0 0 32 32"
       xmlns="http://www.w3.org/2000/svg"
       fill={props.fill}
       className="gds-icon"
@@ -23,7 +22,7 @@ function IconChevronUp(props) {
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M15.2929 9.29289C15.6834 8.90237 16.3166 8.90237 16.7071 9.29289L26.7071 19.2929C27.0976 19.6834 27.0976 20.3166 26.7071 20.7071C26.3166 21.0976 25.6834 21.0976 25.2929 20.7071L16 11.4142L6.70711 20.7071C6.31658 21.0976 5.68342 21.0976 5.29289 20.7071C4.90237 20.3166 4.90237 19.6834 5.29289 19.2929L15.2929 9.29289Z"
+        d="M15.293 9.293a1 1 0 0 1 1.414 0l10 10a1 1 0 0 1-1.414 1.414L16 11.414l-9.293 9.293a1 1 0 0 1-1.414-1.414l10-10z"
       />
     </svg>
   );