diff --git a/packages/desktop-client/src/components/AppBackground.js b/packages/desktop-client/src/components/AppBackground.js
index ba8a1f1b97587f5f30d8e32e3028a81291d0882b..254b708126292f546653a181f90f61396b199314 100644
--- a/packages/desktop-client/src/components/AppBackground.js
+++ b/packages/desktop-client/src/components/AppBackground.js
@@ -4,7 +4,7 @@ import { css } from 'glamor';
 
 import { View, Block } from 'loot-design/src/components/common';
 import { colors } from 'loot-design/src/style';
-import AnimatedLoading from 'loot-design/src/svg/v1/AnimatedLoading';
+import AnimatedLoading from 'loot-design/src/svg/AnimatedLoading';
 
 import Background from './Background';
 
diff --git a/packages/desktop-client/src/components/ManageRules.js b/packages/desktop-client/src/components/ManageRules.js
index 93e843c1d34999b3192c1cbaf452b4598ff86a53..9df30b76da6fc3fa8e6009a4765e0118b30df418 100644
--- a/packages/desktop-client/src/components/ManageRules.js
+++ b/packages/desktop-client/src/components/ManageRules.js
@@ -37,7 +37,7 @@ import useSelected, {
   SelectedProvider
 } from 'loot-design/src/components/useSelected';
 import { colors } from 'loot-design/src/style';
-import ArrowRight from 'loot-design/src/svg/RightArrow2';
+import ArrowRight from 'loot-design/src/svg/v0/RightArrow2';
 
 let SchedulesQuery = liveQueryContext(q('schedules').select('*'));
 
diff --git a/packages/desktop-client/src/components/Notifications.js b/packages/desktop-client/src/components/Notifications.js
index d16e505b43a7c683f32e61a6b40bb495207b8e8b..0d6d1fff3e9584ae765268ce6dd52527e4dda58e 100644
--- a/packages/desktop-client/src/components/Notifications.js
+++ b/packages/desktop-client/src/components/Notifications.js
@@ -13,8 +13,8 @@ import {
   ExternalLink
 } from 'loot-design/src/components/common';
 import { styles, colors } from 'loot-design/src/style';
-import Delete from 'loot-design/src/svg/Delete';
-import Loading from 'loot-design/src/svg/v1/AnimatedLoading';
+import Loading from 'loot-design/src/svg/AnimatedLoading';
+import Delete from 'loot-design/src/svg/v0/Delete';
 
 function compileMessage(message, actions, setLoading, onRemove) {
   return (
diff --git a/packages/desktop-client/src/components/SidebarWithData.js b/packages/desktop-client/src/components/SidebarWithData.js
index 044d07b08c45edad6a48d911a51481bdee2be726..9acc4f01870fec4309e2ab9db74f9b064a201803 100644
--- a/packages/desktop-client/src/components/SidebarWithData.js
+++ b/packages/desktop-client/src/components/SidebarWithData.js
@@ -20,7 +20,7 @@ import {
 } from 'loot-design/src/components/common';
 import { Sidebar } from 'loot-design/src/components/sidebar';
 import { styles, colors } from 'loot-design/src/style';
-import ExpandArrow from 'loot-design/src/svg/ExpandArrow';
+import ExpandArrow from 'loot-design/src/svg/v0/ExpandArrow';
 
 function EditableBudgetName({ prefs, savePrefs }) {
   let dispatch = useDispatch();
diff --git a/packages/desktop-client/src/components/accounts/Account.js b/packages/desktop-client/src/components/accounts/Account.js
index e835f27d54f5d2fbd42a651a55412cabcff2a902..5e9a9fc944ff54867e5efed01ca8c986cae9a146 100644
--- a/packages/desktop-client/src/components/accounts/Account.js
+++ b/packages/desktop-client/src/components/accounts/Account.js
@@ -47,8 +47,8 @@ import {
   useSelectedItems
 } from 'loot-design/src/components/useSelected';
 import { styles, colors } from 'loot-design/src/style';
+import Loading from 'loot-design/src/svg/AnimatedLoading';
 import Add from 'loot-design/src/svg/v1/Add';
-import Loading from 'loot-design/src/svg/v1/AnimatedLoading';
 import DotsHorizontalTriple from 'loot-design/src/svg/v1/DotsHorizontalTriple';
 import ArrowButtonRight1 from 'loot-design/src/svg/v2/ArrowButtonRight1';
 import ArrowsExpand3 from 'loot-design/src/svg/v2/ArrowsExpand3';
diff --git a/packages/desktop-client/src/components/accounts/Filters.js b/packages/desktop-client/src/components/accounts/Filters.js
index 0d70654b901e6d5392e476509aba13286df25efb..bc5f9183267f919763148986b0ba273aec9c492f 100644
--- a/packages/desktop-client/src/components/accounts/Filters.js
+++ b/packages/desktop-client/src/components/accounts/Filters.js
@@ -31,7 +31,7 @@ import {
   CustomSelect
 } from 'loot-design/src/components/common';
 import { colors } from 'loot-design/src/style';
-import DeleteIcon from 'loot-design/src/svg/Delete';
+import DeleteIcon from 'loot-design/src/svg/v0/Delete';
 import SettingsSliderAlternate from 'loot-design/src/svg/v2/SettingsSliderAlternate';
 
 import { Value } from '../ManageRules';
diff --git a/packages/desktop-client/src/components/accounts/TransactionsTable.js b/packages/desktop-client/src/components/accounts/TransactionsTable.js
index aa5eef5e03afd1f6b6bd10790b4c6fbba5882a08..c3030af3689e2fdf7bb8dc0b82e5d7636551e8c0 100644
--- a/packages/desktop-client/src/components/accounts/TransactionsTable.js
+++ b/packages/desktop-client/src/components/accounts/TransactionsTable.js
@@ -59,8 +59,8 @@ import {
   useSelectedItems
 } from 'loot-design/src/components/useSelected';
 import { styles, colors } from 'loot-design/src/style';
-import LeftArrow2 from 'loot-design/src/svg/LeftArrow2';
-import RightArrow2 from 'loot-design/src/svg/RightArrow2';
+import LeftArrow2 from 'loot-design/src/svg/v0/LeftArrow2';
+import RightArrow2 from 'loot-design/src/svg/v0/RightArrow2';
 import CheveronDown from 'loot-design/src/svg/v1/CheveronDown';
 import ArrowsSynchronize from 'loot-design/src/svg/v2/ArrowsSynchronize';
 import CalendarIcon from 'loot-design/src/svg/v2/Calendar';
diff --git a/packages/desktop-client/src/components/budget/MobileBudget.js b/packages/desktop-client/src/components/budget/MobileBudget.js
index d283cda0daf841ff4a3721b5ad5fd5fc861917c1..fb1ea6c74bf95bf185a9ece83a3780519cdfe5fc 100644
--- a/packages/desktop-client/src/components/budget/MobileBudget.js
+++ b/packages/desktop-client/src/components/budget/MobileBudget.js
@@ -12,7 +12,7 @@ import * as monthUtils from 'loot-core/src/shared/months';
 import { View } from 'loot-design/src/components/common';
 import SpreadsheetContext from 'loot-design/src/components/spreadsheet/SpreadsheetContext';
 import { colors } from 'loot-design/src/style';
-import AnimatedLoading from 'loot-design/src/svg/v1/AnimatedLoading';
+import AnimatedLoading from 'loot-design/src/svg/AnimatedLoading';
 import { withThemeColor } from 'loot-design/src/util/withThemeColor';
 
 import SyncRefresh from '../SyncRefresh';
diff --git a/packages/desktop-client/src/components/modals/EditRule.js b/packages/desktop-client/src/components/modals/EditRule.js
index 932f099b846a53bf1f437b61da0896be1d73a74e..e30e1ff24662ac0f2f74d88378e4cccb3fa10453 100644
--- a/packages/desktop-client/src/components/modals/EditRule.js
+++ b/packages/desktop-client/src/components/modals/EditRule.js
@@ -37,8 +37,8 @@ import useSelected, {
   SelectedProvider
 } from 'loot-design/src/components/useSelected';
 import { colors } from 'loot-design/src/style';
-import AddIcon from 'loot-design/src/svg/Add';
-import SubtractIcon from 'loot-design/src/svg/Subtract';
+import AddIcon from 'loot-design/src/svg/v0/Add';
+import SubtractIcon from 'loot-design/src/svg/v0/Subtract';
 import InformationOutline from 'loot-design/src/svg/v1/InformationOutline';
 
 import SimpleTransactionsTable from '../accounts/SimpleTransactionsTable';
diff --git a/packages/loot-design/package.json b/packages/loot-design/package.json
index 764b3b900a67637b6f626bc3ee3e6cdda081bfa0..a52868a16aae2da8310e1874e5aae3e769ad1db1 100644
--- a/packages/loot-design/package.json
+++ b/packages/loot-design/package.json
@@ -6,6 +6,7 @@
     "@babel/traverse": "^7.0.0-rc.1",
     "@babel/types": "^7.0.0-rc.1",
     "@jlongster/lively": "0.0.4",
+    "@svgr/cli": "^6.5.1",
     "@testing-library/react": "^9.1.4",
     "animejs": "^2.2.0",
     "camelcase": "^5.0.0",
diff --git a/packages/loot-design/src/components/CategorySelect.js b/packages/loot-design/src/components/CategorySelect.js
index 2218079356139ef859875aedd907cbe92a6fad89..35dc5d242b7f2cffc5a001ef55791265092e5b60 100644
--- a/packages/loot-design/src/components/CategorySelect.js
+++ b/packages/loot-design/src/components/CategorySelect.js
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 
 import { colors } from '../style';
-import Split from '../svg/split';
+import Split from '../svg/v0/Split';
 import Autocomplete, { defaultFilterSuggestion } from './Autocomplete';
 import { View, Text, Select } from './common';
 
diff --git a/packages/loot-design/src/components/RecurringSchedulePicker.js b/packages/loot-design/src/components/RecurringSchedulePicker.js
index c83696f0d26c1cd719f33d0fee45aa55274b0533..737c115eaeb956e58bdb658803e7a3cdfc2b99e2 100644
--- a/packages/loot-design/src/components/RecurringSchedulePicker.js
+++ b/packages/loot-design/src/components/RecurringSchedulePicker.js
@@ -6,8 +6,8 @@ import * as monthUtils from 'loot-core/src/shared/months';
 import { getRecurringDescription } from 'loot-core/src/shared/schedules';
 import { useTooltip } from 'loot-design/src/components/tooltips';
 import { colors } from 'loot-design/src/style';
-import AddIcon from 'loot-design/src/svg/Add';
-import SubtractIcon from 'loot-design/src/svg/Subtract';
+import AddIcon from 'loot-design/src/svg/v0/Add';
+import SubtractIcon from 'loot-design/src/svg/v0/Subtract';
 
 import { Button, Select, Input, Tooltip, View, Text, Stack } from './common';
 import DateSelect from './DateSelect';
diff --git a/packages/loot-design/src/components/budget/index.js b/packages/loot-design/src/components/budget/index.js
index f9a8c3ea3f2cceaffc739f2ddb644a5f644dbbe6..ecdf50e0caa3fcc47dda8dddd2938c09c52b9e1f 100644
--- a/packages/loot-design/src/components/budget/index.js
+++ b/packages/loot-design/src/components/budget/index.js
@@ -5,7 +5,7 @@ import { scope } from '@jlongster/lively';
 import * as monthUtils from 'loot-core/src/shared/months';
 
 import { styles, colors } from '../../style';
-import ExpandArrow from '../../svg/ExpandArrow';
+import ExpandArrow from '../../svg/v0/ExpandArrow';
 import ArrowThinLeft from '../../svg/v1/ArrowThinLeft';
 import ArrowThinRight from '../../svg/v1/ArrowThinRight';
 import CheveronDown from '../../svg/v1/CheveronDown';
diff --git a/packages/loot-design/src/components/common.js b/packages/loot-design/src/components/common.js
index 4b6225f01855348d40c4bac65449bd5ade2794f5..cbabd2d6345c3c6aeeb579613c392dd27ddbfb96 100644
--- a/packages/loot-design/src/components/common.js
+++ b/packages/loot-design/src/components/common.js
@@ -20,11 +20,11 @@ import { css } from 'glamor';
 import hotkeys from 'hotkeys-js';
 
 import { integerToCurrency } from 'loot-core/src/shared/util';
-import ExpandArrow from 'loot-design/src/svg/ExpandArrow';
+import ExpandArrow from 'loot-design/src/svg/v0/ExpandArrow';
 
 import { styles, colors } from '../style';
-import Delete from '../svg/Delete';
-import Loading from '../svg/v1/AnimatedLoading';
+import Loading from '../svg/AnimatedLoading';
+import Delete from '../svg/v0/Delete';
 import tokens from '../tokens';
 import Text from './Text';
 import { useProperFocus } from './useProperFocus';
diff --git a/packages/loot-design/src/components/icons.usage.js b/packages/loot-design/src/components/icons.usage.js
index 76f69cf09d97243ec5505964472bb796803c2392..957de87dbbc8154a69c63fc1d033a0fc257ff2f8 100644
--- a/packages/loot-design/src/components/icons.usage.js
+++ b/packages/loot-design/src/components/icons.usage.js
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { Section } from '../guide/components';
 import { View, Button } from './common';
 
-const context = require.context('../svg/v1', false, /\.web.js$/);
+const context = require.context('../svg/v1', false, /\.js$/);
 const modules = {};
 context.keys().forEach(function (key) {
   var module = context(key);
@@ -11,7 +11,7 @@ context.keys().forEach(function (key) {
 });
 
 function pathToName(path) {
-  const name = path.match(/^\.\/(.*)\.web.js$/)[1];
+  const name = path.match(/^\.\/(.*)\.js$/)[1];
   return name[0].toUpperCase() + name.slice(1);
 }
 
diff --git a/packages/loot-design/src/components/manager/BudgetList.js b/packages/loot-design/src/components/manager/BudgetList.js
index b8e54012979fa3e0546b0b88fa5cac1e91337705..e0ac19568e56b97de93c441f2d01ee299aad511e 100644
--- a/packages/loot-design/src/components/manager/BudgetList.js
+++ b/packages/loot-design/src/components/manager/BudgetList.js
@@ -1,6 +1,6 @@
 import React, { useState, useRef } from 'react';
 
-import Loading from 'loot-design/src/svg/v1/AnimatedLoading';
+import Loading from 'loot-design/src/svg/AnimatedLoading';
 import Key from 'loot-design/src/svg/v2/Key';
 import RefreshArrow from 'loot-design/src/svg/v2/RefreshArrow';
 
diff --git a/packages/loot-design/src/components/modals/PlaidExternalMsg.js b/packages/loot-design/src/components/modals/PlaidExternalMsg.js
index 5affaa8aa89112f799dab594081028b874a02644..05b354ef9503ad1e025ca9b1ae473446fbe1c61f 100644
--- a/packages/loot-design/src/components/modals/PlaidExternalMsg.js
+++ b/packages/loot-design/src/components/modals/PlaidExternalMsg.js
@@ -1,7 +1,7 @@
 import React, { useState, useRef } from 'react';
 
 import { colors } from '../../style';
-import AnimatedLoading from '../../svg/v1/AnimatedLoading';
+import AnimatedLoading from '../../svg/AnimatedLoading';
 import { Error } from '../alerts';
 import { View, Text, Modal, Button, P, ModalButtons } from '../common';
 
diff --git a/packages/loot-design/src/components/payees.js b/packages/loot-design/src/components/payees.js
index d7f938bfe93fcbd2c3411107d8ff2a8719e6da4c..7097e4a25aad772858bb77cb338fb67351d8f353 100644
--- a/packages/loot-design/src/components/payees.js
+++ b/packages/loot-design/src/components/payees.js
@@ -14,9 +14,9 @@ import memoizeOne from 'memoize-one';
 import { groupById } from 'loot-core/src/shared/util';
 
 import { colors } from '../style';
-import Delete from '../svg/Delete';
-import ExpandArrow from '../svg/ExpandArrow';
-import Merge from '../svg/merge';
+import Delete from '../svg/v0/Delete';
+import ExpandArrow from '../svg/v0/ExpandArrow';
+import Merge from '../svg/v0/Merge';
 import ArrowThinRight from '../svg/v1/ArrowThinRight';
 import {
   useStableCallback,
diff --git a/packages/loot-design/src/components/table.js b/packages/loot-design/src/components/table.js
index 8f2dbecc40dc1e1e41800ab824359e29f2d3b0fd..705037df5747c18bae4abadda2ed6f16b91de75d 100644
--- a/packages/loot-design/src/components/table.js
+++ b/packages/loot-design/src/components/table.js
@@ -14,9 +14,9 @@ import AutoSizer from 'react-virtualized-auto-sizer';
 import { scope } from '@jlongster/lively';
 
 import { styles, colors } from '../style';
-import DeleteIcon from '../svg/Delete';
-import ExpandArrow from '../svg/ExpandArrow';
-import AnimatedLoading from '../svg/v1/AnimatedLoading';
+import AnimatedLoading from '../svg/AnimatedLoading';
+import DeleteIcon from '../svg/v0/Delete';
+import ExpandArrow from '../svg/v0/ExpandArrow';
 import Checkmark from '../svg/v1/Checkmark';
 import { keys } from '../util/keys';
 import {
diff --git a/packages/loot-design/src/svg/.gitignore b/packages/loot-design/src/svg/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..012a3cd68929f8f0a72fb94409dd677f4146c7f1
--- /dev/null
+++ b/packages/loot-design/src/svg/.gitignore
@@ -0,0 +1 @@
+index.js
diff --git a/packages/loot-design/src/svg/.svgrrc.js b/packages/loot-design/src/svg/.svgrrc.js
index 6c27488c33edfad98d64278b8e034aa81a5ff9c8..1e6bd5933d15fdc63f8d69d0785889f4c16e538f 100644
--- a/packages/loot-design/src/svg/.svgrrc.js
+++ b/packages/loot-design/src/svg/.svgrrc.js
@@ -1,6 +1,14 @@
 module.exports = {
   svgoConfig: {
-    plugins: [{ removeUnknownsAndDefaults: false }]
+    plugins: [
+      {
+        name: 'preset-default',
+        params: {
+          overrides: { removeUnknownsAndDefaults: false }
+        }
+      },
+      'removeDimensions'
+    ]
   },
   jsx: {
     babelConfig: {
diff --git a/packages/loot-design/src/svg/Add.web.js b/packages/loot-design/src/svg/Add.web.js
deleted file mode 100644
index 64e6b2f0f66df1f1633c61b49b649d7da175fc0d..0000000000000000000000000000000000000000
--- a/packages/loot-design/src/svg/Add.web.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from 'react';
-
-import { css } from 'glamor';
-
-function Add({ width, height, style, color = 'black', ...props }) {
-  return (
-    <svg
-      width={width}
-      height={height}
-      {...props}
-      {...css(style)}
-      viewBox="0 0 24 24"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fill={color}
-        className="path"
-        d="M23,11.5 L23,11.5 L23,11.5 C23,12.3284271 22.3284271,13 21.5,13 L1.5,13 L1.5,13 C0.671572875,13 1.01453063e-16,12.3284271 0,11.5 L0,11.5 L0,11.5 C-1.01453063e-16,10.6715729 0.671572875,10 1.5,10 L21.5,10 L21.5,10 C22.3284271,10 23,10.6715729 23,11.5 Z"
-      />
-      <path
-        fill={color}
-        className="path"
-        d="M11.5,23 C10.6715729,23 10,22.3284271 10,21.5 L10,1.5 C10,0.671572875 10.6715729,1.52179594e-16 11.5,0 C12.3284271,-1.52179594e-16 13,0.671572875 13,1.5 L13,21.5 C13,22.3284271 12.3284271,23 11.5,23 Z"
-      />
-    </svg>
-  );
-}
-
-export default Add;
diff --git a/packages/loot-design/src/svg/v1/AnimatedLoading.web.js b/packages/loot-design/src/svg/AnimatedLoading.js
similarity index 100%
rename from packages/loot-design/src/svg/v1/AnimatedLoading.web.js
rename to packages/loot-design/src/svg/AnimatedLoading.js
diff --git a/packages/loot-design/src/svg/Delete.web.js b/packages/loot-design/src/svg/Delete.web.js
deleted file mode 100644
index e54c1ba58cd9479c59c29cbbd3ff68e7e8a56d6c..0000000000000000000000000000000000000000
--- a/packages/loot-design/src/svg/Delete.web.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/* eslint no-unused-vars: 0 */
-/* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from 'react';
-
-import { css } from 'glamor';
-
-function Delete({ width, height, style, color = 'currentColor', ...props }) {
-  return (
-    <svg
-      width={width}
-      height={height}
-      {...props}
-      {...css(style)}
-      viewBox="0 0 24 24"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <line
-        fill="none"
-        stroke={color}
-        className="path"
-        strokeWidth="4"
-        strokeLinecap="round"
-        strokeMiterlimit="10"
-        x1="2"
-        y1="2"
-        x2="22"
-        y2="22"
-      />
-      <line
-        fill="none"
-        stroke={color}
-        className="path"
-        strokeWidth="4"
-        strokeLinecap="round"
-        strokeMiterlimit="10"
-        x1="22"
-        y1="2"
-        x2="2"
-        y2="22"
-      />
-    </svg>
-  );
-}
-
-export default Delete;
diff --git a/packages/loot-design/src/svg/ExpandArrow.web.js b/packages/loot-design/src/svg/ExpandArrow.web.js
deleted file mode 100644
index d3eae8f52b53770cad3ddf6b829f9f5ae9ee2905..0000000000000000000000000000000000000000
--- a/packages/loot-design/src/svg/ExpandArrow.web.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/* eslint no-unused-vars: 0 */
-/* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from 'react';
-
-import { css } from 'glamor';
-
-function ExpandArrow({
-  width,
-  height,
-  style,
-  color = 'currentColor',
-  ...props
-}) {
-  return (
-    <svg
-      width={width}
-      height={height}
-      {...props}
-      {...css(style)}
-      viewBox="0 0 25 15"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fill={color}
-        className="path"
-        d="M24.4825085,0.57623494 C24.1741468,0.24939759 23.8086177,0.0861144578 23.3862628,0.0861144578 L1.55921502,0.0861144578 C1.13668942,0.0861144578 0.771416382,0.24939759 0.462798635,0.57623494 C0.154180887,0.903433735 0,1.29027108 0,1.73746988 C0,2.18457831 0.154180887,2.57141566 0.462798635,2.89834337 L11.3763652,14.4562048 C11.6853242,14.7830422 12.0505973,14.9466867 12.4727816,14.9466867 C12.8949659,14.9466867 13.2605802,14.7830422 13.568942,14.4562048 L24.4825085,2.89825301 C24.790785,2.57141566 24.9455631,2.18457831 24.9455631,1.73737952 C24.9455631,1.29027108 24.790785,0.903433735 24.4825085,0.57623494 Z"
-      />
-    </svg>
-  );
-}
-
-export default ExpandArrow;
diff --git a/packages/loot-design/src/svg/LeftArrow2.web.js b/packages/loot-design/src/svg/LeftArrow2.web.js
deleted file mode 100644
index 7485a72d5ebfedc436ff9d395c0ed6d788a1d3d8..0000000000000000000000000000000000000000
--- a/packages/loot-design/src/svg/LeftArrow2.web.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/* eslint no-unused-vars: 0 */
-/* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from 'react';
-
-import { css } from 'glamor';
-
-function LeftArrow2({ width, height, style, color = 'black', ...props }) {
-  return (
-    <svg
-      width={width}
-      height={height}
-      {...props}
-      {...css(style)}
-      viewBox="0 0 91 51"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fill={color}
-        className="path"
-        d="M30.2563657,48.6143861 C30.2183019,47.790406 29.8626205,47.0158388 29.2674654,46.4614308 L10.8027839,29.0634209 L87.7179501,29.0634209 C87.8228144,29.068595 87.9281828,29.068595 88.0330471,29.0634209 C89.6171025,28.9790826 90.9828587,27.4229632 90.9004294,25.7972517 C90.818,24.1715403 89.3017535,22.7693512 87.7179501,22.8544657 L10.8027839,22.8544657 L29.2674654,5.48879403 C30.5505402,4.39032637 30.7227091,2.43243582 29.6523878,1.11587861 C28.5820665,-0.200678607 26.6743435,-0.377892537 25.3915208,0.720575124 C25.3146371,0.786286567 25.2410305,0.855878607 25.171205,0.929092537 L0.971759003,23.6952617 C-0.255102493,24.8594408 -0.330221607,26.8235403 0.803875346,28.0826647 C0.857567867,28.1424259 0.913781163,28.1998587 0.971759003,28.2549632 L25.171205,51.0211323 C25.7656039,51.5954607 26.5614127,51.8986647 27.3768837,51.8619284 C29.0458892,51.7812119 30.3347618,50.3270229 30.2563657,48.6143861 Z"
-      />
-    </svg>
-  );
-}
-
-export default LeftArrow2;
diff --git a/packages/loot-design/src/svg/v1/Loading.web.js b/packages/loot-design/src/svg/Loading.js
similarity index 100%
rename from packages/loot-design/src/svg/v1/Loading.web.js
rename to packages/loot-design/src/svg/Loading.js
diff --git a/packages/loot-design/src/svg/Math.web.js b/packages/loot-design/src/svg/Math.web.js
deleted file mode 100644
index 4422943f576aec021c6a042a02790edae9df4a02..0000000000000000000000000000000000000000
--- a/packages/loot-design/src/svg/Math.web.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/* eslint no-unused-vars: 0 */
-/* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from 'react';
-
-import { css } from 'glamor';
-
-function Math({ width, height, style, color = 'black', ...props }) {
-  return (
-    <svg
-      width={width}
-      height={height}
-      {...props}
-      {...css(style)}
-      viewBox="0 0 30 30"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fill={color}
-        className="path"
-        d="M2.813 0A2.81 2.81 0 0 0 0 2.812v8.022a2.8 2.8 0 0 0 2.813 2.802h8.01a2.8 2.8 0 0 0 2.813-2.802V2.812A2.81 2.81 0 0 0 10.824 0H2.813zm16.363 0a2.81 2.81 0 0 0-2.812 2.812v8.022a2.8 2.8 0 0 0 2.812 2.802h8.012A2.8 2.8 0 0 0 30 10.834V2.812A2.81 2.81 0 0 0 27.187 0h-8.01zM6.796 2.365c.73-.011 1.397.657 1.386 1.385v1.705h1.704c.72-.01 1.383.643 1.383 1.363s-.662 1.374-1.383 1.364H8.182v1.704c.01.72-.643 1.383-1.364 1.383-.72 0-1.374-.662-1.363-1.383V8.182H3.75c-.72.01-1.383-.643-1.383-1.364 0-.72.663-1.374 1.383-1.363h1.705V3.75c-.012-.714.628-1.374 1.342-1.385zm15.182 1.321l1.204 1.204 1.204-1.204c.573-.468 1.285-.54 1.841-.101.605.531.563 1.545.087 2.03L25.11 6.817l1.204 1.204c.522.5.531 1.437.02 1.948-.512.512-1.447.502-1.948-.02l-1.204-1.204-1.204 1.204c-.501.522-1.437.532-1.948.02-.512-.511-.502-1.447.02-1.948l1.204-1.204-1.204-1.204c-.53-.769-.48-1.4.062-2.008.617-.41 1.322-.464 1.866.08zM2.812 16.364A2.81 2.81 0 0 0 0 19.176v8.022A2.8 2.8 0 0 0 2.813 30h8.01a2.8 2.8 0 0 0 2.813-2.802v-8.022a2.81 2.81 0 0 0-2.812-2.812H2.813zm16.364 0a2.81 2.81 0 0 0-2.812 2.812v8.022A2.8 2.8 0 0 0 19.176 30h8.012A2.8 2.8 0 0 0 30 27.198v-8.022a2.81 2.81 0 0 0-2.813-2.812h-8.01zm.8 3.409h6.274c.72-.01 1.383.643 1.383 1.363S26.97 22.51 26.25 22.5h-6.136c-.714.036-1.397-.58-1.433-1.294-.037-.714.58-1.397 1.294-1.433zM3.611 21.818h6.274c.72-.01 1.383.643 1.383 1.364 0 .72-.662 1.374-1.383 1.363H3.75c-.714.037-1.397-.58-1.433-1.294-.036-.714.58-1.397 1.295-1.433zm16.363 2.046h6.275c.72-.01 1.383.643 1.383 1.363s-.663 1.374-1.383 1.364h-6.136c-.714.036-1.397-.58-1.433-1.295-.037-.714.58-1.396 1.294-1.432z"
-      />
-    </svg>
-  );
-}
-
-export default Math;
diff --git a/packages/loot-design/src/svg/RightArrow2.web.js b/packages/loot-design/src/svg/RightArrow2.web.js
deleted file mode 100644
index 276ab93f50e420a4e97361f3def1b3c865ce1933..0000000000000000000000000000000000000000
--- a/packages/loot-design/src/svg/RightArrow2.web.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/* eslint no-unused-vars: 0 */
-/* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from 'react';
-
-import { css } from 'glamor';
-
-function RightArrow2({ width, height, style, color = 'black', ...props }) {
-  return (
-    <svg
-      width={width}
-      height={height}
-      {...props}
-      {...css(style)}
-      viewBox="0 0 91 51"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fill={color}
-        className="path"
-        d="M63.0035243,0.00287814875 C61.7906378,0.0600658892 60.7317989,0.842666173 60.3212412,1.985385 C59.9106836,3.12810382 60.2293609,4.40562012 61.1285243,5.22162815 L79.4410243,22.0341281 L3.15977426,22.0341281 C3.05570186,22.0291281 2.95134666,22.0291281 2.84727426,22.0341281 C1.27629006,22.1156281 -0.078297035,23.6193781 0.00352426499,25.1903781 C0.085345265,26.7612781 1.58881846,28.1162281 3.15977426,28.0341281 L79.4410243,28.0341281 L61.1285243,44.8153781 C60.2782139,45.5247824 59.8877978,46.6448836 60.1129217,47.7291351 C60.3380455,48.8133866 61.142102,49.6854787 62.204541,49.9977376 C63.2669799,50.3099965 64.4150384,50.0116459 65.1910243,49.2216281 L89.1910243,27.2216281 C89.8053452,26.6537206 90.1546504,25.8551089 90.1546504,25.0185031 C90.1546504,24.1818974 89.8053452,23.3832857 89.1910243,22.8153781 L65.1910243,0.815378149 C64.6013672,0.2604644 63.812455,-0.0325601255 63.0035243,0.00287814875 Z"
-      />
-    </svg>
-  );
-}
-
-export default RightArrow2;
diff --git a/packages/loot-design/src/svg/Subtract.web.js b/packages/loot-design/src/svg/Subtract.web.js
deleted file mode 100644
index 3d1365591530d59ee32eea7c2a27c81d10534093..0000000000000000000000000000000000000000
--- a/packages/loot-design/src/svg/Subtract.web.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from 'react';
-
-import { css } from 'glamor';
-
-function Subtract({ width, height, style, color = 'black', ...props }) {
-  return (
-    <svg
-      width={width}
-      height={height}
-      {...props}
-      {...css(style)}
-      viewBox="0 0 24 24"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fill={color}
-        className="path"
-        d="M23,11.5 L23,11.5 L23,11.5 C23,12.3284271 22.3284271,13 21.5,13 L1.5,13 L1.5,13 C0.671572875,13 1.01453063e-16,12.3284271 0,11.5 L0,11.5 L0,11.5 C-1.01453063e-16,10.6715729 0.671572875,10 1.5,10 L21.5,10 L21.5,10 C22.3284271,10 23,10.6715729 23,11.5 Z"
-      />
-    </svg>
-  );
-}
-
-export default Subtract;
diff --git a/packages/loot-design/src/svg/generate b/packages/loot-design/src/svg/generate
deleted file mode 100755
index 2c79230669cdc948f6486009a665f1fe1ead9a57..0000000000000000000000000000000000000000
--- a/packages/loot-design/src/svg/generate
+++ /dev/null
@@ -1,152 +0,0 @@
-#!/usr/bin/env node
-
-let { basename, dirname } = require('path');
-let fs = require('fs');
-let fastglob = require('fast-glob');
-let prettier = require('prettier');
-let traverse = require('@babel/traverse').default;
-let camelcase = require('camelcase');
-let t = require('@babel/types');
-
-function transformContents(name, contents) {
-  let halted = false;
-
-  let output = prettier.format(contents, {
-    parser(text, { babylon }) {
-      let ast = babylon(text);
-
-      traverse(ast, {
-        JSXOpeningElement(path) {
-          let hasAddedClassName = false;
-
-          traverse(
-            path.node,
-            {
-              JSXAttribute(path) {
-                if (
-                  path.parent.name.name === 'svg' &&
-                  path.node.value.type === 'StringLiteral'
-                ) {
-                  switch (path.node.name.name) {
-                    case 'width':
-                      path.replaceWith(
-                        t.jsxAttribute(
-                          t.jsxIdentifier('width'),
-                          t.jsxExpressionContainer(t.Identifier('width'))
-                        )
-                      );
-                      break;
-                    case 'height':
-                      path.replaceWith(
-                        t.jsxAttribute(
-                          t.jsxIdentifier('height'),
-                          t.jsxExpressionContainer(t.Identifier('height'))
-                        )
-                      );
-
-                      path.insertAfter(
-                        t.JSXSpreadAttribute(
-                          t.callExpression(t.identifier('css'), [
-                            t.identifier('style')
-                          ])
-                        )
-                      );
-
-                      path.insertAfter(
-                        t.JSXSpreadAttribute(t.identifier('props'))
-                      );
-
-                      break;
-                  }
-                } else {
-                  if (
-                    (path.node.name.name === 'fill' ||
-                      path.node.name.name === 'stroke') &&
-                    path.node.value.type === 'StringLiteral' &&
-                    path.node.value.value === 'black'
-                  ) {
-                    path.replaceWith(
-                      t.jsxAttribute(
-                        path.node.name,
-                        t.jsxExpressionContainer(t.Identifier('color'))
-                      )
-                    );
-
-                    if (!hasAddedClassName) {
-                      hasAddedClassName = true;
-
-                      path.insertAfter(
-                        t.jsxAttribute(
-                          t.jsxIdentifier('className'),
-                          // There is a bug in either babel-traverse
-                          // or prettier. prettier expects there to be
-                          // a `raw` field but babel-traverse doesn't
-                          // generate it
-                          {
-                            type: 'StringLiteral',
-                            value: 'path',
-                            raw: '"path"'
-                          }
-                        )
-                      );
-                    }
-                  }
-                }
-
-                let cameled = camelcase(path.node.name.name);
-                if (cameled !== path.node.name.name) {
-                  path.replaceWith(
-                    t.jsxAttribute(t.jsxIdentifier(cameled), path.node.value)
-                  );
-                }
-              }
-            },
-            path.scope,
-            path
-          );
-        }
-      });
-
-      return ast;
-    }
-  });
-
-  if (halted) {
-    return null;
-  }
-
-  output = `
-/* eslint no-unused-vars: 0 */
-/* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from 'react';
-import { css } from 'glamor';
-
-function ${name}({ width, height, style, color = "black", ...props }) {
-return ${output}
-}
-
-export default ${name}
-`;
-
-  return prettier.format(output, { parser: 'babel' });
-}
-
-function title(str) {
-  return str[0].toUpperCase() + str.slice(1);
-}
-
-async function run() {
-  const files = await fastglob(['*.svg']);
-
-  for (let file of files) {
-    let contents = fs.readFileSync(`./${file}`, 'utf8');
-    // Strip off the extension
-    let filepath = file.replace(/\.[^.]+$/, '');
-    let name = camelcase(basename(filepath));
-
-    const webOutput = transformContents(title(name), contents);
-    fs.writeFileSync(`./${filepath}.web.js`, webOutput, 'utf8');
-  }
-}
-
-run();
diff --git a/packages/loot-design/src/svg/generate-new b/packages/loot-design/src/svg/generate-new
deleted file mode 100755
index 920a0502d7c822b5d0f176ea37530d4f16192186..0000000000000000000000000000000000000000
--- a/packages/loot-design/src/svg/generate-new
+++ /dev/null
@@ -1,5 +0,0 @@
-#!/bin/sh
-
-svgr --expand-props start --ext web.js -d v1 v1
-svgr --expand-props start --ext web.js -d logo logo
-svgr --expand-props start --ext web.js -d v2 v2
diff --git a/packages/loot-design/src/svg/generate-new.sh b/packages/loot-design/src/svg/generate-new.sh
new file mode 100755
index 0000000000000000000000000000000000000000..1cf7a74a683b9951e517de4b4f4aae187c2ba2b9
--- /dev/null
+++ b/packages/loot-design/src/svg/generate-new.sh
@@ -0,0 +1,4 @@
+#!/bin/sh
+
+rm */*.js
+yarn svgr --expand-props start --ext js -d . .
diff --git a/packages/loot-design/src/svg/logo/Logo.web.js b/packages/loot-design/src/svg/logo/Logo.js
similarity index 60%
rename from packages/loot-design/src/svg/logo/Logo.web.js
rename to packages/loot-design/src/svg/logo/Logo.js
index c8f2f69b5fa4fa3e9f0779a83af1eb1ef05c3857..3b5c1231d962437ff294a7932086406b86879525 100644
--- a/packages/loot-design/src/svg/logo/Logo.web.js
+++ b/packages/loot-design/src/svg/logo/Logo.js
@@ -1,22 +1,22 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgLogo = props => (
   <svg
     {...props}
-    width={30}
-    height={32}
     fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 30 32"
     style={{
       color: '#242134',
       ...props.style
     }}
   >
     <path
-      d="M1.138 30.423l13.8-29.309a.32.32 0 0 1 .289-.184h.605a.32.32 0 0 1 .287.18l8.903 18.29 2.791-1.074a.32.32 0 0 1 .414.184l.742 1.932a.32.32 0 0 1-.183.413l-2.574.99 3.175 6.524a.32.32 0 0 1-.147.428l-1.861.905a.32.32 0 0 1-.428-.147l-3.277-6.733-21.98 8.453a.32.32 0 0 1-.415-.189l-.152-.418a.32.32 0 0 1 .01-.245zM15.56 6.152L5.85 26.774l16.634-6.398L15.56 6.152z"
+      d="m1.138 30.423 13.8-29.309a.32.32 0 0 1 .289-.184h.605a.32.32 0 0 1 .287.18l8.903 18.29 2.791-1.074a.32.32 0 0 1 .414.184l.742 1.932a.32.32 0 0 1-.183.413l-2.574.99 3.175 6.524a.32.32 0 0 1-.147.428l-1.861.905a.32.32 0 0 1-.428-.147l-3.277-6.733-21.98 8.453a.32.32 0 0 1-.415-.189l-.152-.418a.32.32 0 0 1 .01-.245ZM15.56 6.152 5.85 26.774l16.634-6.398L15.56 6.152Z"
       fill="currentColor"
     />
     <path
-      d="M21.777 14.568l.932 2.544-21.203 7.775a.32.32 0 0 1-.41-.19l-.713-1.944a.32.32 0 0 1 .19-.41l21.204-7.775z"
+      d="m21.777 14.568.932 2.544-21.203 7.775a.32.32 0 0 1-.41-.19l-.713-1.944a.32.32 0 0 1 .19-.41l21.204-7.775Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/merge.web.js b/packages/loot-design/src/svg/merge.web.js
deleted file mode 100644
index 53daeb434d78a165f342e2e94642c7ed82751460..0000000000000000000000000000000000000000
--- a/packages/loot-design/src/svg/merge.web.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/* eslint no-unused-vars: 0 */
-/* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from 'react';
-
-import { css } from 'glamor';
-
-function Merge({ width, height, style, color = 'currentColor', ...props }) {
-  return (
-    <svg
-      width={width}
-      height={height}
-      {...props}
-      {...css(style)}
-      viewBox="0 0 32 32"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M24 29H29.3333"
-        stroke={color}
-        className="path"
-        strokeWidth="3.5"
-        strokeMiterlimit="10"
-        strokeLinecap="round"
-      />
-      <path
-        d="M8.00002 29H2.66669"
-        stroke={color}
-        className="path"
-        strokeWidth="3.5"
-        strokeMiterlimit="10"
-        strokeLinecap="round"
-      />
-      <path
-        d="M16 21L8 29"
-        stroke={color}
-        className="path"
-        strokeWidth="3.5"
-        strokeMiterlimit="10"
-        strokeLinecap="round"
-      />
-      <path
-        d="M16 21L24 29"
-        stroke={color}
-        className="path"
-        strokeWidth="3.5"
-        strokeMiterlimit="10"
-        strokeLinecap="round"
-      />
-      <path
-        d="M16 2.66669V21.3334"
-        stroke={color}
-        className="path"
-        strokeWidth="3.5"
-        strokeMiterlimit="10"
-        strokeLinecap="round"
-      />
-      <path
-        d="M16 2.66669L8 9.33335"
-        stroke={color}
-        className="path"
-        strokeWidth="3.5"
-        strokeMiterlimit="10"
-        strokeLinecap="round"
-      />
-      <path
-        d="M16 2.66669L24 9.33335"
-        stroke={color}
-        className="path"
-        strokeWidth="3.5"
-        strokeMiterlimit="10"
-        strokeLinecap="round"
-      />
-    </svg>
-  );
-}
-
-export default Merge;
diff --git a/packages/loot-design/src/svg/split.web.js b/packages/loot-design/src/svg/split.web.js
deleted file mode 100644
index f9959e2619b37fe57b3623cd6bdfc1c6e0ba88e2..0000000000000000000000000000000000000000
--- a/packages/loot-design/src/svg/split.web.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/* eslint no-unused-vars: 0 */
-/* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from 'react';
-
-import { css } from 'glamor';
-
-function Split({ width, height, style, color = 'currentColor', ...props }) {
-  return (
-    <svg
-      width={width}
-      height={height}
-      {...props}
-      {...css(style)}
-      viewBox="0 0 32 32"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M30 9L26 5"
-        stroke={color}
-        className="path"
-        strokeWidth="3.5"
-        strokeMiterlimit="10"
-        strokeLinecap="round"
-      />
-      <path
-        d="M30 9L26 13"
-        stroke={color}
-        className="path"
-        strokeWidth="3.5"
-        strokeMiterlimit="10"
-        strokeLinecap="round"
-      />
-      <path
-        d="M6 5L2 9"
-        stroke={color}
-        className="path"
-        strokeWidth="3.5"
-        strokeMiterlimit="10"
-        strokeLinecap="round"
-      />
-      <path
-        d="M2 9L6 13"
-        stroke={color}
-        className="path"
-        strokeWidth="3.5"
-        strokeMiterlimit="10"
-        strokeLinecap="round"
-      />
-      <path
-        d="M10 9H3"
-        stroke={color}
-        className="path"
-        strokeWidth="3.5"
-        strokeMiterlimit="10"
-        strokeLinecap="round"
-      />
-      <path
-        d="M22 9H29"
-        stroke={color}
-        className="path"
-        strokeWidth="3.5"
-        strokeMiterlimit="10"
-        strokeLinecap="round"
-      />
-      <path
-        d="M16 15L22 9"
-        stroke={color}
-        className="path"
-        strokeWidth="3.5"
-        strokeMiterlimit="10"
-        strokeLinecap="round"
-      />
-      <path
-        d="M16 15L10 9"
-        stroke={color}
-        className="path"
-        strokeWidth="3.5"
-        strokeMiterlimit="10"
-        strokeLinecap="round"
-      />
-      <path
-        d="M16 28L16 15"
-        stroke={color}
-        className="path"
-        strokeWidth="3.5"
-        strokeMiterlimit="10"
-        strokeLinecap="round"
-      />
-    </svg>
-  );
-}
-
-export default Split;
diff --git a/packages/loot-design/src/svg/v0/Add.js b/packages/loot-design/src/svg/v0/Add.js
new file mode 100644
index 0000000000000000000000000000000000000000..721bd7754ac6f57f5cbf546ada51e82d8052e561
--- /dev/null
+++ b/packages/loot-design/src/svg/v0/Add.js
@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+const SvgAdd = props => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    style={{
+      color: '#242134',
+      ...props.style
+    }}
+  >
+    <path
+      d="M23 11.5a1.5 1.5 0 0 1-1.5 1.5h-20a1.5 1.5 0 0 1 0-3h20a1.5 1.5 0 0 1 1.5 1.5Z"
+      fill="currentColor"
+    />
+    <path
+      d="M11.5 23a1.5 1.5 0 0 1-1.5-1.5v-20a1.5 1.5 0 0 1 3 0v20a1.5 1.5 0 0 1-1.5 1.5Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default SvgAdd;
diff --git a/packages/loot-design/src/svg/v0/Add.svg b/packages/loot-design/src/svg/v0/Add.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1d7a495682cc874f3b697c60cfb256785b96622d
--- /dev/null
+++ b/packages/loot-design/src/svg/v0/Add.svg
@@ -0,0 +1,14 @@
+<svg
+width="24"
+height="24"
+viewBox="0 0 24 24"
+version="1.1"
+xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M23,11.5 L23,11.5 L23,11.5 C23,12.3284271 22.3284271,13 21.5,13 L1.5,13 L1.5,13 C0.671572875,13 1.01453063e-16,12.3284271 0,11.5 L0,11.5 L0,11.5 C-1.01453063e-16,10.6715729 0.671572875,10 1.5,10 L21.5,10 L21.5,10 C22.3284271,10 23,10.6715729 23,11.5 Z"
+  />
+  <path
+    d="M11.5,23 C10.6715729,23 10,22.3284271 10,21.5 L10,1.5 C10,0.671572875 10.6715729,1.52179594e-16 11.5,0 C12.3284271,-1.52179594e-16 13,0.671572875 13,1.5 L13,21.5 C13,22.3284271 12.3284271,23 11.5,23 Z"
+  />
+</svg>
diff --git a/packages/loot-design/src/svg/v0/Delete.js b/packages/loot-design/src/svg/v0/Delete.js
new file mode 100644
index 0000000000000000000000000000000000000000..7dc6fb047e67753db19b426be39814511c0ba06c
--- /dev/null
+++ b/packages/loot-design/src/svg/v0/Delete.js
@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+const SvgDelete = props => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    style={{
+      color: '#242134',
+      ...props.style
+    }}
+  >
+    <path
+      fill="none"
+      stroke="#000"
+      strokeWidth={4}
+      strokeLinecap="round"
+      strokeMiterlimit={10}
+      d="m2 2 20 20M22 2 2 22"
+    />
+  </svg>
+);
+
+export default SvgDelete;
diff --git a/packages/loot-design/src/svg/Delete.svg b/packages/loot-design/src/svg/v0/Delete.svg
similarity index 93%
rename from packages/loot-design/src/svg/Delete.svg
rename to packages/loot-design/src/svg/v0/Delete.svg
index 38e53c844c0741dc6a973cf17ca2994e4fbbf9ca..5c4d29bae717991a04b0811bb0f74d79b84c5ec0 100644
--- a/packages/loot-design/src/svg/Delete.svg
+++ b/packages/loot-design/src/svg/v0/Delete.svg
@@ -1,30 +1,30 @@
-<svg
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  version="1.1"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <line
-    fill="none"
-    stroke="black"
-    strokeWidth="4"
-    strokeLinecap="round"
-    strokeMiterlimit="10"
-    x1="2"
-    y1="2"
-    x2="22"
-    y2="22"
-  />
-  <line
-    fill="none"
-    stroke="black"
-    strokeWidth="4"
-    strokeLinecap="round"
-    strokeMiterlimit="10"
-    x1="22"
-    y1="2"
-    x2="2"
-    y2="22"
-  />
-</svg>
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <line
+    fill="none"
+    stroke="black"
+    strokeWidth="4"
+    strokeLinecap="round"
+    strokeMiterlimit="10"
+    x1="2"
+    y1="2"
+    x2="22"
+    y2="22"
+  />
+  <line
+    fill="none"
+    stroke="black"
+    strokeWidth="4"
+    strokeLinecap="round"
+    strokeMiterlimit="10"
+    x1="22"
+    y1="2"
+    x2="2"
+    y2="22"
+  />
+</svg>
diff --git a/packages/loot-design/src/svg/v0/ExpandArrow.js b/packages/loot-design/src/svg/v0/ExpandArrow.js
new file mode 100644
index 0000000000000000000000000000000000000000..b579e333aab164375b2e0f3a5e35d16253592336
--- /dev/null
+++ b/packages/loot-design/src/svg/v0/ExpandArrow.js
@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+const SvgExpandArrow = props => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 25 15"
+    style={{
+      color: '#242134',
+      ...props.style
+    }}
+  >
+    <path
+      fill="currentColor"
+      d="M24.483.576c-.309-.327-.674-.49-1.097-.49H1.56C1.137.086.771.25.463.576A1.635 1.635 0 0 0 0 1.737c0 .448.154.834.463 1.161l10.913 11.558c.31.327.675.49 1.097.49.422 0 .788-.163 1.096-.49L24.483 2.898c.308-.327.463-.713.463-1.16 0-.448-.155-.835-.463-1.162Z"
+    />
+  </svg>
+);
+
+export default SvgExpandArrow;
diff --git a/packages/loot-design/src/svg/ExpandArrow.svg b/packages/loot-design/src/svg/v0/ExpandArrow.svg
similarity index 100%
rename from packages/loot-design/src/svg/ExpandArrow.svg
rename to packages/loot-design/src/svg/v0/ExpandArrow.svg
diff --git a/packages/loot-design/src/svg/v0/LeftArrow2.js b/packages/loot-design/src/svg/v0/LeftArrow2.js
new file mode 100644
index 0000000000000000000000000000000000000000..6e406cbdb2fddc0fdb1972deb91d41023660ba43
--- /dev/null
+++ b/packages/loot-design/src/svg/v0/LeftArrow2.js
@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+const SvgLeftArrow2 = props => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 91 51"
+    style={{
+      color: '#242134',
+      ...props.style
+    }}
+  >
+    <path
+      fill="currentColor"
+      d="M30.256 48.614a3.14 3.14 0 0 0-.989-2.153L10.803 29.063h76.915a3.2 3.2 0 0 0 .315 0c1.584-.084 2.95-1.64 2.867-3.266-.082-1.625-1.598-3.028-3.182-2.943H10.803L29.267 5.49c1.284-1.099 1.456-3.057.385-4.373a2.972 2.972 0 0 0-4.48-.187L.971 23.695a3.163 3.163 0 0 0 0 4.56l24.2 22.766a2.98 2.98 0 0 0 2.205.84c1.669-.08 2.958-1.534 2.88-3.247Z"
+    />
+  </svg>
+);
+
+export default SvgLeftArrow2;
diff --git a/packages/loot-design/src/svg/LeftArrow2.svg b/packages/loot-design/src/svg/v0/LeftArrow2.svg
similarity index 100%
rename from packages/loot-design/src/svg/LeftArrow2.svg
rename to packages/loot-design/src/svg/v0/LeftArrow2.svg
diff --git a/packages/loot-design/src/svg/v0/Math.js b/packages/loot-design/src/svg/v0/Math.js
new file mode 100644
index 0000000000000000000000000000000000000000..50d4a066a617ef6cfe1d6d888c449079edac60a9
--- /dev/null
+++ b/packages/loot-design/src/svg/v0/Math.js
@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+const SvgMath = props => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 30 30"
+    style={{
+      color: '#242134',
+      ...props.style
+    }}
+  >
+    <path
+      fill="currentColor"
+      d="M2.813 0A2.81 2.81 0 0 0 0 2.812v8.022a2.8 2.8 0 0 0 2.813 2.802h8.01a2.8 2.8 0 0 0 2.813-2.802V2.812A2.81 2.81 0 0 0 10.824 0H2.813zm16.363 0a2.81 2.81 0 0 0-2.812 2.812v8.022a2.8 2.8 0 0 0 2.812 2.802h8.012A2.8 2.8 0 0 0 30 10.834V2.812A2.81 2.81 0 0 0 27.187 0h-8.01zM6.796 2.365c.73-.011 1.397.657 1.386 1.385v1.705h1.704c.72-.01 1.383.643 1.383 1.363s-.662 1.374-1.383 1.364H8.182v1.704c.01.72-.643 1.383-1.364 1.383-.72 0-1.374-.662-1.363-1.383V8.182H3.75c-.72.01-1.383-.643-1.383-1.364 0-.72.663-1.374 1.383-1.363h1.705V3.75c-.012-.714.628-1.374 1.342-1.385zm15.182 1.321 1.204 1.204 1.204-1.204c.573-.468 1.285-.54 1.841-.101.605.531.563 1.545.087 2.03L25.11 6.817l1.204 1.204c.522.5.531 1.437.02 1.948-.512.512-1.447.502-1.948-.02l-1.204-1.204-1.204 1.204c-.501.522-1.437.532-1.948.02-.512-.511-.502-1.447.02-1.948l1.204-1.204-1.204-1.204c-.53-.769-.48-1.4.062-2.008.617-.41 1.322-.464 1.866.08zM2.812 16.364A2.81 2.81 0 0 0 0 19.176v8.022A2.8 2.8 0 0 0 2.813 30h8.01a2.8 2.8 0 0 0 2.813-2.802v-8.022a2.81 2.81 0 0 0-2.812-2.812H2.813zm16.364 0a2.81 2.81 0 0 0-2.812 2.812v8.022A2.8 2.8 0 0 0 19.176 30h8.012A2.8 2.8 0 0 0 30 27.198v-8.022a2.81 2.81 0 0 0-2.813-2.812h-8.01zm.8 3.409h6.274c.72-.01 1.383.643 1.383 1.363S26.97 22.51 26.25 22.5h-6.136c-.714.036-1.397-.58-1.433-1.294-.037-.714.58-1.397 1.294-1.433zM3.611 21.818h6.274c.72-.01 1.383.643 1.383 1.364 0 .72-.662 1.374-1.383 1.363H3.75c-.714.037-1.397-.58-1.433-1.294-.036-.714.58-1.397 1.295-1.433zm16.363 2.046h6.275c.72-.01 1.383.643 1.383 1.363s-.663 1.374-1.383 1.364h-6.136c-.714.036-1.397-.58-1.433-1.295-.037-.714.58-1.396 1.294-1.432z"
+    />
+  </svg>
+);
+
+export default SvgMath;
diff --git a/packages/loot-design/src/svg/Math.svg b/packages/loot-design/src/svg/v0/Math.svg
similarity index 100%
rename from packages/loot-design/src/svg/Math.svg
rename to packages/loot-design/src/svg/v0/Math.svg
diff --git a/packages/loot-design/src/svg/v0/Merge.js b/packages/loot-design/src/svg/v0/Merge.js
new file mode 100644
index 0000000000000000000000000000000000000000..f122eabc3076a9de68b1437ceaafe9c047b07c80
--- /dev/null
+++ b/packages/loot-design/src/svg/v0/Merge.js
@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+const SvgMerge = props => (
+  <svg
+    {...props}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    style={{
+      color: '#242134',
+      ...props.style
+    }}
+  >
+    <path
+      d="M24 29h5.333M8 29H2.667M16 21l-8 8M16 21l8 8M16 2.667v18.666M16 2.667 8 9.333M16 2.667l8 6.666"
+      stroke="#000"
+      strokeWidth={3.5}
+      strokeMiterlimit={10}
+      strokeLinecap="round"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default SvgMerge;
diff --git a/packages/loot-design/src/svg/v0/RightArrow2.js b/packages/loot-design/src/svg/v0/RightArrow2.js
new file mode 100644
index 0000000000000000000000000000000000000000..b641cba2d3e40ed550920e79af3bdd991ddf46a9
--- /dev/null
+++ b/packages/loot-design/src/svg/v0/RightArrow2.js
@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+const SvgRightArrow2 = props => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 91 51"
+    style={{
+      color: '#242134',
+      ...props.style
+    }}
+  >
+    <path
+      fill="currentColor"
+      d="M63.004.003a3 3 0 0 0-1.875 5.219L79.44 22.034H3.16a3.257 3.257 0 0 0-.313 0c-1.57.082-2.925 1.585-2.843 3.156.081 1.571 1.585 2.926 3.156 2.844H79.44L61.129 44.815a3 3 0 1 0 4.062 4.407l24-22a3 3 0 0 0 0-4.407l-24-22a3 3 0 0 0-2.187-.812Z"
+    />
+  </svg>
+);
+
+export default SvgRightArrow2;
diff --git a/packages/loot-design/src/svg/RightArrow2.svg b/packages/loot-design/src/svg/v0/RightArrow2.svg
similarity index 100%
rename from packages/loot-design/src/svg/RightArrow2.svg
rename to packages/loot-design/src/svg/v0/RightArrow2.svg
diff --git a/packages/loot-design/src/svg/v0/Split.js b/packages/loot-design/src/svg/v0/Split.js
new file mode 100644
index 0000000000000000000000000000000000000000..6147dbc940803d812fc1f16dca4c5f35e7d888d1
--- /dev/null
+++ b/packages/loot-design/src/svg/v0/Split.js
@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+const SvgSplit = props => (
+  <svg
+    {...props}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    style={{
+      color: '#242134',
+      ...props.style
+    }}
+  >
+    <path
+      d="m30 9-4-4M30 9l-4 4M6 5 2 9M2 9l4 4M10 9H3M22 9h7M16 15l6-6M16 15l-6-6M16 28V15"
+      stroke="#000"
+      strokeWidth={3.5}
+      strokeMiterlimit={10}
+      strokeLinecap="round"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default SvgSplit;
diff --git a/packages/loot-design/src/svg/v0/Subtract.js b/packages/loot-design/src/svg/v0/Subtract.js
new file mode 100644
index 0000000000000000000000000000000000000000..d8878e99ac0cb8e60c67dec970683fd9284b9911
--- /dev/null
+++ b/packages/loot-design/src/svg/v0/Subtract.js
@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+const SvgSubtract = props => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    style={{
+      color: '#242134',
+      ...props.style
+    }}
+  >
+    <path
+      d="M23 11.5a1.5 1.5 0 0 1-1.5 1.5h-20a1.5 1.5 0 0 1 0-3h20a1.5 1.5 0 0 1 1.5 1.5Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default SvgSubtract;
diff --git a/packages/loot-design/src/svg/v0/Subtract.svg b/packages/loot-design/src/svg/v0/Subtract.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ac706252c72f5ed8f89feff9f44e33bb1ed4f10f
--- /dev/null
+++ b/packages/loot-design/src/svg/v0/Subtract.svg
@@ -0,0 +1,11 @@
+<svg
+width="24"
+height="24"
+viewBox="0 0 24 24"
+version="1.1"
+xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M23,11.5 L23,11.5 L23,11.5 C23,12.3284271 22.3284271,13 21.5,13 L1.5,13 L1.5,13 C0.671572875,13 1.01453063e-16,12.3284271 0,11.5 L0,11.5 L0,11.5 C-1.01453063e-16,10.6715729 0.671572875,10 1.5,10 L21.5,10 L21.5,10 C22.3284271,10 23,10.6715729 23,11.5 Z"
+  />
+</svg>
diff --git a/packages/loot-design/src/svg/merge.svg b/packages/loot-design/src/svg/v0/merge.svg
similarity index 100%
rename from packages/loot-design/src/svg/merge.svg
rename to packages/loot-design/src/svg/v0/merge.svg
diff --git a/packages/loot-design/src/svg/split.svg b/packages/loot-design/src/svg/v0/split.svg
similarity index 100%
rename from packages/loot-design/src/svg/split.svg
rename to packages/loot-design/src/svg/v0/split.svg
diff --git a/packages/loot-design/src/svg/v1/Add.web.js b/packages/loot-design/src/svg/v1/Add.js
similarity index 78%
rename from packages/loot-design/src/svg/v1/Add.web.js
rename to packages/loot-design/src/svg/v1/Add.js
index b0ade557f4b507047269198de7908cf057c14705..8071b07f3384817811a64168e64ac50cb84c9f85 100644
--- a/packages/loot-design/src/svg/v1/Add.web.js
+++ b/packages/loot-design/src/svg/v1/Add.js
@@ -1,9 +1,10 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgAdd = props => (
   <svg
     {...props}
     viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
     style={{
       color: '#242134',
       ...props.style
@@ -12,12 +13,12 @@ const SvgAdd = props => (
     <path
       fill="currentColor"
       className="path"
-      d="M23 11.5a1.5 1.5 0 0 1-1.5 1.5h-20a1.5 1.5 0 0 1 0-3h20a1.5 1.5 0 0 1 1.5 1.5z"
+      d="M23 11.5a1.5 1.5 0 0 1-1.5 1.5h-20a1.5 1.5 0 0 1 0-3h20a1.5 1.5 0 0 1 1.5 1.5Z"
     />
     <path
       fill="currentColor"
       className="path"
-      d="M11.5 23a1.5 1.5 0 0 1-1.5-1.5v-20a1.5 1.5 0 0 1 3 0v20a1.5 1.5 0 0 1-1.5 1.5z"
+      d="M11.5 23a1.5 1.5 0 0 1-1.5-1.5v-20a1.5 1.5 0 0 1 3 0v20a1.5 1.5 0 0 1-1.5 1.5Z"
     />
   </svg>
 );
diff --git a/packages/loot-design/src/svg/v1/AddOutline.web.js b/packages/loot-design/src/svg/v1/AddOutline.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/AddOutline.web.js
rename to packages/loot-design/src/svg/v1/AddOutline.js
index acb68e15894b4533c1905c50a77c64ad9c86ca6f..876b0ad12f2b297c64a96288c9fe0c0d144f03bf 100644
--- a/packages/loot-design/src/svg/v1/AddOutline.web.js
+++ b/packages/loot-design/src/svg/v1/AddOutline.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgAddOutline = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/AddSolid.web.js b/packages/loot-design/src/svg/v1/AddSolid.js
similarity index 81%
rename from packages/loot-design/src/svg/v1/AddSolid.web.js
rename to packages/loot-design/src/svg/v1/AddSolid.js
index 81d2aa417a0041478d108fd0273feed391490788..91f9dcddbff52245b26c9a888f4c743f4521f5df 100644
--- a/packages/loot-design/src/svg/v1/AddSolid.web.js
+++ b/packages/loot-design/src/svg/v1/AddSolid.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgAddSolid = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Adjust.web.js b/packages/loot-design/src/svg/v1/Adjust.js
similarity index 80%
rename from packages/loot-design/src/svg/v1/Adjust.web.js
rename to packages/loot-design/src/svg/v1/Adjust.js
index 4017e90aa022e85014cc60d231c476c13332650b..dda72f91c088df391c262bf7feb4921715de060e 100644
--- a/packages/loot-design/src/svg/v1/Adjust.web.js
+++ b/packages/loot-design/src/svg/v1/Adjust.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgAdjust = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Airplane.web.js b/packages/loot-design/src/svg/v1/Airplane.js
similarity index 81%
rename from packages/loot-design/src/svg/v1/Airplane.web.js
rename to packages/loot-design/src/svg/v1/Airplane.js
index 1da92175c5c6b17f988538356cb24950f13623ae..61e9d547e62fb65676265ee67e56f47d21f80e34 100644
--- a/packages/loot-design/src/svg/v1/Airplane.web.js
+++ b/packages/loot-design/src/svg/v1/Airplane.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgAirplane = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Album.web.js b/packages/loot-design/src/svg/v1/Album.js
similarity index 81%
rename from packages/loot-design/src/svg/v1/Album.web.js
rename to packages/loot-design/src/svg/v1/Album.js
index debd65dac6d678f8ac92917bcca48b763b27ac37..c74720b9396d0db6882593bbc6f958b9b08c6641 100644
--- a/packages/loot-design/src/svg/v1/Album.web.js
+++ b/packages/loot-design/src/svg/v1/Album.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgAlbum = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/AlignCenter.web.js b/packages/loot-design/src/svg/v1/AlignCenter.js
similarity index 81%
rename from packages/loot-design/src/svg/v1/AlignCenter.web.js
rename to packages/loot-design/src/svg/v1/AlignCenter.js
index 501f8752f606af4e8397f6e5b47d1d6336c6b35a..8ca1481af3ed1af43927f891c4455bcad09cc48b 100644
--- a/packages/loot-design/src/svg/v1/AlignCenter.web.js
+++ b/packages/loot-design/src/svg/v1/AlignCenter.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgAlignCenter = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/AlignJustified.web.js b/packages/loot-design/src/svg/v1/AlignJustified.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/AlignJustified.web.js
rename to packages/loot-design/src/svg/v1/AlignJustified.js
index dc9d0e0f6b6421268c289b676d159dd120c2a135..2d67d23a4e77d47d44d3d7bfe2fe4a9a4da978cf 100644
--- a/packages/loot-design/src/svg/v1/AlignJustified.web.js
+++ b/packages/loot-design/src/svg/v1/AlignJustified.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgAlignJustified = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/AlignLeft.web.js b/packages/loot-design/src/svg/v1/AlignLeft.js
similarity index 81%
rename from packages/loot-design/src/svg/v1/AlignLeft.web.js
rename to packages/loot-design/src/svg/v1/AlignLeft.js
index 31cf05ea3106409392bff4ecaf38457efeafbe94..9319a67ac58149d981b31921d65e36ed5e369c41 100644
--- a/packages/loot-design/src/svg/v1/AlignLeft.web.js
+++ b/packages/loot-design/src/svg/v1/AlignLeft.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgAlignLeft = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/AlignRight.web.js b/packages/loot-design/src/svg/v1/AlignRight.js
similarity index 81%
rename from packages/loot-design/src/svg/v1/AlignRight.web.js
rename to packages/loot-design/src/svg/v1/AlignRight.js
index 80c633d0ff285f487e230096a404057af81d0e97..0104858205837e2c08e64c5cf7517720edb2fa87 100644
--- a/packages/loot-design/src/svg/v1/AlignRight.web.js
+++ b/packages/loot-design/src/svg/v1/AlignRight.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgAlignRight = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Anchor.web.js b/packages/loot-design/src/svg/v1/Anchor.js
similarity index 86%
rename from packages/loot-design/src/svg/v1/Anchor.web.js
rename to packages/loot-design/src/svg/v1/Anchor.js
index 9fb1ccd4be41e76fed3dd52f1f53de5ce5898fc2..0dfce9dc292d86fb74dfd4599e598409965be5eb 100644
--- a/packages/loot-design/src/svg/v1/Anchor.web.js
+++ b/packages/loot-design/src/svg/v1/Anchor.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgAnchor = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Announcement.web.js b/packages/loot-design/src/svg/v1/Announcement.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/Announcement.web.js
rename to packages/loot-design/src/svg/v1/Announcement.js
index c8c837cbd7230e8a261976e8cdf9825cd4ad9d22..ccb602b7fe2e62c75d354228dc85d62e44f80057 100644
--- a/packages/loot-design/src/svg/v1/Announcement.web.js
+++ b/packages/loot-design/src/svg/v1/Announcement.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgAnnouncement = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Apparel.web.js b/packages/loot-design/src/svg/v1/Apparel.js
similarity index 80%
rename from packages/loot-design/src/svg/v1/Apparel.web.js
rename to packages/loot-design/src/svg/v1/Apparel.js
index 1846a72010a368c06f9512788e37f7ca5a4889b4..e1215d379e9a7809761c01cbde12fe3f2195973b 100644
--- a/packages/loot-design/src/svg/v1/Apparel.web.js
+++ b/packages/loot-design/src/svg/v1/Apparel.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgApparel = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/ArrowDown.web.js b/packages/loot-design/src/svg/v1/ArrowDown.js
similarity index 57%
rename from packages/loot-design/src/svg/v1/ArrowDown.web.js
rename to packages/loot-design/src/svg/v1/ArrowDown.js
index 58072fb253835c6c599e8fe68278c661df094c62..3c62d336d7551750663a9ed816a24947fe2cfa55 100644
--- a/packages/loot-design/src/svg/v1/ArrowDown.web.js
+++ b/packages/loot-design/src/svg/v1/ArrowDown.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgArrowDown = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgArrowDown = props => (
     }}
   >
     <path
-      d="M9 16.172l-6.071-6.071-1.414 1.414L10 20l.707-.707 7.778-7.778-1.414-1.414L11 16.172V0H9z"
+      d="m9 16.172-6.071-6.071-1.414 1.414L10 20l.707-.707 7.778-7.778-1.414-1.414L11 16.172V0H9z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/ArrowLeft.web.js b/packages/loot-design/src/svg/v1/ArrowLeft.js
similarity index 66%
rename from packages/loot-design/src/svg/v1/ArrowLeft.web.js
rename to packages/loot-design/src/svg/v1/ArrowLeft.js
index af94cd916cfd13394c9ca8ef460818bef2943886..ec6a9f71c5841c729aa9b3e9b7eb268a573bf940 100644
--- a/packages/loot-design/src/svg/v1/ArrowLeft.web.js
+++ b/packages/loot-design/src/svg/v1/ArrowLeft.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgArrowLeft = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgArrowLeft = props => (
     }}
   >
     <path
-      d="M3.828 9l6.071-6.071-1.414-1.414L0 10l.707.707 7.778 7.778 1.414-1.414L3.828 11H20V9H3.828z"
+      d="m3.828 9 6.071-6.071-1.414-1.414L0 10l.707.707 7.778 7.778 1.414-1.414L3.828 11H20V9H3.828z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/ArrowOutlineDown.web.js b/packages/loot-design/src/svg/v1/ArrowOutlineDown.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/ArrowOutlineDown.web.js
rename to packages/loot-design/src/svg/v1/ArrowOutlineDown.js
index aba85265a40c16a028a9cfc01ceb1707a50ddd4c..8959ea87e8955cb75b7d5aa8184eac97a0d897a9 100644
--- a/packages/loot-design/src/svg/v1/ArrowOutlineDown.web.js
+++ b/packages/loot-design/src/svg/v1/ArrowOutlineDown.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgArrowOutlineDown = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/ArrowOutlineLeft.web.js b/packages/loot-design/src/svg/v1/ArrowOutlineLeft.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/ArrowOutlineLeft.web.js
rename to packages/loot-design/src/svg/v1/ArrowOutlineLeft.js
index 9835986c1add2a78cc65b64436ebba16826c075a..126f1df56ce165f45f225f856928928354abb82e 100644
--- a/packages/loot-design/src/svg/v1/ArrowOutlineLeft.web.js
+++ b/packages/loot-design/src/svg/v1/ArrowOutlineLeft.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgArrowOutlineLeft = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/ArrowOutlineRight.web.js b/packages/loot-design/src/svg/v1/ArrowOutlineRight.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/ArrowOutlineRight.web.js
rename to packages/loot-design/src/svg/v1/ArrowOutlineRight.js
index 754c202b067ee6b8c7bdca3f7f749cdfa339b63b..7f0d9d6f93bc3184cbd3ca51f57ccf7adcf87ba4 100644
--- a/packages/loot-design/src/svg/v1/ArrowOutlineRight.web.js
+++ b/packages/loot-design/src/svg/v1/ArrowOutlineRight.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgArrowOutlineRight = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/ArrowOutlineUp.web.js b/packages/loot-design/src/svg/v1/ArrowOutlineUp.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/ArrowOutlineUp.web.js
rename to packages/loot-design/src/svg/v1/ArrowOutlineUp.js
index 34c815e988fc2db92e4b3a4f8593bbbdcbaa5a44..0398c1212b1c8df56b6f8589db5a1055d02ba672 100644
--- a/packages/loot-design/src/svg/v1/ArrowOutlineUp.web.js
+++ b/packages/loot-design/src/svg/v1/ArrowOutlineUp.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgArrowOutlineUp = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/ArrowRight.web.js b/packages/loot-design/src/svg/v1/ArrowRight.js
similarity index 58%
rename from packages/loot-design/src/svg/v1/ArrowRight.web.js
rename to packages/loot-design/src/svg/v1/ArrowRight.js
index 71d4892cfcc498b24c7e6b5ac9ce63203f4462c8..a9948891815d8f5ecfc15c597ea2837912b4321c 100644
--- a/packages/loot-design/src/svg/v1/ArrowRight.web.js
+++ b/packages/loot-design/src/svg/v1/ArrowRight.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgArrowRight = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgArrowRight = props => (
     }}
   >
     <path
-      d="M16.172 9l-6.071-6.071 1.414-1.414L20 10l-.707.707-7.778 7.778-1.414-1.414L16.172 11H0V9z"
+      d="m16.172 9-6.071-6.071 1.414-1.414L20 10l-.707.707-7.778 7.778-1.414-1.414L16.172 11H0V9z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/ArrowThickDown.web.js b/packages/loot-design/src/svg/v1/ArrowThickDown.js
similarity index 78%
rename from packages/loot-design/src/svg/v1/ArrowThickDown.web.js
rename to packages/loot-design/src/svg/v1/ArrowThickDown.js
index f919ce5adb955f231b752d87d71667d14cc3a862..7a4b6a88e2a222bd5ddf7fdcbafd24665355bfb3 100644
--- a/packages/loot-design/src/svg/v1/ArrowThickDown.web.js
+++ b/packages/loot-design/src/svg/v1/ArrowThickDown.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgArrowThickDown = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/ArrowThickLeft.web.js b/packages/loot-design/src/svg/v1/ArrowThickLeft.js
similarity index 78%
rename from packages/loot-design/src/svg/v1/ArrowThickLeft.web.js
rename to packages/loot-design/src/svg/v1/ArrowThickLeft.js
index 865e050164d8074d94e431a98a6fe34dcf6f9293..b85edca2c07dcbd3e821d1020453bb8e14d6413f 100644
--- a/packages/loot-design/src/svg/v1/ArrowThickLeft.web.js
+++ b/packages/loot-design/src/svg/v1/ArrowThickLeft.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgArrowThickLeft = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/ArrowThickRight.web.js b/packages/loot-design/src/svg/v1/ArrowThickRight.js
similarity index 78%
rename from packages/loot-design/src/svg/v1/ArrowThickRight.web.js
rename to packages/loot-design/src/svg/v1/ArrowThickRight.js
index 24197e728de5f11cabef624a907f1553c8b90fb6..72c2a64b720c621c383b74bedad7cf2d434179a9 100644
--- a/packages/loot-design/src/svg/v1/ArrowThickRight.web.js
+++ b/packages/loot-design/src/svg/v1/ArrowThickRight.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgArrowThickRight = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/ArrowThickUp.web.js b/packages/loot-design/src/svg/v1/ArrowThickUp.js
similarity index 78%
rename from packages/loot-design/src/svg/v1/ArrowThickUp.web.js
rename to packages/loot-design/src/svg/v1/ArrowThickUp.js
index 8813010c02ddbb436c47c675d8bd7510fb343ea7..0d722a70e22b1c7b15fe28ec38bcf95ae5692a52 100644
--- a/packages/loot-design/src/svg/v1/ArrowThickUp.web.js
+++ b/packages/loot-design/src/svg/v1/ArrowThickUp.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgArrowThickUp = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/ArrowThinDown.web.js b/packages/loot-design/src/svg/v1/ArrowThinDown.js
similarity index 58%
rename from packages/loot-design/src/svg/v1/ArrowThinDown.web.js
rename to packages/loot-design/src/svg/v1/ArrowThinDown.js
index ce3a9fc236857ef56f0295eed7b06d48c77174ed..44d7e3224387839a67499fd6419c7a17e1e10343 100644
--- a/packages/loot-design/src/svg/v1/ArrowThinDown.web.js
+++ b/packages/loot-design/src/svg/v1/ArrowThinDown.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgArrowThinDown = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgArrowThinDown = props => (
     }}
   >
     <path
-      d="M9 16.172l-6.071-6.071-1.414 1.414L10 20l.707-.707 7.778-7.778-1.414-1.414L11 16.172V0H9z"
+      d="m9 16.172-6.071-6.071-1.414 1.414L10 20l.707-.707 7.778-7.778-1.414-1.414L11 16.172V0H9z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/ArrowThinLeft.web.js b/packages/loot-design/src/svg/v1/ArrowThinLeft.js
similarity index 67%
rename from packages/loot-design/src/svg/v1/ArrowThinLeft.web.js
rename to packages/loot-design/src/svg/v1/ArrowThinLeft.js
index 3d47e091f47028f45b6303f4b6b00d3bb5d2dd5f..7ba23705ee829ce89e54ee241e52ad8c4d646c04 100644
--- a/packages/loot-design/src/svg/v1/ArrowThinLeft.web.js
+++ b/packages/loot-design/src/svg/v1/ArrowThinLeft.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgArrowThinLeft = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgArrowThinLeft = props => (
     }}
   >
     <path
-      d="M3.828 9l6.071-6.071-1.414-1.414L0 10l.707.707 7.778 7.778 1.414-1.414L3.828 11H20V9H3.828z"
+      d="m3.828 9 6.071-6.071-1.414-1.414L0 10l.707.707 7.778 7.778 1.414-1.414L3.828 11H20V9H3.828z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/ArrowThinRight.web.js b/packages/loot-design/src/svg/v1/ArrowThinRight.js
similarity index 58%
rename from packages/loot-design/src/svg/v1/ArrowThinRight.web.js
rename to packages/loot-design/src/svg/v1/ArrowThinRight.js
index e85098b809638157cbc220afd2190e03279d6882..7291e35e958e83f9bbd87816d6cb3b82632dac25 100644
--- a/packages/loot-design/src/svg/v1/ArrowThinRight.web.js
+++ b/packages/loot-design/src/svg/v1/ArrowThinRight.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgArrowThinRight = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgArrowThinRight = props => (
     }}
   >
     <path
-      d="M16.172 9l-6.071-6.071 1.414-1.414L20 10l-.707.707-7.778 7.778-1.414-1.414L16.172 11H0V9z"
+      d="m16.172 9-6.071-6.071 1.414-1.414L20 10l-.707.707-7.778 7.778-1.414-1.414L16.172 11H0V9z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/ArrowThinUp.web.js b/packages/loot-design/src/svg/v1/ArrowThinUp.js
similarity index 67%
rename from packages/loot-design/src/svg/v1/ArrowThinUp.web.js
rename to packages/loot-design/src/svg/v1/ArrowThinUp.js
index 2d87bd4bea256a663911bf05335956c52174ed41..fff2cb43f742f3736ba4ac1980db84852aaad9a2 100644
--- a/packages/loot-design/src/svg/v1/ArrowThinUp.web.js
+++ b/packages/loot-design/src/svg/v1/ArrowThinUp.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgArrowThinUp = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgArrowThinUp = props => (
     }}
   >
     <path
-      d="M9 3.828L2.929 9.899 1.515 8.485 10 0l.707.707 7.778 7.778-1.414 1.414L11 3.828V20H9V3.828z"
+      d="M9 3.828 2.929 9.899 1.515 8.485 10 0l.707.707 7.778 7.778-1.414 1.414L11 3.828V20H9V3.828z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/ArrowUp.web.js b/packages/loot-design/src/svg/v1/ArrowUp.js
similarity index 66%
rename from packages/loot-design/src/svg/v1/ArrowUp.web.js
rename to packages/loot-design/src/svg/v1/ArrowUp.js
index 76a5b48d9d3bb6e6963061a7b6b011e0a67addfa..19ff8f94460ef0700ce7257aa4df40b20212db67 100644
--- a/packages/loot-design/src/svg/v1/ArrowUp.web.js
+++ b/packages/loot-design/src/svg/v1/ArrowUp.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgArrowUp = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgArrowUp = props => (
     }}
   >
     <path
-      d="M9 3.828L2.929 9.899 1.515 8.485 10 0l.707.707 7.778 7.778-1.414 1.414L11 3.828V20H9V3.828z"
+      d="M9 3.828 2.929 9.899 1.515 8.485 10 0l.707.707 7.778 7.778-1.414 1.414L11 3.828V20H9V3.828z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/Artist.js b/packages/loot-design/src/svg/v1/Artist.js
new file mode 100644
index 0000000000000000000000000000000000000000..6138c430a245362e003493dfa975b1ac521585c5
--- /dev/null
+++ b/packages/loot-design/src/svg/v1/Artist.js
@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+const SvgArtist = props => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    style={{
+      color: '#242134',
+      ...props.style
+    }}
+  >
+    <path
+      d="m15.75 8-3.74-3.75a3.99 3.99 0 0 1 6.82-3.08A4 4 0 0 1 15.75 8zm-13.9 7.3 9.2-9.19 2.83 2.83-9.2 9.2-2.82-2.84zm-1.4 2.83 2.11-2.12 1.42 1.42-2.12 2.12-1.42-1.42zM10 15l2-2v7h-2v-5z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default SvgArtist;
diff --git a/packages/loot-design/src/svg/v1/Artist.web.js b/packages/loot-design/src/svg/v1/Artist.web.js
deleted file mode 100644
index 00f05e36fcfd5752ec80b9b91795a1bf0b6e3b1e..0000000000000000000000000000000000000000
--- a/packages/loot-design/src/svg/v1/Artist.web.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-
-const SvgArtist = props => (
-  <svg
-    {...props}
-    viewBox="0 0 20 20"
-    style={{
-      color: '#242134',
-      ...props.style
-    }}
-  >
-    <path
-      d="M15.75 8l-3.74-3.75a3.99 3.99 0 0 1 6.82-3.08A4 4 0 0 1 15.75 8zm-13.9 7.3l9.2-9.19 2.83 2.83-9.2 9.2-2.82-2.84zm-1.4 2.83l2.11-2.12 1.42 1.42-2.12 2.12-1.42-1.42zM10 15l2-2v7h-2v-5z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export default SvgArtist;
diff --git a/packages/loot-design/src/svg/v1/AtSymbol.web.js b/packages/loot-design/src/svg/v1/AtSymbol.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/AtSymbol.web.js
rename to packages/loot-design/src/svg/v1/AtSymbol.js
index 41332f225fe47d0856b8a969d10752836bc0cb37..b8864865d3503294ac8712907e1228b9ca079e8d 100644
--- a/packages/loot-design/src/svg/v1/AtSymbol.web.js
+++ b/packages/loot-design/src/svg/v1/AtSymbol.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgAtSymbol = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Attachment.web.js b/packages/loot-design/src/svg/v1/Attachment.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/Attachment.web.js
rename to packages/loot-design/src/svg/v1/Attachment.js
index 3b964294e4980f2cfe6679be13414941cce083bc..ae1c21c348a5bbfd2b32eaa1e635f206aebe3034 100644
--- a/packages/loot-design/src/svg/v1/Attachment.web.js
+++ b/packages/loot-design/src/svg/v1/Attachment.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgAttachment = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Backspace.web.js b/packages/loot-design/src/svg/v1/Backspace.js
similarity index 70%
rename from packages/loot-design/src/svg/v1/Backspace.web.js
rename to packages/loot-design/src/svg/v1/Backspace.js
index 16bdb87c650cba338a679f3c00a5fd6cf9d2c8b3..09f05a2d3a7a1c16dfb2fd34325d01a5a97997d1 100644
--- a/packages/loot-design/src/svg/v1/Backspace.web.js
+++ b/packages/loot-design/src/svg/v1/Backspace.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBackspace = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgBackspace = props => (
     }}
   >
     <path
-      d="M0 10l7-7h13v14H7l-7-7zm14.41 0l2.13-2.12-1.42-1.42L13 8.6l-2.12-2.13-1.42 1.42L11.6 10l-2.13 2.12 1.42 1.42L13 11.4l2.12 2.13 1.42-1.42L14.4 10z"
+      d="m0 10 7-7h13v14H7l-7-7zm14.41 0 2.13-2.12-1.42-1.42L13 8.6l-2.12-2.13-1.42 1.42L11.6 10l-2.13 2.12 1.42 1.42L13 11.4l2.12 2.13 1.42-1.42L14.4 10z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/Backward.web.js b/packages/loot-design/src/svg/v1/Backward.js
similarity index 78%
rename from packages/loot-design/src/svg/v1/Backward.web.js
rename to packages/loot-design/src/svg/v1/Backward.js
index 2499757fb32fa182df914ad7bea3f3cbebc13f52..66c6ffd5dd3facbd3e1c778756730a83c0a76a7a 100644
--- a/packages/loot-design/src/svg/v1/Backward.web.js
+++ b/packages/loot-design/src/svg/v1/Backward.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBackward = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/BackwardStep.web.js b/packages/loot-design/src/svg/v1/BackwardStep.js
similarity index 78%
rename from packages/loot-design/src/svg/v1/BackwardStep.web.js
rename to packages/loot-design/src/svg/v1/BackwardStep.js
index c95c472b358602f4f9e131c10b5099d0bea37199..06de029338a2deb7c97771016d379186327da950 100644
--- a/packages/loot-design/src/svg/v1/BackwardStep.web.js
+++ b/packages/loot-design/src/svg/v1/BackwardStep.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBackwardStep = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Badge.web.js b/packages/loot-design/src/svg/v1/Badge.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/Badge.web.js
rename to packages/loot-design/src/svg/v1/Badge.js
index 4ed55e81dead6190dd6fd8717c6642ef7dd86f74..0c278bce4e730189585284911d1b25bc130187ac 100644
--- a/packages/loot-design/src/svg/v1/Badge.web.js
+++ b/packages/loot-design/src/svg/v1/Badge.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBadge = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/BatteryFull.web.js b/packages/loot-design/src/svg/v1/BatteryFull.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/BatteryFull.web.js
rename to packages/loot-design/src/svg/v1/BatteryFull.js
index c749df49e3a5a2a50c7f01c1cdb7844effb50ae2..704eb4a09c5fc694d5a956f7205a1fb82d214891 100644
--- a/packages/loot-design/src/svg/v1/BatteryFull.web.js
+++ b/packages/loot-design/src/svg/v1/BatteryFull.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBatteryFull = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/BatteryHalf.web.js b/packages/loot-design/src/svg/v1/BatteryHalf.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/BatteryHalf.web.js
rename to packages/loot-design/src/svg/v1/BatteryHalf.js
index b62d9a0fcea96c8298b70254aa8bada891b635c8..5c768cdd050c5dfe6eae0dfdfe122a201d2b3396 100644
--- a/packages/loot-design/src/svg/v1/BatteryHalf.web.js
+++ b/packages/loot-design/src/svg/v1/BatteryHalf.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBatteryHalf = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/BatteryLow.web.js b/packages/loot-design/src/svg/v1/BatteryLow.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/BatteryLow.web.js
rename to packages/loot-design/src/svg/v1/BatteryLow.js
index f95267dbf41fc5046bbc55b8fdfd56146f0ea914..3d81c286a9b3c1862f62a128c7677fd7c141b7aa 100644
--- a/packages/loot-design/src/svg/v1/BatteryLow.web.js
+++ b/packages/loot-design/src/svg/v1/BatteryLow.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBatteryLow = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Beverage.web.js b/packages/loot-design/src/svg/v1/Beverage.js
similarity index 81%
rename from packages/loot-design/src/svg/v1/Beverage.web.js
rename to packages/loot-design/src/svg/v1/Beverage.js
index d0efad7bb68a024761f773f0d4fabe39f7232af9..fd398c424af686e435b79fb058d50ff50db1f20f 100644
--- a/packages/loot-design/src/svg/v1/Beverage.web.js
+++ b/packages/loot-design/src/svg/v1/Beverage.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBeverage = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Block.web.js b/packages/loot-design/src/svg/v1/Block.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/Block.web.js
rename to packages/loot-design/src/svg/v1/Block.js
index dd02585a113d53a4f1c9ab62176cac111e6503de..4130d13b895252f16074c6539a56e7dae2bdb3bf 100644
--- a/packages/loot-design/src/svg/v1/Block.web.js
+++ b/packages/loot-design/src/svg/v1/Block.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBlock = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Bluetooth.web.js b/packages/loot-design/src/svg/v1/Bluetooth.js
similarity index 63%
rename from packages/loot-design/src/svg/v1/Bluetooth.web.js
rename to packages/loot-design/src/svg/v1/Bluetooth.js
index 716d783d47a426b6a934caea488e56a1925c2c64..5cac233e5cfe5eea4e50e7fdf5e7948b7a91bf8b 100644
--- a/packages/loot-design/src/svg/v1/Bluetooth.web.js
+++ b/packages/loot-design/src/svg/v1/Bluetooth.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBluetooth = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgBluetooth = props => (
     }}
   >
     <path
-      d="M9.41 0l6 6-4 4 4 4-6 6H9v-7.59l-3.3 3.3-1.4-1.42L8.58 10l-4.3-4.3L5.7 4.3 9 7.58V0h.41zM11 4.41V7.6L12.59 6 11 4.41zM12.59 14L11 12.41v3.18L12.59 14z"
+      d="m9.41 0 6 6-4 4 4 4-6 6H9v-7.59l-3.3 3.3-1.4-1.42L8.58 10l-4.3-4.3L5.7 4.3 9 7.58V0h.41zM11 4.41V7.6L12.59 6 11 4.41zM12.59 14 11 12.41v3.18L12.59 14z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/Bolt.web.js b/packages/loot-design/src/svg/v1/Bolt.js
similarity index 78%
rename from packages/loot-design/src/svg/v1/Bolt.web.js
rename to packages/loot-design/src/svg/v1/Bolt.js
index fd178ddc7164102553ccfe4cd23b51ea7211353c..b9527f636be772602f706d3fbfbae634de73957f 100644
--- a/packages/loot-design/src/svg/v1/Bolt.web.js
+++ b/packages/loot-design/src/svg/v1/Bolt.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBolt = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/BookReference.web.js b/packages/loot-design/src/svg/v1/BookReference.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/BookReference.web.js
rename to packages/loot-design/src/svg/v1/BookReference.js
index 8c24902e8c0fb0907aab670ad164eacb7bf26511..24dd7a898f3a42d5cde6b56c8a29ede34822f6bc 100644
--- a/packages/loot-design/src/svg/v1/BookReference.web.js
+++ b/packages/loot-design/src/svg/v1/BookReference.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBookReference = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Bookmark.web.js b/packages/loot-design/src/svg/v1/Bookmark.js
similarity index 80%
rename from packages/loot-design/src/svg/v1/Bookmark.web.js
rename to packages/loot-design/src/svg/v1/Bookmark.js
index b6798df713e9000f0a3af85dd1470a7f88b920e5..f5c85b3196d1ba0052d7c2fbaf1b2e7bf1be882e 100644
--- a/packages/loot-design/src/svg/v1/Bookmark.web.js
+++ b/packages/loot-design/src/svg/v1/Bookmark.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBookmark = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/BookmarkCopy2.web.js b/packages/loot-design/src/svg/v1/BookmarkCopy2.js
similarity index 78%
rename from packages/loot-design/src/svg/v1/BookmarkCopy2.web.js
rename to packages/loot-design/src/svg/v1/BookmarkCopy2.js
index e8976c428b71f5d2334856c7d034eb7bbea0a7a2..e100e6f8200d97f759e119e4db5012aecc743064 100644
--- a/packages/loot-design/src/svg/v1/BookmarkCopy2.web.js
+++ b/packages/loot-design/src/svg/v1/BookmarkCopy2.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBookmarkCopy2 = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/BookmarkCopy3.web.js b/packages/loot-design/src/svg/v1/BookmarkCopy3.js
similarity index 79%
rename from packages/loot-design/src/svg/v1/BookmarkCopy3.web.js
rename to packages/loot-design/src/svg/v1/BookmarkCopy3.js
index d497626ee9245e5d8c0e4b61114ef60444045411..e3ccad7ae4591b1b2e94f468702d30a57ed6ccb7 100644
--- a/packages/loot-design/src/svg/v1/BookmarkCopy3.web.js
+++ b/packages/loot-design/src/svg/v1/BookmarkCopy3.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBookmarkCopy3 = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/BookmarkOutline.web.js b/packages/loot-design/src/svg/v1/BookmarkOutline.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/BookmarkOutline.web.js
rename to packages/loot-design/src/svg/v1/BookmarkOutline.js
index f40eeb8ce446c6da8442d5649bb76d8d8f24a013..08bf96d8b8dc57b4cae27dcba9761ffe29cc1f39 100644
--- a/packages/loot-design/src/svg/v1/BookmarkOutline.web.js
+++ b/packages/loot-design/src/svg/v1/BookmarkOutline.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBookmarkOutline = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/BookmarkOutlineAdd.web.js b/packages/loot-design/src/svg/v1/BookmarkOutlineAdd.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/BookmarkOutlineAdd.web.js
rename to packages/loot-design/src/svg/v1/BookmarkOutlineAdd.js
index f4f29139c8398056aa4a4aa4f6ecb2354f5051c5..b406cd79213287f1c756754fd8257d40398d8056 100644
--- a/packages/loot-design/src/svg/v1/BookmarkOutlineAdd.web.js
+++ b/packages/loot-design/src/svg/v1/BookmarkOutlineAdd.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBookmarkOutlineAdd = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/BorderAll.web.js b/packages/loot-design/src/svg/v1/BorderAll.js
similarity index 81%
rename from packages/loot-design/src/svg/v1/BorderAll.web.js
rename to packages/loot-design/src/svg/v1/BorderAll.js
index 1dbd36a4b1464f2ba1282c497f32029d278cb54b..d917cd94f3cf03dac86188d41c5cf4730a82ef48 100644
--- a/packages/loot-design/src/svg/v1/BorderAll.web.js
+++ b/packages/loot-design/src/svg/v1/BorderAll.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBorderAll = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/BorderBottom.web.js b/packages/loot-design/src/svg/v1/BorderBottom.js
similarity index 87%
rename from packages/loot-design/src/svg/v1/BorderBottom.web.js
rename to packages/loot-design/src/svg/v1/BorderBottom.js
index 442af4a860cfc42d48e28a926b661f6a0d002c07..43076423992d36b40dcdd7a528ac8bf043830b06 100644
--- a/packages/loot-design/src/svg/v1/BorderBottom.web.js
+++ b/packages/loot-design/src/svg/v1/BorderBottom.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBorderBottom = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/BorderHorizontal.web.js b/packages/loot-design/src/svg/v1/BorderHorizontal.js
similarity index 87%
rename from packages/loot-design/src/svg/v1/BorderHorizontal.web.js
rename to packages/loot-design/src/svg/v1/BorderHorizontal.js
index 943fc315e82e3ba450eaefed854dbd8786092403..d791fe8a914981aa75b6e1724a31ef1a8fb172a7 100644
--- a/packages/loot-design/src/svg/v1/BorderHorizontal.web.js
+++ b/packages/loot-design/src/svg/v1/BorderHorizontal.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBorderHorizontal = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/BorderInner.web.js b/packages/loot-design/src/svg/v1/BorderInner.js
similarity index 86%
rename from packages/loot-design/src/svg/v1/BorderInner.web.js
rename to packages/loot-design/src/svg/v1/BorderInner.js
index 63744d7add82d18233cff5189ab0f7c86a983d83..af0854dfef0f38c6f681e995b4d688f46bb8c6be 100644
--- a/packages/loot-design/src/svg/v1/BorderInner.web.js
+++ b/packages/loot-design/src/svg/v1/BorderInner.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBorderInner = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/BorderLeft.web.js b/packages/loot-design/src/svg/v1/BorderLeft.js
similarity index 87%
rename from packages/loot-design/src/svg/v1/BorderLeft.web.js
rename to packages/loot-design/src/svg/v1/BorderLeft.js
index 411dbe87feca03d814ae8201a3a091349820c73d..71cd7b89b4283d7b4eb57b042f332a6c24e3bd4e 100644
--- a/packages/loot-design/src/svg/v1/BorderLeft.web.js
+++ b/packages/loot-design/src/svg/v1/BorderLeft.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBorderLeft = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/BorderNone.web.js b/packages/loot-design/src/svg/v1/BorderNone.js
similarity index 88%
rename from packages/loot-design/src/svg/v1/BorderNone.web.js
rename to packages/loot-design/src/svg/v1/BorderNone.js
index 63dc135f20afcc5eef4f62750567864088fa525f..d1abde369e0797012b9ab847009bf5e256281d13 100644
--- a/packages/loot-design/src/svg/v1/BorderNone.web.js
+++ b/packages/loot-design/src/svg/v1/BorderNone.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBorderNone = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/BorderOuter.web.js b/packages/loot-design/src/svg/v1/BorderOuter.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/BorderOuter.web.js
rename to packages/loot-design/src/svg/v1/BorderOuter.js
index 2b8904bd7d304d5071e10daad5ccb7994e2494e7..3ba141ad7e3b753a45c4611b49787e4b7460dc15 100644
--- a/packages/loot-design/src/svg/v1/BorderOuter.web.js
+++ b/packages/loot-design/src/svg/v1/BorderOuter.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBorderOuter = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/BorderRight.web.js b/packages/loot-design/src/svg/v1/BorderRight.js
similarity index 87%
rename from packages/loot-design/src/svg/v1/BorderRight.web.js
rename to packages/loot-design/src/svg/v1/BorderRight.js
index 046e476091b75b258c573560572f1c33a94794d3..618093c51a163bc6b7fe42fe314cda79497858b7 100644
--- a/packages/loot-design/src/svg/v1/BorderRight.web.js
+++ b/packages/loot-design/src/svg/v1/BorderRight.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBorderRight = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/BorderTop.web.js b/packages/loot-design/src/svg/v1/BorderTop.js
similarity index 87%
rename from packages/loot-design/src/svg/v1/BorderTop.web.js
rename to packages/loot-design/src/svg/v1/BorderTop.js
index a9bbe5812ef4b5c331f144d81fd308917a0eb87d..b093a8bfea0c3aa21f24c0f6f6f83a0f2f0885d0 100644
--- a/packages/loot-design/src/svg/v1/BorderTop.web.js
+++ b/packages/loot-design/src/svg/v1/BorderTop.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBorderTop = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/BorderVertical.web.js b/packages/loot-design/src/svg/v1/BorderVertical.js
similarity index 87%
rename from packages/loot-design/src/svg/v1/BorderVertical.web.js
rename to packages/loot-design/src/svg/v1/BorderVertical.js
index c40dfac5f37bdd617de5d8c642d4dbbd3f74e958..50058ee297b49c3682059e8b71d0bf58f0454410 100644
--- a/packages/loot-design/src/svg/v1/BorderVertical.web.js
+++ b/packages/loot-design/src/svg/v1/BorderVertical.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBorderVertical = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Box.web.js b/packages/loot-design/src/svg/v1/Box.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/Box.web.js
rename to packages/loot-design/src/svg/v1/Box.js
index 4590b5a1f4a8958abc2ec799c5c74d80baf45b06..e9235d3b0b7f6751543fc6277a575eb1aae14e0c 100644
--- a/packages/loot-design/src/svg/v1/Box.web.js
+++ b/packages/loot-design/src/svg/v1/Box.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBox = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/BrightnessDown.web.js b/packages/loot-design/src/svg/v1/BrightnessDown.js
similarity index 89%
rename from packages/loot-design/src/svg/v1/BrightnessDown.web.js
rename to packages/loot-design/src/svg/v1/BrightnessDown.js
index a25564deffafe71797041795d4411022abff8251..a09164eba9f6551fc4efdf2ac485737bf1f5dfc5 100644
--- a/packages/loot-design/src/svg/v1/BrightnessDown.web.js
+++ b/packages/loot-design/src/svg/v1/BrightnessDown.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBrightnessDown = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/BrightnessUp.web.js b/packages/loot-design/src/svg/v1/BrightnessUp.js
similarity index 91%
rename from packages/loot-design/src/svg/v1/BrightnessUp.web.js
rename to packages/loot-design/src/svg/v1/BrightnessUp.js
index 3e2cff3b13de14ae74a1b14c3ecb07844a1d18f2..57833fcae709a4e028180bd113c7cc5c7e72d713 100644
--- a/packages/loot-design/src/svg/v1/BrightnessUp.web.js
+++ b/packages/loot-design/src/svg/v1/BrightnessUp.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBrightnessUp = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/BrowserWindow.web.js b/packages/loot-design/src/svg/v1/BrowserWindow.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/BrowserWindow.web.js
rename to packages/loot-design/src/svg/v1/BrowserWindow.js
index cdf9648a8d2f902a58820c683a150d57ff05df18..2acf3386d1a1773d33ba7b43e2af2f99b81cfeae 100644
--- a/packages/loot-design/src/svg/v1/BrowserWindow.web.js
+++ b/packages/loot-design/src/svg/v1/BrowserWindow.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBrowserWindow = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/BrowserWindowNew.web.js b/packages/loot-design/src/svg/v1/BrowserWindowNew.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/BrowserWindowNew.web.js
rename to packages/loot-design/src/svg/v1/BrowserWindowNew.js
index 251dbae4409f1b45eb14eb9b37bd54f82cabcaaf..bd57e3deebc1a6814984bff37263fe5c4e9a2f62 100644
--- a/packages/loot-design/src/svg/v1/BrowserWindowNew.web.js
+++ b/packages/loot-design/src/svg/v1/BrowserWindowNew.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBrowserWindowNew = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/BrowserWindowOpen.web.js b/packages/loot-design/src/svg/v1/BrowserWindowOpen.js
similarity index 72%
rename from packages/loot-design/src/svg/v1/BrowserWindowOpen.web.js
rename to packages/loot-design/src/svg/v1/BrowserWindowOpen.js
index 634772dddc8714c07deac22a8de83908d1bba6bf..ecf00fb41bb46e91021b5d57ef626342474d6dfb 100644
--- a/packages/loot-design/src/svg/v1/BrowserWindowOpen.web.js
+++ b/packages/loot-design/src/svg/v1/BrowserWindowOpen.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBrowserWindowOpen = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgBrowserWindowOpen = props => (
     }}
   >
     <path
-      d="M0 3c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3zm2 2v12h16V5H2zm8 3l4 5H6l4-5z"
+      d="M0 3c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3zm2 2v12h16V5H2zm8 3 4 5H6l4-5z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/Bug.web.js b/packages/loot-design/src/svg/v1/Bug.js
similarity index 81%
rename from packages/loot-design/src/svg/v1/Bug.web.js
rename to packages/loot-design/src/svg/v1/Bug.js
index a05ac26f84b233fc0b3839d134adfb07dfa6e0f6..d699197d197c2a0279e7b63e9ca9e1218c0ae18b 100644
--- a/packages/loot-design/src/svg/v1/Bug.web.js
+++ b/packages/loot-design/src/svg/v1/Bug.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgBug = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgBug = props => (
     }}
   >
     <path
-      d="M15.3 14.89l2.77 2.77a1 1 0 0 1 0 1.41 1 1 0 0 1-1.41 0l-2.59-2.58A5.99 5.99 0 0 1 11 18V9.04a1 1 0 0 0-2 0V18a5.98 5.98 0 0 1-3.07-1.51l-2.59 2.58a1 1 0 0 1-1.41 0 1 1 0 0 1 0-1.41l2.77-2.77A5.95 5.95 0 0 1 4.07 13H1a1 1 0 1 1 0-2h3V8.41L.93 5.34a1 1 0 0 1 0-1.41 1 1 0 0 1 1.41 0l2.1 2.1h11.12l2.1-2.1a1 1 0 0 1 1.41 0 1 1 0 0 1 0 1.41L16 8.41V11h3a1 1 0 1 1 0 2h-3.07c-.1.67-.32 1.31-.63 1.89zM15 5H5a5 5 0 1 1 10 0z"
+      d="m15.3 14.89 2.77 2.77a1 1 0 0 1 0 1.41 1 1 0 0 1-1.41 0l-2.59-2.58A5.99 5.99 0 0 1 11 18V9.04a1 1 0 0 0-2 0V18a5.98 5.98 0 0 1-3.07-1.51l-2.59 2.58a1 1 0 0 1-1.41 0 1 1 0 0 1 0-1.41l2.77-2.77A5.95 5.95 0 0 1 4.07 13H1a1 1 0 1 1 0-2h3V8.41L.93 5.34a1 1 0 0 1 0-1.41 1 1 0 0 1 1.41 0l2.1 2.1h11.12l2.1-2.1a1 1 0 0 1 1.41 0 1 1 0 0 1 0 1.41L16 8.41V11h3a1 1 0 1 1 0 2h-3.07c-.1.67-.32 1.31-.63 1.89zM15 5H5a5 5 0 1 1 10 0z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/Buoy.js b/packages/loot-design/src/svg/v1/Buoy.js
new file mode 100644
index 0000000000000000000000000000000000000000..a5c070fc2ced82e0ef8166749794487a34567188
--- /dev/null
+++ b/packages/loot-design/src/svg/v1/Buoy.js
@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+const SvgBuoy = props => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    style={{
+      color: '#242134',
+      ...props.style
+    }}
+  >
+    <path
+      d="M17.16 6.42a8.03 8.03 0 0 0-3.58-3.58l-1.34 2.69a5.02 5.02 0 0 1 2.23 2.23l2.69-1.34zm0 7.16-2.69-1.34a5.02 5.02 0 0 1-2.23 2.23l1.34 2.69a8.03 8.03 0 0 0 3.58-3.58zM6.42 2.84a8.03 8.03 0 0 0-3.58 3.58l2.69 1.34a5.02 5.02 0 0 1 2.23-2.23L6.42 2.84zM2.84 13.58a8.03 8.03 0 0 0 3.58 3.58l1.34-2.69a5.02 5.02 0 0 1-2.23-2.23l-2.69 1.34zM10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-7a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default SvgBuoy;
diff --git a/packages/loot-design/src/svg/v1/Buoy.web.js b/packages/loot-design/src/svg/v1/Buoy.web.js
deleted file mode 100644
index b51e9fd77dcf2f912987cb71be40ffbc3c7e19c8..0000000000000000000000000000000000000000
--- a/packages/loot-design/src/svg/v1/Buoy.web.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-
-const SvgBuoy = props => (
-  <svg
-    {...props}
-    viewBox="0 0 20 20"
-    style={{
-      color: '#242134',
-      ...props.style
-    }}
-  >
-    <path
-      d="M17.16 6.42a8.03 8.03 0 0 0-3.58-3.58l-1.34 2.69a5.02 5.02 0 0 1 2.23 2.23l2.69-1.34zm0 7.16l-2.69-1.34a5.02 5.02 0 0 1-2.23 2.23l1.34 2.69a8.03 8.03 0 0 0 3.58-3.58zM6.42 2.84a8.03 8.03 0 0 0-3.58 3.58l2.69 1.34a5.02 5.02 0 0 1 2.23-2.23L6.42 2.84zM2.84 13.58a8.03 8.03 0 0 0 3.58 3.58l1.34-2.69a5.02 5.02 0 0 1-2.23-2.23l-2.69 1.34zM10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-7a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export default SvgBuoy;
diff --git a/packages/loot-design/src/svg/v1/Calculator.web.js b/packages/loot-design/src/svg/v1/Calculator.js
similarity index 86%
rename from packages/loot-design/src/svg/v1/Calculator.web.js
rename to packages/loot-design/src/svg/v1/Calculator.js
index b085c46b4bea07da41a653ee63de15c57f8b07fa..09f40db01a429c0c94f03cb44fa91e1afb6d9868 100644
--- a/packages/loot-design/src/svg/v1/Calculator.web.js
+++ b/packages/loot-design/src/svg/v1/Calculator.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCalculator = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Calendar.web.js b/packages/loot-design/src/svg/v1/Calendar.js
similarity index 86%
rename from packages/loot-design/src/svg/v1/Calendar.web.js
rename to packages/loot-design/src/svg/v1/Calendar.js
index 701742c59e5863b64b062446c188f366fd84e187..bede4c69a7d7356aa3306c7df7f3ddaea9f1e772 100644
--- a/packages/loot-design/src/svg/v1/Calendar.web.js
+++ b/packages/loot-design/src/svg/v1/Calendar.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCalendar = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Camera.web.js b/packages/loot-design/src/svg/v1/Camera.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/Camera.web.js
rename to packages/loot-design/src/svg/v1/Camera.js
index d1d3710fb3bd1ed527e50cdb88b86c6a95a6ac7d..d912d281968f4fda1c870b92a3ebd149687265eb 100644
--- a/packages/loot-design/src/svg/v1/Camera.web.js
+++ b/packages/loot-design/src/svg/v1/Camera.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCamera = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Chart.web.js b/packages/loot-design/src/svg/v1/Chart.js
similarity index 87%
rename from packages/loot-design/src/svg/v1/Chart.web.js
rename to packages/loot-design/src/svg/v1/Chart.js
index cdcb62eeb16b700ab14d35b0e5ba27f20808f6d0..12ae0a4fe936f8bc1ea61649744df59c850e0ede 100644
--- a/packages/loot-design/src/svg/v1/Chart.web.js
+++ b/packages/loot-design/src/svg/v1/Chart.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgChart = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/ChartBar.web.js b/packages/loot-design/src/svg/v1/ChartBar.js
similarity index 80%
rename from packages/loot-design/src/svg/v1/ChartBar.web.js
rename to packages/loot-design/src/svg/v1/ChartBar.js
index a35cd8373db05c5dc92faa3b531298f22897f9a8..db8922d00d88711a671f37130f22c43b72df3dd0 100644
--- a/packages/loot-design/src/svg/v1/ChartBar.web.js
+++ b/packages/loot-design/src/svg/v1/ChartBar.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgChartBar = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/ChartPie.web.js b/packages/loot-design/src/svg/v1/ChartPie.js
similarity index 81%
rename from packages/loot-design/src/svg/v1/ChartPie.web.js
rename to packages/loot-design/src/svg/v1/ChartPie.js
index 7f2c5ec150e169ff4b7d9920516ed5e8577066e3..5e975f2663b7303d260c2bda9f80dc47b53fbaa4 100644
--- a/packages/loot-design/src/svg/v1/ChartPie.web.js
+++ b/packages/loot-design/src/svg/v1/ChartPie.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgChartPie = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/ChatBubbleDots.web.js b/packages/loot-design/src/svg/v1/ChatBubbleDots.js
similarity index 54%
rename from packages/loot-design/src/svg/v1/ChatBubbleDots.web.js
rename to packages/loot-design/src/svg/v1/ChatBubbleDots.js
index 583ad38b38b07e0e0021f9a566f29c3c806ff2e3..57772d0fc7846e3de569429726a20f13502dd305 100644
--- a/packages/loot-design/src/svg/v1/ChatBubbleDots.web.js
+++ b/packages/loot-design/src/svg/v1/ChatBubbleDots.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgChatBubbleDots = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgChatBubbleDots = props => (
     }}
   >
     <path
-      d="M10 15l-4 4v-4H2a2 2 0 0 1-2-2V3c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-8zM5 7v2h2V7H5zm4 0v2h2V7H9zm4 0v2h2V7h-2z"
+      d="m10 15-4 4v-4H2a2 2 0 0 1-2-2V3c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-8zM5 7v2h2V7H5zm4 0v2h2V7H9zm4 0v2h2V7h-2z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/CheckAlternative.web.js b/packages/loot-design/src/svg/v1/CheckAlternative.js
similarity index 63%
rename from packages/loot-design/src/svg/v1/CheckAlternative.web.js
rename to packages/loot-design/src/svg/v1/CheckAlternative.js
index 90e78d774f7effcd384a8f759b365c2f00efa588..a18c9949bd86214b41c41c4d5efbf93f31bf40e5 100644
--- a/packages/loot-design/src/svg/v1/CheckAlternative.web.js
+++ b/packages/loot-design/src/svg/v1/CheckAlternative.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCheckAlternative = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,11 +11,11 @@ const SvgCheckAlternative = props => (
     }}
   >
     <path
-      d="M18.48 6.449a1.249 1.249 0 0 0-1.747.265l-5.924 8.04-3.767-3.014a1.251 1.251 0 0 0-1.563 1.953l4.783 3.826a1.263 1.263 0 0 0 1.787-.235l6.7-9.087a1.25 1.25 0 0 0-.269-1.748z"
+      d="M18.48 6.449a1.249 1.249 0 0 0-1.747.265l-5.924 8.04-3.767-3.014a1.251 1.251 0 0 0-1.563 1.953l4.783 3.826a1.263 1.263 0 0 0 1.787-.235l6.7-9.087a1.25 1.25 0 0 0-.269-1.748Z"
       fill="currentColor"
     />
     <path
-      d="M12 0a12 12 0 1 0 12 12A12.013 12.013 0 0 0 12 0zm0 22a10 10 0 1 1 10-10 10.011 10.011 0 0 1-10 10z"
+      d="M12 0a12 12 0 1 0 12 12A12.013 12.013 0 0 0 12 0Zm0 22a10 10 0 1 1 10-10 10.011 10.011 0 0 1-10 10Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/Checkmark.web.js b/packages/loot-design/src/svg/v1/Checkmark.js
similarity index 58%
rename from packages/loot-design/src/svg/v1/Checkmark.web.js
rename to packages/loot-design/src/svg/v1/Checkmark.js
index 854b1c4809a2ecbb6dacf56bc409c4993f1c2c16..403ceafc1878017bc7e48a71518c028ff79d21ce 100644
--- a/packages/loot-design/src/svg/v1/Checkmark.web.js
+++ b/packages/loot-design/src/svg/v1/Checkmark.js
@@ -1,15 +1,16 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCheckmark = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
       ...props.style
     }}
   >
-    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" fill="currentColor" />
+    <path d="m0 11 2-2 5 5L18 3l2 2L7 18z" fill="currentColor" />
   </svg>
 );
 
diff --git a/packages/loot-design/src/svg/v1/CheckmarkOutline.web.js b/packages/loot-design/src/svg/v1/CheckmarkOutline.js
similarity index 75%
rename from packages/loot-design/src/svg/v1/CheckmarkOutline.web.js
rename to packages/loot-design/src/svg/v1/CheckmarkOutline.js
index 11877fac70e691d887926328a76a0eef37ccc80e..04e31e0ae013ef20e4e5138709dc929346708725 100644
--- a/packages/loot-design/src/svg/v1/CheckmarkOutline.web.js
+++ b/packages/loot-design/src/svg/v1/CheckmarkOutline.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCheckmarkOutline = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgCheckmarkOutline = props => (
     }}
   >
     <path
-      d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM6.7 9.29L9 11.6l4.3-4.3 1.4 1.42L9 14.4l-3.7-3.7 1.4-1.42z"
+      d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM6.7 9.29 9 11.6l4.3-4.3 1.4 1.42L9 14.4l-3.7-3.7 1.4-1.42z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/CheveronDown.web.js b/packages/loot-design/src/svg/v1/CheveronDown.js
similarity index 60%
rename from packages/loot-design/src/svg/v1/CheveronDown.web.js
rename to packages/loot-design/src/svg/v1/CheveronDown.js
index 06104c52f66529f449f42d4ab150b6185640e84b..71482700c257aab39ac9e82563d83dff27abcbf2 100644
--- a/packages/loot-design/src/svg/v1/CheveronDown.web.js
+++ b/packages/loot-design/src/svg/v1/CheveronDown.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCheveronDown = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgCheveronDown = props => (
     }}
   >
     <path
-      d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
+      d="m9.293 12.95.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/CheveronLeft.web.js b/packages/loot-design/src/svg/v1/CheveronLeft.js
similarity index 65%
rename from packages/loot-design/src/svg/v1/CheveronLeft.web.js
rename to packages/loot-design/src/svg/v1/CheveronLeft.js
index 1b4793c20e74f94bdb7c66d8c0c6b1f0e00aff17..007615260842c247479c4b97cb15ca1e4bed8ba1 100644
--- a/packages/loot-design/src/svg/v1/CheveronLeft.web.js
+++ b/packages/loot-design/src/svg/v1/CheveronLeft.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCheveronLeft = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgCheveronLeft = props => (
     }}
   >
     <path
-      d="M7.05 9.293L6.343 10 12 15.657l1.414-1.414L9.172 10l4.242-4.243L12 4.343z"
+      d="M7.05 9.293 6.343 10 12 15.657l1.414-1.414L9.172 10l4.242-4.243L12 4.343z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/CheveronOutlineDown.web.js b/packages/loot-design/src/svg/v1/CheveronOutlineDown.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/CheveronOutlineDown.web.js
rename to packages/loot-design/src/svg/v1/CheveronOutlineDown.js
index 06d09891628b95ea241502fec8c097840495d3df..e43db1da0d29711146075a8c72f4ed600c3c128d 100644
--- a/packages/loot-design/src/svg/v1/CheveronOutlineDown.web.js
+++ b/packages/loot-design/src/svg/v1/CheveronOutlineDown.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCheveronOutlineDown = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/CheveronOutlineLeft.web.js b/packages/loot-design/src/svg/v1/CheveronOutlineLeft.js
similarity index 71%
rename from packages/loot-design/src/svg/v1/CheveronOutlineLeft.web.js
rename to packages/loot-design/src/svg/v1/CheveronOutlineLeft.js
index ed3b77a5808a1fcd4d01800f306998e9ae5037c9..f50794db459e2f916dd1fe3cbe47ad34bbfbe8ff 100644
--- a/packages/loot-design/src/svg/v1/CheveronOutlineLeft.web.js
+++ b/packages/loot-design/src/svg/v1/CheveronOutlineLeft.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCheveronOutlineLeft = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgCheveronOutlineLeft = props => (
     }}
   >
     <path
-      d="M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm8-10a8 8 0 1 0-16 0 8 8 0 0 0 16 0zM7.46 9.3L11 5.75l1.41 1.41L9.6 10l2.82 2.83L11 14.24 6.76 10l.7-.7z"
+      d="M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm8-10a8 8 0 1 0-16 0 8 8 0 0 0 16 0zM7.46 9.3 11 5.75l1.41 1.41L9.6 10l2.82 2.83L11 14.24 6.76 10l.7-.7z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/CheveronOutlineRight.web.js b/packages/loot-design/src/svg/v1/CheveronOutlineRight.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/CheveronOutlineRight.web.js
rename to packages/loot-design/src/svg/v1/CheveronOutlineRight.js
index 7063a9932c074e7e7a91aca975ca5ea0c5b38b0b..5767e24fa120d3decff9d2c57e6d4ec9081a3a96 100644
--- a/packages/loot-design/src/svg/v1/CheveronOutlineRight.web.js
+++ b/packages/loot-design/src/svg/v1/CheveronOutlineRight.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCheveronOutlineRight = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/CheveronOutlineUp.web.js b/packages/loot-design/src/svg/v1/CheveronOutlineUp.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/CheveronOutlineUp.web.js
rename to packages/loot-design/src/svg/v1/CheveronOutlineUp.js
index d8306449601668103664f42209e886bc6e7ea728..f331913a26b5d598fb3707a4401c822c7c6be5b2 100644
--- a/packages/loot-design/src/svg/v1/CheveronOutlineUp.web.js
+++ b/packages/loot-design/src/svg/v1/CheveronOutlineUp.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCheveronOutlineUp = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/CheveronRight.web.js b/packages/loot-design/src/svg/v1/CheveronRight.js
similarity index 59%
rename from packages/loot-design/src/svg/v1/CheveronRight.web.js
rename to packages/loot-design/src/svg/v1/CheveronRight.js
index 21ff4199c380efe023586ece69b8eea085e446a0..b33e96060e8394d1a265cc09316f34a221454773 100644
--- a/packages/loot-design/src/svg/v1/CheveronRight.web.js
+++ b/packages/loot-design/src/svg/v1/CheveronRight.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCheveronRight = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgCheveronRight = props => (
     }}
   >
     <path
-      d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"
+      d="m12.95 10.707.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/CheveronUp.web.js b/packages/loot-design/src/svg/v1/CheveronUp.js
similarity index 65%
rename from packages/loot-design/src/svg/v1/CheveronUp.web.js
rename to packages/loot-design/src/svg/v1/CheveronUp.js
index edaa4b377f65b2f94415d09bb936f99bc93053a9..282ebdd1fbecf4ff3bceeb52e1b70fc14c009a4b 100644
--- a/packages/loot-design/src/svg/v1/CheveronUp.web.js
+++ b/packages/loot-design/src/svg/v1/CheveronUp.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCheveronUp = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgCheveronUp = props => (
     }}
   >
     <path
-      d="M10.707 7.05L10 6.343 4.343 12l1.414 1.414L10 9.172l4.243 4.242L15.657 12z"
+      d="M10.707 7.05 10 6.343 4.343 12l1.414 1.414L10 9.172l4.243 4.242L15.657 12z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/Clipboard.web.js b/packages/loot-design/src/svg/v1/Clipboard.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/Clipboard.web.js
rename to packages/loot-design/src/svg/v1/Clipboard.js
index cbf553bc2edb428fc2e5bd172e178266c3fd7e77..a73980bce9fe1f52d3a5e04be8a2e6e6519f725b 100644
--- a/packages/loot-design/src/svg/v1/Clipboard.web.js
+++ b/packages/loot-design/src/svg/v1/Clipboard.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgClipboard = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Close.web.js b/packages/loot-design/src/svg/v1/Close.js
similarity index 70%
rename from packages/loot-design/src/svg/v1/Close.web.js
rename to packages/loot-design/src/svg/v1/Close.js
index e65c276e6c67df778713b97d63f85419cc4f51da..caf5bb0c3529c802eefb182658ec7b1db34f21a2 100644
--- a/packages/loot-design/src/svg/v1/Close.web.js
+++ b/packages/loot-design/src/svg/v1/Close.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgClose = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgClose = props => (
     }}
   >
     <path
-      d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"
+      d="M10 8.586 2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/CloseOutline.web.js b/packages/loot-design/src/svg/v1/CloseOutline.js
similarity index 87%
rename from packages/loot-design/src/svg/v1/CloseOutline.web.js
rename to packages/loot-design/src/svg/v1/CloseOutline.js
index 289fa3828944c524d624af92b9ea0fb2dd85559e..18241fe12e63269469f7467fd2631013888dda88 100644
--- a/packages/loot-design/src/svg/v1/CloseOutline.web.js
+++ b/packages/loot-design/src/svg/v1/CloseOutline.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCloseOutline = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/CloseSolid.web.js b/packages/loot-design/src/svg/v1/CloseSolid.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/CloseSolid.web.js
rename to packages/loot-design/src/svg/v1/CloseSolid.js
index 84a5c551b03cc02c53e9b1ebc60479aa71935b04..14c8c534ee5dc0ab49161d340db5129fe8f4104f 100644
--- a/packages/loot-design/src/svg/v1/CloseSolid.web.js
+++ b/packages/loot-design/src/svg/v1/CloseSolid.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCloseSolid = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Cloud.web.js b/packages/loot-design/src/svg/v1/Cloud.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/Cloud.web.js
rename to packages/loot-design/src/svg/v1/Cloud.js
index d2de56b0792c225267a241038185814887525337..cb0543314aa2064762a585063a7a7d692dfd99e3 100644
--- a/packages/loot-design/src/svg/v1/Cloud.web.js
+++ b/packages/loot-design/src/svg/v1/Cloud.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCloud = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/CloudCheck.web.js b/packages/loot-design/src/svg/v1/CloudCheck.js
similarity index 86%
rename from packages/loot-design/src/svg/v1/CloudCheck.web.js
rename to packages/loot-design/src/svg/v1/CloudCheck.js
index 1f52708de06fc6b4fea0cd461acc3c901a2dccc4..9b6110c93e6561dbf3f60f565fe63334a56156c4 100644
--- a/packages/loot-design/src/svg/v1/CloudCheck.web.js
+++ b/packages/loot-design/src/svg/v1/CloudCheck.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCloudCheck = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,11 +11,11 @@ const SvgCloudCheck = props => (
     }}
   >
     <path
-      d="M24 11.113a5.765 5.765 0 0 0-5.216-5.952.249.249 0 0 1-.191-.12 7.684 7.684 0 0 0-14.1 2.294.251.251 0 0 1-.227.2A4.643 4.643 0 0 0 .624 9.774 4.47 4.47 0 0 0 0 12.223a4.293 4.293 0 0 0 1.235 3.1 4.624 4.624 0 0 0 1.78 1.062.963.963 0 0 0 1.243-.86v-.026a.985.985 0 0 0-.658-1.033 2.58 2.58 0 0 1-.96-.572A2.374 2.374 0 0 1 2 12.109a2.588 2.588 0 0 1 2.586-2.588 2.7 2.7 0 0 1 .535.054.989.989 0 0 0 .811-.184 1 1 0 0 0 .392-.779c.085-5.736 8.293-7.372 10.818-2.044a.974.974 0 0 0 .941.57 3.733 3.733 0 0 1 3 1.309 3.888 3.888 0 0 1 .9 2.812 3.428 3.428 0 0 1-1.473 2.667.973.973 0 0 0-.4.964l.01.059a.968.968 0 0 0 1.525.608A5.4 5.4 0 0 0 24 11.113z"
+      d="M24 11.113a5.765 5.765 0 0 0-5.216-5.952.249.249 0 0 1-.191-.12 7.684 7.684 0 0 0-14.1 2.294.251.251 0 0 1-.227.2A4.643 4.643 0 0 0 .624 9.774 4.47 4.47 0 0 0 0 12.223a4.293 4.293 0 0 0 1.235 3.1 4.624 4.624 0 0 0 1.78 1.062.963.963 0 0 0 1.243-.86v-.026a.985.985 0 0 0-.658-1.033 2.58 2.58 0 0 1-.96-.572A2.374 2.374 0 0 1 2 12.109a2.588 2.588 0 0 1 2.586-2.588 2.7 2.7 0 0 1 .535.054.989.989 0 0 0 .811-.184 1 1 0 0 0 .392-.779c.085-5.736 8.293-7.372 10.818-2.044a.974.974 0 0 0 .941.57 3.733 3.733 0 0 1 3 1.309 3.888 3.888 0 0 1 .9 2.812 3.428 3.428 0 0 1-1.473 2.667.973.973 0 0 0-.4.964l.01.059a.968.968 0 0 0 1.525.608A5.4 5.4 0 0 0 24 11.113Z"
       fill="currentColor"
     />
     <path
-      d="M12.231 9.7a6.5 6.5 0 1 0 6.5 6.5 6.508 6.508 0 0 0-6.5-6.5zm3.124 4.155a.75.75 0 0 1 .15 1.05l-2.905 3.87a1.493 1.493 0 0 1-1.1.6h-.111a1.485 1.485 0 0 1-1.055-.443l-1.5-1.5a.75.75 0 0 1 1.066-1.06l1.3 1.3a.249.249 0 0 0 .376-.026L14.305 14a.751.751 0 0 1 1.05-.149z"
+      d="M12.231 9.7a6.5 6.5 0 1 0 6.5 6.5 6.508 6.508 0 0 0-6.5-6.5Zm3.124 4.155a.75.75 0 0 1 .15 1.05l-2.905 3.87a1.493 1.493 0 0 1-1.1.6h-.111a1.485 1.485 0 0 1-1.055-.443l-1.5-1.5a.75.75 0 0 1 1.066-1.06l1.3 1.3a.249.249 0 0 0 .376-.026L14.305 14a.751.751 0 0 1 1.05-.149Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/CloudDownload.web.js b/packages/loot-design/src/svg/v1/CloudDownload.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/CloudDownload.web.js
rename to packages/loot-design/src/svg/v1/CloudDownload.js
index 85c85fb7a2fb80069f9ebfe7839346b459c8c155..752e875af42ca53b6a581ed37cc69c88f1a7f586 100644
--- a/packages/loot-design/src/svg/v1/CloudDownload.web.js
+++ b/packages/loot-design/src/svg/v1/CloudDownload.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCloudDownload = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,11 +11,11 @@ const SvgCloudDownload = props => (
     }}
   >
     <path
-      d="M24 10.663A5.817 5.817 0 0 0 22.228 6.5a5.711 5.711 0 0 0-3.447-1.585.249.249 0 0 1-.191-.12 7.684 7.684 0 0 0-14.1 2.294.251.251 0 0 1-.227.2A4.59 4.59 0 0 0 0 11.859a4.324 4.324 0 0 0 1.236 3.21 5.529 5.529 0 0 0 3.605 1.377 1 1 0 0 0 .985-1.015 1.023 1.023 0 0 0-1.015-.985 3.3 3.3 0 0 1-2.172-.8A2.374 2.374 0 0 1 2 11.859a2.576 2.576 0 0 1 .954-2.007 2.6 2.6 0 0 1 2.167-.527 1 1 0 0 0 1.2-.919 5.686 5.686 0 0 1 10.82-2.088.959.959 0 0 0 .941.57 3.687 3.687 0 0 1 2.758 1.049A3.752 3.752 0 0 1 22 10.663a3.835 3.835 0 0 1-3.438 3.791 1 1 0 0 0 .132 1.992.961.961 0 0 0 .131-.009A5.807 5.807 0 0 0 24 10.663z"
+      d="M24 10.663A5.817 5.817 0 0 0 22.228 6.5a5.711 5.711 0 0 0-3.447-1.585.249.249 0 0 1-.191-.12 7.684 7.684 0 0 0-14.1 2.294.251.251 0 0 1-.227.2A4.59 4.59 0 0 0 0 11.859a4.324 4.324 0 0 0 1.236 3.21 5.529 5.529 0 0 0 3.605 1.377 1 1 0 0 0 .985-1.015 1.023 1.023 0 0 0-1.015-.985 3.3 3.3 0 0 1-2.172-.8A2.374 2.374 0 0 1 2 11.859a2.576 2.576 0 0 1 .954-2.007 2.6 2.6 0 0 1 2.167-.527 1 1 0 0 0 1.2-.919 5.686 5.686 0 0 1 10.82-2.088.959.959 0 0 0 .941.57 3.687 3.687 0 0 1 2.758 1.049A3.752 3.752 0 0 1 22 10.663a3.835 3.835 0 0 1-3.438 3.791 1 1 0 0 0 .132 1.992.961.961 0 0 0 .131-.009A5.807 5.807 0 0 0 24 10.663Z"
       fill="currentColor"
     />
     <path
-      d="M15.5 17.446h-1.75a.25.25 0 0 1-.25-.25v-7.25a1.5 1.5 0 1 0-3 0V17.2a.25.25 0 0 1-.25.25H8.5a1 1 0 0 0-.707 1.707l3.5 3.5a1 1 0 0 0 1.414 0l3.5-3.5a1 1 0 0 0-.707-1.707z"
+      d="M15.5 17.446h-1.75a.25.25 0 0 1-.25-.25v-7.25a1.5 1.5 0 1 0-3 0V17.2a.25.25 0 0 1-.25.25H8.5a1 1 0 0 0-.707 1.707l3.5 3.5a1 1 0 0 0 1.414 0l3.5-3.5a1 1 0 0 0-.707-1.707Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/CloudUpload.web.js b/packages/loot-design/src/svg/v1/CloudUpload.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/CloudUpload.web.js
rename to packages/loot-design/src/svg/v1/CloudUpload.js
index 56352f59ae00aad09c13d10a8c313b955bf25ded..6f151a3635af7984c433a36e924bef5c400b6bef 100644
--- a/packages/loot-design/src/svg/v1/CloudUpload.web.js
+++ b/packages/loot-design/src/svg/v1/CloudUpload.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCloudUpload = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/CloudWarning.web.js b/packages/loot-design/src/svg/v1/CloudWarning.js
similarity index 79%
rename from packages/loot-design/src/svg/v1/CloudWarning.web.js
rename to packages/loot-design/src/svg/v1/CloudWarning.js
index d0f9136aa2bf6654fa97de9942f23e20825b27d8..0101ea7b0c62a4b243708428cc9902bbb3f139cc 100644
--- a/packages/loot-design/src/svg/v1/CloudWarning.web.js
+++ b/packages/loot-design/src/svg/v1/CloudWarning.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCloudWarning = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,11 +11,11 @@ const SvgCloudWarning = props => (
     }}
   >
     <path
-      d="M3.924 17.376a1 1 0 0 0 1.052-.534 1.018 1.018 0 0 0-.743-1.476 2.518 2.518 0 0 1-1.594-.707A2.371 2.371 0 0 1 2 12.874a2.588 2.588 0 0 1 2.586-2.587 2.635 2.635 0 0 1 .535.056 1.008 1.008 0 0 0 .811-.186 1 1 0 0 0 .392-.779 4.521 4.521 0 0 1 .961-3.012c3.357-3.8 8.227-2.47 9.856.966a1.024 1.024 0 0 0 .978.57 3.666 3.666 0 0 1 2.721 1.05A3.757 3.757 0 0 1 22 11.679a3.9 3.9 0 0 1-2.483 3.61.969.969 0 0 0-.586 1.373.956.956 0 0 0 1.162.47 5.6 5.6 0 0 0 3.9-5.2 5.769 5.769 0 0 0-5.215-6.007.252.252 0 0 1-.191-.12 7.685 7.685 0 0 0-14.1 2.3.251.251 0 0 1-.227.2 4.642 4.642 0 0 0-3.64 2.242A4.482 4.482 0 0 0 0 12.994a4.287 4.287 0 0 0 1.235 3.09 5.057 5.057 0 0 0 2.689 1.292z"
+      d="M3.924 17.376a1 1 0 0 0 1.052-.534 1.018 1.018 0 0 0-.743-1.476 2.518 2.518 0 0 1-1.594-.707A2.371 2.371 0 0 1 2 12.874a2.588 2.588 0 0 1 2.586-2.587 2.635 2.635 0 0 1 .535.056 1.008 1.008 0 0 0 .811-.186 1 1 0 0 0 .392-.779 4.521 4.521 0 0 1 .961-3.012c3.357-3.8 8.227-2.47 9.856.966a1.024 1.024 0 0 0 .978.57 3.666 3.666 0 0 1 2.721 1.05A3.757 3.757 0 0 1 22 11.679a3.9 3.9 0 0 1-2.483 3.61.969.969 0 0 0-.586 1.373.956.956 0 0 0 1.162.47 5.6 5.6 0 0 0 3.9-5.2 5.769 5.769 0 0 0-5.215-6.007.252.252 0 0 1-.191-.12 7.685 7.685 0 0 0-14.1 2.3.251.251 0 0 1-.227.2 4.642 4.642 0 0 0-3.64 2.242A4.482 4.482 0 0 0 0 12.994a4.287 4.287 0 0 0 1.235 3.09 5.057 5.057 0 0 0 2.689 1.292Z"
       fill="currentColor"
     />
     <path
-      d="M13.281 10.2a1.45 1.45 0 0 0-2.562 0l-5.056 9.634a1.429 1.429 0 0 0 .049 1.408 1.454 1.454 0 0 0 1.233.687h10.111a1.456 1.456 0 0 0 1.233-.687 1.431 1.431 0 0 0 .048-1.408zM12 20.179a1 1 0 1 1 1-1 1 1 0 0 1-1 1zm-.75-6.75a.75.75 0 0 1 1.5 0v3a.75.75 0 0 1-1.5 0z"
+      d="M13.281 10.2a1.45 1.45 0 0 0-2.562 0l-5.056 9.634a1.429 1.429 0 0 0 .049 1.408 1.454 1.454 0 0 0 1.233.687h10.111a1.456 1.456 0 0 0 1.233-.687 1.431 1.431 0 0 0 .048-1.408ZM12 20.179a1 1 0 1 1 1-1 1 1 0 0 1-1 1Zm-.75-6.75a.75.75 0 0 1 1.5 0v3a.75.75 0 0 1-1.5 0Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/Code.web.js b/packages/loot-design/src/svg/v1/Code.js
similarity index 50%
rename from packages/loot-design/src/svg/v1/Code.web.js
rename to packages/loot-design/src/svg/v1/Code.js
index d924e9c7b94abc5e3017c1cacbb31dc3f2f527bc..ab4a15035ddb1f619d440fb1338da521882d824c 100644
--- a/packages/loot-design/src/svg/v1/Code.web.js
+++ b/packages/loot-design/src/svg/v1/Code.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCode = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgCode = props => (
     }}
   >
     <path
-      d="M.7 9.3l4.8-4.8 1.4 1.42L2.84 10l4.07 4.07-1.41 1.42L0 10l.7-.7zm18.6 1.4l.7-.7-5.49-5.49-1.4 1.42L17.16 10l-4.07 4.07 1.41 1.42 4.78-4.78z"
+      d="m.7 9.3 4.8-4.8 1.4 1.42L2.84 10l4.07 4.07-1.41 1.42L0 10l.7-.7zm18.6 1.4.7-.7-5.49-5.49-1.4 1.42L17.16 10l-4.07 4.07 1.41 1.42 4.78-4.78z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/Coffee.web.js b/packages/loot-design/src/svg/v1/Coffee.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/Coffee.web.js
rename to packages/loot-design/src/svg/v1/Coffee.js
index 2ce93c90a60a8d662a18c844d6f6506c15b7efc1..646234d246a39fbacd3e7263b1ccd840f63d152a 100644
--- a/packages/loot-design/src/svg/v1/Coffee.web.js
+++ b/packages/loot-design/src/svg/v1/Coffee.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCoffee = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Cog.web.js b/packages/loot-design/src/svg/v1/Cog.js
similarity index 80%
rename from packages/loot-design/src/svg/v1/Cog.web.js
rename to packages/loot-design/src/svg/v1/Cog.js
index cacd4b6b5da6f7fa79adea5b758a28d7be1ecdbc..805e863bf5d8edfdfde0deeba64d47eeee94dfba 100644
--- a/packages/loot-design/src/svg/v1/Cog.web.js
+++ b/packages/loot-design/src/svg/v1/Cog.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCog = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgCog = props => (
     }}
   >
     <path
-      d="M3.94 6.5L2.22 3.64l1.42-1.42L6.5 3.94c.52-.3 1.1-.54 1.7-.7L9 0h2l.8 3.24c.6.16 1.18.4 1.7.7l2.86-1.72 1.42 1.42-1.72 2.86c.3.52.54 1.1.7 1.7L20 9v2l-3.24.8c-.16.6-.4 1.18-.7 1.7l1.72 2.86-1.42 1.42-2.86-1.72c-.52.3-1.1.54-1.7.7L11 20H9l-.8-3.24c-.6-.16-1.18-.4-1.7-.7l-2.86 1.72-1.42-1.42 1.72-2.86c-.3-.52-.54-1.1-.7-1.7L0 11V9l3.24-.8c.16-.6.4-1.18.7-1.7zM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
+      d="M3.94 6.5 2.22 3.64l1.42-1.42L6.5 3.94c.52-.3 1.1-.54 1.7-.7L9 0h2l.8 3.24c.6.16 1.18.4 1.7.7l2.86-1.72 1.42 1.42-1.72 2.86c.3.52.54 1.1.7 1.7L20 9v2l-3.24.8c-.16.6-.4 1.18-.7 1.7l1.72 2.86-1.42 1.42-2.86-1.72c-.52.3-1.1.54-1.7.7L11 20H9l-.8-3.24c-.6-.16-1.18-.4-1.7-.7l-2.86 1.72-1.42-1.42 1.72-2.86c-.3-.52-.54-1.1-.7-1.7L0 11V9l3.24-.8c.16-.6.4-1.18.7-1.7zM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/ColorPalette.web.js b/packages/loot-design/src/svg/v1/ColorPalette.js
similarity index 87%
rename from packages/loot-design/src/svg/v1/ColorPalette.web.js
rename to packages/loot-design/src/svg/v1/ColorPalette.js
index a1ecfe30184cd5a4e195dcd08385e56f201400d1..b32da3526ba91b8a5809792a86d6c9bbf21f0f2e 100644
--- a/packages/loot-design/src/svg/v1/ColorPalette.web.js
+++ b/packages/loot-design/src/svg/v1/ColorPalette.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgColorPalette = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Compose.web.js b/packages/loot-design/src/svg/v1/Compose.js
similarity index 66%
rename from packages/loot-design/src/svg/v1/Compose.web.js
rename to packages/loot-design/src/svg/v1/Compose.js
index 03890fa1b6dcc182d17ad37f92566a8a966542c8..194f5662ce3acae6ea241a00f6426c94fb690d06 100644
--- a/packages/loot-design/src/svg/v1/Compose.web.js
+++ b/packages/loot-design/src/svg/v1/Compose.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCompose = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgCompose = props => (
     }}
   >
     <path
-      d="M2 4v14h14v-6l2-2v10H0V2h10L8 4H2zm10.3-.3l4 4L8 16H4v-4l8.3-8.3zm1.4-1.4L16 0l4 4-2.3 2.3-4-4z"
+      d="M2 4v14h14v-6l2-2v10H0V2h10L8 4H2zm10.3-.3 4 4L8 16H4v-4l8.3-8.3zm1.4-1.4L16 0l4 4-2.3 2.3-4-4z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/ComputerDesktop.web.js b/packages/loot-design/src/svg/v1/ComputerDesktop.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/ComputerDesktop.web.js
rename to packages/loot-design/src/svg/v1/ComputerDesktop.js
index 63bbcf16c65008627ab86fdc75848f56a73ff25c..732fdb33c0d44cb2eb0d25814c8b3995666bb2cb 100644
--- a/packages/loot-design/src/svg/v1/ComputerDesktop.web.js
+++ b/packages/loot-design/src/svg/v1/ComputerDesktop.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgComputerDesktop = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/ComputerLaptop.web.js b/packages/loot-design/src/svg/v1/ComputerLaptop.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/ComputerLaptop.web.js
rename to packages/loot-design/src/svg/v1/ComputerLaptop.js
index aa0db2b8f0b095e43cb62937add2c32bbb9b033c..5f8a811f70b1dc559cbcec558b88bcf66c396fca 100644
--- a/packages/loot-design/src/svg/v1/ComputerLaptop.web.js
+++ b/packages/loot-design/src/svg/v1/ComputerLaptop.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgComputerLaptop = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Conversation.web.js b/packages/loot-design/src/svg/v1/Conversation.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/Conversation.web.js
rename to packages/loot-design/src/svg/v1/Conversation.js
index 4274fabacfe359edfbd5cb312ba59e87b0c1189d..1b89ea05a3d84acc56deed73e8a7befb3c22ec4e 100644
--- a/packages/loot-design/src/svg/v1/Conversation.web.js
+++ b/packages/loot-design/src/svg/v1/Conversation.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgConversation = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Copy.web.js b/packages/loot-design/src/svg/v1/Copy.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/Copy.web.js
rename to packages/loot-design/src/svg/v1/Copy.js
index 3c8917a439e67ef853d71cae90e908c46329291c..9371772d37e88b64bfa396bb4f97a374b7331a8c 100644
--- a/packages/loot-design/src/svg/v1/Copy.web.js
+++ b/packages/loot-design/src/svg/v1/Copy.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCopy = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/CreditCard.web.js b/packages/loot-design/src/svg/v1/CreditCard.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/CreditCard.web.js
rename to packages/loot-design/src/svg/v1/CreditCard.js
index 7a5d1aadff74d8d4ad91345b835a1cd8deb78125..c9f256a52daaee0e9c894dd7502b70c5e0e748b3 100644
--- a/packages/loot-design/src/svg/v1/CreditCard.web.js
+++ b/packages/loot-design/src/svg/v1/CreditCard.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCreditCard = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/CurrencyDollar.web.js b/packages/loot-design/src/svg/v1/CurrencyDollar.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/CurrencyDollar.web.js
rename to packages/loot-design/src/svg/v1/CurrencyDollar.js
index f2d9ab39d40f6778ac72f2dee7d91da6c9aa4f75..f742a76fde44097465b07fd2f64e3b887a6c8dc5 100644
--- a/packages/loot-design/src/svg/v1/CurrencyDollar.web.js
+++ b/packages/loot-design/src/svg/v1/CurrencyDollar.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCurrencyDollar = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Dashboard.web.js b/packages/loot-design/src/svg/v1/Dashboard.js
similarity index 71%
rename from packages/loot-design/src/svg/v1/Dashboard.web.js
rename to packages/loot-design/src/svg/v1/Dashboard.js
index b2df7ea03d18f87346a287c8decb889b7e253c99..aed543083988209bfa6dc4150cfb948c125530b4 100644
--- a/packages/loot-design/src/svg/v1/Dashboard.web.js
+++ b/packages/loot-design/src/svg/v1/Dashboard.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgDashboard = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgDashboard = props => (
     }}
   >
     <path
-      d="M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm-5.6-4.29a9.95 9.95 0 0 1 11.2 0 8 8 0 1 0-11.2 0zm6.12-7.64l3.02-3.02 1.41 1.41-3.02 3.02a2 2 0 1 1-1.41-1.41z"
+      d="M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm-5.6-4.29a9.95 9.95 0 0 1 11.2 0 8 8 0 1 0-11.2 0zm6.12-7.64 3.02-3.02 1.41 1.41-3.02 3.02a2 2 0 1 1-1.41-1.41z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/DateAdd.web.js b/packages/loot-design/src/svg/v1/DateAdd.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/DateAdd.web.js
rename to packages/loot-design/src/svg/v1/DateAdd.js
index fa4d3c908dde05c9b8811c2e83797e5bce43899a..cc2e3733bdcff9916953f3ff83a6b4602f2f5e4f 100644
--- a/packages/loot-design/src/svg/v1/DateAdd.web.js
+++ b/packages/loot-design/src/svg/v1/DateAdd.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgDateAdd = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/DialPad.web.js b/packages/loot-design/src/svg/v1/DialPad.js
similarity index 88%
rename from packages/loot-design/src/svg/v1/DialPad.web.js
rename to packages/loot-design/src/svg/v1/DialPad.js
index 964ed8e00629c2bc5c6cfa8213d7de1248958749..b0ee040f072f3d196eafe3fd8503d3a2d3f20fd9 100644
--- a/packages/loot-design/src/svg/v1/DialPad.web.js
+++ b/packages/loot-design/src/svg/v1/DialPad.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgDialPad = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Directions.web.js b/packages/loot-design/src/svg/v1/Directions.js
similarity index 65%
rename from packages/loot-design/src/svg/v1/Directions.web.js
rename to packages/loot-design/src/svg/v1/Directions.js
index 003928a2af8253a0d33fe6dcfd214a5e661c6e9d..125305b648217379a2c12a138ec9258be40d6998 100644
--- a/packages/loot-design/src/svg/v1/Directions.web.js
+++ b/packages/loot-design/src/svg/v1/Directions.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgDirections = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgDirections = props => (
     }}
   >
     <path
-      d="M10 0l10 10-10 10L0 10 10 0zM6 10v3h2v-3h3v3l4-4-4-4v3H8a2 2 0 0 0-2 2z"
+      d="m10 0 10 10-10 10L0 10 10 0zM6 10v3h2v-3h3v3l4-4-4-4v3H8a2 2 0 0 0-2 2z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/Document.web.js b/packages/loot-design/src/svg/v1/Document.js
similarity index 80%
rename from packages/loot-design/src/svg/v1/Document.web.js
rename to packages/loot-design/src/svg/v1/Document.js
index e9ffb88d1ad1311590c549710f0e2f81d05b7bcf..921539dfa15b9cc2d58635effc83973620f0c3a9 100644
--- a/packages/loot-design/src/svg/v1/Document.web.js
+++ b/packages/loot-design/src/svg/v1/Document.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgDocument = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/DocumentAdd.web.js b/packages/loot-design/src/svg/v1/DocumentAdd.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/DocumentAdd.web.js
rename to packages/loot-design/src/svg/v1/DocumentAdd.js
index f6fa036e0048702658000f3c32146cf35481eaf2..2dbe89f312ab3532f835b63bbb60c4aa2dda2e06 100644
--- a/packages/loot-design/src/svg/v1/DocumentAdd.web.js
+++ b/packages/loot-design/src/svg/v1/DocumentAdd.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgDocumentAdd = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/DotsHorizontalDouble.web.js b/packages/loot-design/src/svg/v1/DotsHorizontalDouble.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/DotsHorizontalDouble.web.js
rename to packages/loot-design/src/svg/v1/DotsHorizontalDouble.js
index 591791be757f972ec811e51cd85778503230544a..8f6b3e95fbc065b9aff79075b2ce7b80f16af9cd 100644
--- a/packages/loot-design/src/svg/v1/DotsHorizontalDouble.web.js
+++ b/packages/loot-design/src/svg/v1/DotsHorizontalDouble.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgDotsHorizontalDouble = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/DotsHorizontalTriple.web.js b/packages/loot-design/src/svg/v1/DotsHorizontalTriple.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/DotsHorizontalTriple.web.js
rename to packages/loot-design/src/svg/v1/DotsHorizontalTriple.js
index 474edaba7392b7024c8e4bfcc01b9b86748d5e72..c83b7c2430f6304b07a0ddf0ae3d15c1fe3dbe2c 100644
--- a/packages/loot-design/src/svg/v1/DotsHorizontalTriple.web.js
+++ b/packages/loot-design/src/svg/v1/DotsHorizontalTriple.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgDotsHorizontalTriple = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Download.web.js b/packages/loot-design/src/svg/v1/Download.js
similarity index 78%
rename from packages/loot-design/src/svg/v1/Download.web.js
rename to packages/loot-design/src/svg/v1/Download.js
index d7a085840c54f971b84b895017bd3c59a2c0cad4..11241a93be827dbc43faf54fa7333d008635cd0b 100644
--- a/packages/loot-design/src/svg/v1/Download.web.js
+++ b/packages/loot-design/src/svg/v1/Download.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgDownload = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Duplicate.web.js b/packages/loot-design/src/svg/v1/Duplicate.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/Duplicate.web.js
rename to packages/loot-design/src/svg/v1/Duplicate.js
index a1fedd62c9d2c085778a0ed9b7ff91506d116285..a083c93a2d8d2105f638f627e6820540a938aa63 100644
--- a/packages/loot-design/src/svg/v1/Duplicate.web.js
+++ b/packages/loot-design/src/svg/v1/Duplicate.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgDuplicate = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/EditCopy.web.js b/packages/loot-design/src/svg/v1/EditCopy.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/EditCopy.web.js
rename to packages/loot-design/src/svg/v1/EditCopy.js
index 53994e35c50b48a9531507634256e8d2a8da0ffc..202fb433b0dd517141bc80379a5d85987b00f533 100644
--- a/packages/loot-design/src/svg/v1/EditCopy.web.js
+++ b/packages/loot-design/src/svg/v1/EditCopy.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgEditCopy = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/EditCrop.web.js b/packages/loot-design/src/svg/v1/EditCrop.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/EditCrop.web.js
rename to packages/loot-design/src/svg/v1/EditCrop.js
index 691556179c23bc0ae9e1c57c7c671206db455bdf..7fce88528677181bc0f93bde8955c69358c98e84 100644
--- a/packages/loot-design/src/svg/v1/EditCrop.web.js
+++ b/packages/loot-design/src/svg/v1/EditCrop.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgEditCrop = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/EditCut.web.js b/packages/loot-design/src/svg/v1/EditCut.js
similarity index 77%
rename from packages/loot-design/src/svg/v1/EditCut.web.js
rename to packages/loot-design/src/svg/v1/EditCut.js
index e7f53c2178e64ea50f416d7e037c6857cd2e286b..8ea41d28a2432ac5cb1569b1be129ad85cd1f879 100644
--- a/packages/loot-design/src/svg/v1/EditCut.web.js
+++ b/packages/loot-design/src/svg/v1/EditCut.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgEditCut = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgEditCut = props => (
     }}
   >
     <path
-      d="M9.77 11.5l5.34 3.91c.44.33 1.24.59 1.79.59H20L6.89 6.38A3.5 3.5 0 1 0 5.5 8.37L7.73 10 5.5 11.63a3.5 3.5 0 1 0 1.38 1.99l2.9-2.12zM3.5 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM15.1 4.59A3.53 3.53 0 0 1 16.9 4H20l-7.5 5.5L10.45 8l4.65-3.41z"
+      d="m9.77 11.5 5.34 3.91c.44.33 1.24.59 1.79.59H20L6.89 6.38A3.5 3.5 0 1 0 5.5 8.37L7.73 10 5.5 11.63a3.5 3.5 0 1 0 1.38 1.99l2.9-2.12zM3.5 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM15.1 4.59A3.53 3.53 0 0 1 16.9 4H20l-7.5 5.5L10.45 8l4.65-3.41z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/EditPencil.web.js b/packages/loot-design/src/svg/v1/EditPencil.js
similarity index 64%
rename from packages/loot-design/src/svg/v1/EditPencil.web.js
rename to packages/loot-design/src/svg/v1/EditPencil.js
index 6635d37a31e5fa7eb3c91f646c5efd00b8962ea3..e09b1a16af5102a9da59bee90af881722f83b021 100644
--- a/packages/loot-design/src/svg/v1/EditPencil.web.js
+++ b/packages/loot-design/src/svg/v1/EditPencil.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgEditPencil = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgEditPencil = props => (
     }}
   >
     <path
-      d="M12.3 3.7l4 4L4 20H0v-4L12.3 3.7zm1.4-1.4L16 0l4 4-2.3 2.3-4-4z"
+      d="m12.3 3.7 4 4L4 20H0v-4L12.3 3.7zm1.4-1.4L16 0l4 4-2.3 2.3-4-4z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/Education.web.js b/packages/loot-design/src/svg/v1/Education.js
similarity index 56%
rename from packages/loot-design/src/svg/v1/Education.web.js
rename to packages/loot-design/src/svg/v1/Education.js
index 6c62620b701a66057760a2004c8f96310bef7473..7915ffe4f9059b6b490af47d17e4a05b3b63843b 100644
--- a/packages/loot-design/src/svg/v1/Education.web.js
+++ b/packages/loot-design/src/svg/v1/Education.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgEducation = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgEducation = props => (
     }}
   >
     <path
-      d="M3.33 8L10 12l10-6-10-6L0 6h10v2H3.33zM0 8v8l2-2.22V9.2L0 8zm10 12l-5-3-2-1.2v-6l7 4.2 7-4.2v6L10 20z"
+      d="M3.33 8 10 12l10-6-10-6L0 6h10v2H3.33zM0 8v8l2-2.22V9.2L0 8zm10 12-5-3-2-1.2v-6l7 4.2 7-4.2v6L10 20z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/Envelope.web.js b/packages/loot-design/src/svg/v1/Envelope.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/Envelope.web.js
rename to packages/loot-design/src/svg/v1/Envelope.js
index 5ae70bad8c8dfb8ea9365e03f6fdd5faaba3b2e8..b881f7fb3eae742be971b7f09732374b3d567ea0 100644
--- a/packages/loot-design/src/svg/v1/Envelope.web.js
+++ b/packages/loot-design/src/svg/v1/Envelope.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgEnvelope = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Equals.web.js b/packages/loot-design/src/svg/v1/Equals.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/Equals.web.js
rename to packages/loot-design/src/svg/v1/Equals.js
index 04b313e4e0af1f86fb3e1651da3a0071ea189402..b84c9d2adc861c0c5367edf31e567321822c42e8 100644
--- a/packages/loot-design/src/svg/v1/Equals.web.js
+++ b/packages/loot-design/src/svg/v1/Equals.js
@@ -1,9 +1,10 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgEquals = props => (
   <svg
     {...props}
     viewBox="0 0 23 11"
+    xmlns="http://www.w3.org/2000/svg"
     style={{
       color: '#242134',
       ...props.style
diff --git a/packages/loot-design/src/svg/v1/ExclamationOutline.web.js b/packages/loot-design/src/svg/v1/ExclamationOutline.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/ExclamationOutline.web.js
rename to packages/loot-design/src/svg/v1/ExclamationOutline.js
index f83438a6ad16baad4740bfd151961935e613b7c4..518d0c6ff983e80c563cb5e206e1e84ff7bcdf40 100644
--- a/packages/loot-design/src/svg/v1/ExclamationOutline.web.js
+++ b/packages/loot-design/src/svg/v1/ExclamationOutline.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgExclamationOutline = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/ExclamationSolid.web.js b/packages/loot-design/src/svg/v1/ExclamationSolid.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/ExclamationSolid.web.js
rename to packages/loot-design/src/svg/v1/ExclamationSolid.js
index 96cfa40ba18029b00eb2ee4afa87c3d68ccbcfd5..eaf9bccff224efe35db5368f5a852be18934b163 100644
--- a/packages/loot-design/src/svg/v1/ExclamationSolid.web.js
+++ b/packages/loot-design/src/svg/v1/ExclamationSolid.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgExclamationSolid = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Explore.web.js b/packages/loot-design/src/svg/v1/Explore.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/Explore.web.js
rename to packages/loot-design/src/svg/v1/Explore.js
index 5c5ae35e70e877e6c45219e1e2f2f168b0862a87..5e76bb83e12dc580f0b535ca8fbcbd965864874e 100644
--- a/packages/loot-design/src/svg/v1/Explore.web.js
+++ b/packages/loot-design/src/svg/v1/Explore.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgExplore = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Factory.web.js b/packages/loot-design/src/svg/v1/Factory.js
similarity index 80%
rename from packages/loot-design/src/svg/v1/Factory.web.js
rename to packages/loot-design/src/svg/v1/Factory.js
index 41a26a593de64ceab877664b5230a9a00fca89cb..1a5a46f0c0bc04472b5b17ba7642fa5804515e9a 100644
--- a/packages/loot-design/src/svg/v1/Factory.web.js
+++ b/packages/loot-design/src/svg/v1/Factory.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgFactory = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/FastForward.web.js b/packages/loot-design/src/svg/v1/FastForward.js
similarity index 59%
rename from packages/loot-design/src/svg/v1/FastForward.web.js
rename to packages/loot-design/src/svg/v1/FastForward.js
index c09b920c213d4fb716cb6afee8a60933cb6f9090..b8ca9527108140bb171b1b2c54b3e7fca6760d4e 100644
--- a/packages/loot-design/src/svg/v1/FastForward.web.js
+++ b/packages/loot-design/src/svg/v1/FastForward.js
@@ -1,15 +1,16 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgFastForward = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
       ...props.style
     }}
   >
-    <path d="M1 5l9 5-9 5V5zm9 0l9 5-9 5V5z" fill="currentColor" />
+    <path d="m1 5 9 5-9 5V5zm9 0 9 5-9 5V5z" fill="currentColor" />
   </svg>
 );
 
diff --git a/packages/loot-design/src/svg/v1/FastRewind.web.js b/packages/loot-design/src/svg/v1/FastRewind.js
similarity index 78%
rename from packages/loot-design/src/svg/v1/FastRewind.web.js
rename to packages/loot-design/src/svg/v1/FastRewind.js
index 4f60673a50e5f9170fa698f5ed326eb805af67e2..701559d32c715ad5017ca0370273b0616fad9fc6 100644
--- a/packages/loot-design/src/svg/v1/FastRewind.web.js
+++ b/packages/loot-design/src/svg/v1/FastRewind.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgFastRewind = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/FileDouble.web.js b/packages/loot-design/src/svg/v1/FileDouble.js
similarity index 69%
rename from packages/loot-design/src/svg/v1/FileDouble.web.js
rename to packages/loot-design/src/svg/v1/FileDouble.js
index 14fd29334a665e88c5574737265fd69817201aa2..be6cd26a941dc95cd00df92f46065723651fa314 100644
--- a/packages/loot-design/src/svg/v1/FileDouble.web.js
+++ b/packages/loot-design/src/svg/v1/FileDouble.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgFileDouble = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgFileDouble = props => (
     }}
   >
     <path
-      d="M21.941 3.607L18.87.554A1.912 1.912 0 0 0 17.527 0H8.9A1.9 1.9 0 0 0 7 1.9V5H3.4a1.9 1.9 0 0 0-1.9 1.9v15.21A1.9 1.9 0 0 0 3.4 24h11.7a1.9 1.9 0 0 0 1.9-1.895V19h3.6a1.9 1.9 0 0 0 1.9-1.895V4.949a1.882 1.882 0 0 0-.559-1.342zM14.5 22H4a.5.5 0 0 1-.5-.5v-14A.5.5 0 0 1 4 7h7.784a.5.5 0 0 1 .35.143L14.85 9.8a.5.5 0 0 1 .15.357V21.5a.5.5 0 0 1-.5.5zm5.5-5h-2.75a.25.25 0 0 1-.25-.25v-6.8a1.892 1.892 0 0 0-.558-1.341L13.37 5.554A1.9 1.9 0 0 0 12.028 5H9.25A.25.25 0 0 1 9 4.75V2.5a.5.5 0 0 1 .5-.5l7.756-.026a.5.5 0 0 1 .351.143L20.35 4.8a.5.5 0 0 1 .15.357V16.5a.5.5 0 0 1-.5.5z"
+      d="M21.941 3.607 18.87.554A1.912 1.912 0 0 0 17.527 0H8.9A1.9 1.9 0 0 0 7 1.9V5H3.4a1.9 1.9 0 0 0-1.9 1.9v15.21A1.9 1.9 0 0 0 3.4 24h11.7a1.9 1.9 0 0 0 1.9-1.895V19h3.6a1.9 1.9 0 0 0 1.9-1.895V4.949a1.882 1.882 0 0 0-.559-1.342ZM14.5 22H4a.5.5 0 0 1-.5-.5v-14A.5.5 0 0 1 4 7h7.784a.5.5 0 0 1 .35.143L14.85 9.8a.5.5 0 0 1 .15.357V21.5a.5.5 0 0 1-.5.5Zm5.5-5h-2.75a.25.25 0 0 1-.25-.25v-6.8a1.892 1.892 0 0 0-.558-1.341L13.37 5.554A1.9 1.9 0 0 0 12.028 5H9.25A.25.25 0 0 1 9 4.75V2.5a.5.5 0 0 1 .5-.5l7.756-.026a.5.5 0 0 1 .351.143L20.35 4.8a.5.5 0 0 1 .15.357V16.5a.5.5 0 0 1-.5.5Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/Film.web.js b/packages/loot-design/src/svg/v1/Film.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/Film.web.js
rename to packages/loot-design/src/svg/v1/Film.js
index eb97b08f422107ac7e15791c06bfb44cfde0c604..7eed330dd303c9f6ba32833e21c3bb706c96b4b8 100644
--- a/packages/loot-design/src/svg/v1/Film.web.js
+++ b/packages/loot-design/src/svg/v1/Film.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgFilm = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Filter.web.js b/packages/loot-design/src/svg/v1/Filter.js
similarity index 58%
rename from packages/loot-design/src/svg/v1/Filter.web.js
rename to packages/loot-design/src/svg/v1/Filter.js
index 6ff36cc7c089d8f9e40bda55c3df99c0681e3290..36fb5415678272b8b56d84b0fca6d301520dff99 100644
--- a/packages/loot-design/src/svg/v1/Filter.web.js
+++ b/packages/loot-design/src/svg/v1/Filter.js
@@ -1,15 +1,16 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgFilter = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
       ...props.style
     }}
   >
-    <path d="M12 12l8-8V0H0v4l8 8v8l4-4v-4z" fill="currentColor" />
+    <path d="m12 12 8-8V0H0v4l8 8v8l4-4v-4z" fill="currentColor" />
   </svg>
 );
 
diff --git a/packages/loot-design/src/svg/v1/Flag.web.js b/packages/loot-design/src/svg/v1/Flag.js
similarity index 80%
rename from packages/loot-design/src/svg/v1/Flag.web.js
rename to packages/loot-design/src/svg/v1/Flag.js
index 31371b128ffa0b02ddb7b60fcb9b28d24dcc7aaf..09854e15937241915977e098ce17615415094832 100644
--- a/packages/loot-design/src/svg/v1/Flag.web.js
+++ b/packages/loot-design/src/svg/v1/Flag.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgFlag = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Flashlight.web.js b/packages/loot-design/src/svg/v1/Flashlight.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/Flashlight.web.js
rename to packages/loot-design/src/svg/v1/Flashlight.js
index 517d6d745802fa4c1b44f7ebccab2c6928527e37..97e5c8ce4c0a9d6fd4d6c704255e33d954e89cfd 100644
--- a/packages/loot-design/src/svg/v1/Flashlight.web.js
+++ b/packages/loot-design/src/svg/v1/Flashlight.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgFlashlight = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Folder.web.js b/packages/loot-design/src/svg/v1/Folder.js
similarity index 81%
rename from packages/loot-design/src/svg/v1/Folder.web.js
rename to packages/loot-design/src/svg/v1/Folder.js
index 422dda5a417db55ce6b17bd91ed8213082e07dcc..298c7b988a9da16f75c3d8585f353071555bc683 100644
--- a/packages/loot-design/src/svg/v1/Folder.web.js
+++ b/packages/loot-design/src/svg/v1/Folder.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgFolder = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/FolderOutline.web.js b/packages/loot-design/src/svg/v1/FolderOutline.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/FolderOutline.web.js
rename to packages/loot-design/src/svg/v1/FolderOutline.js
index 892182f1796601597b06d64048b16b635642e36b..9ff65ceebd5855df9c8cdb40ddc28ac0c489696f 100644
--- a/packages/loot-design/src/svg/v1/FolderOutline.web.js
+++ b/packages/loot-design/src/svg/v1/FolderOutline.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgFolderOutline = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/FolderOutlineAdd.web.js b/packages/loot-design/src/svg/v1/FolderOutlineAdd.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/FolderOutlineAdd.web.js
rename to packages/loot-design/src/svg/v1/FolderOutlineAdd.js
index eac98e1752cfb9412d2e9afc16ca35ed8f89e2b6..3fb9f37de73c873aedbd04b98b25a7a3ff38c200 100644
--- a/packages/loot-design/src/svg/v1/FolderOutlineAdd.web.js
+++ b/packages/loot-design/src/svg/v1/FolderOutlineAdd.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgFolderOutlineAdd = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/FormatBold.web.js b/packages/loot-design/src/svg/v1/FormatBold.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/FormatBold.web.js
rename to packages/loot-design/src/svg/v1/FormatBold.js
index a2892b0568c85c49a28bda7115c541a0ba0d926f..66c85fa894b287e642de6e8b6cf447e04debbeeb 100644
--- a/packages/loot-design/src/svg/v1/FormatBold.web.js
+++ b/packages/loot-design/src/svg/v1/FormatBold.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgFormatBold = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/FormatFontSize.web.js b/packages/loot-design/src/svg/v1/FormatFontSize.js
similarity index 81%
rename from packages/loot-design/src/svg/v1/FormatFontSize.web.js
rename to packages/loot-design/src/svg/v1/FormatFontSize.js
index 461b257c3814a4c11320f089fbddb160921106cc..74d5c1c9259f1b0fd3ddd9e082baf42b6c8f03e4 100644
--- a/packages/loot-design/src/svg/v1/FormatFontSize.web.js
+++ b/packages/loot-design/src/svg/v1/FormatFontSize.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgFormatFontSize = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/FormatItalic.web.js b/packages/loot-design/src/svg/v1/FormatItalic.js
similarity index 80%
rename from packages/loot-design/src/svg/v1/FormatItalic.web.js
rename to packages/loot-design/src/svg/v1/FormatItalic.js
index 7538218172321800a1d30c43c12a42a07c1aaec4..19df60f04b87cce91b6e73d490ac113d724d79f6 100644
--- a/packages/loot-design/src/svg/v1/FormatItalic.web.js
+++ b/packages/loot-design/src/svg/v1/FormatItalic.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgFormatItalic = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/FormatTextSize.web.js b/packages/loot-design/src/svg/v1/FormatTextSize.js
similarity index 81%
rename from packages/loot-design/src/svg/v1/FormatTextSize.web.js
rename to packages/loot-design/src/svg/v1/FormatTextSize.js
index 1fb4bf17ef953be797050658041fdacd3dfd9615..52b5caf64dc79b795d12d16decd488ec85a0e487 100644
--- a/packages/loot-design/src/svg/v1/FormatTextSize.web.js
+++ b/packages/loot-design/src/svg/v1/FormatTextSize.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgFormatTextSize = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/FormatUnderline.web.js b/packages/loot-design/src/svg/v1/FormatUnderline.js
similarity index 81%
rename from packages/loot-design/src/svg/v1/FormatUnderline.web.js
rename to packages/loot-design/src/svg/v1/FormatUnderline.js
index d0782f899b8f19fa0ef42bb311eaf6fd104dfe63..fec2866f6b6dda057a85a55fa9c7ebb17dc708e3 100644
--- a/packages/loot-design/src/svg/v1/FormatUnderline.web.js
+++ b/packages/loot-design/src/svg/v1/FormatUnderline.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgFormatUnderline = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Forward.web.js b/packages/loot-design/src/svg/v1/Forward.js
similarity index 58%
rename from packages/loot-design/src/svg/v1/Forward.web.js
rename to packages/loot-design/src/svg/v1/Forward.js
index dd1ab14fd115ecd0fb16b941cd8af9c1749ec143..451079644513c20efc979a405399e1262435572d 100644
--- a/packages/loot-design/src/svg/v1/Forward.web.js
+++ b/packages/loot-design/src/svg/v1/Forward.js
@@ -1,15 +1,16 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgForward = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
       ...props.style
     }}
   >
-    <path d="M1 5l9 5-9 5V5zm9 0l9 5-9 5V5z" fill="currentColor" />
+    <path d="m1 5 9 5-9 5V5zm9 0 9 5-9 5V5z" fill="currentColor" />
   </svg>
 );
 
diff --git a/packages/loot-design/src/svg/v1/ForwardStep.web.js b/packages/loot-design/src/svg/v1/ForwardStep.js
similarity index 78%
rename from packages/loot-design/src/svg/v1/ForwardStep.web.js
rename to packages/loot-design/src/svg/v1/ForwardStep.js
index 606bccb829adec2bc0c1fd0dd2f60ab51cbe00c7..3d0a8baf9a303643beea5c5ae6d6b5904843fd4f 100644
--- a/packages/loot-design/src/svg/v1/ForwardStep.web.js
+++ b/packages/loot-design/src/svg/v1/ForwardStep.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgForwardStep = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Gift.web.js b/packages/loot-design/src/svg/v1/Gift.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/Gift.web.js
rename to packages/loot-design/src/svg/v1/Gift.js
index e840d8d8c7964b0ef81020c32ab164ff0e2c97cc..1e4814f52b6e48dedbf8a14e2123edf310115f6d 100644
--- a/packages/loot-design/src/svg/v1/Gift.web.js
+++ b/packages/loot-design/src/svg/v1/Gift.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgGift = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Globe.web.js b/packages/loot-design/src/svg/v1/Globe.js
similarity index 87%
rename from packages/loot-design/src/svg/v1/Globe.web.js
rename to packages/loot-design/src/svg/v1/Globe.js
index 1d2f12ea5242a89be42f893cfb5131ac28974ef8..155bdea921b4dab010ad5b19591ccee0038a89ff 100644
--- a/packages/loot-design/src/svg/v1/Globe.web.js
+++ b/packages/loot-design/src/svg/v1/Globe.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgGlobe = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/HandStop.web.js b/packages/loot-design/src/svg/v1/HandStop.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/HandStop.web.js
rename to packages/loot-design/src/svg/v1/HandStop.js
index 0025d9d99d46235716f62ee3684b8acc722b7f06..832ea14dcb294ea34aa03891f33dccca101b4b01 100644
--- a/packages/loot-design/src/svg/v1/HandStop.web.js
+++ b/packages/loot-design/src/svg/v1/HandStop.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgHandStop = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/HardDrive.web.js b/packages/loot-design/src/svg/v1/HardDrive.js
similarity index 88%
rename from packages/loot-design/src/svg/v1/HardDrive.web.js
rename to packages/loot-design/src/svg/v1/HardDrive.js
index d5c7ec4608a4e069b0a482588f37e44cc057babe..0f7612011340dc649de91c97400ffa707bf7f763 100644
--- a/packages/loot-design/src/svg/v1/HardDrive.web.js
+++ b/packages/loot-design/src/svg/v1/HardDrive.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgHardDrive = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Headphones.web.js b/packages/loot-design/src/svg/v1/Headphones.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/Headphones.web.js
rename to packages/loot-design/src/svg/v1/Headphones.js
index f8e89669f4f0f38de7be7b5f9575b87dc1e3fef0..8c345fb7fc73930ac28d0383d860bf69d01f47f5 100644
--- a/packages/loot-design/src/svg/v1/Headphones.web.js
+++ b/packages/loot-design/src/svg/v1/Headphones.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgHeadphones = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Heart.web.js b/packages/loot-design/src/svg/v1/Heart.js
similarity index 56%
rename from packages/loot-design/src/svg/v1/Heart.web.js
rename to packages/loot-design/src/svg/v1/Heart.js
index beca44b0755934e2362c90c9495ae68ed96419ee..35621a7cdc0a614a5ce747b06c88fce16650ef6f 100644
--- a/packages/loot-design/src/svg/v1/Heart.web.js
+++ b/packages/loot-design/src/svg/v1/Heart.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgHeart = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgHeart = props => (
     }}
   >
     <path
-      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.78 7.77L10 18.78l8.39-8.4a5.5 5.5 0 0 0-7.78-7.77l-.61.61z"
+      d="m10 3.22-.61-.6a5.5 5.5 0 0 0-7.78 7.77L10 18.78l8.39-8.4a5.5 5.5 0 0 0-7.78-7.77l-.61.61z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/Home.web.js b/packages/loot-design/src/svg/v1/Home.js
similarity index 78%
rename from packages/loot-design/src/svg/v1/Home.web.js
rename to packages/loot-design/src/svg/v1/Home.js
index 4592dbf269b0780fdedacfa628496158bfd5c307..a5d7a92f22984fbeedbad1533fcc86c4783b76c2 100644
--- a/packages/loot-design/src/svg/v1/Home.web.js
+++ b/packages/loot-design/src/svg/v1/Home.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgHome = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Hot.web.js b/packages/loot-design/src/svg/v1/Hot.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/Hot.web.js
rename to packages/loot-design/src/svg/v1/Hot.js
index 1dc9d827011b4a98183cf4d43f8ce98817c96ad2..092c6c55104436ac74d52982491955ca7ca2639c 100644
--- a/packages/loot-design/src/svg/v1/Hot.web.js
+++ b/packages/loot-design/src/svg/v1/Hot.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgHot = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/HourGlass.web.js b/packages/loot-design/src/svg/v1/HourGlass.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/HourGlass.web.js
rename to packages/loot-design/src/svg/v1/HourGlass.js
index e423f591d93831b4ee5cbc2d743576b2bf03f708..22f3feac7a106a6c0831da20b4ad626fda0a3d6f 100644
--- a/packages/loot-design/src/svg/v1/HourGlass.web.js
+++ b/packages/loot-design/src/svg/v1/HourGlass.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgHourGlass = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Inbox.web.js b/packages/loot-design/src/svg/v1/Inbox.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/Inbox.web.js
rename to packages/loot-design/src/svg/v1/Inbox.js
index a89b5053342b8a44db59c937d57efccf4db9124e..0145dd31b20d4f69850508cdee2a60800027bc3e 100644
--- a/packages/loot-design/src/svg/v1/Inbox.web.js
+++ b/packages/loot-design/src/svg/v1/Inbox.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgInbox = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/InboxCheck.web.js b/packages/loot-design/src/svg/v1/InboxCheck.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/InboxCheck.web.js
rename to packages/loot-design/src/svg/v1/InboxCheck.js
index b1b5d4deb6e12ea64d4bd610d16bb91cef5598d2..3e7d899885a9bac14b98f4d2df9adb18e5cbddc2 100644
--- a/packages/loot-design/src/svg/v1/InboxCheck.web.js
+++ b/packages/loot-design/src/svg/v1/InboxCheck.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgInboxCheck = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/InboxDownload.web.js b/packages/loot-design/src/svg/v1/InboxDownload.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/InboxDownload.web.js
rename to packages/loot-design/src/svg/v1/InboxDownload.js
index 781cecc0db8509b6b4e2a27b0884d39dd25ccf03..a05c0476ccfbd0ec72c7e164711e7a2e9ef9d645 100644
--- a/packages/loot-design/src/svg/v1/InboxDownload.web.js
+++ b/packages/loot-design/src/svg/v1/InboxDownload.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgInboxDownload = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/InboxFull.web.js b/packages/loot-design/src/svg/v1/InboxFull.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/InboxFull.web.js
rename to packages/loot-design/src/svg/v1/InboxFull.js
index cf30b647e2dbf78369c9d3a40e2afe82b3be38dd..343ef34d682554f45c94037c901d8018c77f7b08 100644
--- a/packages/loot-design/src/svg/v1/InboxFull.web.js
+++ b/packages/loot-design/src/svg/v1/InboxFull.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgInboxFull = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/IndentDecrease.web.js b/packages/loot-design/src/svg/v1/IndentDecrease.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/IndentDecrease.web.js
rename to packages/loot-design/src/svg/v1/IndentDecrease.js
index 9e18732e9a69110335074760a2887e5071e11f5e..7417d8337e7c2a5b9e87cecbec9d5d5a54ca0fe5 100644
--- a/packages/loot-design/src/svg/v1/IndentDecrease.web.js
+++ b/packages/loot-design/src/svg/v1/IndentDecrease.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgIndentDecrease = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/IndentIncrease.web.js b/packages/loot-design/src/svg/v1/IndentIncrease.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/IndentIncrease.web.js
rename to packages/loot-design/src/svg/v1/IndentIncrease.js
index 701a797fdeec97b743c896cf52dbf4038a6a6af2..9ac2e14a9c2975b40860459a7f5272f65460d96b 100644
--- a/packages/loot-design/src/svg/v1/IndentIncrease.web.js
+++ b/packages/loot-design/src/svg/v1/IndentIncrease.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgIndentIncrease = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/InformationOutline.web.js b/packages/loot-design/src/svg/v1/InformationOutline.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/InformationOutline.web.js
rename to packages/loot-design/src/svg/v1/InformationOutline.js
index aee0e41d22519e7eaeb6bd1eff0ce0fa695ecf15..9473376fa9e23de77a975774322bc36deb11bf0e 100644
--- a/packages/loot-design/src/svg/v1/InformationOutline.web.js
+++ b/packages/loot-design/src/svg/v1/InformationOutline.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgInformationOutline = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/InformationSolid.web.js b/packages/loot-design/src/svg/v1/InformationSolid.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/InformationSolid.web.js
rename to packages/loot-design/src/svg/v1/InformationSolid.js
index 2172b1d37c4b98d4c63aad994c42b153c6b00d89..3561cb849de5d0d739c76fe5da1c24571ecb3af4 100644
--- a/packages/loot-design/src/svg/v1/InformationSolid.web.js
+++ b/packages/loot-design/src/svg/v1/InformationSolid.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgInformationSolid = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Key.web.js b/packages/loot-design/src/svg/v1/Key.js
similarity index 67%
rename from packages/loot-design/src/svg/v1/Key.web.js
rename to packages/loot-design/src/svg/v1/Key.js
index 4d2c0a3c8fb2802f97ccb452e7930d668635156e..c62af86ab9142c7a5f6bc11219024db517a1887f 100644
--- a/packages/loot-design/src/svg/v1/Key.web.js
+++ b/packages/loot-design/src/svg/v1/Key.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgKey = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgKey = props => (
     }}
   >
     <path
-      d="M12.26 11.74L10 14H8v2H6v2l-2 2H0v-4l8.26-8.26a6 6 0 1 1 4 4zm4.86-4.62A3 3 0 0 0 15 2a3 3 0 0 0-2.12.88l4.24 4.24z"
+      d="M12.26 11.74 10 14H8v2H6v2l-2 2H0v-4l8.26-8.26a6 6 0 1 1 4 4zm4.86-4.62A3 3 0 0 0 15 2a3 3 0 0 0-2.12.88l4.24 4.24z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/Keyboard.web.js b/packages/loot-design/src/svg/v1/Keyboard.js
similarity index 87%
rename from packages/loot-design/src/svg/v1/Keyboard.web.js
rename to packages/loot-design/src/svg/v1/Keyboard.js
index d5bf0235e3f957d8628a01cc9a5a7fa461dde816..c3b9baa747f53f9f198e6aaf41f78043fa7c717a 100644
--- a/packages/loot-design/src/svg/v1/Keyboard.web.js
+++ b/packages/loot-design/src/svg/v1/Keyboard.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgKeyboard = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Layers.web.js b/packages/loot-design/src/svg/v1/Layers.js
similarity index 64%
rename from packages/loot-design/src/svg/v1/Layers.web.js
rename to packages/loot-design/src/svg/v1/Layers.js
index 7f2a8a36d0c5d9cde3f8b9e2ba6b994ad4e5ca7f..c5be72c009ac640f6584037baf2c48cb1509c205 100644
--- a/packages/loot-design/src/svg/v1/Layers.web.js
+++ b/packages/loot-design/src/svg/v1/Layers.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgLayers = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgLayers = props => (
     }}
   >
     <path
-      d="M10 1l10 6-10 6L0 7l10-6zm6.67 10L20 13l-10 6-10-6 3.33-2L10 15l6.67-4z"
+      d="m10 1 10 6-10 6L0 7l10-6zm6.67 10L20 13l-10 6-10-6 3.33-2L10 15l6.67-4z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/Library.web.js b/packages/loot-design/src/svg/v1/Library.js
similarity index 66%
rename from packages/loot-design/src/svg/v1/Library.web.js
rename to packages/loot-design/src/svg/v1/Library.js
index 4f98b6f7f8eef496a5ddab634c54b67af3555cf8..7dcb54a325f3b77bb52c8ccc6756e9ea563aa1d4 100644
--- a/packages/loot-design/src/svg/v1/Library.web.js
+++ b/packages/loot-design/src/svg/v1/Library.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgLibrary = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgLibrary = props => (
     }}
   >
     <path
-      d="M0 6l10-6 10 6v2H0V6zm0 12h20v2H0v-2zm2-2h16v2H2v-2zm0-8h4v8H2V8zm6 0h4v8H8V8zm6 0h4v8h-4V8z"
+      d="m0 6 10-6 10 6v2H0V6zm0 12h20v2H0v-2zm2-2h16v2H2v-2zm0-8h4v8H2V8zm6 0h4v8H8V8zm6 0h4v8h-4V8z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/LightBulb.web.js b/packages/loot-design/src/svg/v1/LightBulb.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/LightBulb.web.js
rename to packages/loot-design/src/svg/v1/LightBulb.js
index b18e0698caaddc081a9780125e35ac7b8daa31c9..0c6046a9f89644c46fe3330f304cfe8ff8979517 100644
--- a/packages/loot-design/src/svg/v1/LightBulb.web.js
+++ b/packages/loot-design/src/svg/v1/LightBulb.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgLightBulb = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Link.web.js b/packages/loot-design/src/svg/v1/Link.js
similarity index 86%
rename from packages/loot-design/src/svg/v1/Link.web.js
rename to packages/loot-design/src/svg/v1/Link.js
index 694befe45326bf987802d52dc94b059015904717..60859bdfa6f56de769e975e31beb6af8c48ef838 100644
--- a/packages/loot-design/src/svg/v1/Link.web.js
+++ b/packages/loot-design/src/svg/v1/Link.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgLink = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/List.web.js b/packages/loot-design/src/svg/v1/List.js
similarity index 81%
rename from packages/loot-design/src/svg/v1/List.web.js
rename to packages/loot-design/src/svg/v1/List.js
index 504ec5ae32fe4f0cea4d0d62940eda97ed1e0cb4..55252b1487d9b834deb5914f65e5944ae99bbb40 100644
--- a/packages/loot-design/src/svg/v1/List.web.js
+++ b/packages/loot-design/src/svg/v1/List.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgList = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/ListAdd.web.js b/packages/loot-design/src/svg/v1/ListAdd.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/ListAdd.web.js
rename to packages/loot-design/src/svg/v1/ListAdd.js
index 4e3b5e01121ada5ae6148a3c519c1e1a385efbd6..8cdea8dee2530fcf428c1456499d7608afb0db50 100644
--- a/packages/loot-design/src/svg/v1/ListAdd.web.js
+++ b/packages/loot-design/src/svg/v1/ListAdd.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgListAdd = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/ListBullet.web.js b/packages/loot-design/src/svg/v1/ListBullet.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/ListBullet.web.js
rename to packages/loot-design/src/svg/v1/ListBullet.js
index a9a137707655e1bb99c4d3eee747c53f2889d488..ec96adc5b9cbe66c38d8cdba00de4c5c58f5e434 100644
--- a/packages/loot-design/src/svg/v1/ListBullet.web.js
+++ b/packages/loot-design/src/svg/v1/ListBullet.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgListBullet = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/LoadBalancer.web.js b/packages/loot-design/src/svg/v1/LoadBalancer.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/LoadBalancer.web.js
rename to packages/loot-design/src/svg/v1/LoadBalancer.js
index 1f6b0c84589a5a43ca9a1ab1e96cc3ae04d1bb93..08db7b8e4cc83243f60e93bf5833ccd7187763fa 100644
--- a/packages/loot-design/src/svg/v1/LoadBalancer.web.js
+++ b/packages/loot-design/src/svg/v1/LoadBalancer.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgLoadBalancer = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Location.web.js b/packages/loot-design/src/svg/v1/Location.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/Location.web.js
rename to packages/loot-design/src/svg/v1/Location.js
index 78eee2f0440a66cb4ad5498c9709b10a3c022b50..fef513d083cd03d74ef213dc4cf29810bb9f28eb 100644
--- a/packages/loot-design/src/svg/v1/Location.web.js
+++ b/packages/loot-design/src/svg/v1/Location.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgLocation = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/LocationCurrent.web.js b/packages/loot-design/src/svg/v1/LocationCurrent.js
similarity index 61%
rename from packages/loot-design/src/svg/v1/LocationCurrent.web.js
rename to packages/loot-design/src/svg/v1/LocationCurrent.js
index 873e7e25a51ddfdb8bf93eb718491fe97bc58f01..81d944dddba9b1d9091bb50b2f5df647c5f7cc45 100644
--- a/packages/loot-design/src/svg/v1/LocationCurrent.web.js
+++ b/packages/loot-design/src/svg/v1/LocationCurrent.js
@@ -1,15 +1,16 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgLocationCurrent = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
       ...props.style
     }}
   >
-    <path d="M0 0l20 8-8 4-2 8z" fill="currentColor" />
+    <path d="m0 0 20 8-8 4-2 8z" fill="currentColor" />
   </svg>
 );
 
diff --git a/packages/loot-design/src/svg/v1/LocationFood.web.js b/packages/loot-design/src/svg/v1/LocationFood.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/LocationFood.web.js
rename to packages/loot-design/src/svg/v1/LocationFood.js
index 8bb431e7a3ffeaf4df089a315eb934d94977b2ac..f8f58702bceac7fdbee44b7af1efc20e8038958d 100644
--- a/packages/loot-design/src/svg/v1/LocationFood.web.js
+++ b/packages/loot-design/src/svg/v1/LocationFood.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgLocationFood = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/LocationGasStation.web.js b/packages/loot-design/src/svg/v1/LocationGasStation.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/LocationGasStation.web.js
rename to packages/loot-design/src/svg/v1/LocationGasStation.js
index 8bcc324f7378c23c830c43979bdad85d455cf83d..31c883701f9bb45bea40e86bede1b9b87ea59163 100644
--- a/packages/loot-design/src/svg/v1/LocationGasStation.web.js
+++ b/packages/loot-design/src/svg/v1/LocationGasStation.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgLocationGasStation = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/LocationHotel.web.js b/packages/loot-design/src/svg/v1/LocationHotel.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/LocationHotel.web.js
rename to packages/loot-design/src/svg/v1/LocationHotel.js
index b6a39da32b1495e086778a40059db7cc0b28cf3b..7ea31f0a81ff0148cbc9b7a04208e1dcbefbd3f5 100644
--- a/packages/loot-design/src/svg/v1/LocationHotel.web.js
+++ b/packages/loot-design/src/svg/v1/LocationHotel.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgLocationHotel = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/LocationMarina.web.js b/packages/loot-design/src/svg/v1/LocationMarina.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/LocationMarina.web.js
rename to packages/loot-design/src/svg/v1/LocationMarina.js
index 605dddd809f79cba8c9761705dfaab8bb40b46b9..962f0dd67c1a418aafe33e8870e5e6b50b930ffd 100644
--- a/packages/loot-design/src/svg/v1/LocationMarina.web.js
+++ b/packages/loot-design/src/svg/v1/LocationMarina.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgLocationMarina = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/LocationPark.web.js b/packages/loot-design/src/svg/v1/LocationPark.js
similarity index 86%
rename from packages/loot-design/src/svg/v1/LocationPark.web.js
rename to packages/loot-design/src/svg/v1/LocationPark.js
index d0e16dbd0b3e9bee2e7ec783cbd4e9a76b36ffdf..bdfc1104fec4bd9527e6928c0902b2f680315c22 100644
--- a/packages/loot-design/src/svg/v1/LocationPark.web.js
+++ b/packages/loot-design/src/svg/v1/LocationPark.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgLocationPark = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/LocationRestroom.web.js b/packages/loot-design/src/svg/v1/LocationRestroom.js
similarity index 86%
rename from packages/loot-design/src/svg/v1/LocationRestroom.web.js
rename to packages/loot-design/src/svg/v1/LocationRestroom.js
index bd6440ed615f276ac785e583c802786ab327504d..19813b2fc873a2d6e9c60d0fd1f297d7ac126ec9 100644
--- a/packages/loot-design/src/svg/v1/LocationRestroom.web.js
+++ b/packages/loot-design/src/svg/v1/LocationRestroom.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgLocationRestroom = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/LocationShopping.web.js b/packages/loot-design/src/svg/v1/LocationShopping.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/LocationShopping.web.js
rename to packages/loot-design/src/svg/v1/LocationShopping.js
index 587caff79212e1f1746abce622f9b2c6f533c911..b4cb5565b4971a5542e9d6bc09712d1cd0450e52 100644
--- a/packages/loot-design/src/svg/v1/LocationShopping.web.js
+++ b/packages/loot-design/src/svg/v1/LocationShopping.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgLocationShopping = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/LockClosed.web.js b/packages/loot-design/src/svg/v1/LockClosed.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/LockClosed.web.js
rename to packages/loot-design/src/svg/v1/LockClosed.js
index 09033c81cd88fd2d27be12caf777fa3bfc9dae23..43f5ff1c53637ab7ac4740c3f5377818b157aef8 100644
--- a/packages/loot-design/src/svg/v1/LockClosed.web.js
+++ b/packages/loot-design/src/svg/v1/LockClosed.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgLockClosed = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/LockOpen.web.js b/packages/loot-design/src/svg/v1/LockOpen.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/LockOpen.web.js
rename to packages/loot-design/src/svg/v1/LockOpen.js
index 1b9b58511d771d454d13cfc0b44c377791f4439b..55c081188ba1c528b65672f49326023870540fe2 100644
--- a/packages/loot-design/src/svg/v1/LockOpen.web.js
+++ b/packages/loot-design/src/svg/v1/LockOpen.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgLockOpen = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Map.web.js b/packages/loot-design/src/svg/v1/Map.js
similarity index 62%
rename from packages/loot-design/src/svg/v1/Map.web.js
rename to packages/loot-design/src/svg/v1/Map.js
index be8dda4d22af077719bc2165cf019593580b84d4..351bff61f0cec2cc98f717f37e2e03cc6a6e3de3 100644
--- a/packages/loot-design/src/svg/v1/Map.web.js
+++ b/packages/loot-design/src/svg/v1/Map.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgMap = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgMap = props => (
     }}
   >
     <path
-      d="M0 0l6 4 8-4 6 4v16l-6-4-8 4-6-4V0zm7 6v11l6-3V3L7 6z"
+      d="m0 0 6 4 8-4 6 4v16l-6-4-8 4-6-4V0zm7 6v11l6-3V3L7 6z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/Menu.web.js b/packages/loot-design/src/svg/v1/Menu.js
similarity index 78%
rename from packages/loot-design/src/svg/v1/Menu.web.js
rename to packages/loot-design/src/svg/v1/Menu.js
index b2ad82367e2687c620a539d5022a9bab0b929f6c..addb74a2846fd5a4543a4a7467737191de49d30a 100644
--- a/packages/loot-design/src/svg/v1/Menu.web.js
+++ b/packages/loot-design/src/svg/v1/Menu.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgMenu = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Mic.web.js b/packages/loot-design/src/svg/v1/Mic.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/Mic.web.js
rename to packages/loot-design/src/svg/v1/Mic.js
index 0e05cd41524bfdc4de1a7dc3d60063072c477b1d..8b568e59df20746a20513eecb138dd2d0553c252 100644
--- a/packages/loot-design/src/svg/v1/Mic.web.js
+++ b/packages/loot-design/src/svg/v1/Mic.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgMic = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/MinusOutline.web.js b/packages/loot-design/src/svg/v1/MinusOutline.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/MinusOutline.web.js
rename to packages/loot-design/src/svg/v1/MinusOutline.js
index 11ac6ed543dc99e736256d2aa3eae2695660cee6..7f8f1b504609164fbd1157e406ba27abf9aedc9f 100644
--- a/packages/loot-design/src/svg/v1/MinusOutline.web.js
+++ b/packages/loot-design/src/svg/v1/MinusOutline.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgMinusOutline = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/MinusSolid.web.js b/packages/loot-design/src/svg/v1/MinusSolid.js
similarity index 80%
rename from packages/loot-design/src/svg/v1/MinusSolid.web.js
rename to packages/loot-design/src/svg/v1/MinusSolid.js
index 872d2ec75cc63e5fd8da8b1264de37867460138e..c266822a08b1088667297df91ae1293b6fd98a61 100644
--- a/packages/loot-design/src/svg/v1/MinusSolid.web.js
+++ b/packages/loot-design/src/svg/v1/MinusSolid.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgMinusSolid = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/MobileDevices.web.js b/packages/loot-design/src/svg/v1/MobileDevices.js
similarity index 86%
rename from packages/loot-design/src/svg/v1/MobileDevices.web.js
rename to packages/loot-design/src/svg/v1/MobileDevices.js
index eb2d7e575499949b31aec7fe970414330b912632..79024fcbcb81e1128f7e048268309887d066be70 100644
--- a/packages/loot-design/src/svg/v1/MobileDevices.web.js
+++ b/packages/loot-design/src/svg/v1/MobileDevices.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgMobileDevices = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/MoneyBag.web.js b/packages/loot-design/src/svg/v1/MoneyBag.js
similarity index 72%
rename from packages/loot-design/src/svg/v1/MoneyBag.web.js
rename to packages/loot-design/src/svg/v1/MoneyBag.js
index 850a3bf388def3bfc190fafd5b5c20b55b95ca58..76d8065f640f3b7c6a0d9714040cf3dc3686ea08 100644
--- a/packages/loot-design/src/svg/v1/MoneyBag.web.js
+++ b/packages/loot-design/src/svg/v1/MoneyBag.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgMoneyBag = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgMoneyBag = props => (
     }}
   >
     <path
-      d="M9 8h6a1 1 0 0 0 0-2H9a1 1 0 0 0 0 2zM9.471 4.5a.5.5 0 0 0 .5.438h4.064a.5.5 0 0 0 .5-.438 9.165 9.165 0 0 1 1.206-3.049.5.5 0 0 0-.638-.7l-1.862.8a.25.25 0 0 1-.33-.137l-.441-1.1a.5.5 0 0 0-.928 0l-.441 1.1a.25.25 0 0 1-.33.137L8.9.755a.5.5 0 0 0-.638.7A9.165 9.165 0 0 1 9.471 4.5zM15.438 9.121A.591.591 0 0 0 15.081 9H8.919a.585.585 0 0 0-.357.121c-2.551 1.95-5.4 5.4-5.4 8.4C3.16 21.75 5.518 24 12 24s8.84-2.25 8.84-6.482c0-2.995-2.85-6.447-5.402-8.397zM12.955 20.13a.25.25 0 0 0-.205.246v.374a.75.75 0 0 1-1.5 0v-.323a.25.25 0 0 0-.25-.25h-.588a.75.75 0 1 1 0-1.5h2.152a.671.671 0 0 0 .25-1.294l-2.185-.873a2.164 2.164 0 0 1 .416-4.14.25.25 0 0 0 .205-.246v-.374a.75.75 0 0 1 1.5 0v.323a.25.25 0 0 0 .25.25h.588a.75.75 0 1 1 0 1.5h-2.152a.671.671 0 0 0-.25 1.294l2.185.873a2.164 2.164 0 0 1-.416 4.14z"
+      d="M9 8h6a1 1 0 0 0 0-2H9a1 1 0 0 0 0 2ZM9.471 4.5a.5.5 0 0 0 .5.438h4.064a.5.5 0 0 0 .5-.438 9.165 9.165 0 0 1 1.206-3.049.5.5 0 0 0-.638-.7l-1.862.8a.25.25 0 0 1-.33-.137l-.441-1.1a.5.5 0 0 0-.928 0l-.441 1.1a.25.25 0 0 1-.33.137L8.9.755a.5.5 0 0 0-.638.7A9.165 9.165 0 0 1 9.471 4.5ZM15.438 9.121A.591.591 0 0 0 15.081 9H8.919a.585.585 0 0 0-.357.121c-2.551 1.95-5.4 5.4-5.4 8.4C3.16 21.75 5.518 24 12 24s8.84-2.25 8.84-6.482c0-2.995-2.85-6.447-5.402-8.397ZM12.955 20.13a.25.25 0 0 0-.205.246v.374a.75.75 0 0 1-1.5 0v-.323a.25.25 0 0 0-.25-.25h-.588a.75.75 0 1 1 0-1.5h2.152a.671.671 0 0 0 .25-1.294l-2.185-.873a2.164 2.164 0 0 1 .416-4.14.25.25 0 0 0 .205-.246v-.374a.75.75 0 0 1 1.5 0v.323a.25.25 0 0 0 .25.25h.588a.75.75 0 1 1 0 1.5h-2.152a.671.671 0 0 0-.25 1.294l2.185.873a2.164 2.164 0 0 1-.416 4.14Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/MoodHappyOutline.web.js b/packages/loot-design/src/svg/v1/MoodHappyOutline.js
similarity index 86%
rename from packages/loot-design/src/svg/v1/MoodHappyOutline.web.js
rename to packages/loot-design/src/svg/v1/MoodHappyOutline.js
index d61d64bb084ac31c82e5d413fb1aecad1133e110..6df148644292e765a618806a0a3bb2211ce259ab 100644
--- a/packages/loot-design/src/svg/v1/MoodHappyOutline.web.js
+++ b/packages/loot-design/src/svg/v1/MoodHappyOutline.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgMoodHappyOutline = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/MoodHappySolid.web.js b/packages/loot-design/src/svg/v1/MoodHappySolid.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/MoodHappySolid.web.js
rename to packages/loot-design/src/svg/v1/MoodHappySolid.js
index d12f5562432c77293d01398751e1777e7433784b..046bbfd697ea6697d6e782d9ccc15c890b24a310 100644
--- a/packages/loot-design/src/svg/v1/MoodHappySolid.web.js
+++ b/packages/loot-design/src/svg/v1/MoodHappySolid.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgMoodHappySolid = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/MoodNeutralOutline.web.js b/packages/loot-design/src/svg/v1/MoodNeutralOutline.js
similarity index 86%
rename from packages/loot-design/src/svg/v1/MoodNeutralOutline.web.js
rename to packages/loot-design/src/svg/v1/MoodNeutralOutline.js
index 010e11980901283363336eee491573416cdb4cb5..e0596f99f0efe57fa82d29f74d72b043ad6ed0ac 100644
--- a/packages/loot-design/src/svg/v1/MoodNeutralOutline.web.js
+++ b/packages/loot-design/src/svg/v1/MoodNeutralOutline.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgMoodNeutralOutline = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/MoodNeutralSolid.web.js b/packages/loot-design/src/svg/v1/MoodNeutralSolid.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/MoodNeutralSolid.web.js
rename to packages/loot-design/src/svg/v1/MoodNeutralSolid.js
index e5bfc892756e9c4ac5b27dcc069dd363694f9712..8ab0107f3a0f4ac6e7344baa08425c67d1b64c29 100644
--- a/packages/loot-design/src/svg/v1/MoodNeutralSolid.web.js
+++ b/packages/loot-design/src/svg/v1/MoodNeutralSolid.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgMoodNeutralSolid = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/MoodSadOutline.web.js b/packages/loot-design/src/svg/v1/MoodSadOutline.js
similarity index 86%
rename from packages/loot-design/src/svg/v1/MoodSadOutline.web.js
rename to packages/loot-design/src/svg/v1/MoodSadOutline.js
index 3a90b0b029a35747c06d9c80ef2258779c8f98c4..46d562c0039f840ddc10ad00a11050501c2d057d 100644
--- a/packages/loot-design/src/svg/v1/MoodSadOutline.web.js
+++ b/packages/loot-design/src/svg/v1/MoodSadOutline.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgMoodSadOutline = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/MoodSadSolid.web.js b/packages/loot-design/src/svg/v1/MoodSadSolid.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/MoodSadSolid.web.js
rename to packages/loot-design/src/svg/v1/MoodSadSolid.js
index c72b80553cd17bce81ca7e22dfdd0f89fd6f53e7..56b5218729e45f4b09a9b24f5842f7b94c95956a 100644
--- a/packages/loot-design/src/svg/v1/MoodSadSolid.web.js
+++ b/packages/loot-design/src/svg/v1/MoodSadSolid.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgMoodSadSolid = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Mouse.web.js b/packages/loot-design/src/svg/v1/Mouse.js
similarity index 81%
rename from packages/loot-design/src/svg/v1/Mouse.web.js
rename to packages/loot-design/src/svg/v1/Mouse.js
index 828ee5b0504542a64664e9a1b68885dada1d89ba..c4034bde5dc386af6d71ecba944205abc31bb83f 100644
--- a/packages/loot-design/src/svg/v1/Mouse.web.js
+++ b/packages/loot-design/src/svg/v1/Mouse.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgMouse = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/MoveBack.web.js b/packages/loot-design/src/svg/v1/MoveBack.js
similarity index 77%
rename from packages/loot-design/src/svg/v1/MoveBack.web.js
rename to packages/loot-design/src/svg/v1/MoveBack.js
index e65a0a191e9c5ebca092b07d6bbe8fcec411df53..aad1e8b125f231d95a48c3a9f89f31d06c628739 100644
--- a/packages/loot-design/src/svg/v1/MoveBack.web.js
+++ b/packages/loot-design/src/svg/v1/MoveBack.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgMoveBack = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgMoveBack = props => (
     }}
   >
     <path
-      d="M5.418 16.414a1 1 0 0 0 1.707-.707v-3.291a.25.25 0 0 1 .25-.25h13.542a.25.25 0 0 1 .25.25v5.208a1.25 1.25 0 0 0 2.5 0v-6.708a1.25 1.25 0 0 0-1.25-1.25H7.375a.25.25 0 0 1-.25-.25V6.124a1 1 0 0 0-1.707-.707L.626 10.209a1 1 0 0 0 0 1.414z"
+      d="M5.418 16.414a1 1 0 0 0 1.707-.707v-3.291a.25.25 0 0 1 .25-.25h13.542a.25.25 0 0 1 .25.25v5.208a1.25 1.25 0 0 0 2.5 0v-6.708a1.25 1.25 0 0 0-1.25-1.25H7.375a.25.25 0 0 1-.25-.25V6.124a1 1 0 0 0-1.707-.707L.626 10.209a1 1 0 0 0 0 1.414Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/MusicAlbum.web.js b/packages/loot-design/src/svg/v1/MusicAlbum.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/MusicAlbum.web.js
rename to packages/loot-design/src/svg/v1/MusicAlbum.js
index 42eeb92824dec7bb5c8aa71542b18a78f26e99e1..7260d0173091b5508edb65a29afa0fd1bbccae32 100644
--- a/packages/loot-design/src/svg/v1/MusicAlbum.web.js
+++ b/packages/loot-design/src/svg/v1/MusicAlbum.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgMusicAlbum = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/MusicArtist.js b/packages/loot-design/src/svg/v1/MusicArtist.js
new file mode 100644
index 0000000000000000000000000000000000000000..503a8510db909c3959bd18b8e4d03de6ef1d8211
--- /dev/null
+++ b/packages/loot-design/src/svg/v1/MusicArtist.js
@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+const SvgMusicArtist = props => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    style={{
+      color: '#242134',
+      ...props.style
+    }}
+  >
+    <path
+      d="m15.75 8-3.74-3.75a3.99 3.99 0 0 1 6.82-3.08A4 4 0 0 1 15.75 8zm-13.9 7.3 9.2-9.19 2.83 2.83-9.2 9.2-2.82-2.84zm-1.4 2.83 2.11-2.12 1.42 1.42-2.12 2.12-1.42-1.42zM10 15l2-2v7h-2v-5z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default SvgMusicArtist;
diff --git a/packages/loot-design/src/svg/v1/MusicArtist.web.js b/packages/loot-design/src/svg/v1/MusicArtist.web.js
deleted file mode 100644
index db41a09dfd302d6af063398837531b886f1be94f..0000000000000000000000000000000000000000
--- a/packages/loot-design/src/svg/v1/MusicArtist.web.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-
-const SvgMusicArtist = props => (
-  <svg
-    {...props}
-    viewBox="0 0 20 20"
-    style={{
-      color: '#242134',
-      ...props.style
-    }}
-  >
-    <path
-      d="M15.75 8l-3.74-3.75a3.99 3.99 0 0 1 6.82-3.08A4 4 0 0 1 15.75 8zm-13.9 7.3l9.2-9.19 2.83 2.83-9.2 9.2-2.82-2.84zm-1.4 2.83l2.11-2.12 1.42 1.42-2.12 2.12-1.42-1.42zM10 15l2-2v7h-2v-5z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export default SvgMusicArtist;
diff --git a/packages/loot-design/src/svg/v1/MusicNotes.web.js b/packages/loot-design/src/svg/v1/MusicNotes.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/MusicNotes.web.js
rename to packages/loot-design/src/svg/v1/MusicNotes.js
index 422466dc095606f14ff91f596b8ed6aa128a88c6..f61fb431d485ae19bbf840e5ed6584ec70b8d40a 100644
--- a/packages/loot-design/src/svg/v1/MusicNotes.web.js
+++ b/packages/loot-design/src/svg/v1/MusicNotes.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgMusicNotes = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/MusicPlaylist.web.js b/packages/loot-design/src/svg/v1/MusicPlaylist.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/MusicPlaylist.web.js
rename to packages/loot-design/src/svg/v1/MusicPlaylist.js
index 8816d993b9734e132e8834ec204e34da2cdac392..9a7363443fc0191fe4cbcdd1e5d0a8ec4af80625 100644
--- a/packages/loot-design/src/svg/v1/MusicPlaylist.web.js
+++ b/packages/loot-design/src/svg/v1/MusicPlaylist.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgMusicPlaylist = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/NavigationMore.web.js b/packages/loot-design/src/svg/v1/NavigationMore.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/NavigationMore.web.js
rename to packages/loot-design/src/svg/v1/NavigationMore.js
index e7b40be5f05a05e4d4a56330431e0dfc46169e53..77798a20edb84ae3a6e9835e99d3189026288ac8 100644
--- a/packages/loot-design/src/svg/v1/NavigationMore.web.js
+++ b/packages/loot-design/src/svg/v1/NavigationMore.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgNavigationMore = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Network.web.js b/packages/loot-design/src/svg/v1/Network.js
similarity index 92%
rename from packages/loot-design/src/svg/v1/Network.web.js
rename to packages/loot-design/src/svg/v1/Network.js
index 89b6db65d6322949369efab7b971459c5f0da9b0..56f010f48efbba4e0e2de7eb07e7b30186631bf5 100644
--- a/packages/loot-design/src/svg/v1/Network.web.js
+++ b/packages/loot-design/src/svg/v1/Network.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgNetwork = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/NewsPaper.web.js b/packages/loot-design/src/svg/v1/NewsPaper.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/NewsPaper.web.js
rename to packages/loot-design/src/svg/v1/NewsPaper.js
index cbabf97f39a8c67e8c99cbf71be9c28755250758..c970978426e3dca0ffeddca645a5269e68a5deb8 100644
--- a/packages/loot-design/src/svg/v1/NewsPaper.web.js
+++ b/packages/loot-design/src/svg/v1/NewsPaper.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgNewsPaper = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Notification.web.js b/packages/loot-design/src/svg/v1/Notification.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/Notification.web.js
rename to packages/loot-design/src/svg/v1/Notification.js
index 3b62440638adf57a5c5f92ef645c3c2ffd1c91b7..2d93d84093c2e40a0f911cbaf6fbfb50dcf3c2d5 100644
--- a/packages/loot-design/src/svg/v1/Notification.web.js
+++ b/packages/loot-design/src/svg/v1/Notification.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgNotification = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Notifications.web.js b/packages/loot-design/src/svg/v1/Notifications.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/Notifications.web.js
rename to packages/loot-design/src/svg/v1/Notifications.js
index b44d7c22e034670922ebd1093a9bd682c23af8fd..416b35f0d3679f992903d4273ab6d3b6c45ddbe3 100644
--- a/packages/loot-design/src/svg/v1/Notifications.web.js
+++ b/packages/loot-design/src/svg/v1/Notifications.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgNotifications = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/NotificationsOutline.web.js b/packages/loot-design/src/svg/v1/NotificationsOutline.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/NotificationsOutline.web.js
rename to packages/loot-design/src/svg/v1/NotificationsOutline.js
index 8e8fb6679a9d12ecc0ab02224925d4f05d2fe3a3..1f75801727226e66e12c668cad9a5bf6818f2376 100644
--- a/packages/loot-design/src/svg/v1/NotificationsOutline.web.js
+++ b/packages/loot-design/src/svg/v1/NotificationsOutline.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgNotificationsOutline = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Paste.web.js b/packages/loot-design/src/svg/v1/Paste.js
similarity index 87%
rename from packages/loot-design/src/svg/v1/Paste.web.js
rename to packages/loot-design/src/svg/v1/Paste.js
index a1147bba34419861ec5e37bd6ab56f5022a379b7..e4ed6c464dc6e4da42f1b5ae1e3368e0509f00b2 100644
--- a/packages/loot-design/src/svg/v1/Paste.web.js
+++ b/packages/loot-design/src/svg/v1/Paste.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgPaste = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Pause.web.js b/packages/loot-design/src/svg/v1/Pause.js
similarity index 77%
rename from packages/loot-design/src/svg/v1/Pause.web.js
rename to packages/loot-design/src/svg/v1/Pause.js
index ebff236da3277c1be08642a7f29d2d32f114cadb..7378bd9f0b7a33c5ac1d0734d5172b142d6d7993 100644
--- a/packages/loot-design/src/svg/v1/Pause.web.js
+++ b/packages/loot-design/src/svg/v1/Pause.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgPause = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/PauseOutline.web.js b/packages/loot-design/src/svg/v1/PauseOutline.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/PauseOutline.web.js
rename to packages/loot-design/src/svg/v1/PauseOutline.js
index 03c2f789dfff1a5be7d89122242a35e49ec5d2e6..9f83f9b3addd384b01812044c5cf740364a9cb65 100644
--- a/packages/loot-design/src/svg/v1/PauseOutline.web.js
+++ b/packages/loot-design/src/svg/v1/PauseOutline.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgPauseOutline = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/PauseSolid.web.js b/packages/loot-design/src/svg/v1/PauseSolid.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/PauseSolid.web.js
rename to packages/loot-design/src/svg/v1/PauseSolid.js
index 86437b3b68f0d926521f1a7783795f8471adea95..4d4d9cf360de8b70759f7336c9a1b744e835d325 100644
--- a/packages/loot-design/src/svg/v1/PauseSolid.web.js
+++ b/packages/loot-design/src/svg/v1/PauseSolid.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgPauseSolid = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/PenTool.web.js b/packages/loot-design/src/svg/v1/PenTool.js
similarity index 81%
rename from packages/loot-design/src/svg/v1/PenTool.web.js
rename to packages/loot-design/src/svg/v1/PenTool.js
index 75d66ee4963dd33af2269fb885a813cbdac8e628..fc640b808a31d21537ff049cc1a8229ba9982652 100644
--- a/packages/loot-design/src/svg/v1/PenTool.web.js
+++ b/packages/loot-design/src/svg/v1/PenTool.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgPenTool = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/PencilWrite.web.js b/packages/loot-design/src/svg/v1/PencilWrite.js
similarity index 86%
rename from packages/loot-design/src/svg/v1/PencilWrite.web.js
rename to packages/loot-design/src/svg/v1/PencilWrite.js
index c2c3ad70a5ecb14110d9f0a6b7a7488b923e27cd..644401c3ba9ae7e33f249d46553aa8d1cc309d87 100644
--- a/packages/loot-design/src/svg/v1/PencilWrite.web.js
+++ b/packages/loot-design/src/svg/v1/PencilWrite.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgPencilWrite = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,11 +11,11 @@ const SvgPencilWrite = props => (
     }}
   >
     <path
-      d="M13.937 15a1.977 1.977 0 0 1-.672.443L9.73 16.86a2.026 2.026 0 0 1-2.157-.442 2 2 0 0 1-.443-2.157l1.413-3.533a2.008 2.008 0 0 1 .444-.673l5.887-5.888a.251.251 0 0 0-.174-.427H3.368A3.118 3.118 0 0 0 .25 6.858v13.765a3.117 3.117 0 0 0 3.118 3.117h13.765a3.116 3.116 0 0 0 3.117-3.117V9.294a.25.25 0 0 0-.426-.177z"
+      d="M13.937 15a1.977 1.977 0 0 1-.672.443L9.73 16.86a2.026 2.026 0 0 1-2.157-.442 2 2 0 0 1-.443-2.157l1.413-3.533a2.008 2.008 0 0 1 .444-.673l5.887-5.888a.251.251 0 0 0-.174-.427H3.368A3.118 3.118 0 0 0 .25 6.858v13.765a3.117 3.117 0 0 0 3.118 3.117h13.765a3.116 3.116 0 0 0 3.117-3.117V9.294a.25.25 0 0 0-.426-.177Z"
       fill="currentColor"
     />
     <path
-      d="M18.568 3.3a.514.514 0 0 0-.707 0l-7.813 7.814a.507.507 0 0 0-.111.168l-1.414 3.536a.5.5 0 0 0 .111.54.519.519 0 0 0 .539.11l3.535-1.414a.5.5 0 0 0 .168-.111L20.69 6.13a.5.5 0 0 0 0-.707zM23.165 3.654a2 2 0 0 0 0-2.828 2.048 2.048 0 0 0-2.828 0l-1.061 1.061a.531.531 0 0 0-.042.063.49.49 0 0 0-.105.29.5.5 0 0 0 .147.354L21.4 4.715a.483.483 0 0 0 .649.039.452.452 0 0 0 .058-.039z"
+      d="M18.568 3.3a.514.514 0 0 0-.707 0l-7.813 7.814a.507.507 0 0 0-.111.168l-1.414 3.536a.5.5 0 0 0 .111.54.519.519 0 0 0 .539.11l3.535-1.414a.5.5 0 0 0 .168-.111L20.69 6.13a.5.5 0 0 0 0-.707ZM23.165 3.654a2 2 0 0 0 0-2.828 2.048 2.048 0 0 0-2.828 0l-1.061 1.061a.531.531 0 0 0-.042.063.49.49 0 0 0-.105.29.5.5 0 0 0 .147.354L21.4 4.715a.483.483 0 0 0 .649.039.452.452 0 0 0 .058-.039Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/Phone.web.js b/packages/loot-design/src/svg/v1/Phone.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/Phone.web.js
rename to packages/loot-design/src/svg/v1/Phone.js
index 4de3805239fe339bd2ea2f4e4e24a2830a8ad324..00842c06562e339e809a829fbccb768dfdb7ae24 100644
--- a/packages/loot-design/src/svg/v1/Phone.web.js
+++ b/packages/loot-design/src/svg/v1/Phone.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgPhone = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Photo.web.js b/packages/loot-design/src/svg/v1/Photo.js
similarity index 66%
rename from packages/loot-design/src/svg/v1/Photo.web.js
rename to packages/loot-design/src/svg/v1/Photo.js
index d07e55df6261ff15f3e91a171132e3501c874ef7..ce17b8e9dbeec8fe1e0bab11b6e9f60080dbc0a6 100644
--- a/packages/loot-design/src/svg/v1/Photo.web.js
+++ b/packages/loot-design/src/svg/v1/Photo.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgPhoto = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgPhoto = props => (
     }}
   >
     <path
-      d="M0 4c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm11 9l-3-3-6 6h16l-5-5-2 2zm4-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
+      d="M0 4c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm11 9-3-3-6 6h16l-5-5-2 2zm4-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/PhpElephant.web.js b/packages/loot-design/src/svg/v1/PhpElephant.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/PhpElephant.web.js
rename to packages/loot-design/src/svg/v1/PhpElephant.js
index ef47bc97cc627cf1c3d8fcfe25131a87fbc06971..1638760faa31ee7ff8ddfb806a52cd0813c6b2bc 100644
--- a/packages/loot-design/src/svg/v1/PhpElephant.web.js
+++ b/packages/loot-design/src/svg/v1/PhpElephant.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgPhpElephant = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/PiggyBank.web.js b/packages/loot-design/src/svg/v1/PiggyBank.js
similarity index 79%
rename from packages/loot-design/src/svg/v1/PiggyBank.web.js
rename to packages/loot-design/src/svg/v1/PiggyBank.js
index 1ffa7c7da7dbe14c2d90e1ba765398a7f4258a75..3f7f1f300b42207d68f3b04213e63092a1eb4d17 100644
--- a/packages/loot-design/src/svg/v1/PiggyBank.web.js
+++ b/packages/loot-design/src/svg/v1/PiggyBank.js
@@ -1,22 +1,23 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgPiggyBank = props => (
   <svg
     {...props}
     viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
     style={{
       color: '#242134',
       ...props.style
     }}
   >
-    <g clipPath="url(#piggy-bank_svg__clip0)">
+    <g clipPath="url(#a)">
       <path
-        d="M1.857 7.612H.98a.98.98 0 0 0-.98.98v2.224c0 .449.184.857.51 1.163.612.551 1.816 1.49 3.735 2.368a.571.571 0 0 1 .306.346l.939 3.286a.484.484 0 0 0 .469.347h1.47a.479.479 0 0 0 .469-.367l.47-1.817a.262.262 0 0 1 .326-.183c.571.122 1.183.163 1.795.163.613 0 1.225-.061 1.796-.163.143-.02.286.06.327.183l.47 1.817a.502.502 0 0 0 .468.367h1.47a.484.484 0 0 0 .47-.347l1.224-4.245a.487.487 0 0 1 .122-.224c.919-.98 1.53-2.163 1.735-3.47h.49c.53 0 .959-.448.938-.979-.02-.51-.47-.918-.98-.918h-.448C18.06 4.673 14.632 2 10.489 2c-1.775 0-3.428.49-4.755 1.326-.591-.408-1.469-.734-2.693-.632-.49.04-.715.612-.388.959.408.429.796 1 .877 1.735L1.857 7.612zm3.122.98a.862.862 0 0 1-.857-.858c0-.469.388-.857.857-.857.47 0 .858.388.858.857 0 .47-.388.858-.858.858z"
+        d="M1.857 7.612H.98a.98.98 0 0 0-.98.98v2.224c0 .449.184.857.51 1.163.612.551 1.816 1.49 3.735 2.368a.571.571 0 0 1 .306.346l.939 3.286a.484.484 0 0 0 .469.347h1.47a.479.479 0 0 0 .469-.367l.47-1.817a.262.262 0 0 1 .326-.183c.571.122 1.183.163 1.795.163.613 0 1.225-.061 1.796-.163.143-.02.286.06.327.183l.47 1.817a.502.502 0 0 0 .468.367h1.47a.484.484 0 0 0 .47-.347l1.224-4.245a.487.487 0 0 1 .122-.224c.919-.98 1.53-2.163 1.735-3.47h.49c.53 0 .959-.448.938-.979-.02-.51-.47-.918-.98-.918h-.448C18.06 4.673 14.632 2 10.489 2c-1.775 0-3.428.49-4.755 1.326-.591-.408-1.469-.734-2.693-.632-.49.04-.715.612-.388.959.408.429.796 1 .877 1.735L1.857 7.612Zm3.122.98a.862.862 0 0 1-.857-.858c0-.469.388-.857.857-.857.47 0 .858.388.858.857 0 .47-.388.858-.858.858Z"
         fill="currentColor"
       />
     </g>
     <defs>
-      <clipPath id="piggy-bank_svg__clip0">
+      <clipPath id="a">
         <path fill="currentColor" d="M0 0h20v20H0z" />
       </clipPath>
     </defs>
diff --git a/packages/loot-design/src/svg/v1/Pin.web.js b/packages/loot-design/src/svg/v1/Pin.js
similarity index 80%
rename from packages/loot-design/src/svg/v1/Pin.web.js
rename to packages/loot-design/src/svg/v1/Pin.js
index 6dec7fe1701a59854e620474fc318886705656a5..c6d652d25185afc886f3ae999506effce48b1295 100644
--- a/packages/loot-design/src/svg/v1/Pin.web.js
+++ b/packages/loot-design/src/svg/v1/Pin.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgPin = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Play.web.js b/packages/loot-design/src/svg/v1/Play.js
similarity index 59%
rename from packages/loot-design/src/svg/v1/Play.web.js
rename to packages/loot-design/src/svg/v1/Play.js
index 9b07d20705b711c95ca5c8e1c66317853100a3c4..0e4cec0460050b28c4e6b59a072337044549c7a5 100644
--- a/packages/loot-design/src/svg/v1/Play.web.js
+++ b/packages/loot-design/src/svg/v1/Play.js
@@ -1,15 +1,16 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgPlay = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
       ...props.style
     }}
   >
-    <path d="M4 4l12 6-12 6z" fill="currentColor" />
+    <path d="m4 4 12 6-12 6z" fill="currentColor" />
   </svg>
 );
 
diff --git a/packages/loot-design/src/svg/v1/PlayOutline.web.js b/packages/loot-design/src/svg/v1/PlayOutline.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/PlayOutline.web.js
rename to packages/loot-design/src/svg/v1/PlayOutline.js
index b3877ac52c06a79f9a00fffdf3384be21fb291a6..061a8630a9058d05b0b76c1ed27b9718c246bee9 100644
--- a/packages/loot-design/src/svg/v1/PlayOutline.web.js
+++ b/packages/loot-design/src/svg/v1/PlayOutline.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgPlayOutline = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Playlist.web.js b/packages/loot-design/src/svg/v1/Playlist.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/Playlist.web.js
rename to packages/loot-design/src/svg/v1/Playlist.js
index cbd0196fab57535b9a2ca3f94462b8c22f18a7f0..b156ee81f176948ab26b3106ca65aa38d86512b3 100644
--- a/packages/loot-design/src/svg/v1/Playlist.web.js
+++ b/packages/loot-design/src/svg/v1/Playlist.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgPlaylist = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Plugin.web.js b/packages/loot-design/src/svg/v1/Plugin.js
similarity index 86%
rename from packages/loot-design/src/svg/v1/Plugin.web.js
rename to packages/loot-design/src/svg/v1/Plugin.js
index 15ce0d9619afb809fc794534a08fa466984f477b..8bcd4a01e4deac58ba1b8354f76322c827f05b85 100644
--- a/packages/loot-design/src/svg/v1/Plugin.web.js
+++ b/packages/loot-design/src/svg/v1/Plugin.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgPlugin = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Portfolio.web.js b/packages/loot-design/src/svg/v1/Portfolio.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/Portfolio.web.js
rename to packages/loot-design/src/svg/v1/Portfolio.js
index 1552073873530f77c7b796202ce356389f78c593..9c62b1920502cc1332df4ce4eff71b2ac1c6dfca 100644
--- a/packages/loot-design/src/svg/v1/Portfolio.web.js
+++ b/packages/loot-design/src/svg/v1/Portfolio.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgPortfolio = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Printer.web.js b/packages/loot-design/src/svg/v1/Printer.js
similarity index 81%
rename from packages/loot-design/src/svg/v1/Printer.web.js
rename to packages/loot-design/src/svg/v1/Printer.js
index 74e800f3dc67405fc429547101b87dc4ffaa6108..c2cb7a98ac96e847d56dac719ceedd60adfdf636 100644
--- a/packages/loot-design/src/svg/v1/Printer.web.js
+++ b/packages/loot-design/src/svg/v1/Printer.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgPrinter = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Pylon.web.js b/packages/loot-design/src/svg/v1/Pylon.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/Pylon.web.js
rename to packages/loot-design/src/svg/v1/Pylon.js
index 0c5a9c58909d33b0e349ca6c96c3dcc1f3992e9b..729fa8a66bb14ec19c168bc0da4c3544f7694336 100644
--- a/packages/loot-design/src/svg/v1/Pylon.web.js
+++ b/packages/loot-design/src/svg/v1/Pylon.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgPylon = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Question.web.js b/packages/loot-design/src/svg/v1/Question.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/Question.web.js
rename to packages/loot-design/src/svg/v1/Question.js
index f7124e2c28b1a85e1401dc5b20e9abacc6267e64..d0ea4ae4624f134394f4da521a5787ab479f2e00 100644
--- a/packages/loot-design/src/svg/v1/Question.web.js
+++ b/packages/loot-design/src/svg/v1/Question.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgQuestion = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Queue.web.js b/packages/loot-design/src/svg/v1/Queue.js
similarity index 79%
rename from packages/loot-design/src/svg/v1/Queue.web.js
rename to packages/loot-design/src/svg/v1/Queue.js
index e80469c0077c24a73711bb1c4ba712c2718e7b01..2a556fad7be13f5e4a0ed50afc7ff1ba819f27d2 100644
--- a/packages/loot-design/src/svg/v1/Queue.web.js
+++ b/packages/loot-design/src/svg/v1/Queue.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgQueue = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Radar.web.js b/packages/loot-design/src/svg/v1/Radar.js
similarity index 86%
rename from packages/loot-design/src/svg/v1/Radar.web.js
rename to packages/loot-design/src/svg/v1/Radar.js
index c9267bd380430b88bbd33ff2d5d17704562cacbc..71ecc1ce2b481b1829299e54bcc8e9d84d57020c 100644
--- a/packages/loot-design/src/svg/v1/Radar.web.js
+++ b/packages/loot-design/src/svg/v1/Radar.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgRadar = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/RadarCopy2.web.js b/packages/loot-design/src/svg/v1/RadarCopy2.js
similarity index 86%
rename from packages/loot-design/src/svg/v1/RadarCopy2.web.js
rename to packages/loot-design/src/svg/v1/RadarCopy2.js
index 8f798516f7d5974ca8ce1f451b3c39444f0a45d9..c7c217a7071b5a7f86974045022bbfa913ff9b77 100644
--- a/packages/loot-design/src/svg/v1/RadarCopy2.web.js
+++ b/packages/loot-design/src/svg/v1/RadarCopy2.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgRadarCopy2 = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Radio.web.js b/packages/loot-design/src/svg/v1/Radio.js
similarity index 87%
rename from packages/loot-design/src/svg/v1/Radio.web.js
rename to packages/loot-design/src/svg/v1/Radio.js
index d62378899434f6df10f0c26511b3cd6c2316ce56..3691ac3b2f0598ea2eb4121ba9b808c76a107c8e 100644
--- a/packages/loot-design/src/svg/v1/Radio.web.js
+++ b/packages/loot-design/src/svg/v1/Radio.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgRadio = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Refresh.web.js b/packages/loot-design/src/svg/v1/Refresh.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/Refresh.web.js
rename to packages/loot-design/src/svg/v1/Refresh.js
index 46873f5ae583b5977fc1b24a2109b34b86c0fdb9..07537a96247dac17dd459b736e8f5e24e45c95e4 100644
--- a/packages/loot-design/src/svg/v1/Refresh.web.js
+++ b/packages/loot-design/src/svg/v1/Refresh.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgRefresh = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Reload.web.js b/packages/loot-design/src/svg/v1/Reload.js
similarity index 81%
rename from packages/loot-design/src/svg/v1/Reload.web.js
rename to packages/loot-design/src/svg/v1/Reload.js
index f4d4c1db2bb2d5fd8f28ce38abcf65c0e35966b2..61f0eae0ffa390f9463febeb189d95b26072f439 100644
--- a/packages/loot-design/src/svg/v1/Reload.web.js
+++ b/packages/loot-design/src/svg/v1/Reload.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgReload = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Reply.web.js b/packages/loot-design/src/svg/v1/Reply.js
similarity index 80%
rename from packages/loot-design/src/svg/v1/Reply.web.js
rename to packages/loot-design/src/svg/v1/Reply.js
index 6baba4680d7a7e85fe40d4cf025075f18aed6766..940bd124372ad814a88342f711f5d67570d25471 100644
--- a/packages/loot-design/src/svg/v1/Reply.web.js
+++ b/packages/loot-design/src/svg/v1/Reply.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgReply = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/ReplyAll.web.js b/packages/loot-design/src/svg/v1/ReplyAll.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/ReplyAll.web.js
rename to packages/loot-design/src/svg/v1/ReplyAll.js
index 25761dd8b23b2bac2fa05b900b2165888b4b1967..ffaa887c8b12dd759dedd875be11d0bad7608391 100644
--- a/packages/loot-design/src/svg/v1/ReplyAll.web.js
+++ b/packages/loot-design/src/svg/v1/ReplyAll.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgReplyAll = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Reports.web.js b/packages/loot-design/src/svg/v1/Reports.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/Reports.web.js
rename to packages/loot-design/src/svg/v1/Reports.js
index f166683ac3b9f5d10ec98c766254ec960893b771..b934a1e2acdb2861064e9c6a7a5cf0b908d8ebf7 100644
--- a/packages/loot-design/src/svg/v1/Reports.web.js
+++ b/packages/loot-design/src/svg/v1/Reports.js
@@ -1,9 +1,10 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgReports = props => (
   <svg
     {...props}
     viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
     style={{
       color: '#242134',
       ...props.style
diff --git a/packages/loot-design/src/svg/v1/Repost.web.js b/packages/loot-design/src/svg/v1/Repost.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/Repost.web.js
rename to packages/loot-design/src/svg/v1/Repost.js
index 10fa691a5aa228d3c7ee14dcb56161d3dbb011fe..6382e51c330c46a6166433c5a39be698b81eaf9d 100644
--- a/packages/loot-design/src/svg/v1/Repost.web.js
+++ b/packages/loot-design/src/svg/v1/Repost.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgRepost = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/SaveDisk.web.js b/packages/loot-design/src/svg/v1/SaveDisk.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/SaveDisk.web.js
rename to packages/loot-design/src/svg/v1/SaveDisk.js
index 3bb25603cf05c5f042bc3bee3d05e01ca2dbeb87..9db802e42236202bbdeb1a576645e1fa113fd692 100644
--- a/packages/loot-design/src/svg/v1/SaveDisk.web.js
+++ b/packages/loot-design/src/svg/v1/SaveDisk.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgSaveDisk = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/ScreenFull.web.js b/packages/loot-design/src/svg/v1/ScreenFull.js
similarity index 51%
rename from packages/loot-design/src/svg/v1/ScreenFull.web.js
rename to packages/loot-design/src/svg/v1/ScreenFull.js
index d4b607e73d3a33624f055a484bdca0358d031b02..c67cb8a8b46fcabd212741f80366c62c644cea32 100644
--- a/packages/loot-design/src/svg/v1/ScreenFull.web.js
+++ b/packages/loot-design/src/svg/v1/ScreenFull.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgScreenFull = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgScreenFull = props => (
     }}
   >
     <path
-      d="M2.8 15.8L0 13v7h7l-2.8-2.8 4.34-4.32-1.42-1.42L2.8 15.8zM17.2 4.2L20 7V0h-7l2.8 2.8-4.34 4.32 1.42 1.42L17.2 4.2zm-1.4 13L13 20h7v-7l-2.8 2.8-4.32-4.34-1.42 1.42 4.33 4.33zM4.2 2.8L7 0H0v7l2.8-2.8 4.32 4.34 1.42-1.42L4.2 2.8z"
+      d="M2.8 15.8 0 13v7h7l-2.8-2.8 4.34-4.32-1.42-1.42L2.8 15.8zM17.2 4.2 20 7V0h-7l2.8 2.8-4.34 4.32 1.42 1.42L17.2 4.2zm-1.4 13L13 20h7v-7l-2.8 2.8-4.32-4.34-1.42 1.42 4.33 4.33zM4.2 2.8 7 0H0v7l2.8-2.8 4.32 4.34 1.42-1.42L4.2 2.8z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/Search.web.js b/packages/loot-design/src/svg/v1/Search.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/Search.web.js
rename to packages/loot-design/src/svg/v1/Search.js
index d09f6c9ae600062c16e63dd3d7e47c72401d58d5..2b4e67e2b403472979f822bff1f4fd322f9c0a2b 100644
--- a/packages/loot-design/src/svg/v1/Search.web.js
+++ b/packages/loot-design/src/svg/v1/Search.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgSearch = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Send.web.js b/packages/loot-design/src/svg/v1/Send.js
similarity index 58%
rename from packages/loot-design/src/svg/v1/Send.web.js
rename to packages/loot-design/src/svg/v1/Send.js
index 8ca2776d88846caf728f64d43288fc517a85a8f1..e3f9c6d5325f034fbdfa9c9da4daa9385d873aa2 100644
--- a/packages/loot-design/src/svg/v1/Send.web.js
+++ b/packages/loot-design/src/svg/v1/Send.js
@@ -1,15 +1,16 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgSend = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
       ...props.style
     }}
   >
-    <path d="M0 0l20 10L0 20V0zm0 8v4l10-2L0 8z" fill="currentColor" />
+    <path d="m0 0 20 10L0 20V0zm0 8v4l10-2L0 8z" fill="currentColor" />
   </svg>
 );
 
diff --git a/packages/loot-design/src/svg/v1/Servers.web.js b/packages/loot-design/src/svg/v1/Servers.js
similarity index 88%
rename from packages/loot-design/src/svg/v1/Servers.web.js
rename to packages/loot-design/src/svg/v1/Servers.js
index 26002057d2c938243eac78114bf4af995896acad..111bb0b0df9f413799377e245013a4a8ada82f73 100644
--- a/packages/loot-design/src/svg/v1/Servers.web.js
+++ b/packages/loot-design/src/svg/v1/Servers.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgServers = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Share.web.js b/packages/loot-design/src/svg/v1/Share.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/Share.web.js
rename to packages/loot-design/src/svg/v1/Share.js
index e9901fa49ab6ada69931624fdbf3edc4149d0a81..a552c54e936b93d039c1df8e2c52d7800c47ff16 100644
--- a/packages/loot-design/src/svg/v1/Share.web.js
+++ b/packages/loot-design/src/svg/v1/Share.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgShare = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Share01.web.js b/packages/loot-design/src/svg/v1/Share01.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/Share01.web.js
rename to packages/loot-design/src/svg/v1/Share01.js
index 6cf0a58dafab29cb865edea46ad311d78f4eece2..9e72bee383b6c5029beb51c34c82f2c6532e7b7b 100644
--- a/packages/loot-design/src/svg/v1/Share01.web.js
+++ b/packages/loot-design/src/svg/v1/Share01.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgShare01 = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/ShareAlt.web.js b/packages/loot-design/src/svg/v1/ShareAlt.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/ShareAlt.web.js
rename to packages/loot-design/src/svg/v1/ShareAlt.js
index 5a9cfb675afe71fb13228304400d549b1c5d77a5..70b527206f6ef8e0ae5bc79ebf085528df66bb18 100644
--- a/packages/loot-design/src/svg/v1/ShareAlt.web.js
+++ b/packages/loot-design/src/svg/v1/ShareAlt.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgShareAlt = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Shield.web.js b/packages/loot-design/src/svg/v1/Shield.js
similarity index 74%
rename from packages/loot-design/src/svg/v1/Shield.web.js
rename to packages/loot-design/src/svg/v1/Shield.js
index 485ebf8fd6fb0f5eca4492d4f8ae694344c3b7e1..f602e8fe37292d5d7797fef8360cc70138528016 100644
--- a/packages/loot-design/src/svg/v1/Shield.web.js
+++ b/packages/loot-design/src/svg/v1/Shield.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgShield = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgShield = props => (
     }}
   >
     <path
-      d="M19 11a7.5 7.5 0 0 1-3.5 5.94L10 20l-5.5-3.06A7.5 7.5 0 0 1 1 11V3c3.38 0 6.5-1.12 9-3 2.5 1.89 5.62 3 9 3v8zm-9 1.08l2.92 2.04-1.03-3.41 2.84-2.15-3.56-.08L10 5.12 8.83 8.48l-3.56.08L8.1 10.7l-1.03 3.4L10 12.09z"
+      d="M19 11a7.5 7.5 0 0 1-3.5 5.94L10 20l-5.5-3.06A7.5 7.5 0 0 1 1 11V3c3.38 0 6.5-1.12 9-3 2.5 1.89 5.62 3 9 3v8zm-9 1.08 2.92 2.04-1.03-3.41 2.84-2.15-3.56-.08L10 5.12 8.83 8.48l-3.56.08L8.1 10.7l-1.03 3.4L10 12.09z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/ShoppingCart.web.js b/packages/loot-design/src/svg/v1/ShoppingCart.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/ShoppingCart.web.js
rename to packages/loot-design/src/svg/v1/ShoppingCart.js
index b1434341cb0851a966bd6a3c176267c59623245e..2c9d019d765712e679bae25c82d3069286398318 100644
--- a/packages/loot-design/src/svg/v1/ShoppingCart.web.js
+++ b/packages/loot-design/src/svg/v1/ShoppingCart.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgShoppingCart = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/ShowSidebar.web.js b/packages/loot-design/src/svg/v1/ShowSidebar.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/ShowSidebar.web.js
rename to packages/loot-design/src/svg/v1/ShowSidebar.js
index 1b4339b44d187e0c77573833404e097bead812bd..50481677b93f9b13682ed6220b070d8cd4bc3bef 100644
--- a/packages/loot-design/src/svg/v1/ShowSidebar.web.js
+++ b/packages/loot-design/src/svg/v1/ShowSidebar.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgShowSidebar = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Shuffle.web.js b/packages/loot-design/src/svg/v1/Shuffle.js
similarity index 78%
rename from packages/loot-design/src/svg/v1/Shuffle.web.js
rename to packages/loot-design/src/svg/v1/Shuffle.js
index fef59f146b433da6afe9f0fd18b9aa57c877bd70..aa2b0c58c325ff71eb0b65e8df957a7cda81eff8 100644
--- a/packages/loot-design/src/svg/v1/Shuffle.web.js
+++ b/packages/loot-design/src/svg/v1/Shuffle.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgShuffle = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgShuffle = props => (
     }}
   >
     <path
-      d="M6.59 12.83L4.4 15c-.58.58-1.59 1-2.4 1H0v-2h2c.29 0 .8-.2 1-.41l2.17-2.18 1.42 1.42zM16 4V1l4 4-4 4V6h-2c-.29 0-.8.2-1 .41l-2.17 2.18L9.4 7.17 11.6 5c.58-.58 1.59-1 2.41-1h2zm0 10v-3l4 4-4 4v-3h-2c-.82 0-1.83-.42-2.41-1l-8.6-8.59C2.8 6.21 2.3 6 2 6H0V4h2c.82 0 1.83.42 2.41 1l8.6 8.59c.2.2.7.41.99.41h2z"
+      d="M6.59 12.83 4.4 15c-.58.58-1.59 1-2.4 1H0v-2h2c.29 0 .8-.2 1-.41l2.17-2.18 1.42 1.42zM16 4V1l4 4-4 4V6h-2c-.29 0-.8.2-1 .41l-2.17 2.18L9.4 7.17 11.6 5c.58-.58 1.59-1 2.41-1h2zm0 10v-3l4 4-4 4v-3h-2c-.82 0-1.83-.42-2.41-1l-8.6-8.59C2.8 6.21 2.3 6 2 6H0V4h2c.82 0 1.83.42 2.41 1l8.6 8.59c.2.2.7.41.99.41h2z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/StandBy.web.js b/packages/loot-design/src/svg/v1/StandBy.js
similarity index 69%
rename from packages/loot-design/src/svg/v1/StandBy.web.js
rename to packages/loot-design/src/svg/v1/StandBy.js
index 5674f75e35ef66db6f25235fb21b62c1fb0cd6b7..54c0e9a41ecffd2b15a079a4f1c43e44671c960a 100644
--- a/packages/loot-design/src/svg/v1/StandBy.web.js
+++ b/packages/loot-design/src/svg/v1/StandBy.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgStandBy = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -11,7 +12,7 @@ const SvgStandBy = props => (
   >
     <path
       fillRule="evenodd"
-      d="M4.16 4.16l1.42 1.42A6.99 6.99 0 0 0 10 18a7 7 0 0 0 4.42-12.42l1.42-1.42a9 9 0 1 1-11.69 0zM9 0h2v8H9V0z"
+      d="m4.16 4.16 1.42 1.42A6.99 6.99 0 0 0 10 18a7 7 0 0 0 4.42-12.42l1.42-1.42a9 9 0 1 1-11.69 0zM9 0h2v8H9V0z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/StarFull.web.js b/packages/loot-design/src/svg/v1/StarFull.js
similarity index 55%
rename from packages/loot-design/src/svg/v1/StarFull.web.js
rename to packages/loot-design/src/svg/v1/StarFull.js
index 40df360a6b96e7dfbaf644aa3259245e1a697116..3c64249ee00193556c9c225ee1ea2936eee97a36 100644
--- a/packages/loot-design/src/svg/v1/StarFull.web.js
+++ b/packages/loot-design/src/svg/v1/StarFull.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgStarFull = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgStarFull = props => (
     }}
   >
     <path
-      d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"
+      d="m10 15-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/Station.js b/packages/loot-design/src/svg/v1/Station.js
new file mode 100644
index 0000000000000000000000000000000000000000..91aa933e8cc2f9b55722a0d03d323b0f9dab2ba7
--- /dev/null
+++ b/packages/loot-design/src/svg/v1/Station.js
@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+const SvgStation = props => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    style={{
+      color: '#242134',
+      ...props.style
+    }}
+  >
+    <path
+      d="M9 11.73a2 2 0 1 1 2 0V20H9v-8.27zm5.24 2.51-1.41-1.41A3.99 3.99 0 0 0 10 6a4 4 0 0 0-2.83 6.83l-1.41 1.41a6 6 0 1 1 8.49 0zm2.83 2.83-1.41-1.41a8 8 0 1 0-11.31 0l-1.42 1.41a10 10 0 1 1 14.14 0z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default SvgStation;
diff --git a/packages/loot-design/src/svg/v1/Station.web.js b/packages/loot-design/src/svg/v1/Station.web.js
deleted file mode 100644
index b3f16e5600f7bd85987a1072493148ad74b3cb40..0000000000000000000000000000000000000000
--- a/packages/loot-design/src/svg/v1/Station.web.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-
-const SvgStation = props => (
-  <svg
-    {...props}
-    viewBox="0 0 20 20"
-    style={{
-      color: '#242134',
-      ...props.style
-    }}
-  >
-    <path
-      d="M9 11.73a2 2 0 1 1 2 0V20H9v-8.27zm5.24 2.51l-1.41-1.41A3.99 3.99 0 0 0 10 6a4 4 0 0 0-2.83 6.83l-1.41 1.41a6 6 0 1 1 8.49 0zm2.83 2.83l-1.41-1.41a8 8 0 1 0-11.31 0l-1.42 1.41a10 10 0 1 1 14.14 0z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export default SvgStation;
diff --git a/packages/loot-design/src/svg/v1/StepBackward.web.js b/packages/loot-design/src/svg/v1/StepBackward.js
similarity index 78%
rename from packages/loot-design/src/svg/v1/StepBackward.web.js
rename to packages/loot-design/src/svg/v1/StepBackward.js
index 89dd83476c3c8108f0fc183b306c2925543ebaf3..76266ce61879e967fdf16569eea1a179c6f670cf 100644
--- a/packages/loot-design/src/svg/v1/StepBackward.web.js
+++ b/packages/loot-design/src/svg/v1/StepBackward.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgStepBackward = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/StepForward.web.js b/packages/loot-design/src/svg/v1/StepForward.js
similarity index 78%
rename from packages/loot-design/src/svg/v1/StepForward.web.js
rename to packages/loot-design/src/svg/v1/StepForward.js
index 7eb74641b9fcbeaa791b4ae92c0cb10b1e27507b..dbee1507aca848f5fd197e8316598114c8d625c9 100644
--- a/packages/loot-design/src/svg/v1/StepForward.web.js
+++ b/packages/loot-design/src/svg/v1/StepForward.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgStepForward = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Stethoscope.web.js b/packages/loot-design/src/svg/v1/Stethoscope.js
similarity index 87%
rename from packages/loot-design/src/svg/v1/Stethoscope.web.js
rename to packages/loot-design/src/svg/v1/Stethoscope.js
index f3fff4eb52effdcfc40f80db53d58dcc3814a552..3b82c2b0cbcceaa78a69b1237004bb945af34afb 100644
--- a/packages/loot-design/src/svg/v1/Stethoscope.web.js
+++ b/packages/loot-design/src/svg/v1/Stethoscope.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgStethoscope = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/StoreFront.web.js b/packages/loot-design/src/svg/v1/StoreFront.js
similarity index 88%
rename from packages/loot-design/src/svg/v1/StoreFront.web.js
rename to packages/loot-design/src/svg/v1/StoreFront.js
index b91e51e41d3c65769b69632d9c7b745ffee5e36a..436ddbe7f315010180e8f0105315d9002c1a5681 100644
--- a/packages/loot-design/src/svg/v1/StoreFront.web.js
+++ b/packages/loot-design/src/svg/v1/StoreFront.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgStoreFront = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/StrokeWidth.web.js b/packages/loot-design/src/svg/v1/StrokeWidth.js
similarity index 81%
rename from packages/loot-design/src/svg/v1/StrokeWidth.web.js
rename to packages/loot-design/src/svg/v1/StrokeWidth.js
index adbe06ce981ea624a46d4698f5375258cf62bd08..89b9767fff8a533c8b0856f0b198d5143efcc5a9 100644
--- a/packages/loot-design/src/svg/v1/StrokeWidth.web.js
+++ b/packages/loot-design/src/svg/v1/StrokeWidth.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgStrokeWidth = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/SubdirectoryLeft.web.js b/packages/loot-design/src/svg/v1/SubdirectoryLeft.js
similarity index 79%
rename from packages/loot-design/src/svg/v1/SubdirectoryLeft.web.js
rename to packages/loot-design/src/svg/v1/SubdirectoryLeft.js
index 33cce3c632f5e918fcb7c95388248c27fee036bd..dcf94a783ef8feb47383f040918ba077ba0b7fc7 100644
--- a/packages/loot-design/src/svg/v1/SubdirectoryLeft.web.js
+++ b/packages/loot-design/src/svg/v1/SubdirectoryLeft.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgSubdirectoryLeft = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/SubdirectoryRight.web.js b/packages/loot-design/src/svg/v1/SubdirectoryRight.js
similarity index 79%
rename from packages/loot-design/src/svg/v1/SubdirectoryRight.web.js
rename to packages/loot-design/src/svg/v1/SubdirectoryRight.js
index e4cbf9c11913a971ebf20bfb691e1183327eb93f..130ef9c841ac28e33bc876202ccb2114f3f1f8b7 100644
--- a/packages/loot-design/src/svg/v1/SubdirectoryRight.web.js
+++ b/packages/loot-design/src/svg/v1/SubdirectoryRight.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgSubdirectoryRight = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Subtract.web.js b/packages/loot-design/src/svg/v1/Subtract.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/Subtract.web.js
rename to packages/loot-design/src/svg/v1/Subtract.js
index 957d10714879322d15f4aeca990b1052acabd6db..9877ee54a1584bada0b0b65bb23067258d0f7894 100644
--- a/packages/loot-design/src/svg/v1/Subtract.web.js
+++ b/packages/loot-design/src/svg/v1/Subtract.js
@@ -1,9 +1,10 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgSubtract = props => (
   <svg
     {...props}
     viewBox="0 0 23 3"
+    xmlns="http://www.w3.org/2000/svg"
     style={{
       color: '#242134',
       ...props.style
diff --git a/packages/loot-design/src/svg/v1/Swap.web.js b/packages/loot-design/src/svg/v1/Swap.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/Swap.web.js
rename to packages/loot-design/src/svg/v1/Swap.js
index 37e535fee2a92f1502bb1c6a7a94be2ecc9b8c76..1bd90fd9a1f1e0aad9bbe730c5efdafeb62d416c 100644
--- a/packages/loot-design/src/svg/v1/Swap.web.js
+++ b/packages/loot-design/src/svg/v1/Swap.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgSwap = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Tablet.web.js b/packages/loot-design/src/svg/v1/Tablet.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/Tablet.web.js
rename to packages/loot-design/src/svg/v1/Tablet.js
index 20ef61bd6526ceee6ce5ed6f88c425efede238cb..b0a3f907d98b836c6530819d7854dbbcb862b469 100644
--- a/packages/loot-design/src/svg/v1/Tablet.web.js
+++ b/packages/loot-design/src/svg/v1/Tablet.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgTablet = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Tag.web.js b/packages/loot-design/src/svg/v1/Tag.js
similarity index 81%
rename from packages/loot-design/src/svg/v1/Tag.web.js
rename to packages/loot-design/src/svg/v1/Tag.js
index 80d1cea717981df02673962380acca395552575f..1f503b1d0001355a6ad544551d4be73eacb9fbe4 100644
--- a/packages/loot-design/src/svg/v1/Tag.web.js
+++ b/packages/loot-design/src/svg/v1/Tag.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgTag = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Target.web.js b/packages/loot-design/src/svg/v1/Target.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/Target.web.js
rename to packages/loot-design/src/svg/v1/Target.js
index 4e49e517b598d8c524bd68617006a4507fd379ba..1ce90f75d8f8b29b6a72f45776b6248d75c0e9f7 100644
--- a/packages/loot-design/src/svg/v1/Target.web.js
+++ b/packages/loot-design/src/svg/v1/Target.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgTarget = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/TextBox.web.js b/packages/loot-design/src/svg/v1/TextBox.js
similarity index 86%
rename from packages/loot-design/src/svg/v1/TextBox.web.js
rename to packages/loot-design/src/svg/v1/TextBox.js
index 9b03a2c25a948954c27cf6358c70b72c9cfb3404..51a4d99d38e412b15e54707b5d0b67d8f755c4e0 100644
--- a/packages/loot-design/src/svg/v1/TextBox.web.js
+++ b/packages/loot-design/src/svg/v1/TextBox.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgTextBox = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/TextDecoration.web.js b/packages/loot-design/src/svg/v1/TextDecoration.js
similarity index 81%
rename from packages/loot-design/src/svg/v1/TextDecoration.web.js
rename to packages/loot-design/src/svg/v1/TextDecoration.js
index d24933149eb2518b243db931783622c2f816c61d..6c7f620175daa857183f6ed59155895cdfae1a11 100644
--- a/packages/loot-design/src/svg/v1/TextDecoration.web.js
+++ b/packages/loot-design/src/svg/v1/TextDecoration.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgTextDecoration = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Thermometer.web.js b/packages/loot-design/src/svg/v1/Thermometer.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/Thermometer.web.js
rename to packages/loot-design/src/svg/v1/Thermometer.js
index 18e5e77b21e384b983cc44b45b2ea119dc8ab663..d07b8644238be1a8603085ebc73d360c22f4f945 100644
--- a/packages/loot-design/src/svg/v1/Thermometer.web.js
+++ b/packages/loot-design/src/svg/v1/Thermometer.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgThermometer = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/ThumbsDown.web.js b/packages/loot-design/src/svg/v1/ThumbsDown.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/ThumbsDown.web.js
rename to packages/loot-design/src/svg/v1/ThumbsDown.js
index 04e3bacfab83ea79ef0e1ddff463b2a296909b64..67e7eb350d1a69c4f59fc569f3dfca863ca6e067 100644
--- a/packages/loot-design/src/svg/v1/ThumbsDown.web.js
+++ b/packages/loot-design/src/svg/v1/ThumbsDown.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgThumbsDown = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/ThumbsUp.web.js b/packages/loot-design/src/svg/v1/ThumbsUp.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/ThumbsUp.web.js
rename to packages/loot-design/src/svg/v1/ThumbsUp.js
index 4a3c10144e417d56f7236853d4ce2f6e4df87ad5..ce092b20810e139d2c15914b58905d3f0cce5e8a 100644
--- a/packages/loot-design/src/svg/v1/ThumbsUp.web.js
+++ b/packages/loot-design/src/svg/v1/ThumbsUp.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgThumbsUp = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Ticket.web.js b/packages/loot-design/src/svg/v1/Ticket.js
similarity index 61%
rename from packages/loot-design/src/svg/v1/Ticket.web.js
rename to packages/loot-design/src/svg/v1/Ticket.js
index 3f501a4e574c94d2045fff86f2b4e6417985e407..5293d0756fc4bc49cea14123c9524c8f0f00664a 100644
--- a/packages/loot-design/src/svg/v1/Ticket.web.js
+++ b/packages/loot-design/src/svg/v1/Ticket.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgTicket = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgTicket = props => (
     }}
   >
     <path
-      d="M20 12v5H0v-5a2 2 0 1 0 0-4V3h20v5a2 2 0 1 0 0 4zM3 5v10h14V5H3zm7 7.08l-2.92 2.04L8.1 10.7 5.27 8.56l3.56-.08L10 5.12l1.17 3.36 3.56.08-2.84 2.15 1.03 3.4L10 12.09z"
+      d="M20 12v5H0v-5a2 2 0 1 0 0-4V3h20v5a2 2 0 1 0 0 4zM3 5v10h14V5H3zm7 7.08-2.92 2.04L8.1 10.7 5.27 8.56l3.56-.08L10 5.12l1.17 3.36 3.56.08-2.84 2.15 1.03 3.4L10 12.09z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/Time.web.js b/packages/loot-design/src/svg/v1/Time.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/Time.web.js
rename to packages/loot-design/src/svg/v1/Time.js
index ef1bf9684a729b2456b8c9aba0d01ceb5e8f43e1..8d19b09128b7799a2166c974a257c08c19183948 100644
--- a/packages/loot-design/src/svg/v1/Time.web.js
+++ b/packages/loot-design/src/svg/v1/Time.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgTime = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Timer.web.js b/packages/loot-design/src/svg/v1/Timer.js
similarity index 72%
rename from packages/loot-design/src/svg/v1/Timer.web.js
rename to packages/loot-design/src/svg/v1/Timer.js
index ba9534cff9d1b6d5884ac140fbc78472ee3836f4..c699fed37a1c9baea263a2bf6473698461d73213 100644
--- a/packages/loot-design/src/svg/v1/Timer.web.js
+++ b/packages/loot-design/src/svg/v1/Timer.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgTimer = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgTimer = props => (
     }}
   >
     <path
-      d="M16.32 7.1A8 8 0 1 1 9 4.06V2h2v2.06c1.46.18 2.8.76 3.9 1.62l1.46-1.46 1.42 1.42-1.46 1.45zM10 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12zM7 0h6v2H7V0zm5.12 8.46l1.42 1.42L10 13.4 8.59 12l3.53-3.54z"
+      d="M16.32 7.1A8 8 0 1 1 9 4.06V2h2v2.06c1.46.18 2.8.76 3.9 1.62l1.46-1.46 1.42 1.42-1.46 1.45zM10 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12zM7 0h6v2H7V0zm5.12 8.46 1.42 1.42L10 13.4 8.59 12l3.53-3.54z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/ToolsCopy.web.js b/packages/loot-design/src/svg/v1/ToolsCopy.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/ToolsCopy.web.js
rename to packages/loot-design/src/svg/v1/ToolsCopy.js
index c5859b81b109da2bb897c7a654fb2166e220c851..931ac52dec46757f98d54828867b78b89ab635cb 100644
--- a/packages/loot-design/src/svg/v1/ToolsCopy.web.js
+++ b/packages/loot-design/src/svg/v1/ToolsCopy.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgToolsCopy = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Translate.web.js b/packages/loot-design/src/svg/v1/Translate.js
similarity index 76%
rename from packages/loot-design/src/svg/v1/Translate.web.js
rename to packages/loot-design/src/svg/v1/Translate.js
index 47b5db4ac6c4f30c161a40f1fda8b313b305b7fc..83abacdc0b2ec5d70a5dfbeee26252104ae004e8 100644
--- a/packages/loot-design/src/svg/v1/Translate.web.js
+++ b/packages/loot-design/src/svg/v1/Translate.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgTranslate = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgTranslate = props => (
     }}
   >
     <path
-      d="M7.41 9l2.24 2.24-.83 2L6 10.4l-3.3 3.3-1.4-1.42L4.58 9l-.88-.88c-.53-.53-1-1.3-1.3-2.12h2.2c.15.28.33.53.51.7l.89.9.88-.88C7.48 6.1 8 4.84 8 4H0V2h5V0h2v2h5v2h-2c0 1.37-.74 3.15-1.7 4.12L7.4 9zm3.84 8L10 20H8l5-12h2l5 12h-2l-1.25-3h-5.5zm.83-2h3.84L14 10.4 12.08 15z"
+      d="m7.41 9 2.24 2.24-.83 2L6 10.4l-3.3 3.3-1.4-1.42L4.58 9l-.88-.88c-.53-.53-1-1.3-1.3-2.12h2.2c.15.28.33.53.51.7l.89.9.88-.88C7.48 6.1 8 4.84 8 4H0V2h5V0h2v2h5v2h-2c0 1.37-.74 3.15-1.7 4.12L7.4 9zm3.84 8L10 20H8l5-12h2l5 12h-2l-1.25-3h-5.5zm.83-2h3.84L14 10.4 12.08 15z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/Trash.web.js b/packages/loot-design/src/svg/v1/Trash.js
similarity index 64%
rename from packages/loot-design/src/svg/v1/Trash.web.js
rename to packages/loot-design/src/svg/v1/Trash.js
index c6fb9fe30cb2043a170c0a70029f61d407f385c4..384d9caf7619385199d463417d75c43a7868e684 100644
--- a/packages/loot-design/src/svg/v1/Trash.web.js
+++ b/packages/loot-design/src/svg/v1/Trash.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgTrash = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgTrash = props => (
     }}
   >
     <path
-      d="M6 2l2-2h4l2 2h4v2H2V2h4zM3 6h14l-1 14H4L3 6zm5 2v10h1V8H8zm3 0v10h1V8h-1z"
+      d="m6 2 2-2h4l2 2h4v2H2V2h4zM3 6h14l-1 14H4L3 6zm5 2v10h1V8H8zm3 0v10h1V8h-1z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/Travel.web.js b/packages/loot-design/src/svg/v1/Travel.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/Travel.web.js
rename to packages/loot-design/src/svg/v1/Travel.js
index 442f669991e97d83632229d77e64ed4cb996e584..773de693020d9441e03f05c63cc6da2d99f88e14 100644
--- a/packages/loot-design/src/svg/v1/Travel.web.js
+++ b/packages/loot-design/src/svg/v1/Travel.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgTravel = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/TravelBus.web.js b/packages/loot-design/src/svg/v1/TravelBus.js
similarity index 87%
rename from packages/loot-design/src/svg/v1/TravelBus.web.js
rename to packages/loot-design/src/svg/v1/TravelBus.js
index 6e732aa47d1e673f2d4b57bb8b02abc5ac6c7e1f..1928ea1a9a2b40c3118fb8d3556dfb747b1e85df 100644
--- a/packages/loot-design/src/svg/v1/TravelBus.web.js
+++ b/packages/loot-design/src/svg/v1/TravelBus.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgTravelBus = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/TravelCar.web.js b/packages/loot-design/src/svg/v1/TravelCar.js
similarity index 87%
rename from packages/loot-design/src/svg/v1/TravelCar.web.js
rename to packages/loot-design/src/svg/v1/TravelCar.js
index 256bf2eef23e9754a5c4162877ecef84d2b0f189..2b7e3312fd409ded5fa17b67cccab455655cc208 100644
--- a/packages/loot-design/src/svg/v1/TravelCar.web.js
+++ b/packages/loot-design/src/svg/v1/TravelCar.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgTravelCar = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/TravelCase.web.js b/packages/loot-design/src/svg/v1/TravelCase.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/TravelCase.web.js
rename to packages/loot-design/src/svg/v1/TravelCase.js
index 07b6a78c6c7fc177f9e13d12c11c5ed770a9cddd..ba64e768e46b91670637f9b117f4c9b4b32b6ece 100644
--- a/packages/loot-design/src/svg/v1/TravelCase.web.js
+++ b/packages/loot-design/src/svg/v1/TravelCase.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgTravelCase = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/TravelTaxiCab.web.js b/packages/loot-design/src/svg/v1/TravelTaxiCab.js
similarity index 88%
rename from packages/loot-design/src/svg/v1/TravelTaxiCab.web.js
rename to packages/loot-design/src/svg/v1/TravelTaxiCab.js
index 27f7af60dc30c4e06e9081bb244fa834331fa70e..0caaf91d5c30f22994cf062057873743044121d3 100644
--- a/packages/loot-design/src/svg/v1/TravelTaxiCab.web.js
+++ b/packages/loot-design/src/svg/v1/TravelTaxiCab.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgTravelTaxiCab = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/TravelTrain.web.js b/packages/loot-design/src/svg/v1/TravelTrain.js
similarity index 86%
rename from packages/loot-design/src/svg/v1/TravelTrain.web.js
rename to packages/loot-design/src/svg/v1/TravelTrain.js
index 10829d2b33d03e0ae89d0fc0950698198ef929cc..33e67a2e7e2cd1a1daf78e7ee5737812259fb77a 100644
--- a/packages/loot-design/src/svg/v1/TravelTrain.web.js
+++ b/packages/loot-design/src/svg/v1/TravelTrain.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgTravelTrain = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/TravelWalk.web.js b/packages/loot-design/src/svg/v1/TravelWalk.js
similarity index 74%
rename from packages/loot-design/src/svg/v1/TravelWalk.web.js
rename to packages/loot-design/src/svg/v1/TravelWalk.js
index a797d254e030284f5ff57f44a8bcf14b6ac35add..eeec0a072007d2081dc6b83fb0b2fd4b7d0c8b6c 100644
--- a/packages/loot-design/src/svg/v1/TravelWalk.web.js
+++ b/packages/loot-design/src/svg/v1/TravelWalk.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgTravelWalk = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgTravelWalk = props => (
     }}
   >
     <path
-      d="M11 7l1.44 2.16c.31.47 1.01.84 1.57.84H17V8h-3l-1.44-2.16a5.94 5.94 0 0 0-1.4-1.4l-1.32-.88a1.72 1.72 0 0 0-1.7-.04L4 6v5h2V7l2-1-3 14h2l2.35-7.65L11 14v6h2v-8l-2.7-2.7L11 7zm1-3a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
+      d="m11 7 1.44 2.16c.31.47 1.01.84 1.57.84H17V8h-3l-1.44-2.16a5.94 5.94 0 0 0-1.4-1.4l-1.32-.88a1.72 1.72 0 0 0-1.7-.04L4 6v5h2V7l2-1-3 14h2l2.35-7.65L11 14v6h2v-8l-2.7-2.7L11 7zm1-3a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/Trophy.web.js b/packages/loot-design/src/svg/v1/Trophy.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/Trophy.web.js
rename to packages/loot-design/src/svg/v1/Trophy.js
index 93c911cb0ed8f0c6c28e17c864bf00ea6465b8f9..2f7d7a74c6454880833aedbd8f63d775b265651d 100644
--- a/packages/loot-design/src/svg/v1/Trophy.web.js
+++ b/packages/loot-design/src/svg/v1/Trophy.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgTrophy = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Tuning.web.js b/packages/loot-design/src/svg/v1/Tuning.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/Tuning.web.js
rename to packages/loot-design/src/svg/v1/Tuning.js
index aafbf804e951b55841e2b07ac57319a7c4faa874..12b05d61579703a12677c6e94e628b18b5fcd362 100644
--- a/packages/loot-design/src/svg/v1/Tuning.web.js
+++ b/packages/loot-design/src/svg/v1/Tuning.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgTuning = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Upload.web.js b/packages/loot-design/src/svg/v1/Upload.js
similarity index 78%
rename from packages/loot-design/src/svg/v1/Upload.web.js
rename to packages/loot-design/src/svg/v1/Upload.js
index ac87b09654becca292c62451068862f54412bdab..944c378f0afce3315026fd1789cdb05f7b7b1a9b 100644
--- a/packages/loot-design/src/svg/v1/Upload.web.js
+++ b/packages/loot-design/src/svg/v1/Upload.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgUpload = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Usb.web.js b/packages/loot-design/src/svg/v1/Usb.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/Usb.web.js
rename to packages/loot-design/src/svg/v1/Usb.js
index 71a234089319206802ad6ad30b9f74f419a126d0..d2a4b817038310d6ea7a04a33062786dd02ef8b6 100644
--- a/packages/loot-design/src/svg/v1/Usb.web.js
+++ b/packages/loot-design/src/svg/v1/Usb.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgUsb = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/User.web.js b/packages/loot-design/src/svg/v1/User.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/User.web.js
rename to packages/loot-design/src/svg/v1/User.js
index 156559453ba02db8a95f644482689d148516617a..b7b75e766f671372ca95b79398574685c32ae281 100644
--- a/packages/loot-design/src/svg/v1/User.web.js
+++ b/packages/loot-design/src/svg/v1/User.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgUser = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/UserAdd.web.js b/packages/loot-design/src/svg/v1/UserAdd.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/UserAdd.web.js
rename to packages/loot-design/src/svg/v1/UserAdd.js
index caa45156292e0a25198104ee9037a4420038e115..25e29f6fc997b1d88d199122e03e7deeac7ea7b7 100644
--- a/packages/loot-design/src/svg/v1/UserAdd.web.js
+++ b/packages/loot-design/src/svg/v1/UserAdd.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgUserAdd = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/UserGroup.web.js b/packages/loot-design/src/svg/v1/UserGroup.js
similarity index 87%
rename from packages/loot-design/src/svg/v1/UserGroup.web.js
rename to packages/loot-design/src/svg/v1/UserGroup.js
index a96e8aa167aa79ca869c1d97eeecc6c5a302da2f..df8fa6d80303878b4ae95fe302da340ae4917a7e 100644
--- a/packages/loot-design/src/svg/v1/UserGroup.web.js
+++ b/packages/loot-design/src/svg/v1/UserGroup.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgUserGroup = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/UserSolidCircle.web.js b/packages/loot-design/src/svg/v1/UserSolidCircle.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/UserSolidCircle.web.js
rename to packages/loot-design/src/svg/v1/UserSolidCircle.js
index dd1f093f123ffe43a38ba4bc85f966197a7a9d8c..7e0db196a9d028d63fc8bb2d1dea31da136ea105 100644
--- a/packages/loot-design/src/svg/v1/UserSolidCircle.web.js
+++ b/packages/loot-design/src/svg/v1/UserSolidCircle.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgUserSolidCircle = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/UserSolidSquare.web.js b/packages/loot-design/src/svg/v1/UserSolidSquare.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/UserSolidSquare.web.js
rename to packages/loot-design/src/svg/v1/UserSolidSquare.js
index 32ce2a34f5e87dd6ce01719307d544d530a8ecd6..976b4027cc8d0aa4e3649e6bf03346f42ee5c487 100644
--- a/packages/loot-design/src/svg/v1/UserSolidSquare.web.js
+++ b/packages/loot-design/src/svg/v1/UserSolidSquare.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgUserSolidSquare = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Vector.web.js b/packages/loot-design/src/svg/v1/Vector.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/Vector.web.js
rename to packages/loot-design/src/svg/v1/Vector.js
index ca6a665e61857576549fd6b7260d7e5757127773..8a37d0f0417dd0d3504de71255a62bf567b9f200 100644
--- a/packages/loot-design/src/svg/v1/Vector.web.js
+++ b/packages/loot-design/src/svg/v1/Vector.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgVector = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/VideoCamera.web.js b/packages/loot-design/src/svg/v1/VideoCamera.js
similarity index 71%
rename from packages/loot-design/src/svg/v1/VideoCamera.web.js
rename to packages/loot-design/src/svg/v1/VideoCamera.js
index 81781fd9f2981803c6220a52f579bdfb28da4ae4..7d7b532a2b9f0f0637c0b2f52ae8c2724c3b0b6a 100644
--- a/packages/loot-design/src/svg/v1/VideoCamera.web.js
+++ b/packages/loot-design/src/svg/v1/VideoCamera.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgVideoCamera = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgVideoCamera = props => (
     }}
   >
     <path
-      d="M16 7l4-4v14l-4-4v3a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v3zm-8 7a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0-2a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
+      d="m16 7 4-4v14l-4-4v3a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v3zm-8 7a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0-2a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/ViewCarousel.web.js b/packages/loot-design/src/svg/v1/ViewCarousel.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/ViewCarousel.web.js
rename to packages/loot-design/src/svg/v1/ViewCarousel.js
index 5808286ddbbd37772d966c80de692fcbd84e82fd..b76a572a08bca24cd82a019b9f143030e742bf00 100644
--- a/packages/loot-design/src/svg/v1/ViewCarousel.web.js
+++ b/packages/loot-design/src/svg/v1/ViewCarousel.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgViewCarousel = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/ViewColumn.web.js b/packages/loot-design/src/svg/v1/ViewColumn.js
similarity index 81%
rename from packages/loot-design/src/svg/v1/ViewColumn.web.js
rename to packages/loot-design/src/svg/v1/ViewColumn.js
index e811d0e0f852bb201ee6377b7f9623fe5293eec2..328d2d840b1f85be86c82f2d9000dedcb5747ad1 100644
--- a/packages/loot-design/src/svg/v1/ViewColumn.web.js
+++ b/packages/loot-design/src/svg/v1/ViewColumn.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgViewColumn = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/ViewHide.js b/packages/loot-design/src/svg/v1/ViewHide.js
new file mode 100644
index 0000000000000000000000000000000000000000..658b1e28f8708453bb2db9ca2c65be27ccbfe3c7
--- /dev/null
+++ b/packages/loot-design/src/svg/v1/ViewHide.js
@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+const SvgViewHide = props => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    style={{
+      color: '#242134',
+      ...props.style
+    }}
+  >
+    <path
+      d="m12.81 4.36-1.77 1.78a4 4 0 0 0-4.9 4.9l-2.76 2.75C2.06 12.79.96 11.49.2 10a11 11 0 0 1 12.6-5.64zm3.8 1.85c1.33 1 2.43 2.3 3.2 3.79a11 11 0 0 1-12.62 5.64l1.77-1.78a4 4 0 0 0 4.9-4.9l2.76-2.75zm-.25-3.99 1.42 1.42L3.64 17.78l-1.42-1.42L16.36 2.22z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default SvgViewHide;
diff --git a/packages/loot-design/src/svg/v1/ViewHide.web.js b/packages/loot-design/src/svg/v1/ViewHide.web.js
deleted file mode 100644
index e91c38a3b6f663dbae32fb28ce5742212096c20e..0000000000000000000000000000000000000000
--- a/packages/loot-design/src/svg/v1/ViewHide.web.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-
-const SvgViewHide = props => (
-  <svg
-    {...props}
-    viewBox="0 0 20 20"
-    style={{
-      color: '#242134',
-      ...props.style
-    }}
-  >
-    <path
-      d="M12.81 4.36l-1.77 1.78a4 4 0 0 0-4.9 4.9l-2.76 2.75C2.06 12.79.96 11.49.2 10a11 11 0 0 1 12.6-5.64zm3.8 1.85c1.33 1 2.43 2.3 3.2 3.79a11 11 0 0 1-12.62 5.64l1.77-1.78a4 4 0 0 0 4.9-4.9l2.76-2.75zm-.25-3.99l1.42 1.42L3.64 17.78l-1.42-1.42L16.36 2.22z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export default SvgViewHide;
diff --git a/packages/loot-design/src/svg/v1/ViewList.web.js b/packages/loot-design/src/svg/v1/ViewList.js
similarity index 80%
rename from packages/loot-design/src/svg/v1/ViewList.web.js
rename to packages/loot-design/src/svg/v1/ViewList.js
index 6ce74996889dada7c0de04b2c98a53fb6e5a2e39..c13d33239cc1a19c24ae57bae08168540584a511 100644
--- a/packages/loot-design/src/svg/v1/ViewList.web.js
+++ b/packages/loot-design/src/svg/v1/ViewList.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgViewList = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/ViewShow.web.js b/packages/loot-design/src/svg/v1/ViewShow.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/ViewShow.web.js
rename to packages/loot-design/src/svg/v1/ViewShow.js
index 38efd339e22960d3f23d1c6185784e7718d5dc8a..040706412f05b2e614fe18036b1c0f636874ef6e 100644
--- a/packages/loot-design/src/svg/v1/ViewShow.web.js
+++ b/packages/loot-design/src/svg/v1/ViewShow.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgViewShow = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/ViewTile.web.js b/packages/loot-design/src/svg/v1/ViewTile.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/ViewTile.web.js
rename to packages/loot-design/src/svg/v1/ViewTile.js
index b8e05c1b36239590482a85c510410a40d8a8a077..bbb0ecca0074b780aa497160a585e2ecc074c4f8 100644
--- a/packages/loot-design/src/svg/v1/ViewTile.web.js
+++ b/packages/loot-design/src/svg/v1/ViewTile.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgViewTile = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/VolumeDown.web.js b/packages/loot-design/src/svg/v1/VolumeDown.js
similarity index 57%
rename from packages/loot-design/src/svg/v1/VolumeDown.web.js
rename to packages/loot-design/src/svg/v1/VolumeDown.js
index 0e4f62879e63e1a2ebfb825c82ac4a8f2cae7153..90dd6d0fedd706913956fec00ad51d63d53f0af2 100644
--- a/packages/loot-design/src/svg/v1/VolumeDown.web.js
+++ b/packages/loot-design/src/svg/v1/VolumeDown.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgVolumeDown = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgVolumeDown = props => (
     }}
   >
     <path
-      d="M7 7H3v6h4l5 5V2L7 7zm8.54 6.54l-1.42-1.42a3 3 0 0 0 0-4.24l1.42-1.42a4.98 4.98 0 0 1 0 7.08z"
+      d="M7 7H3v6h4l5 5V2L7 7zm8.54 6.54-1.42-1.42a3 3 0 0 0 0-4.24l1.42-1.42a4.98 4.98 0 0 1 0 7.08z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/VolumeMute.web.js b/packages/loot-design/src/svg/v1/VolumeMute.js
similarity index 77%
rename from packages/loot-design/src/svg/v1/VolumeMute.web.js
rename to packages/loot-design/src/svg/v1/VolumeMute.js
index ddff078d5a4d4c7f57c23efae945c6b55dadde62..009e967bf2240bd64476ef73789645d92c999cdf 100644
--- a/packages/loot-design/src/svg/v1/VolumeMute.web.js
+++ b/packages/loot-design/src/svg/v1/VolumeMute.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgVolumeMute = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/VolumeOff.web.js b/packages/loot-design/src/svg/v1/VolumeOff.js
similarity index 50%
rename from packages/loot-design/src/svg/v1/VolumeOff.web.js
rename to packages/loot-design/src/svg/v1/VolumeOff.js
index b2037af9f6d38ba7e4276177de76b9e7f63f15b8..3686a5cef379f98073ec101d35007e0bad117be5 100644
--- a/packages/loot-design/src/svg/v1/VolumeOff.web.js
+++ b/packages/loot-design/src/svg/v1/VolumeOff.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgVolumeOff = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgVolumeOff = props => (
     }}
   >
     <path
-      d="M15 8.59l-2.12-2.13-1.42 1.42L13.6 10l-2.13 2.12 1.42 1.42L15 11.4l2.12 2.13 1.42-1.42L16.4 10l2.13-2.12-1.42-1.42L15 8.6zM4 7H0v6h4l5 5V2L4 7z"
+      d="m15 8.59-2.12-2.13-1.42 1.42L13.6 10l-2.13 2.12 1.42 1.42L15 11.4l2.12 2.13 1.42-1.42L16.4 10l2.13-2.12-1.42-1.42L15 8.6zM4 7H0v6h4l5 5V2L4 7z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/VolumeUp.js b/packages/loot-design/src/svg/v1/VolumeUp.js
new file mode 100644
index 0000000000000000000000000000000000000000..d5e3ef77def5c074f04df20493b2b006c418f475
--- /dev/null
+++ b/packages/loot-design/src/svg/v1/VolumeUp.js
@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+const SvgVolumeUp = props => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    style={{
+      color: '#242134',
+      ...props.style
+    }}
+  >
+    <path
+      d="M5 7H1v6h4l5 5V2L5 7zm11.36 9.36-1.41-1.41a6.98 6.98 0 0 0 0-9.9l1.41-1.41a8.97 8.97 0 0 1 0 12.72zm-2.82-2.82-1.42-1.42a3 3 0 0 0 0-4.24l1.42-1.42a4.98 4.98 0 0 1 0 7.08z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default SvgVolumeUp;
diff --git a/packages/loot-design/src/svg/v1/VolumeUp.web.js b/packages/loot-design/src/svg/v1/VolumeUp.web.js
deleted file mode 100644
index 223315339c9291d3669b157f4c4230ebb14baf9f..0000000000000000000000000000000000000000
--- a/packages/loot-design/src/svg/v1/VolumeUp.web.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-
-const SvgVolumeUp = props => (
-  <svg
-    {...props}
-    viewBox="0 0 20 20"
-    style={{
-      color: '#242134',
-      ...props.style
-    }}
-  >
-    <path
-      d="M5 7H1v6h4l5 5V2L5 7zm11.36 9.36l-1.41-1.41a6.98 6.98 0 0 0 0-9.9l1.41-1.41a8.97 8.97 0 0 1 0 12.72zm-2.82-2.82l-1.42-1.42a3 3 0 0 0 0-4.24l1.42-1.42a4.98 4.98 0 0 1 0 7.08z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export default SvgVolumeUp;
diff --git a/packages/loot-design/src/svg/v1/Wallet.web.js b/packages/loot-design/src/svg/v1/Wallet.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/Wallet.web.js
rename to packages/loot-design/src/svg/v1/Wallet.js
index 865796e302f493ee610a9e9447c1f8ac68279304..39e31f18d3ae225688c6d6e195c9508788cf157b 100644
--- a/packages/loot-design/src/svg/v1/Wallet.web.js
+++ b/packages/loot-design/src/svg/v1/Wallet.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgWallet = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Watch.web.js b/packages/loot-design/src/svg/v1/Watch.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/Watch.web.js
rename to packages/loot-design/src/svg/v1/Watch.js
index daced531deb07d97dd32e39201e7ac153438beaf..90664ce3ae52225fdf56a9d52c6715334ce97f8d 100644
--- a/packages/loot-design/src/svg/v1/Watch.web.js
+++ b/packages/loot-design/src/svg/v1/Watch.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgWatch = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/Window.web.js b/packages/loot-design/src/svg/v1/Window.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/Window.web.js
rename to packages/loot-design/src/svg/v1/Window.js
index c06d3f8784eed4cbf35de0e3edf99dddb99bd7c3..0ebb3318b1711ef3e4f72529bfa158ae3e73bc74 100644
--- a/packages/loot-design/src/svg/v1/Window.web.js
+++ b/packages/loot-design/src/svg/v1/Window.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgWindow = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/WindowNew.web.js b/packages/loot-design/src/svg/v1/WindowNew.js
similarity index 83%
rename from packages/loot-design/src/svg/v1/WindowNew.web.js
rename to packages/loot-design/src/svg/v1/WindowNew.js
index 41bd3cec37bf359cc275508e7c35bde2b96ac5ef..2de697d062753cb06f3aa2684841d4261822cf05 100644
--- a/packages/loot-design/src/svg/v1/WindowNew.web.js
+++ b/packages/loot-design/src/svg/v1/WindowNew.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgWindowNew = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/WindowOpen.web.js b/packages/loot-design/src/svg/v1/WindowOpen.js
similarity index 71%
rename from packages/loot-design/src/svg/v1/WindowOpen.web.js
rename to packages/loot-design/src/svg/v1/WindowOpen.js
index 31f8c9be11fa97c8d33edfb112cb739419c069a4..f2d3e710769c462d9fd13d19761784080cb5f3a3 100644
--- a/packages/loot-design/src/svg/v1/WindowOpen.web.js
+++ b/packages/loot-design/src/svg/v1/WindowOpen.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgWindowOpen = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgWindowOpen = props => (
     }}
   >
     <path
-      d="M0 3c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3zm2 2v12h16V5H2zm8 3l4 5H6l4-5z"
+      d="M0 3c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3zm2 2v12h16V5H2zm8 3 4 5H6l4-5z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v1/Wrench.web.js b/packages/loot-design/src/svg/v1/Wrench.js
similarity index 82%
rename from packages/loot-design/src/svg/v1/Wrench.web.js
rename to packages/loot-design/src/svg/v1/Wrench.js
index bc5024ca728ddbfc81d9867bcc6ce025cd0cf037..2be7c11e599083b4c0b951759eae386617704597 100644
--- a/packages/loot-design/src/svg/v1/Wrench.web.js
+++ b/packages/loot-design/src/svg/v1/Wrench.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgWrench = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/YinYang.web.js b/packages/loot-design/src/svg/v1/YinYang.js
similarity index 85%
rename from packages/loot-design/src/svg/v1/YinYang.web.js
rename to packages/loot-design/src/svg/v1/YinYang.js
index 393ae6fe22f1095e9b02ba0b498f7c26439fd031..90617295a3a376ded261fb2fc8160c5d228fed66 100644
--- a/packages/loot-design/src/svg/v1/YinYang.web.js
+++ b/packages/loot-design/src/svg/v1/YinYang.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgYinYang = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/ZoomIn.web.js b/packages/loot-design/src/svg/v1/ZoomIn.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/ZoomIn.web.js
rename to packages/loot-design/src/svg/v1/ZoomIn.js
index 50d768b3ad617e5fa86c714adaae02889872ea27..1a8e7294eb5838dc64d4db36bfb6c39f929729bb 100644
--- a/packages/loot-design/src/svg/v1/ZoomIn.web.js
+++ b/packages/loot-design/src/svg/v1/ZoomIn.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgZoomIn = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v1/ZoomOut.web.js b/packages/loot-design/src/svg/v1/ZoomOut.js
similarity index 84%
rename from packages/loot-design/src/svg/v1/ZoomOut.web.js
rename to packages/loot-design/src/svg/v1/ZoomOut.js
index 8878d62ebf16e3ea6f55816dbfb0d7c23fe1b44b..0725122d1fb5b9cd4c484af9468cf37891530f7b 100644
--- a/packages/loot-design/src/svg/v1/ZoomOut.web.js
+++ b/packages/loot-design/src/svg/v1/ZoomOut.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgZoomOut = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v2/AlertTriangle.web.js b/packages/loot-design/src/svg/v2/AlertTriangle.js
similarity index 50%
rename from packages/loot-design/src/svg/v2/AlertTriangle.web.js
rename to packages/loot-design/src/svg/v2/AlertTriangle.js
index f4764275ed745606081e3c8b6055fb540df70765..26d93e6f2db47499f56342a0ecaa13c8c5c3dd72 100644
--- a/packages/loot-design/src/svg/v2/AlertTriangle.web.js
+++ b/packages/loot-design/src/svg/v2/AlertTriangle.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgAlertTriangle = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgAlertTriangle = props => (
     }}
   >
     <path
-      d="M23.119 20L13.772 2.15a2 2 0 0 0-3.543 0L.881 20a2 2 0 0 0 1.772 2.928h18.694A2 2 0 0 0 23.119 20zM11 8.423a1 1 0 0 1 2 0v6a1 1 0 1 1-2 0zm1.05 11.51h-.028a1.528 1.528 0 0 1-1.522-1.47 1.476 1.476 0 0 1 1.448-1.53h.028A1.527 1.527 0 0 1 13.5 18.4a1.475 1.475 0 0 1-1.45 1.533z"
+      d="M23.119 20 13.772 2.15a2 2 0 0 0-3.543 0L.881 20a2 2 0 0 0 1.772 2.928h18.694A2 2 0 0 0 23.119 20ZM11 8.423a1 1 0 0 1 2 0v6a1 1 0 1 1-2 0Zm1.05 11.51h-.028a1.528 1.528 0 0 1-1.522-1.47 1.476 1.476 0 0 1 1.448-1.53h.028A1.527 1.527 0 0 1 13.5 18.4a1.475 1.475 0 0 1-1.45 1.533Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v2/ArrowButtonDown1.web.js b/packages/loot-design/src/svg/v2/ArrowButtonDown1.js
similarity index 89%
rename from packages/loot-design/src/svg/v2/ArrowButtonDown1.web.js
rename to packages/loot-design/src/svg/v2/ArrowButtonDown1.js
index 52e45da514182de2bbc9fde9f22598fc977c9efa..b373940f459e5b9793d3dd1563c74fc1fbc537f9 100644
--- a/packages/loot-design/src/svg/v2/ArrowButtonDown1.web.js
+++ b/packages/loot-design/src/svg/v2/ArrowButtonDown1.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgArrowButtonDown1 = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,11 +11,11 @@ const SvgArrowButtonDown1 = props => (
     }}
   >
     <path
-      d="M12 13.584a2.643 2.643 0 0 1-1.875-.775L.584 3.268a1.768 1.768 0 0 1 2.5-2.5l8.739 8.739a.25.25 0 0 0 .354 0L20.916.768a1.768 1.768 0 0 1 2.5 2.5l-9.541 9.541a2.643 2.643 0 0 1-1.875.775z"
+      d="M12 13.584a2.643 2.643 0 0 1-1.875-.775L.584 3.268a1.768 1.768 0 0 1 2.5-2.5l8.739 8.739a.25.25 0 0 0 .354 0L20.916.768a1.768 1.768 0 0 1 2.5 2.5l-9.541 9.541a2.643 2.643 0 0 1-1.875.775Z"
       fill="currentColor"
     />
     <path
-      d="M12 23.75a2.643 2.643 0 0 1-1.875-.775L.584 13.434a1.768 1.768 0 0 1 2.5-2.5l8.739 8.739a.25.25 0 0 0 .354 0l8.739-8.739a1.768 1.768 0 0 1 2.5 2.5l-9.541 9.541A2.643 2.643 0 0 1 12 23.75z"
+      d="M12 23.75a2.643 2.643 0 0 1-1.875-.775L.584 13.434a1.768 1.768 0 0 1 2.5-2.5l8.739 8.739a.25.25 0 0 0 .354 0l8.739-8.739a1.768 1.768 0 0 1 2.5 2.5l-9.541 9.541A2.643 2.643 0 0 1 12 23.75Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v2/ArrowButtonLeft1.web.js b/packages/loot-design/src/svg/v2/ArrowButtonLeft1.js
similarity index 81%
rename from packages/loot-design/src/svg/v2/ArrowButtonLeft1.web.js
rename to packages/loot-design/src/svg/v2/ArrowButtonLeft1.js
index b164308061d53b160751f39af0220a31e60bf81c..f7f2d9ef24e85e42cdad46a9fa5a1e8d535c4569 100644
--- a/packages/loot-design/src/svg/v2/ArrowButtonLeft1.web.js
+++ b/packages/loot-design/src/svg/v2/ArrowButtonLeft1.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgArrowButtonLeft1 = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,11 +11,11 @@ const SvgArrowButtonLeft1 = props => (
     }}
   >
     <path
-      d="M10.416 12a2.643 2.643 0 0 1 .775-1.875L20.732.584a1.768 1.768 0 0 1 2.5 2.5l-8.739 8.739a.25.25 0 0 0 0 .354l8.739 8.739a1.768 1.768 0 0 1-2.5 2.5l-9.541-9.541A2.643 2.643 0 0 1 10.416 12z"
+      d="M10.416 12a2.643 2.643 0 0 1 .775-1.875L20.732.584a1.768 1.768 0 0 1 2.5 2.5l-8.739 8.739a.25.25 0 0 0 0 .354l8.739 8.739a1.768 1.768 0 0 1-2.5 2.5l-9.541-9.541A2.643 2.643 0 0 1 10.416 12Z"
       fill="currentColor"
     />
     <path
-      d="M.25 12a2.643 2.643 0 0 1 .775-1.875L10.566.584a1.768 1.768 0 0 1 2.5 2.5l-8.739 8.739a.25.25 0 0 0 0 .354l8.739 8.739a1.768 1.768 0 0 1-2.5 2.5l-9.541-9.541A2.643 2.643 0 0 1 .25 12z"
+      d="M.25 12a2.643 2.643 0 0 1 .775-1.875L10.566.584a1.768 1.768 0 0 1 2.5 2.5l-8.739 8.739a.25.25 0 0 0 0 .354l8.739 8.739a1.768 1.768 0 0 1-2.5 2.5l-9.541-9.541A2.643 2.643 0 0 1 .25 12Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v2/ArrowButtonRight1.web.js b/packages/loot-design/src/svg/v2/ArrowButtonRight1.js
similarity index 88%
rename from packages/loot-design/src/svg/v2/ArrowButtonRight1.web.js
rename to packages/loot-design/src/svg/v2/ArrowButtonRight1.js
index 3a0e34116b9971c8552de9bcce1b193a6a46e1f0..09b48c84a157b4af19b1d5a2a47305fd10dfa5c4 100644
--- a/packages/loot-design/src/svg/v2/ArrowButtonRight1.web.js
+++ b/packages/loot-design/src/svg/v2/ArrowButtonRight1.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgArrowButtonRight1 = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,11 +11,11 @@ const SvgArrowButtonRight1 = props => (
     }}
   >
     <path
-      d="M13.584 12a2.643 2.643 0 0 1-.775 1.875l-9.541 9.541a1.768 1.768 0 0 1-2.5-2.5l8.739-8.739a.25.25 0 0 0 0-.354L.768 3.084a1.768 1.768 0 0 1 2.5-2.5l9.541 9.541A2.643 2.643 0 0 1 13.584 12z"
+      d="M13.584 12a2.643 2.643 0 0 1-.775 1.875l-9.541 9.541a1.768 1.768 0 0 1-2.5-2.5l8.739-8.739a.25.25 0 0 0 0-.354L.768 3.084a1.768 1.768 0 0 1 2.5-2.5l9.541 9.541A2.643 2.643 0 0 1 13.584 12Z"
       fill="currentColor"
     />
     <path
-      d="M23.75 12a2.643 2.643 0 0 1-.775 1.875l-9.541 9.541a1.768 1.768 0 0 1-2.5-2.5l8.739-8.739a.25.25 0 0 0 0-.354l-8.739-8.739a1.768 1.768 0 0 1 2.5-2.5l9.541 9.541A2.643 2.643 0 0 1 23.75 12z"
+      d="M23.75 12a2.643 2.643 0 0 1-.775 1.875l-9.541 9.541a1.768 1.768 0 0 1-2.5-2.5l8.739-8.739a.25.25 0 0 0 0-.354l-8.739-8.739a1.768 1.768 0 0 1 2.5-2.5l9.541 9.541A2.643 2.643 0 0 1 23.75 12Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v2/ArrowButtonUp1.web.js b/packages/loot-design/src/svg/v2/ArrowButtonUp1.js
similarity index 80%
rename from packages/loot-design/src/svg/v2/ArrowButtonUp1.web.js
rename to packages/loot-design/src/svg/v2/ArrowButtonUp1.js
index 839b0d470a325526d64671526a2e72968d8cc015..cbabb90dfb8f020cc2b6ed162cd83de838cc87a1 100644
--- a/packages/loot-design/src/svg/v2/ArrowButtonUp1.web.js
+++ b/packages/loot-design/src/svg/v2/ArrowButtonUp1.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgArrowButtonUp1 = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,11 +11,11 @@ const SvgArrowButtonUp1 = props => (
     }}
   >
     <path
-      d="M12 10.416a2.643 2.643 0 0 1 1.875.775l9.541 9.541a1.768 1.768 0 0 1-2.5 2.5l-8.739-8.739a.25.25 0 0 0-.354 0l-8.739 8.739a1.768 1.768 0 0 1-2.5-2.5l9.541-9.541A2.643 2.643 0 0 1 12 10.416z"
+      d="M12 10.416a2.643 2.643 0 0 1 1.875.775l9.541 9.541a1.768 1.768 0 0 1-2.5 2.5l-8.739-8.739a.25.25 0 0 0-.354 0l-8.739 8.739a1.768 1.768 0 0 1-2.5-2.5l9.541-9.541A2.643 2.643 0 0 1 12 10.416Z"
       fill="currentColor"
     />
     <path
-      d="M12 .25a2.643 2.643 0 0 1 1.875.775l9.541 9.541a1.768 1.768 0 0 1-2.5 2.5l-8.739-8.739a.25.25 0 0 0-.354 0l-8.739 8.739a1.768 1.768 0 0 1-2.5-2.5l9.541-9.541A2.643 2.643 0 0 1 12 .25z"
+      d="M12 .25a2.643 2.643 0 0 1 1.875.775l9.541 9.541a1.768 1.768 0 0 1-2.5 2.5l-8.739-8.739a.25.25 0 0 0-.354 0l-8.739 8.739a1.768 1.768 0 0 1-2.5-2.5l9.541-9.541A2.643 2.643 0 0 1 12 .25Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v2/ArrowsExpand3.web.js b/packages/loot-design/src/svg/v2/ArrowsExpand3.js
similarity index 80%
rename from packages/loot-design/src/svg/v2/ArrowsExpand3.web.js
rename to packages/loot-design/src/svg/v2/ArrowsExpand3.js
index 96a8fced22f15e57394b3979811955e4529a1763..28cbb2c48641e40a3f07bec7a12476301f5af56a 100644
--- a/packages/loot-design/src/svg/v2/ArrowsExpand3.web.js
+++ b/packages/loot-design/src/svg/v2/ArrowsExpand3.js
@@ -1,17 +1,18 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgArrowsExpand3 = props => (
   <svg
     {...props}
     viewBox="0 0 24 24"
     fill="none"
+    xmlns="http://www.w3.org/2000/svg"
     style={{
       color: '#242134',
       ...props.style
     }}
   >
     <path
-      d="M19.611 2.571h-3.754a1.286 1.286 0 1 1 0-2.571h6.857A1.286 1.286 0 0 1 24 1.286v6.857a1.286 1.286 0 0 1-2.571 0V4.39L15.48 10.34a1.286 1.286 0 0 1-1.817-1.817l5.948-5.95zM1.286 14.571a1.286 1.286 0 0 1 1.285 1.286v3.754l5.949-5.946a1.286 1.286 0 0 1 1.817 1.817L4.39 21.429h3.753a1.285 1.285 0 1 1 0 2.571H1.286A1.286 1.286 0 0 1 0 22.714v-6.857a1.286 1.286 0 0 1 1.286-1.286z"
+      d="M19.611 2.571h-3.754a1.286 1.286 0 1 1 0-2.571h6.857A1.286 1.286 0 0 1 24 1.286v6.857a1.286 1.286 0 0 1-2.571 0V4.39L15.48 10.34a1.286 1.286 0 0 1-1.817-1.817l5.948-5.95ZM1.286 14.571a1.286 1.286 0 0 1 1.285 1.286v3.754l5.949-5.946a1.286 1.286 0 0 1 1.817 1.817L4.39 21.429h3.753a1.285 1.285 0 1 1 0 2.571H1.286A1.286 1.286 0 0 1 0 22.714v-6.857a1.286 1.286 0 0 1 1.286-1.286Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v2/ArrowsShrink3.web.js b/packages/loot-design/src/svg/v2/ArrowsShrink3.js
similarity index 78%
rename from packages/loot-design/src/svg/v2/ArrowsShrink3.web.js
rename to packages/loot-design/src/svg/v2/ArrowsShrink3.js
index 2ff1b488c09175e98fc43a847bc8deaab334d4bd..4d6c444dab2007d69b67a03734092f62817ea18a 100644
--- a/packages/loot-design/src/svg/v2/ArrowsShrink3.web.js
+++ b/packages/loot-design/src/svg/v2/ArrowsShrink3.js
@@ -1,17 +1,18 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgArrowsShrink3 = props => (
   <svg
     {...props}
     viewBox="0 0 24 24"
     fill="none"
+    xmlns="http://www.w3.org/2000/svg"
     style={{
       color: '#242134',
       ...props.style
     }}
   >
     <path
-      d="M14.143 1.714A1.286 1.286 0 0 1 15.429 3v3.753L21.806.377a1.286 1.286 0 0 1 1.817 1.817l-6.376 6.377H21a1.286 1.286 0 1 1 0 2.572h-6.857a1.286 1.286 0 0 1-1.286-1.286V3a1.286 1.286 0 0 1 1.286-1.286zM9.857 22.286A1.285 1.285 0 0 1 8.571 21v-3.753l-6.377 6.376a1.286 1.286 0 0 1-1.817-1.817l6.376-6.377H3a1.286 1.286 0 0 1 0-2.572h6.857a1.286 1.286 0 0 1 1.286 1.286V21a1.286 1.286 0 0 1-1.286 1.286z"
+      d="M14.143 1.714A1.286 1.286 0 0 1 15.429 3v3.753L21.806.377a1.286 1.286 0 0 1 1.817 1.817l-6.376 6.377H21a1.286 1.286 0 1 1 0 2.572h-6.857a1.286 1.286 0 0 1-1.286-1.286V3a1.286 1.286 0 0 1 1.286-1.286ZM9.857 22.286A1.285 1.285 0 0 1 8.571 21v-3.753l-6.377 6.376a1.286 1.286 0 0 1-1.817-1.817l6.376-6.377H3a1.286 1.286 0 0 1 0-2.572h6.857a1.286 1.286 0 0 1 1.286 1.286V21a1.286 1.286 0 0 1-1.286 1.286Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v2/ArrowsSynchronize.js b/packages/loot-design/src/svg/v2/ArrowsSynchronize.js
new file mode 100644
index 0000000000000000000000000000000000000000..d7991a56fa72796d23ed6b1299507d06d23026e2
--- /dev/null
+++ b/packages/loot-design/src/svg/v2/ArrowsSynchronize.js
@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+const SvgArrowsSynchronize = props => (
+  <svg
+    {...props}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    style={{
+      color: '#242134',
+      ...props.style
+    }}
+  >
+    <g fill="#000">
+      <path
+        d="m23.962 17.457-.82-3.297a1.287 1.287 0 0 0-1.56-.934l-3.294.823a1.286 1.286 0 0 0-.343 2.35L19 17.03A9.538 9.538 0 0 1 12 20.604a8.652 8.652 0 0 1-8.085-5.667 1.286 1.286 0 0 0-2.415.884A11.232 11.232 0 0 0 12 23.175a12.108 12.108 0 0 0 9.214-4.8l.839.503a1.286 1.286 0 0 0 1.91-1.415ZM2.422 10.774l3.295-.823a1.286 1.286 0 0 0 .352-2.35l-.972-.583A9.588 9.588 0 0 1 12 3.396a8.652 8.652 0 0 1 8.085 5.667A1.286 1.286 0 0 0 22.5 8.18 11.232 11.232 0 0 0 12 .825 12.242 12.242 0 0 0 2.866 5.68l-.919-.552a1.286 1.286 0 0 0-1.91 1.414l.82 3.297a1.287 1.287 0 0 0 1.246.974 1.311 1.311 0 0 0 .32-.04Z"
+        fill="currentColor"
+      />
+    </g>
+  </svg>
+);
+
+export default SvgArrowsSynchronize;
diff --git a/packages/loot-design/src/svg/v2/ArrowsSynchronize.web.js b/packages/loot-design/src/svg/v2/ArrowsSynchronize.web.js
deleted file mode 100644
index d10cec520d4940ed2a24f8174ac03e48628d564b..0000000000000000000000000000000000000000
--- a/packages/loot-design/src/svg/v2/ArrowsSynchronize.web.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-const SvgArrowsSynchronize = props => (
-  <svg
-    {...props}
-    viewBox="0 0 24 24"
-    style={{
-      color: '#242134',
-      ...props.style
-    }}
-  >
-    <g fill="#000">
-      <path
-        d="M23.962 17.457l-.82-3.297a1.287 1.287 0 0 0-1.56-.934l-3.294.823a1.286 1.286 0 0 0-.343 2.35L19 17.03A9.538 9.538 0 0 1 12 20.604a8.652 8.652 0 0 1-8.085-5.667 1.286 1.286 0 0 0-2.415.884A11.232 11.232 0 0 0 12 23.175a12.108 12.108 0 0 0 9.214-4.8l.839.503a1.286 1.286 0 0 0 1.91-1.415zM2.422 10.774l3.295-.823a1.286 1.286 0 0 0 .352-2.35l-.972-.583A9.588 9.588 0 0 1 12 3.396a8.652 8.652 0 0 1 8.085 5.667A1.286 1.286 0 0 0 22.5 8.18 11.232 11.232 0 0 0 12 .825 12.242 12.242 0 0 0 2.866 5.68l-.919-.552a1.286 1.286 0 0 0-1.91 1.414l.82 3.297a1.287 1.287 0 0 0 1.246.974 1.311 1.311 0 0 0 .32-.04z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
-
-export default SvgArrowsSynchronize;
diff --git a/packages/loot-design/src/svg/v2/Calendar.web.js b/packages/loot-design/src/svg/v2/Calendar.js
similarity index 71%
rename from packages/loot-design/src/svg/v2/Calendar.web.js
rename to packages/loot-design/src/svg/v2/Calendar.js
index 9bb1e426a741d8e227ac6f23608999ba6a23f36f..b115b55e591d08aae71eff567dfe7930d2722f95 100644
--- a/packages/loot-design/src/svg/v2/Calendar.web.js
+++ b/packages/loot-design/src/svg/v2/Calendar.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCalendar = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgCalendar = props => (
     }}
   >
     <path
-      d="M21.5 3h-2.75a.25.25 0 0 1-.25-.25V1a1 1 0 0 0-2 0v4.75a.75.75 0 0 1-.75.75.75.75 0 0 1-.75-.75V3.5a.5.5 0 0 0-.5-.5H8.25A.25.25 0 0 1 8 2.751V1a1 1 0 1 0-2 0v4.75a.75.75 0 0 1-.75.75.75.75 0 0 1-.75-.75V3.5A.5.5 0 0 0 4 3H2.5a2 2 0 0 0-2 2v17a2 2 0 0 0 2 2h19a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zM21 22H3a.5.5 0 0 1-.5-.5v-12A.5.5 0 0 1 3 9h18a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5z"
+      d="M21.5 3h-2.75a.25.25 0 0 1-.25-.25V1a1 1 0 0 0-2 0v4.75a.75.75 0 0 1-.75.75.75.75 0 0 1-.75-.75V3.5a.5.5 0 0 0-.5-.5H8.25A.25.25 0 0 1 8 2.751V1a1 1 0 1 0-2 0v4.75a.75.75 0 0 1-.75.75.75.75 0 0 1-.75-.75V3.5A.5.5 0 0 0 4 3H2.5a2 2 0 0 0-2 2v17a2 2 0 0 0 2 2h19a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2ZM21 22H3a.5.5 0 0 1-.5-.5v-12A.5.5 0 0 1 3 9h18a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v2/Calendar3.js b/packages/loot-design/src/svg/v2/Calendar3.js
new file mode 100644
index 0000000000000000000000000000000000000000..c19e619a223a081d96c36ce418b43152fc8b85ce
--- /dev/null
+++ b/packages/loot-design/src/svg/v2/Calendar3.js
@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+const SvgCalendar3 = props => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    style={{
+      color: '#242134',
+      ...props.style
+    }}
+  >
+    <path
+      d="M7.5 10.5h-1a1 1 0 1 0 0 2h1a1 1 0 0 0 0-2ZM12.5 10.5h-1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2ZM17.5 10.5h-1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2ZM7.5 14.5h-1a1 1 0 1 0 0 2h1a1 1 0 0 0 0-2ZM12.5 14.5h-1a1 1 0 1 0 0 2h1a1 1 0 0 0 0-2ZM17.5 14.5h-1a1 1 0 1 0 0 2h1a1 1 0 0 0 0-2ZM7.5 18.5h-1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2ZM12.5 18.5h-1a1 1 0 0 0 0 2h1a1 1 0 1 0 0-2ZM17.5 18.5h-1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2Z"
+      fill="currentColor"
+    />
+    <path
+      d="M21.5 3h-2.75a.25.25 0 0 1-.25-.25V1a1 1 0 0 0-2 0v4.75a.75.75 0 1 1-1.5 0V3.5a.5.5 0 0 0-.5-.5H8.25A.25.25 0 0 1 8 2.751V1a1 1 0 1 0-2 0v4.75a.75.75 0 1 1-1.5 0V3.5A.5.5 0 0 0 4 3H2.5a2 2 0 0 0-2 2v17a2 2 0 0 0 2 2h19a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Zm0 18.5a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5v-12A.5.5 0 0 1 3 9h18a.5.5 0 0 1 .5.5Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default SvgCalendar3;
diff --git a/packages/loot-design/src/svg/v2/Calendar3.web.js b/packages/loot-design/src/svg/v2/Calendar3.web.js
deleted file mode 100644
index 8a71dbf3ba6fddaaf749c2df9f2424cf35e22ff9..0000000000000000000000000000000000000000
--- a/packages/loot-design/src/svg/v2/Calendar3.web.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-
-const SvgCalendar3 = props => (
-  <svg
-    {...props}
-    viewBox="0 0 24 24"
-    style={{
-      color: '#242134',
-      ...props.style
-    }}
-  >
-    <path
-      d="M7.5 10.5h-1a1 1 0 1 0 0 2h1a1 1 0 0 0 0-2zM12.5 10.5h-1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2zM17.5 10.5h-1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2zM7.5 14.5h-1a1 1 0 1 0 0 2h1a1 1 0 0 0 0-2zM12.5 14.5h-1a1 1 0 1 0 0 2h1a1 1 0 0 0 0-2zM17.5 14.5h-1a1 1 0 1 0 0 2h1a1 1 0 0 0 0-2zM7.5 18.5h-1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2zM12.5 18.5h-1a1 1 0 0 0 0 2h1a1 1 0 1 0 0-2zM17.5 18.5h-1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2z"
-      fill="currentColor"
-    />
-    <path
-      d="M21.5 3h-2.75a.25.25 0 0 1-.25-.25V1a1 1 0 0 0-2 0v4.75a.75.75 0 1 1-1.5 0V3.5a.5.5 0 0 0-.5-.5H8.25A.25.25 0 0 1 8 2.751V1a1 1 0 1 0-2 0v4.75a.75.75 0 1 1-1.5 0V3.5A.5.5 0 0 0 4 3H2.5a2 2 0 0 0-2 2v17a2 2 0 0 0 2 2h19a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 18.5a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5v-12A.5.5 0 0 1 3 9h18a.5.5 0 0 1 .5.5z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export default SvgCalendar3;
diff --git a/packages/loot-design/src/svg/v2/Check.web.js b/packages/loot-design/src/svg/v2/Check.js
similarity index 81%
rename from packages/loot-design/src/svg/v2/Check.web.js
rename to packages/loot-design/src/svg/v2/Check.js
index 0eb345694497b9f65b8c0da11c01f96aa6029932..95db9fa5d0f6d491aa53a5380c02be4b2fda0bf8 100644
--- a/packages/loot-design/src/svg/v2/Check.web.js
+++ b/packages/loot-design/src/svg/v2/Check.js
@@ -1,16 +1,17 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCheck = props => (
   <svg
     {...props}
     viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
     style={{
       color: '#242134',
       ...props.style
     }}
   >
     <path
-      d="M6.847 21.429a3.408 3.408 0 0 1-2.662-1.34l-3.76-4.273a1.714 1.714 0 0 1 2.572-2.263l3.522 4.01a.429.429 0 0 0 .631.014L21.036 3.105a1.715 1.715 0 1 1 2.486 2.362l-14.06 14.8a3.327 3.327 0 0 1-2.615 1.162z"
+      d="M6.847 21.429a3.408 3.408 0 0 1-2.662-1.34l-3.76-4.273a1.714 1.714 0 0 1 2.572-2.263l3.522 4.01a.429.429 0 0 0 .631.014L21.036 3.105a1.715 1.715 0 1 1 2.486 2.362l-14.06 14.8a3.327 3.327 0 0 1-2.615 1.162Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v2/CheckCircle1.js b/packages/loot-design/src/svg/v2/CheckCircle1.js
new file mode 100644
index 0000000000000000000000000000000000000000..4846078528c83b8571758123e29597c571750e33
--- /dev/null
+++ b/packages/loot-design/src/svg/v2/CheckCircle1.js
@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+const SvgCheckCircle1 = props => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    style={{
+      color: '#242134',
+      ...props.style
+    }}
+  >
+    <path
+      d="M12 0a12 12 0 1 0 12 12A12.014 12.014 0 0 0 12 0Zm6.927 8.2-6.845 9.289a1.011 1.011 0 0 1-1.43.188l-4.888-3.908a1 1 0 1 1 1.25-1.562l4.076 3.261 6.227-8.451a1 1 0 1 1 1.61 1.183Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default SvgCheckCircle1;
diff --git a/packages/loot-design/src/svg/v2/CheckCircle1.web.js b/packages/loot-design/src/svg/v2/CheckCircle1.web.js
deleted file mode 100644
index 0e7e327f69a41a1c7552c9839fba58432419c4f9..0000000000000000000000000000000000000000
--- a/packages/loot-design/src/svg/v2/CheckCircle1.web.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-
-const SvgCheckCircle1 = props => (
-  <svg
-    {...props}
-    viewBox="0 0 24 24"
-    style={{
-      color: '#242134',
-      ...props.style
-    }}
-  >
-    <path
-      d="M12 0a12 12 0 1 0 12 12A12.014 12.014 0 0 0 12 0zm6.927 8.2l-6.845 9.289a1.011 1.011 0 0 1-1.43.188l-4.888-3.908a1 1 0 1 1 1.25-1.562l4.076 3.261 6.227-8.451a1 1 0 1 1 1.61 1.183z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export default SvgCheckCircle1;
diff --git a/packages/loot-design/src/svg/v2/CheckCircleHollow.js b/packages/loot-design/src/svg/v2/CheckCircleHollow.js
index 4f7df66acc815886449f0ac024d33662c1ed56f6..f2704b78c02dc25d126499f944a81a793782792e 100644
--- a/packages/loot-design/src/svg/v2/CheckCircleHollow.js
+++ b/packages/loot-design/src/svg/v2/CheckCircleHollow.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCheckCircleHollow = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgCheckCircleHollow = props => (
     }}
   >
     <path
-      d="M 12 0 C 1.3084197 0 -4.0435475 12.925204 3.515625 20.484375 C 11.074797 28.043547 24 22.69158 24 12 C 23.992285 5.3757944 18.624205 0.0077147446 12 0 z M 12.009766 1.9882812 C 17.531104 1.9947115 22.005288 6.4688953 22.011719 11.990234 C 22.011719 20.90177 11.238144 25.363144 4.9375 19.0625 C -1.3631434 12.761856 3.0982293 1.9882812 12.009766 1.9882812 z M 18.244141 6.5761719 A 1 1 0 0 0 17.316406 7.0175781 L 11.089844 15.46875 L 7.0136719 12.207031 A 1.0004882 1.0004882 0 1 0 5.7636719 13.769531 L 10.652344 17.677734 A 1.011 1.011 0 0 0 12.082031 17.488281 L 18.927734 8.1992188 A 1 1 0 0 0 18.244141 6.5761719 z "
+      d="M12 0C1.308 0-4.044 12.925 3.516 20.484 11.075 28.044 24 22.692 24 12 23.992 5.376 18.624.008 12 0zm.01 1.988c5.521.007 9.995 4.48 10.002 10.002 0 8.912-10.774 13.373-17.075 7.072-6.3-6.3-1.839-17.074 7.073-17.074zm6.234 4.588a1 1 0 0 0-.928.442l-6.226 8.45-4.076-3.261a1 1 0 1 0-1.25 1.563l4.888 3.908a1.011 1.011 0 0 0 1.43-.19L18.928 8.2a1 1 0 0 0-.684-1.623z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v2/CloudUnknown.web.js b/packages/loot-design/src/svg/v2/CloudUnknown.js
similarity index 79%
rename from packages/loot-design/src/svg/v2/CloudUnknown.web.js
rename to packages/loot-design/src/svg/v2/CloudUnknown.js
index 817e69f0bf3347f7895b2af03d9c1ac9e7d44861..0e5142023560bc148aeb45f73a8fb564cb3ef291 100644
--- a/packages/loot-design/src/svg/v2/CloudUnknown.web.js
+++ b/packages/loot-design/src/svg/v2/CloudUnknown.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCloudUnknown = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,11 +11,11 @@ const SvgCloudUnknown = props => (
     }}
   >
     <path
-      d="M3.566 15.457a1 1 0 0 0-.5-.844 2.248 2.248 0 0 1-.431-.329A2.371 2.371 0 0 1 2 12.5a2.588 2.588 0 0 1 2.585-2.588 2.645 2.645 0 0 1 .536.056A1 1 0 0 0 6.324 9c.081-5.754 8.3-7.363 10.818-2.045a.97.97 0 0 0 .941.571 3.7 3.7 0 0 1 3 1.3 3.874 3.874 0 0 1 .908 2.811 3.428 3.428 0 0 1-1.1 2.375 1.316 1.316 0 0 0-.42 1.089.912.912 0 0 0 1.476.628A5.408 5.408 0 0 0 24 11.418a5.763 5.763 0 0 0-5.22-5.866.25.25 0 0 1-.19-.12 7.685 7.685 0 0 0-14.1 2.3.251.251 0 0 1-.227.2 4.642 4.642 0 0 0-3.643 2.24A4.471 4.471 0 0 0 0 12.619a4.287 4.287 0 0 0 1.235 3.09 4.177 4.177 0 0 0 .852.645 1 1 0 0 0 1.478-.9z"
+      d="M3.566 15.457a1 1 0 0 0-.5-.844 2.248 2.248 0 0 1-.431-.329A2.371 2.371 0 0 1 2 12.5a2.588 2.588 0 0 1 2.585-2.588 2.645 2.645 0 0 1 .536.056A1 1 0 0 0 6.324 9c.081-5.754 8.3-7.363 10.818-2.045a.97.97 0 0 0 .941.571 3.7 3.7 0 0 1 3 1.3 3.874 3.874 0 0 1 .908 2.811 3.428 3.428 0 0 1-1.1 2.375 1.316 1.316 0 0 0-.42 1.089.912.912 0 0 0 1.476.628A5.408 5.408 0 0 0 24 11.418a5.763 5.763 0 0 0-5.22-5.866.25.25 0 0 1-.19-.12 7.685 7.685 0 0 0-14.1 2.3.251.251 0 0 1-.227.2 4.642 4.642 0 0 0-3.643 2.24A4.471 4.471 0 0 0 0 12.619a4.287 4.287 0 0 0 1.235 3.09 4.177 4.177 0 0 0 .852.645 1 1 0 0 0 1.478-.9Z"
       fill="currentColor"
     />
     <path
-      d="M18.5 15.8a6.5 6.5 0 1 0-6.5 6.5 6.508 6.508 0 0 0 6.5-6.5zm-7.25 1.25v-.55a1.257 1.257 0 0 1 .986-1.221 1.125 1.125 0 1 0-1.361-1.1.75.75 0 1 1-1.5 0 2.625 2.625 0 1 1 3.538 2.461.25.25 0 0 0-.163.234v.18a.75.75 0 0 1-1.5 0zM12 18.8a1 1 0 1 1-1 1 1 1 0 0 1 1-1z"
+      d="M18.5 15.8a6.5 6.5 0 1 0-6.5 6.5 6.508 6.508 0 0 0 6.5-6.5Zm-7.25 1.25v-.55a1.257 1.257 0 0 1 .986-1.221 1.125 1.125 0 1 0-1.361-1.1.75.75 0 1 1-1.5 0 2.625 2.625 0 1 1 3.538 2.461.25.25 0 0 0-.163.234v.18a.75.75 0 0 1-1.5 0ZM12 18.8a1 1 0 1 1-1 1 1 1 0 0 1 1-1Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v2/CloudUpload.web.js b/packages/loot-design/src/svg/v2/CloudUpload.js
similarity index 88%
rename from packages/loot-design/src/svg/v2/CloudUpload.web.js
rename to packages/loot-design/src/svg/v2/CloudUpload.js
index a305cbbc5f19d4549b59425879b1281444d5dff2..798748ecfb6b4e072548464e3ff69cfec0115eba 100644
--- a/packages/loot-design/src/svg/v2/CloudUpload.web.js
+++ b/packages/loot-design/src/svg/v2/CloudUpload.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCloudUpload = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,11 +11,11 @@ const SvgCloudUpload = props => (
     }}
   >
     <path
-      d="M24 10.413a5.817 5.817 0 0 0-1.772-4.167 5.711 5.711 0 0 0-3.447-1.585.249.249 0 0 1-.191-.12 7.684 7.684 0 0 0-14.1 2.294.251.251 0 0 1-.227.2A4.59 4.59 0 0 0 0 11.609a4.324 4.324 0 0 0 1.236 3.21A5.519 5.519 0 0 0 4.841 16.2a1 1 0 0 0-.03-2 3.288 3.288 0 0 1-2.172-.8A2.374 2.374 0 0 1 2 11.609 2.576 2.576 0 0 1 2.954 9.6a2.6 2.6 0 0 1 2.167-.527 1 1 0 0 0 1.2-.919 5.686 5.686 0 0 1 10.82-2.088.962.962 0 0 0 .941.57 3.7 3.7 0 0 1 2.758 1.051A3.752 3.752 0 0 1 22 10.413a3.835 3.835 0 0 1-3.438 3.787 1 1 0 0 0 .132 1.992.961.961 0 0 0 .131-.009A5.807 5.807 0 0 0 24 10.413z"
+      d="M24 10.413a5.817 5.817 0 0 0-1.772-4.167 5.711 5.711 0 0 0-3.447-1.585.249.249 0 0 1-.191-.12 7.684 7.684 0 0 0-14.1 2.294.251.251 0 0 1-.227.2A4.59 4.59 0 0 0 0 11.609a4.324 4.324 0 0 0 1.236 3.21A5.519 5.519 0 0 0 4.841 16.2a1 1 0 0 0-.03-2 3.288 3.288 0 0 1-2.172-.8A2.374 2.374 0 0 1 2 11.609 2.576 2.576 0 0 1 2.954 9.6a2.6 2.6 0 0 1 2.167-.527 1 1 0 0 0 1.2-.919 5.686 5.686 0 0 1 10.82-2.088.962.962 0 0 0 .941.57 3.7 3.7 0 0 1 2.758 1.051A3.752 3.752 0 0 1 22 10.413a3.835 3.835 0 0 1-3.438 3.787 1 1 0 0 0 .132 1.992.961.961 0 0 0 .131-.009A5.807 5.807 0 0 0 24 10.413Z"
       fill="currentColor"
     />
     <path
-      d="M12.707 8.989a1 1 0 0 0-1.414 0l-3.5 3.5A1 1 0 0 0 8.5 14.2h1.75a.249.249 0 0 1 .25.25v7.25a1.5 1.5 0 0 0 3 0v-7.25a.249.249 0 0 1 .25-.25h1.75a1 1 0 0 0 .707-1.707z"
+      d="M12.707 8.989a1 1 0 0 0-1.414 0l-3.5 3.5A1 1 0 0 0 8.5 14.2h1.75a.249.249 0 0 1 .25.25v7.25a1.5 1.5 0 0 0 3 0v-7.25a.249.249 0 0 1 .25-.25h1.75a1 1 0 0 0 .707-1.707Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v2/CustomNotesPaper.web.js b/packages/loot-design/src/svg/v2/CustomNotesPaper.js
similarity index 68%
rename from packages/loot-design/src/svg/v2/CustomNotesPaper.web.js
rename to packages/loot-design/src/svg/v2/CustomNotesPaper.js
index 057bb68f3f98b35595c56643c8053249ec838693..b6813e869729a0bb3aa5522750c9e9be2ba641c4 100644
--- a/packages/loot-design/src/svg/v2/CustomNotesPaper.web.js
+++ b/packages/loot-design/src/svg/v2/CustomNotesPaper.js
@@ -1,16 +1,17 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgCustomNotesPaper = props => (
   <svg
     {...props}
     viewBox="0 0 19 24"
+    xmlns="http://www.w3.org/2000/svg"
     style={{
       color: '#242134',
       ...props.style
     }}
   >
     <path
-      d="M17 24H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h9a1 1 0 0 1 .707.293l7 7A1 1 0 0 1 19 8v14a2 2 0 0 1-2 2zM2 21.5a.5.5 0 0 0 .5.5h14a.5.5 0 0 0 .5-.5V9a.5.5 0 0 0-.5-.5h-4a2 2 0 0 1-2-2v-4A.5.5 0 0 0 10 2H2.5a.5.5 0 0 0-.5.5v19z"
+      d="M17 24H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h9a1 1 0 0 1 .707.293l7 7A1 1 0 0 1 19 8v14a2 2 0 0 1-2 2ZM2 21.5a.5.5 0 0 0 .5.5h14a.5.5 0 0 0 .5-.5V9a.5.5 0 0 0-.5-.5h-4a2 2 0 0 1-2-2v-4A.5.5 0 0 0 10 2H2.5a.5.5 0 0 0-.5.5v19Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v2/DownloadThickBottom.web.js b/packages/loot-design/src/svg/v2/DownloadThickBottom.js
similarity index 82%
rename from packages/loot-design/src/svg/v2/DownloadThickBottom.web.js
rename to packages/loot-design/src/svg/v2/DownloadThickBottom.js
index d7979e5f03bb1d23858231735e15033217d89695..0300fb6273ae62e5638c936c7b92c28d0a4e43f5 100644
--- a/packages/loot-design/src/svg/v2/DownloadThickBottom.web.js
+++ b/packages/loot-design/src/svg/v2/DownloadThickBottom.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgDownloadThickBottom = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,11 +11,11 @@ const SvgDownloadThickBottom = props => (
     }}
   >
     <path
-      d="M8.616 1.741A1.455 1.455 0 0 1 10.07.287h3.392a1.455 1.455 0 0 1 1.453 1.454v8.228a.25.25 0 0 0 .25.25h2.9a1.138 1.138 0 0 1 .827 2l-6.1 6.1a1.489 1.489 0 0 1-2.056 0l-6.1-6.1a1.137 1.137 0 0 1 .827-2h2.9a.249.249 0 0 0 .25-.25z"
+      d="M8.616 1.741A1.455 1.455 0 0 1 10.07.287h3.392a1.455 1.455 0 0 1 1.453 1.454v8.228a.25.25 0 0 0 .25.25h2.9a1.138 1.138 0 0 1 .827 2l-6.1 6.1a1.489 1.489 0 0 1-2.056 0l-6.1-6.1a1.137 1.137 0 0 1 .827-2h2.9a.249.249 0 0 0 .25-.25Z"
       fill="currentColor"
     />
     <path
-      d="M0 19.677a4.039 4.039 0 0 0 4.035 4.035h15.93A4.039 4.039 0 0 0 24 19.677V17.8a1.225 1.225 0 0 0-2.449 0v1.874a1.588 1.588 0 0 1-1.586 1.586H4.035a1.588 1.588 0 0 1-1.586-1.586V17.8A1.225 1.225 0 0 0 0 17.8z"
+      d="M0 19.677a4.039 4.039 0 0 0 4.035 4.035h15.93A4.039 4.039 0 0 0 24 19.677V17.8a1.225 1.225 0 0 0-2.449 0v1.874a1.588 1.588 0 0 1-1.586 1.586H4.035a1.588 1.588 0 0 1-1.586-1.586V17.8A1.225 1.225 0 0 0 0 17.8Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v2/EditSkull1.web.js b/packages/loot-design/src/svg/v2/EditSkull1.js
similarity index 66%
rename from packages/loot-design/src/svg/v2/EditSkull1.web.js
rename to packages/loot-design/src/svg/v2/EditSkull1.js
index 2b0cdd8933b17fc56f4df69e3342d26dcffa5102..233b0ec9490d0955e3d0cc16015d0ecf4afcc2ee 100644
--- a/packages/loot-design/src/svg/v2/EditSkull1.web.js
+++ b/packages/loot-design/src/svg/v2/EditSkull1.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgEditSkull1 = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgEditSkull1 = props => (
     }}
   >
     <path
-      d="M12 0a10.286 10.286 0 0 0-6.243 18.45 1.714 1.714 0 0 1 .672 1.36v1.619A2.571 2.571 0 0 0 9 24a1.714 1.714 0 0 0 1.714-1.714V21a1.286 1.286 0 0 1 2.572 0v1.286A1.714 1.714 0 0 0 15 24a2.571 2.571 0 0 0 2.571-2.571V19.81a1.714 1.714 0 0 1 .672-1.36A10.286 10.286 0 0 0 12 0zM7.714 12.429a2.143 2.143 0 1 1 2.143-2.143 2.143 2.143 0 0 1-2.143 2.143zm8.572 0a2.143 2.143 0 1 1 2.143-2.143 2.143 2.143 0 0 1-2.143 2.143z"
+      d="M12 0a10.286 10.286 0 0 0-6.243 18.45 1.714 1.714 0 0 1 .672 1.36v1.619A2.571 2.571 0 0 0 9 24a1.714 1.714 0 0 0 1.714-1.714V21a1.286 1.286 0 0 1 2.572 0v1.286A1.714 1.714 0 0 0 15 24a2.571 2.571 0 0 0 2.571-2.571V19.81a1.714 1.714 0 0 1 .672-1.36A10.286 10.286 0 0 0 12 0ZM7.714 12.429a2.143 2.143 0 1 1 2.143-2.143 2.143 2.143 0 0 1-2.143 2.143Zm8.572 0a2.143 2.143 0 1 1 2.143-2.143 2.143 2.143 0 0 1-2.143 2.143Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v2/FavoriteStar.web.js b/packages/loot-design/src/svg/v2/FavoriteStar.js
similarity index 79%
rename from packages/loot-design/src/svg/v2/FavoriteStar.web.js
rename to packages/loot-design/src/svg/v2/FavoriteStar.js
index 7eea05ff1fcb53efdaaf27492b8fc005deb1f9b7..63ca1547e45841b22c4897a11e74d6432a076073 100644
--- a/packages/loot-design/src/svg/v2/FavoriteStar.web.js
+++ b/packages/loot-design/src/svg/v2/FavoriteStar.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgFavoriteStar = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgFavoriteStar = props => (
     }}
   >
     <path
-      d="M23.91 9.113a1.785 1.785 0 0 0-1.453-1.227l-6.132-.926-2.714-5.506a1.863 1.863 0 0 0-3.222 0l-2.78 5.552-6.066.88a1.798 1.798 0 0 0-1 3.068l4.428 4.361-1.028 6.055a1.797 1.797 0 0 0 2.607 1.895l5.488-2.865 5.429 2.858a1.797 1.797 0 0 0 2.607-1.895l-1.011-6.128 4.394-4.286a1.786 1.786 0 0 0 .454-1.836z"
+      d="M23.91 9.113a1.785 1.785 0 0 0-1.453-1.227l-6.132-.926-2.714-5.506a1.863 1.863 0 0 0-3.222 0l-2.78 5.552-6.066.88a1.798 1.798 0 0 0-1 3.068l4.428 4.361-1.028 6.055a1.797 1.797 0 0 0 2.607 1.895l5.488-2.865 5.429 2.858a1.797 1.797 0 0 0 2.607-1.895l-1.011-6.128 4.394-4.286a1.786 1.786 0 0 0 .454-1.836Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v2/Filter2.web.js b/packages/loot-design/src/svg/v2/Filter2.js
similarity index 71%
rename from packages/loot-design/src/svg/v2/Filter2.web.js
rename to packages/loot-design/src/svg/v2/Filter2.js
index cc0634c7c298bbe14dd084011a32c24b79df4c79..411f452df3f0ce4fd7f9bccb8f74ab68eff3d89f 100644
--- a/packages/loot-design/src/svg/v2/Filter2.web.js
+++ b/packages/loot-design/src/svg/v2/Filter2.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgFilter2 = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgFilter2 = props => (
     }}
   >
     <path
-      d="M23.894.552A1 1 0 0 0 23 0H1a1 1 0 0 0-.8 1.6L9 13.423V22a2.015 2.015 0 0 0 2 2 1.993 1.993 0 0 0 1.2-.4l2-1.5a2.007 2.007 0 0 0 .8-1.6v-7.077L23.8 1.6a1 1 0 0 0 .094-1.048zM5.417 2.2l3.939 5.25a.5.5 0 0 1 .1.3V9a.5.5 0 0 1-.9.3L3.62 2.8a.5.5 0 0 1 .4-.8h1a.5.5 0 0 1 .397.2z"
+      d="M23.894.552A1 1 0 0 0 23 0H1a1 1 0 0 0-.8 1.6L9 13.423V22a2.015 2.015 0 0 0 2 2 1.993 1.993 0 0 0 1.2-.4l2-1.5a2.007 2.007 0 0 0 .8-1.6v-7.077L23.8 1.6a1 1 0 0 0 .094-1.048ZM5.417 2.2l3.939 5.25a.5.5 0 0 1 .1.3V9a.5.5 0 0 1-.9.3L3.62 2.8a.5.5 0 0 1 .4-.8h1a.5.5 0 0 1 .397.2Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v2/Hyperlink2.web.js b/packages/loot-design/src/svg/v2/Hyperlink2.js
similarity index 59%
rename from packages/loot-design/src/svg/v2/Hyperlink2.web.js
rename to packages/loot-design/src/svg/v2/Hyperlink2.js
index 822ad1c3821c1c6b1f16af155413edc58af69ad6..4418e871e8cd8cbf2d8acf59797eaf3c9d46c103 100644
--- a/packages/loot-design/src/svg/v2/Hyperlink2.web.js
+++ b/packages/loot-design/src/svg/v2/Hyperlink2.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgHyperlink2 = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,15 +11,15 @@ const SvgHyperlink2 = props => (
     }}
   >
     <path
-      d="M12.406 14.905a1 1 0 0 0-.543 1.307 1 1 0 0 1-.217 1.09l-2.828 2.829a2 2 0 0 1-2.828 0L3.868 18.01a2 2 0 0 1 0-2.829L6.7 12.353a1.013 1.013 0 0 1 1.091-.217 1 1 0 0 0 .763-1.849 3.034 3.034 0 0 0-3.268.652l-2.832 2.828a4.006 4.006 0 0 0 0 5.657l2.122 2.121a4 4 0 0 0 5.656 0l2.829-2.828a3.008 3.008 0 0 0 .651-3.27 1 1 0 0 0-1.306-.542z"
+      d="M12.406 14.905a1 1 0 0 0-.543 1.307 1 1 0 0 1-.217 1.09l-2.828 2.829a2 2 0 0 1-2.828 0L3.868 18.01a2 2 0 0 1 0-2.829L6.7 12.353a1.013 1.013 0 0 1 1.091-.217 1 1 0 0 0 .763-1.849 3.034 3.034 0 0 0-3.268.652l-2.832 2.828a4.006 4.006 0 0 0 0 5.657l2.122 2.121a4 4 0 0 0 5.656 0l2.829-2.828a3.008 3.008 0 0 0 .651-3.27 1 1 0 0 0-1.306-.542Z"
       fill="currentColor"
     />
     <path
-      d="M7.757 16.241a1.011 1.011 0 0 0 1.414 0l7.779-7.778a1 1 0 0 0-1.414-1.414l-7.779 7.778a1 1 0 0 0 0 1.414z"
+      d="M7.757 16.241a1.011 1.011 0 0 0 1.414 0l7.779-7.778a1 1 0 0 0-1.414-1.414l-7.779 7.778a1 1 0 0 0 0 1.414Z"
       fill="currentColor"
     />
     <path
-      d="M21.546 4.574l-2.121-2.121a4.006 4.006 0 0 0-5.657 0l-2.829 2.828a3.006 3.006 0 0 0-.651 3.269 1 1 0 1 0 1.849-.764 1 1 0 0 1 .217-1.086l2.828-2.828a2 2 0 0 1 2.829 0l2.121 2.121a2 2 0 0 1 0 2.829L17.3 11.645a1.015 1.015 0 0 1-1.091.217 1 1 0 0 0-.765 1.849 3.026 3.026 0 0 0 3.27-.651l2.828-2.828a4.007 4.007 0 0 0 .004-5.658z"
+      d="m21.546 4.574-2.121-2.121a4.006 4.006 0 0 0-5.657 0l-2.829 2.828a3.006 3.006 0 0 0-.651 3.269 1 1 0 1 0 1.849-.764 1 1 0 0 1 .217-1.086l2.828-2.828a2 2 0 0 1 2.829 0l2.121 2.121a2 2 0 0 1 0 2.829L17.3 11.645a1.015 1.015 0 0 1-1.091.217 1 1 0 0 0-.765 1.849 3.026 3.026 0 0 0 3.27-.651l2.828-2.828a4.007 4.007 0 0 0 .004-5.658Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v2/Hyperlink3.js b/packages/loot-design/src/svg/v2/Hyperlink3.js
new file mode 100644
index 0000000000000000000000000000000000000000..b0ef80230d78acab085a39881ff65e49fa38e26c
--- /dev/null
+++ b/packages/loot-design/src/svg/v2/Hyperlink3.js
@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+const SvgHyperlink3 = props => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    style={{
+      color: '#242134',
+      ...props.style
+    }}
+  >
+    <path
+      d="M10.458 18.374 7.721 21.11a2.853 2.853 0 0 1-3.942 0l-.892-.891a2.787 2.787 0 0 1 0-3.941l5.8-5.8a2.789 2.789 0 0 1 3.942 0l.893.892a1 1 0 0 0 1.418-1.418l-.893-.892a4.791 4.791 0 0 0-6.771 0l-5.8 5.8a4.787 4.787 0 0 0 0 6.77l.892.891a4.785 4.785 0 0 0 6.771 0l2.736-2.735a1 1 0 1 0-1.414-1.415Z"
+      fill="currentColor"
+    />
+    <path
+      d="m22.526 2.363-.892-.892a4.8 4.8 0 0 0-6.77 0l-2.905 2.9a1 1 0 0 0 1.414 1.414l2.9-2.9a2.79 2.79 0 0 1 3.941 0l.893.893a2.786 2.786 0 0 1 0 3.942l-5.8 5.8a2.769 2.769 0 0 1-1.971.817 2.766 2.766 0 0 1-1.969-.816 1 1 0 1 0-1.415 1.412 4.751 4.751 0 0 0 3.384 1.4 4.752 4.752 0 0 0 3.385-1.4l5.8-5.8a4.786 4.786 0 0 0 0-6.771Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default SvgHyperlink3;
diff --git a/packages/loot-design/src/svg/v2/Hyperlink3.web.js b/packages/loot-design/src/svg/v2/Hyperlink3.web.js
deleted file mode 100644
index 78b658fa5e3d8803ff916d0717407bc41a9a3310..0000000000000000000000000000000000000000
--- a/packages/loot-design/src/svg/v2/Hyperlink3.web.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-
-const SvgHyperlink3 = props => (
-  <svg
-    {...props}
-    viewBox="0 0 24 24"
-    style={{
-      color: '#242134',
-      ...props.style
-    }}
-  >
-    <path
-      d="M10.458 18.374L7.721 21.11a2.853 2.853 0 0 1-3.942 0l-.892-.891a2.787 2.787 0 0 1 0-3.941l5.8-5.8a2.789 2.789 0 0 1 3.942 0l.893.892a1 1 0 0 0 1.418-1.418l-.893-.892a4.791 4.791 0 0 0-6.771 0l-5.8 5.8a4.787 4.787 0 0 0 0 6.77l.892.891a4.785 4.785 0 0 0 6.771 0l2.736-2.735a1 1 0 1 0-1.414-1.415z"
-      fill="currentColor"
-    />
-    <path
-      d="M22.526 2.363l-.892-.892a4.8 4.8 0 0 0-6.77 0l-2.905 2.9a1 1 0 0 0 1.414 1.414l2.9-2.9a2.79 2.79 0 0 1 3.941 0l.893.893a2.786 2.786 0 0 1 0 3.942l-5.8 5.8a2.769 2.769 0 0 1-1.971.817 2.766 2.766 0 0 1-1.969-.816 1 1 0 1 0-1.415 1.412 4.751 4.751 0 0 0 3.384 1.4 4.752 4.752 0 0 0 3.385-1.4l5.8-5.8a4.786 4.786 0 0 0 0-6.771z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export default SvgHyperlink3;
diff --git a/packages/loot-design/src/svg/v2/InformationCircle.web.js b/packages/loot-design/src/svg/v2/InformationCircle.js
similarity index 64%
rename from packages/loot-design/src/svg/v2/InformationCircle.web.js
rename to packages/loot-design/src/svg/v2/InformationCircle.js
index 378f2f7cb318034e1694d218bdd11b9b28ae9fa6..8a970905c73d426cf780d535bc353aa68622e158 100644
--- a/packages/loot-design/src/svg/v2/InformationCircle.web.js
+++ b/packages/loot-design/src/svg/v2/InformationCircle.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgInformationCircle = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgInformationCircle = props => (
     }}
   >
     <path
-      d="M12 0a12 12 0 1 0 12 12A12.013 12.013 0 0 0 12 0zm.25 5a1.5 1.5 0 1 1-1.5 1.5 1.5 1.5 0 0 1 1.5-1.5zm2.25 13.5h-4a1 1 0 0 1 0-2h.75a.25.25 0 0 0 .25-.25v-4.5a.25.25 0 0 0-.25-.25h-.75a1 1 0 0 1 0-2h1a2 2 0 0 1 2 2v4.75a.25.25 0 0 0 .25.25h.75a1 1 0 1 1 0 2z"
+      d="M12 0a12 12 0 1 0 12 12A12.013 12.013 0 0 0 12 0Zm.25 5a1.5 1.5 0 1 1-1.5 1.5 1.5 1.5 0 0 1 1.5-1.5Zm2.25 13.5h-4a1 1 0 0 1 0-2h.75a.25.25 0 0 0 .25-.25v-4.5a.25.25 0 0 0-.25-.25h-.75a1 1 0 0 1 0-2h1a2 2 0 0 1 2 2v4.75a.25.25 0 0 0 .25.25h.75a1 1 0 1 1 0 2Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v2/Key.web.js b/packages/loot-design/src/svg/v2/Key.js
similarity index 59%
rename from packages/loot-design/src/svg/v2/Key.web.js
rename to packages/loot-design/src/svg/v2/Key.js
index 8c8cff1664a8c705f0d052d4adb798fec90509f3..117945e155bb20a426362c707552ef840e8f9182 100644
--- a/packages/loot-design/src/svg/v2/Key.web.js
+++ b/packages/loot-design/src/svg/v2/Key.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgKey = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgKey = props => (
     }}
   >
     <path
-      d="M23.113 5.954L21.849 4.69l.881-.88a1.914 1.914 0 1 0-2.707-2.71L9.04 12.085a6.014 6.014 0 1 0 2.707 2.707l3.739-3.737.762.762a1.75 1.75 0 1 0 2.475-2.475l-.763-.762 1.416-1.417 1.264 1.263a1.788 1.788 0 0 0 2.473 0 1.751 1.751 0 0 0 0-2.472zm-16.737 8.5a3 3 0 1 1-3 3 3 3 0 0 1 3-2.998z"
+      d="M23.113 5.954 21.849 4.69l.881-.88a1.914 1.914 0 1 0-2.707-2.71L9.04 12.085a6.014 6.014 0 1 0 2.707 2.707l3.739-3.737.762.762a1.75 1.75 0 1 0 2.475-2.475l-.763-.762 1.416-1.417 1.264 1.263a1.788 1.788 0 0 0 2.473 0 1.751 1.751 0 0 0 0-2.472Zm-16.737 8.5a3 3 0 1 1-3 3 3 3 0 0 1 3-2.998Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v2/NavigationMenu.web.js b/packages/loot-design/src/svg/v2/NavigationMenu.js
similarity index 89%
rename from packages/loot-design/src/svg/v2/NavigationMenu.web.js
rename to packages/loot-design/src/svg/v2/NavigationMenu.js
index 0aabd0cb50b2b49cd24520968ed8e6f8cc076e75..5943b225244fbf58cdea1d362709c5fd9a57663b 100644
--- a/packages/loot-design/src/svg/v2/NavigationMenu.web.js
+++ b/packages/loot-design/src/svg/v2/NavigationMenu.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgNavigationMenu = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
diff --git a/packages/loot-design/src/svg/v2/NotesPaper.web.js b/packages/loot-design/src/svg/v2/NotesPaper.js
similarity index 68%
rename from packages/loot-design/src/svg/v2/NotesPaper.web.js
rename to packages/loot-design/src/svg/v2/NotesPaper.js
index dd0d31d8d15adfd6288a2bb0538c3c2accbcaa02..08d9392056d7e84ec9702db5d48aec17b3b85d09 100644
--- a/packages/loot-design/src/svg/v2/NotesPaper.web.js
+++ b/packages/loot-design/src/svg/v2/NotesPaper.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgNotesPaper = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgNotesPaper = props => (
     }}
   >
     <path
-      d="M22 0H2a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h14a1 1 0 0 0 .707-.293l7-7A1 1 0 0 0 24 16V2a2 2 0 0 0-2-2zM2 2.5a.5.5 0 0 1 .5-.5h19a.5.5 0 0 1 .5.5V15a.5.5 0 0 1-.5.5h-4a2 2 0 0 0-2 2v4a.5.5 0 0 1-.5.5H2.5a.5.5 0 0 1-.5-.5z"
+      d="M22 0H2a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h14a1 1 0 0 0 .707-.293l7-7A1 1 0 0 0 24 16V2a2 2 0 0 0-2-2ZM2 2.5a.5.5 0 0 1 .5-.5h19a.5.5 0 0 1 .5.5V15a.5.5 0 0 1-.5.5h-4a2 2 0 0 0-2 2v4a.5.5 0 0 1-.5.5H2.5a.5.5 0 0 1-.5-.5Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v2/NotesPaperText.web.js b/packages/loot-design/src/svg/v2/NotesPaperText.js
similarity index 66%
rename from packages/loot-design/src/svg/v2/NotesPaperText.web.js
rename to packages/loot-design/src/svg/v2/NotesPaperText.js
index 70f8c8f3143c9d85a89c4fbb2700e2793743edd6..9c2f0aea4f1ae672d66a5267940d2685dfce31f8 100644
--- a/packages/loot-design/src/svg/v2/NotesPaperText.web.js
+++ b/packages/loot-design/src/svg/v2/NotesPaperText.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgNotesPaperText = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,11 +11,11 @@ const SvgNotesPaperText = props => (
     }}
   >
     <path
-      d="M18.707 9.207l1-1a1 1 0 1 0-1.414-1.414l-1 1a1 1 0 0 1-1.415 0 3.072 3.072 0 0 0-4.242 0 1 1 0 0 1-1.414 0 3.073 3.073 0 0 0-4.243 0l-1 1a1 1 0 0 0 1.415 1.414l1-1a1.024 1.024 0 0 1 1.414 0 3 3 0 0 0 4.242 0 1.024 1.024 0 0 1 1.414 0 3 3 0 0 0 4.243 0zM11.636 13.793a1 1 0 0 1-1.414 0 3.073 3.073 0 0 0-4.243 0l-1 1a1 1 0 0 0 1.415 1.414l1-1a1.024 1.024 0 0 1 1.414 0 3 3 0 0 0 4.242 0 1 1 0 0 0-1.414-1.414z"
+      d="m18.707 9.207 1-1a1 1 0 1 0-1.414-1.414l-1 1a1 1 0 0 1-1.415 0 3.072 3.072 0 0 0-4.242 0 1 1 0 0 1-1.414 0 3.073 3.073 0 0 0-4.243 0l-1 1a1 1 0 0 0 1.415 1.414l1-1a1.024 1.024 0 0 1 1.414 0 3 3 0 0 0 4.242 0 1.024 1.024 0 0 1 1.414 0 3 3 0 0 0 4.243 0ZM11.636 13.793a1 1 0 0 1-1.414 0 3.073 3.073 0 0 0-4.243 0l-1 1a1 1 0 0 0 1.415 1.414l1-1a1.024 1.024 0 0 1 1.414 0 3 3 0 0 0 4.242 0 1 1 0 0 0-1.414-1.414Z"
       fill="currentColor"
     />
     <path
-      d="M24 2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h14a1 1 0 0 0 .707-.293l7-7A1 1 0 0 0 24 16zM2 2.5a.5.5 0 0 1 .5-.5h19a.5.5 0 0 1 .5.5V15a.5.5 0 0 1-.5.5h-4a2 2 0 0 0-2 2v4a.5.5 0 0 1-.5.5H2.5a.5.5 0 0 1-.5-.5z"
+      d="M24 2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h14a1 1 0 0 0 .707-.293l7-7A1 1 0 0 0 24 16ZM2 2.5a.5.5 0 0 1 .5-.5h19a.5.5 0 0 1 .5.5V15a.5.5 0 0 1-.5.5h-4a2 2 0 0 0-2 2v4a.5.5 0 0 1-.5.5H2.5a.5.5 0 0 1-.5-.5Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v2/Pencil1.web.js b/packages/loot-design/src/svg/v2/Pencil1.js
similarity index 66%
rename from packages/loot-design/src/svg/v2/Pencil1.web.js
rename to packages/loot-design/src/svg/v2/Pencil1.js
index 3ea8983099040067de47f50058ceb272cce419d2..3884dd2abae01355bc9a95880cdc9259f5863f61 100644
--- a/packages/loot-design/src/svg/v2/Pencil1.web.js
+++ b/packages/loot-design/src/svg/v2/Pencil1.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgPencil1 = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgPencil1 = props => (
     }}
   >
     <path
-      d="M15.067 3.986a.5.5 0 0 0-.354-.148.5.5 0 0 0-.354.147L3.437 14.91a.5.5 0 0 0 0 .707l4.948 4.948a.5.5 0 0 0 .707 0L20.009 9.648a.5.5 0 0 0 0-.706zM2.43 16.8a.5.5 0 0 0-.489-.127.5.5 0 0 0-.351.364L.084 23.314a.5.5 0 0 0 .133.47.507.507 0 0 0 .47.132l6.272-1.5a.5.5 0 0 0 .237-.84zM23.2 2.924L21.077.8a2.5 2.5 0 0 0-3.532 0l-1.418 1.417a.5.5 0 0 0 0 .707l4.95 4.949a.5.5 0 0 0 .707 0L23.2 6.454a2.5 2.5 0 0 0 0-3.53z"
+      d="M15.067 3.986a.5.5 0 0 0-.354-.148.5.5 0 0 0-.354.147L3.437 14.91a.5.5 0 0 0 0 .707l4.948 4.948a.5.5 0 0 0 .707 0L20.009 9.648a.5.5 0 0 0 0-.706ZM2.43 16.8a.5.5 0 0 0-.489-.127.5.5 0 0 0-.351.364L.084 23.314a.5.5 0 0 0 .133.47.507.507 0 0 0 .47.132l6.272-1.5a.5.5 0 0 0 .237-.84ZM23.2 2.924 21.077.8a2.5 2.5 0 0 0-3.532 0l-1.418 1.417a.5.5 0 0 0 0 .707l4.95 4.949a.5.5 0 0 0 .707 0L23.2 6.454a2.5 2.5 0 0 0 0-3.53Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v2/PencilWriteAlternate.web.js b/packages/loot-design/src/svg/v2/PencilWriteAlternate.js
similarity index 71%
rename from packages/loot-design/src/svg/v2/PencilWriteAlternate.web.js
rename to packages/loot-design/src/svg/v2/PencilWriteAlternate.js
index a594eef833b138c78a231c2db849103d3bdb5bec..08ff1d9bc2c3caf74f423a0074fbef8c53320dda 100644
--- a/packages/loot-design/src/svg/v2/PencilWriteAlternate.web.js
+++ b/packages/loot-design/src/svg/v2/PencilWriteAlternate.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgPencilWriteAlternate = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,11 +11,11 @@ const SvgPencilWriteAlternate = props => (
     }}
   >
     <path
-      d="M20 11.491a1 1 0 0 0-1 1v8.5a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-17a1 1 0 0 1 1-1h10a1 1 0 0 0 0-2H3a3 3 0 0 0-3 3v17a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3v-8.5a1 1 0 0 0-1-1z"
+      d="M20 11.491a1 1 0 0 0-1 1v8.5a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-17a1 1 0 0 1 1-1h10a1 1 0 0 0 0-2H3a3 3 0 0 0-3 3v17a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3v-8.5a1 1 0 0 0-1-1Z"
       fill="currentColor"
     />
     <path
-      d="M18.818 3.051a.516.516 0 0 0-.707 0L10.3 10.865a.5.5 0 0 0-.111.168l-1.416 3.535a.5.5 0 0 0 .111.539.519.519 0 0 0 .539.11l3.535-1.417a.5.5 0 0 0 .168-.111L20.94 5.88a.5.5 0 0 0 0-.707zM23.415.577a2.047 2.047 0 0 0-2.828 0l-1.061 1.06a.5.5 0 0 0 0 .707l2.12 2.121a.5.5 0 0 0 .707 0l1.061-1.06a2 2 0 0 0 0-2.828z"
+      d="M18.818 3.051a.516.516 0 0 0-.707 0L10.3 10.865a.5.5 0 0 0-.111.168l-1.416 3.535a.5.5 0 0 0 .111.539.519.519 0 0 0 .539.11l3.535-1.417a.5.5 0 0 0 .168-.111L20.94 5.88a.5.5 0 0 0 0-.707ZM23.415.577a2.047 2.047 0 0 0-2.828 0l-1.061 1.06a.5.5 0 0 0 0 .707l2.12 2.121a.5.5 0 0 0 .707 0l1.061-1.06a2 2 0 0 0 0-2.828Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v2/RefreshArrow.web.js b/packages/loot-design/src/svg/v2/RefreshArrow.js
similarity index 83%
rename from packages/loot-design/src/svg/v2/RefreshArrow.web.js
rename to packages/loot-design/src/svg/v2/RefreshArrow.js
index b0bf556f45d1275bb248594536a7493bb47f1878..c0c422e269d84b11f1d5d139ada0cf44045394bb 100644
--- a/packages/loot-design/src/svg/v2/RefreshArrow.web.js
+++ b/packages/loot-design/src/svg/v2/RefreshArrow.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgRefreshArrow = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgRefreshArrow = props => (
     }}
   >
     <path
-      d="M10.664 20.073a1.249 1.249 0 1 0-.507 2.447A10.739 10.739 0 1 0 2.4 16.1a.25.25 0 0 1-.084.3l-1 .726a1 1 0 0 0 .377 1.787l3.946.849a1.062 1.062 0 0 0 .21.022 1 1 0 0 0 .978-.79l.945-4.4a1 1 0 0 0-1.565-1.02l-1.361.989a.25.25 0 0 1-.386-.128 8.255 8.255 0 1 1 6.205 5.643z"
+      d="M10.664 20.073a1.249 1.249 0 1 0-.507 2.447A10.739 10.739 0 1 0 2.4 16.1a.25.25 0 0 1-.084.3l-1 .726a1 1 0 0 0 .377 1.787l3.946.849a1.062 1.062 0 0 0 .21.022 1 1 0 0 0 .978-.79l.945-4.4a1 1 0 0 0-1.565-1.02l-1.361.989a.25.25 0 0 1-.386-.128 8.255 8.255 0 1 1 6.205 5.643Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v2/Remove.web.js b/packages/loot-design/src/svg/v2/Remove.js
similarity index 83%
rename from packages/loot-design/src/svg/v2/Remove.web.js
rename to packages/loot-design/src/svg/v2/Remove.js
index 89a66a896a2d96b463c87e25e6e492a2b72bd0e7..40312337099d00b36c40a916fe7caf6387c66847 100644
--- a/packages/loot-design/src/svg/v2/Remove.web.js
+++ b/packages/loot-design/src/svg/v2/Remove.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgRemove = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgRemove = props => (
     }}
   >
     <path
-      d="M.439 21.44a1.5 1.5 0 0 0 2.122 2.121l9.262-9.261a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 1 0 2.122-2.121L14.3 12.177a.25.25 0 0 1 0-.354l9.263-9.262A1.5 1.5 0 0 0 21.439.44L12.177 9.7a.25.25 0 0 1-.354 0L2.561.44A1.5 1.5 0 0 0 .439 2.561L9.7 11.823a.25.25 0 0 1 0 .354z"
+      d="M.439 21.44a1.5 1.5 0 0 0 2.122 2.121l9.262-9.261a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 1 0 2.122-2.121L14.3 12.177a.25.25 0 0 1 0-.354l9.263-9.262A1.5 1.5 0 0 0 21.439.44L12.177 9.7a.25.25 0 0 1-.354 0L2.561.44A1.5 1.5 0 0 0 .439 2.561L9.7 11.823a.25.25 0 0 1 0 .354Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v2/RemoveAlternate.web.js b/packages/loot-design/src/svg/v2/RemoveAlternate.js
similarity index 71%
rename from packages/loot-design/src/svg/v2/RemoveAlternate.web.js
rename to packages/loot-design/src/svg/v2/RemoveAlternate.js
index c90122e04850a064e824d96dbe293c63c4a67efb..66efe4e3abecb05ea9f79e7514ca3ada0cee9c21 100644
--- a/packages/loot-design/src/svg/v2/RemoveAlternate.web.js
+++ b/packages/loot-design/src/svg/v2/RemoveAlternate.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgRemoveAlternate = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,11 +11,11 @@ const SvgRemoveAlternate = props => (
     }}
   >
     <path
-      d="M17.666 6.333a1.249 1.249 0 0 0-1.768 0l-3.722 3.722a.25.25 0 0 1-.353 0L8.1 6.333A1.25 1.25 0 1 0 6.333 8.1l3.722 3.722a.25.25 0 0 1 0 .354L6.333 15.9a1.251 1.251 0 0 0 0 1.768 1.269 1.269 0 0 0 1.768 0l3.722-3.722a.249.249 0 0 1 .353 0l3.724 3.72a1.272 1.272 0 0 0 1.768 0 1.251 1.251 0 0 0 0-1.768l-3.722-3.722a.25.25 0 0 1 0-.354l3.72-3.722a1.249 1.249 0 0 0 0-1.767z"
+      d="M17.666 6.333a1.249 1.249 0 0 0-1.768 0l-3.722 3.722a.25.25 0 0 1-.353 0L8.1 6.333A1.25 1.25 0 1 0 6.333 8.1l3.722 3.722a.25.25 0 0 1 0 .354L6.333 15.9a1.251 1.251 0 0 0 0 1.768 1.269 1.269 0 0 0 1.768 0l3.722-3.722a.249.249 0 0 1 .353 0l3.724 3.72a1.272 1.272 0 0 0 1.768 0 1.251 1.251 0 0 0 0-1.768l-3.722-3.722a.25.25 0 0 1 0-.354l3.72-3.722a1.249 1.249 0 0 0 0-1.767Z"
       fill="currentColor"
     />
     <path
-      d="M12 0a12 12 0 1 0 12 12A12.013 12.013 0 0 0 12 0zm0 22a10 10 0 1 1 10-10 10.011 10.011 0 0 1-10 10z"
+      d="M12 0a12 12 0 1 0 12 12A12.013 12.013 0 0 0 12 0Zm0 22a10 10 0 1 1 10-10 10.011 10.011 0 0 1-10 10Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v2/Search1.js b/packages/loot-design/src/svg/v2/Search1.js
new file mode 100644
index 0000000000000000000000000000000000000000..60a0123d43bb960950b11376eaa54de87840b803
--- /dev/null
+++ b/packages/loot-design/src/svg/v2/Search1.js
@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+const SvgSearch1 = props => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    style={{
+      color: '#242134',
+      ...props.style
+    }}
+  >
+    <path
+      d="m23.414 20.591-4.645-4.645a10.256 10.256 0 1 0-2.828 2.829l4.645 4.644a2.025 2.025 0 0 0 2.828 0 2 2 0 0 0 0-2.828ZM10.25 3.005A7.25 7.25 0 1 1 3 10.255a7.258 7.258 0 0 1 7.25-7.25Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default SvgSearch1;
diff --git a/packages/loot-design/src/svg/v2/Search1.web.js b/packages/loot-design/src/svg/v2/Search1.web.js
deleted file mode 100644
index 7981b5ce337b8b0c25c78566c87d2b533b0b5d44..0000000000000000000000000000000000000000
--- a/packages/loot-design/src/svg/v2/Search1.web.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-
-const SvgSearch1 = props => (
-  <svg
-    {...props}
-    viewBox="0 0 24 24"
-    style={{
-      color: '#242134',
-      ...props.style
-    }}
-  >
-    <path
-      d="M23.414 20.591l-4.645-4.645a10.256 10.256 0 1 0-2.828 2.829l4.645 4.644a2.025 2.025 0 0 0 2.828 0 2 2 0 0 0 0-2.828zM10.25 3.005A7.25 7.25 0 1 1 3 10.255a7.258 7.258 0 0 1 7.25-7.25z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export default SvgSearch1;
diff --git a/packages/loot-design/src/svg/v2/SearchAlternate.js b/packages/loot-design/src/svg/v2/SearchAlternate.js
new file mode 100644
index 0000000000000000000000000000000000000000..fb72746db08d677162320f272ec706ed82e1e5b1
--- /dev/null
+++ b/packages/loot-design/src/svg/v2/SearchAlternate.js
@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+const SvgSearchAlternate = props => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    style={{
+      color: '#242134',
+      ...props.style
+    }}
+  >
+    <path
+      d="m23.384 21.619-6.529-6.529a9.284 9.284 0 1 0-1.768 1.768l6.529 6.529a1.266 1.266 0 0 0 1.768 0 1.251 1.251 0 0 0 0-1.768ZM2.75 9.5a6.75 6.75 0 1 1 6.75 6.75A6.758 6.758 0 0 1 2.75 9.5Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default SvgSearchAlternate;
diff --git a/packages/loot-design/src/svg/v2/SearchAlternate.web.js b/packages/loot-design/src/svg/v2/SearchAlternate.web.js
deleted file mode 100644
index d98f3f0072af2598f32b8d18fe9563ed8aef04b9..0000000000000000000000000000000000000000
--- a/packages/loot-design/src/svg/v2/SearchAlternate.web.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-
-const SvgSearchAlternate = props => (
-  <svg
-    {...props}
-    viewBox="0 0 24 24"
-    style={{
-      color: '#242134',
-      ...props.style
-    }}
-  >
-    <path
-      d="M23.384 21.619l-6.529-6.529a9.284 9.284 0 1 0-1.768 1.768l6.529 6.529a1.266 1.266 0 0 0 1.768 0 1.251 1.251 0 0 0 0-1.768zM2.75 9.5a6.75 6.75 0 1 1 6.75 6.75A6.758 6.758 0 0 1 2.75 9.5z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export default SvgSearchAlternate;
diff --git a/packages/loot-design/src/svg/v2/SettingsSliderAlternate.web.js b/packages/loot-design/src/svg/v2/SettingsSliderAlternate.js
similarity index 60%
rename from packages/loot-design/src/svg/v2/SettingsSliderAlternate.web.js
rename to packages/loot-design/src/svg/v2/SettingsSliderAlternate.js
index 9b33821230c4a8888088c42b5890c79d4fd69ff2..da62ff84e87e94768c00e4c1d8e06b99a299afed 100644
--- a/packages/loot-design/src/svg/v2/SettingsSliderAlternate.web.js
+++ b/packages/loot-design/src/svg/v2/SettingsSliderAlternate.js
@@ -1,16 +1,17 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgSettingsSliderAlternate = props => (
   <svg
     {...props}
     viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
     style={{
       color: '#242134',
       ...props.style
     }}
   >
     <path
-      d="M4.5 17.5h6.646a3.5 3.5 0 0 0 6.708 0H19.5a1 1 0 0 0 0-2h-1.646a3.5 3.5 0 0 0-6.708 0H4.5a1 1 0 0 0 0 2zm10-2.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zM19.5 6.5h-6.646a3.5 3.5 0 0 0-6.708 0H4.5a1 1 0 0 0 0 2h1.646a3.5 3.5 0 0 0 6.708 0H19.5a1 1 0 1 0 0-2zM9.5 9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"
+      d="M4.5 17.5h6.646a3.5 3.5 0 0 0 6.708 0H19.5a1 1 0 0 0 0-2h-1.646a3.5 3.5 0 0 0-6.708 0H4.5a1 1 0 0 0 0 2Zm10-2.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM19.5 6.5h-6.646a3.5 3.5 0 0 0-6.708 0H4.5a1 1 0 0 0 0 2h1.646a3.5 3.5 0 0 0 6.708 0H19.5a1 1 0 1 0 0-2ZM9.5 9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v2/Subtract.web.js b/packages/loot-design/src/svg/v2/Subtract.js
similarity index 63%
rename from packages/loot-design/src/svg/v2/Subtract.web.js
rename to packages/loot-design/src/svg/v2/Subtract.js
index f7b34575872740b278e31909e64d6903f24c5c86..aa2521be26501f834699c2a9382f9b1197db12da 100644
--- a/packages/loot-design/src/svg/v2/Subtract.web.js
+++ b/packages/loot-design/src/svg/v2/Subtract.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgSubtract = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgSubtract = props => (
     }}
   >
     <path
-      d="M1.5 13.5h21a1.5 1.5 0 0 0 0-3h-21a1.5 1.5 0 0 0 0 3z"
+      d="M1.5 13.5h21a1.5 1.5 0 0 0 0-3h-21a1.5 1.5 0 0 0 0 3Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v2/UploadThickBottom.web.js b/packages/loot-design/src/svg/v2/UploadThickBottom.js
similarity index 82%
rename from packages/loot-design/src/svg/v2/UploadThickBottom.web.js
rename to packages/loot-design/src/svg/v2/UploadThickBottom.js
index 185edfc8b9bc320cad5671a6c7a471a9301a6608..e7578c812a9eb58e2c079186ffa69dc709d7da12 100644
--- a/packages/loot-design/src/svg/v2/UploadThickBottom.web.js
+++ b/packages/loot-design/src/svg/v2/UploadThickBottom.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgUploadThickBottom = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,11 +11,11 @@ const SvgUploadThickBottom = props => (
     }}
   >
     <path
-      d="M8.616 17.273a1.455 1.455 0 0 0 1.454 1.454h3.392a1.455 1.455 0 0 0 1.453-1.454V9.045a.25.25 0 0 1 .25-.25h2.9a1.138 1.138 0 0 0 .827-2L12.794.7a1.489 1.489 0 0 0-2.056 0L4.64 6.8a1.137 1.137 0 0 0 .827 2h2.9a.249.249 0 0 1 .25.25z"
+      d="M8.616 17.273a1.455 1.455 0 0 0 1.454 1.454h3.392a1.455 1.455 0 0 0 1.453-1.454V9.045a.25.25 0 0 1 .25-.25h2.9a1.138 1.138 0 0 0 .827-2L12.794.7a1.489 1.489 0 0 0-2.056 0L4.64 6.8a1.137 1.137 0 0 0 .827 2h2.9a.249.249 0 0 1 .25.25Z"
       fill="currentColor"
     />
     <path
-      d="M0 19.677a4.039 4.039 0 0 0 4.035 4.035h15.93A4.039 4.039 0 0 0 24 19.677V17.8a1.225 1.225 0 0 0-2.449 0v1.874a1.588 1.588 0 0 1-1.586 1.586H4.035a1.588 1.588 0 0 1-1.586-1.586V17.8A1.225 1.225 0 0 0 0 17.8z"
+      d="M0 19.677a4.039 4.039 0 0 0 4.035 4.035h15.93A4.039 4.039 0 0 0 24 19.677V17.8a1.225 1.225 0 0 0-2.449 0v1.874a1.588 1.588 0 0 1-1.586 1.586H4.035a1.588 1.588 0 0 1-1.586-1.586V17.8A1.225 1.225 0 0 0 0 17.8Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v2/ValidationCheck.web.js b/packages/loot-design/src/svg/v2/ValidationCheck.js
similarity index 81%
rename from packages/loot-design/src/svg/v2/ValidationCheck.web.js
rename to packages/loot-design/src/svg/v2/ValidationCheck.js
index 4aa43e668ef491f92cea52ca750bd359a76f6147..fca310106e102db7ddaf42e98a12f31e147fae10 100644
--- a/packages/loot-design/src/svg/v2/ValidationCheck.web.js
+++ b/packages/loot-design/src/svg/v2/ValidationCheck.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 
 const SvgValidationCheck = props => (
   <svg
     {...props}
+    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     style={{
       color: '#242134',
@@ -10,7 +11,7 @@ const SvgValidationCheck = props => (
     }}
   >
     <path
-      d="M7.176 22.5a4.111 4.111 0 0 1-3.17-1.486l-3.62-4.6a1.8 1.8 0 1 1 2.828-2.228l3.6 4.56a.384.384 0 0 0 .379.152.52.52 0 0 0 .408-.197L20.794 2.177a1.8 1.8 0 1 1 2.812 2.246L10.39 20.964A4.12 4.12 0 0 1 7.2 22.5z"
+      d="M7.176 22.5a4.111 4.111 0 0 1-3.17-1.486l-3.62-4.6a1.8 1.8 0 1 1 2.828-2.228l3.6 4.56a.384.384 0 0 0 .379.152.52.52 0 0 0 .408-.197L20.794 2.177a1.8 1.8 0 1 1 2.812 2.246L10.39 20.964A4.12 4.12 0 0 1 7.2 22.5Z"
       fill="currentColor"
     />
   </svg>
diff --git a/packages/loot-design/src/svg/v2/check-circle-hollow.svg b/packages/loot-design/src/svg/v2/check-circle-hollow.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3045f6adca6c66f416e596daa0e0b6fe514b46ab
--- /dev/null
+++ b/packages/loot-design/src/svg/v2/check-circle-hollow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>check-circle-hollow</title><path d="M 12 0 C 1.3084197 0 -4.0435475 12.925204 3.515625 20.484375 C 11.074797 28.043547 24 22.69158 24 12 C 23.992285 5.3757944 18.624205 0.0077147446 12 0 z M 12.009766 1.9882812 C 17.531104 1.9947115 22.005288 6.4688953 22.011719 11.990234 C 22.011719 20.90177 11.238144 25.363144 4.9375 19.0625 C -1.3631434 12.761856 3.0982293 1.9882812 12.009766 1.9882812 z M 18.244141 6.5761719 A 1 1 0 0 0 17.316406 7.0175781 L 11.089844 15.46875 L 7.0136719 12.207031 A 1.0004882 1.0004882 0 1 0 5.7636719 13.769531 L 10.652344 17.677734 A 1.011 1.011 0 0 0 12.082031 17.488281 L 18.927734 8.1992188 A 1 1 0 0 0 18.244141 6.5761719 z "/></svg>
diff --git a/yarn.lock b/yarn.lock
index 3244fb929a90179e97f9a1c0289574cabc9e81df..985db08511e0b358fed9ea6ab9004982da2097b7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3898,6 +3898,115 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@svgr/babel-plugin-add-jsx-attribute@npm:^6.5.1":
+  version: 6.5.1
+  resolution: "@svgr/babel-plugin-add-jsx-attribute@npm:6.5.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: cab83832830a57735329ed68f67c03b57ca21fa037b0134847b0c5c0ef4beca89956d7dacfbf7b2a10fd901e7009e877512086db2ee918b8c69aee7742ae32c0
+  languageName: node
+  linkType: hard
+
+"@svgr/babel-plugin-remove-jsx-attribute@npm:*":
+  version: 6.5.0
+  resolution: "@svgr/babel-plugin-remove-jsx-attribute@npm:6.5.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 7a4dfc1345f5855b010684e9c5301731842bf91d72b82ce5cc4c82c80b94de1036e447a8a00fb306a6dd575cb4c640d8ce3cfee6607ddbb804796a77284c7f22
+  languageName: node
+  linkType: hard
+
+"@svgr/babel-plugin-remove-jsx-empty-expression@npm:*":
+  version: 6.5.0
+  resolution: "@svgr/babel-plugin-remove-jsx-empty-expression@npm:6.5.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 3e173f720d530f9f71f8506f3eb78583eec3d87d66e385efe1ef3b3ebfc4e3680ec30f36414726de6a163e99ca69f54886022967e49476dea522267e1986936e
+  languageName: node
+  linkType: hard
+
+"@svgr/babel-plugin-replace-jsx-attribute-value@npm:^6.5.1":
+  version: 6.5.1
+  resolution: "@svgr/babel-plugin-replace-jsx-attribute-value@npm:6.5.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: b7d2125758e766e1ebd14b92216b800bdc976959bc696dbfa1e28682919147c1df4bb8b1b5fd037d7a83026e27e681fea3b8d3741af8d3cf4c9dfa3d412125df
+  languageName: node
+  linkType: hard
+
+"@svgr/babel-plugin-svg-dynamic-title@npm:^6.5.1":
+  version: 6.5.1
+  resolution: "@svgr/babel-plugin-svg-dynamic-title@npm:6.5.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 0fd42ebf127ae9163ef341e84972daa99bdcb9e6ed3f83aabd95ee173fddc43e40e02fa847fbc0a1058cf5549f72b7960a2c5e22c3e4ac18f7e3ac81277852ae
+  languageName: node
+  linkType: hard
+
+"@svgr/babel-plugin-svg-em-dimensions@npm:^6.5.1":
+  version: 6.5.1
+  resolution: "@svgr/babel-plugin-svg-em-dimensions@npm:6.5.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: c1550ee9f548526fa66fd171e3ffb5696bfc4e4cd108a631d39db492c7410dc10bba4eb5a190e9df824bf806130ccc586ae7d2e43c547e6a4f93bbb29a18f344
+  languageName: node
+  linkType: hard
+
+"@svgr/babel-plugin-transform-react-native-svg@npm:^6.5.1":
+  version: 6.5.1
+  resolution: "@svgr/babel-plugin-transform-react-native-svg@npm:6.5.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 4c924af22b948b812629e80efb90ad1ec8faae26a232d8ca8a06b46b53e966a2c415a57806a3ff0ea806a622612e546422719b69ec6839717a7755dac19171d9
+  languageName: node
+  linkType: hard
+
+"@svgr/babel-plugin-transform-svg-component@npm:^6.5.1":
+  version: 6.5.1
+  resolution: "@svgr/babel-plugin-transform-svg-component@npm:6.5.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: e496bb5ee871feb6bcab250b6e067322da7dd5c9c2b530b41e5586fe090f86611339b49d0a909c334d9b24cbca0fa755c949a2526c6ad03c6b5885666874cf5f
+  languageName: node
+  linkType: hard
+
+"@svgr/babel-preset@npm:^6.5.1":
+  version: 6.5.1
+  resolution: "@svgr/babel-preset@npm:6.5.1"
+  dependencies:
+    "@svgr/babel-plugin-add-jsx-attribute": ^6.5.1
+    "@svgr/babel-plugin-remove-jsx-attribute": "*"
+    "@svgr/babel-plugin-remove-jsx-empty-expression": "*"
+    "@svgr/babel-plugin-replace-jsx-attribute-value": ^6.5.1
+    "@svgr/babel-plugin-svg-dynamic-title": ^6.5.1
+    "@svgr/babel-plugin-svg-em-dimensions": ^6.5.1
+    "@svgr/babel-plugin-transform-react-native-svg": ^6.5.1
+    "@svgr/babel-plugin-transform-svg-component": ^6.5.1
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 9f124be39a8e64f909162f925b3a63ddaa5a342a5e24fc0b7f7d9d4d7f7e3b916596c754fb557dc259928399cad5366a27cb231627a0d2dcc4b13ac521cf05af
+  languageName: node
+  linkType: hard
+
+"@svgr/cli@npm:^6.5.1":
+  version: 6.5.1
+  resolution: "@svgr/cli@npm:6.5.1"
+  dependencies:
+    "@svgr/core": ^6.5.1
+    "@svgr/plugin-jsx": ^6.5.1
+    "@svgr/plugin-prettier": ^6.5.1
+    "@svgr/plugin-svgo": ^6.5.1
+    camelcase: ^6.2.0
+    chalk: ^4.1.2
+    commander: ^9.4.1
+    dashify: ^2.0.0
+    glob: ^8.0.3
+  bin:
+    svgr: bin/svgr
+  checksum: 508c76809463d9e7e4a3cd10e0fed7a43d2d91804d8a8f31146780c3dc7e9b187bdf919a57fe8156842061ce292b5358d4b77ae2dff9ecf8682617e5e98b6cee
+  languageName: node
+  linkType: hard
+
 "@svgr/core@npm:^2.4.1":
   version: 2.4.1
   resolution: "@svgr/core@npm:2.4.1"
@@ -3913,6 +4022,68 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@svgr/core@npm:^6.5.1":
+  version: 6.5.1
+  resolution: "@svgr/core@npm:6.5.1"
+  dependencies:
+    "@babel/core": ^7.19.6
+    "@svgr/babel-preset": ^6.5.1
+    "@svgr/plugin-jsx": ^6.5.1
+    camelcase: ^6.2.0
+    cosmiconfig: ^7.0.1
+  checksum: fd6d6d5da5aeb956703310480b626c1fb3e3973ad9fe8025efc1dcf3d895f857b70d100c63cf32cebb20eb83c9607bafa464c9436e18fe6fe4fafdc73ed6b1a5
+  languageName: node
+  linkType: hard
+
+"@svgr/hast-util-to-babel-ast@npm:^6.5.1":
+  version: 6.5.1
+  resolution: "@svgr/hast-util-to-babel-ast@npm:6.5.1"
+  dependencies:
+    "@babel/types": ^7.20.0
+    entities: ^4.4.0
+  checksum: 37923cce1b3f4e2039077b0c570b6edbabe37d1cf1a6ee35e71e0fe00f9cffac450eec45e9720b1010418131a999cb0047331ba1b6d1d2c69af1b92ac785aacf
+  languageName: node
+  linkType: hard
+
+"@svgr/plugin-jsx@npm:^6.5.1":
+  version: 6.5.1
+  resolution: "@svgr/plugin-jsx@npm:6.5.1"
+  dependencies:
+    "@babel/core": ^7.19.6
+    "@svgr/babel-preset": ^6.5.1
+    "@svgr/hast-util-to-babel-ast": ^6.5.1
+    svg-parser: ^2.0.4
+  peerDependencies:
+    "@svgr/core": ^6.0.0
+  checksum: 42f22847a6bdf930514d7bedd3c5e1fd8d53eb3594779f9db16cb94c762425907c375cd8ec789114e100a4d38068aca6c7ab5efea4c612fba63f0630c44cc859
+  languageName: node
+  linkType: hard
+
+"@svgr/plugin-prettier@npm:^6.5.1":
+  version: 6.5.1
+  resolution: "@svgr/plugin-prettier@npm:6.5.1"
+  dependencies:
+    deepmerge: ^4.2.2
+    prettier: ^2.7.1
+  peerDependencies:
+    "@svgr/core": "*"
+  checksum: 59340ff467d0cb1f07dbbde2d8f15d6d740aa5d904faed0fad7684a6dc53137a384e63bb801e177df50f486c1f765218a35e9a15ffa23e0a1035de16c316b372
+  languageName: node
+  linkType: hard
+
+"@svgr/plugin-svgo@npm:^6.5.1":
+  version: 6.5.1
+  resolution: "@svgr/plugin-svgo@npm:6.5.1"
+  dependencies:
+    cosmiconfig: ^7.0.1
+    deepmerge: ^4.2.2
+    svgo: ^2.8.0
+  peerDependencies:
+    "@svgr/core": "*"
+  checksum: cd2833530ac0485221adc2146fd992ab20d79f4b12eebcd45fa859721dd779483158e11dfd9a534858fe468416b9412416e25cbe07ac7932c44ed5fa2021c72e
+  languageName: node
+  linkType: hard
+
 "@svgr/webpack@npm:2.4.1":
   version: 2.4.1
   resolution: "@svgr/webpack@npm:2.4.1"
@@ -3997,6 +4168,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@trysound/sax@npm:0.2.0":
+  version: 0.2.0
+  resolution: "@trysound/sax@npm:0.2.0"
+  checksum: 11226c39b52b391719a2a92e10183e4260d9651f86edced166da1d95f39a0a1eaa470e44d14ac685ccd6d3df7e2002433782872c0feeb260d61e80f21250e65c
+  languageName: node
+  linkType: hard
+
 "@tsconfig/node10@npm:^1.0.7":
   version: 1.0.9
   resolution: "@tsconfig/node10@npm:1.0.9"
@@ -7552,6 +7730,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"commander@npm:^7.2.0":
+  version: 7.2.0
+  resolution: "commander@npm:7.2.0"
+  checksum: 53501cbeee61d5157546c0bef0fedb6cdfc763a882136284bed9a07225f09a14b82d2a84e7637edfd1a679fb35ed9502fd58ef1d091e6287f60d790147f68ddc
+  languageName: node
+  linkType: hard
+
+"commander@npm:^9.4.1":
+  version: 9.5.0
+  resolution: "commander@npm:9.5.0"
+  checksum: c7a3e27aa59e913b54a1bafd366b88650bc41d6651f0cbe258d4ff09d43d6a7394232a4dadd0bf518b3e696fdf595db1028a0d82c785b88bd61f8a440cecfade
+  languageName: node
+  linkType: hard
+
 "commander@npm:~2.13.0":
   version: 2.13.0
   resolution: "commander@npm:2.13.0"
@@ -7868,6 +8060,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cosmiconfig@npm:^7.0.1":
+  version: 7.1.0
+  resolution: "cosmiconfig@npm:7.1.0"
+  dependencies:
+    "@types/parse-json": ^4.0.0
+    import-fresh: ^3.2.1
+    parse-json: ^5.0.0
+    path-type: ^4.0.0
+    yaml: ^1.10.0
+  checksum: c53bf7befc1591b2651a22414a5e786cd5f2eeaa87f3678a3d49d6069835a9d8d1aef223728e98aa8fec9a95bf831120d245096db12abe019fecb51f5696c96f
+  languageName: node
+  linkType: hard
+
 "crc@npm:^3.8.0":
   version: 3.8.0
   resolution: "crc@npm:3.8.0"
@@ -8133,7 +8338,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-tree@npm:^1.1.2":
+"css-tree@npm:^1.1.2, css-tree@npm:^1.1.3":
   version: 1.1.3
   resolution: "css-tree@npm:1.1.3"
   dependencies:
@@ -8262,7 +8467,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csso@npm:^4.0.2":
+"csso@npm:^4.0.2, csso@npm:^4.2.0":
   version: 4.2.0
   resolution: "csso@npm:4.2.0"
   dependencies:
@@ -8766,6 +8971,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dashify@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "dashify@npm:2.0.0"
+  checksum: f13233f38fc39ea8dabe3a5bef51421906aa8a52e4403fcb56e3e6464428f5c0bdd75562706929a245c698bceccf68a82e30e9e327a0c582469868522a163f8c
+  languageName: node
+  linkType: hard
+
 "data-urls@npm:^3.0.1":
   version: 3.0.1
   resolution: "data-urls@npm:3.0.1"
@@ -9778,6 +9990,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"entities@npm:^4.4.0":
+  version: 4.4.0
+  resolution: "entities@npm:4.4.0"
+  checksum: 84d250329f4b56b40fa93ed067b194db21e8815e4eb9b59f43a086f0ecd342814f6bc483de8a77da5d64e0f626033192b1b4f1792232a7ea6b970ebe0f3187c2
+  languageName: node
+  linkType: hard
+
 "env-paths@npm:^2.2.0":
   version: 2.2.1
   resolution: "env-paths@npm:2.2.1"
@@ -11702,6 +11921,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"glob@npm:^8.0.3":
+  version: 8.1.0
+  resolution: "glob@npm:8.1.0"
+  dependencies:
+    fs.realpath: ^1.0.0
+    inflight: ^1.0.4
+    inherits: 2
+    minimatch: ^5.0.1
+    once: ^1.3.0
+  checksum: 92fbea3221a7d12075f26f0227abac435de868dd0736a17170663783296d0dd8d3d532a5672b4488a439bf5d7fb85cdd07c11185d6cd39184f0385cbdfb86a47
+  languageName: node
+  linkType: hard
+
 "global-agent@npm:^3.0.0":
   version: 3.0.0
   resolution: "global-agent@npm:3.0.0"
@@ -12670,7 +12902,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"import-fresh@npm:^3.1.0":
+"import-fresh@npm:^3.1.0, import-fresh@npm:^3.2.1":
   version: 3.3.0
   resolution: "import-fresh@npm:3.3.0"
   dependencies:
@@ -15273,6 +15505,7 @@ __metadata:
     "@babel/types": ^7.0.0-rc.1
     "@jlongster/lively": 0.0.4
     "@juggle/resize-observer": ^3.1.2
+    "@svgr/cli": ^6.5.1
     "@testing-library/react": ^9.1.4
     animejs: ^2.2.0
     camelcase: ^5.0.0
@@ -18854,6 +19087,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prettier@npm:^2.7.1":
+  version: 2.8.3
+  resolution: "prettier@npm:2.8.3"
+  bin:
+    prettier: bin-prettier.js
+  checksum: 92f2ceb522d454370e02082aa74ad27388672f7cee8975028b59517c069fe643bdc73e322675c8faf2ff173d7a626d1a6389f26b474000308e793aa25fff46e5
+  languageName: node
+  linkType: hard
+
 "pretty-bytes@npm:^4.0.2":
   version: 4.0.2
   resolution: "pretty-bytes@npm:4.0.2"
@@ -21935,6 +22177,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"svg-parser@npm:^2.0.4":
+  version: 2.0.4
+  resolution: "svg-parser@npm:2.0.4"
+  checksum: b3de6653048212f2ae7afe4a423e04a76ec6d2d06e1bf7eacc618a7c5f7df7faa5105561c57b94579ec831fbbdbf5f190ba56a9205ff39ed13eabdf8ab086ddf
+  languageName: node
+  linkType: hard
+
 "svgo@npm:^1.0.0, svgo@npm:^1.0.5":
   version: 1.3.2
   resolution: "svgo@npm:1.3.2"
@@ -21958,6 +22207,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"svgo@npm:^2.8.0":
+  version: 2.8.0
+  resolution: "svgo@npm:2.8.0"
+  dependencies:
+    "@trysound/sax": 0.2.0
+    commander: ^7.2.0
+    css-select: ^4.1.3
+    css-tree: ^1.1.3
+    csso: ^4.2.0
+    picocolors: ^1.0.0
+    stable: ^0.1.8
+  bin:
+    svgo: bin/svgo
+  checksum: b92f71a8541468ffd0b81b8cdb36b1e242eea320bf3c1a9b2c8809945853e9d8c80c19744267eb91cabf06ae9d5fff3592d677df85a31be4ed59ff78534fa420
+  languageName: node
+  linkType: hard
+
 "symbol-tree@npm:^3.2.4":
   version: 3.2.4
   resolution: "symbol-tree@npm:3.2.4"
@@ -24598,7 +24864,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yaml@npm:^1.7.2":
+"yaml@npm:^1.10.0, yaml@npm:^1.7.2":
   version: 1.10.2
   resolution: "yaml@npm:1.10.2"
   checksum: ce4ada136e8a78a0b08dc10b4b900936912d15de59905b2bf415b4d33c63df1d555d23acb2a41b23cf9fb5da41c256441afca3d6509de7247daa062fd2c5ea5f