From 20c7abc1504d18f1498c771284d5deb60557880d Mon Sep 17 00:00:00 2001
From: Jed Fox <git@jedfox.com>
Date: Fri, 20 Jan 2023 15:49:31 -0500
Subject: [PATCH] Regenerate icons without the .web.js extension (#485)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Regenerate icons without the .web.js extension

* Move icons in the root folder to a “v0” folder

* Remove generated index.js files

* Update generator to auto-remove deleted icons

* Add back AnimatedLoading + Loading

* Add SVG files for missing icons

* lint fix

* the perils of (not) running a case-sensitive file system

* Fix new import

* Switch v0 icons from width/height to viewBox
---
 .../src/components/AppBackground.js           |   2 +-
 .../src/components/ManageRules.js             |   2 +-
 .../src/components/Notifications.js           |   4 +-
 .../src/components/SidebarWithData.js         |   2 +-
 .../src/components/accounts/Account.js        |   2 +-
 .../src/components/accounts/Filters.js        |   2 +-
 .../components/accounts/TransactionsTable.js  |   4 +-
 .../src/components/budget/MobileBudget.js     |   2 +-
 .../src/components/modals/EditRule.js         |   4 +-
 packages/loot-design/package.json             |   1 +
 .../src/components/CategorySelect.js          |   2 +-
 .../src/components/RecurringSchedulePicker.js |   4 +-
 .../src/components/budget/index.js            |   2 +-
 packages/loot-design/src/components/common.js |   6 +-
 .../loot-design/src/components/icons.usage.js |   4 +-
 .../src/components/manager/BudgetList.js      |   2 +-
 .../src/components/modals/PlaidExternalMsg.js |   2 +-
 packages/loot-design/src/components/payees.js |   6 +-
 packages/loot-design/src/components/table.js  |   6 +-
 packages/loot-design/src/svg/.gitignore       |   1 +
 packages/loot-design/src/svg/.svgrrc.js       |  10 +-
 packages/loot-design/src/svg/Add.web.js       |  31 --
 ...matedLoading.web.js => AnimatedLoading.js} |   0
 packages/loot-design/src/svg/Delete.web.js    |  46 ---
 .../loot-design/src/svg/ExpandArrow.web.js    |  33 ---
 .../loot-design/src/svg/LeftArrow2.web.js     |  27 --
 .../src/svg/{v1/Loading.web.js => Loading.js} |   0
 packages/loot-design/src/svg/Math.web.js      |  27 --
 .../loot-design/src/svg/RightArrow2.web.js    |  27 --
 packages/loot-design/src/svg/Subtract.web.js  |  26 --
 packages/loot-design/src/svg/generate         | 152 ----------
 packages/loot-design/src/svg/generate-new     |   5 -
 packages/loot-design/src/svg/generate-new.sh  |   4 +
 .../src/svg/logo/{Logo.web.js => Logo.js}     |  10 +-
 packages/loot-design/src/svg/merge.web.js     |  78 -----
 packages/loot-design/src/svg/split.web.js     |  94 ------
 packages/loot-design/src/svg/v0/Add.js        |  24 ++
 packages/loot-design/src/svg/v0/Add.svg       |  14 +
 packages/loot-design/src/svg/v0/Delete.js     |  24 ++
 .../loot-design/src/svg/{ => v0}/Delete.svg   |  60 ++--
 .../loot-design/src/svg/v0/ExpandArrow.js     |  20 ++
 .../src/svg/{ => v0}/ExpandArrow.svg          |   0
 packages/loot-design/src/svg/v0/LeftArrow2.js |  20 ++
 .../src/svg/{ => v0}/LeftArrow2.svg           |   0
 packages/loot-design/src/svg/v0/Math.js       |  20 ++
 .../loot-design/src/svg/{ => v0}/Math.svg     |   0
 packages/loot-design/src/svg/v0/Merge.js      |  25 ++
 .../loot-design/src/svg/v0/RightArrow2.js     |  20 ++
 .../src/svg/{ => v0}/RightArrow2.svg          |   0
 packages/loot-design/src/svg/v0/Split.js      |  25 ++
 packages/loot-design/src/svg/v0/Subtract.js   |  20 ++
 packages/loot-design/src/svg/v0/Subtract.svg  |  11 +
 .../loot-design/src/svg/{ => v0}/merge.svg    |   0
 .../loot-design/src/svg/{ => v0}/split.svg    |   0
 .../src/svg/v1/{Add.web.js => Add.js}         |   7 +-
 .../v1/{AddOutline.web.js => AddOutline.js}   |   3 +-
 .../svg/v1/{AddSolid.web.js => AddSolid.js}   |   3 +-
 .../src/svg/v1/{Adjust.web.js => Adjust.js}   |   3 +-
 .../svg/v1/{Airplane.web.js => Airplane.js}   |   3 +-
 .../src/svg/v1/{Album.web.js => Album.js}     |   3 +-
 .../v1/{AlignCenter.web.js => AlignCenter.js} |   3 +-
 ...lignJustified.web.js => AlignJustified.js} |   3 +-
 .../svg/v1/{AlignLeft.web.js => AlignLeft.js} |   3 +-
 .../v1/{AlignRight.web.js => AlignRight.js}   |   3 +-
 .../src/svg/v1/{Anchor.web.js => Anchor.js}   |   3 +-
 .../{Announcement.web.js => Announcement.js}  |   3 +-
 .../src/svg/v1/{Apparel.web.js => Apparel.js} |   3 +-
 .../svg/v1/{ArrowDown.web.js => ArrowDown.js} |   5 +-
 .../svg/v1/{ArrowLeft.web.js => ArrowLeft.js} |   5 +-
 ...OutlineDown.web.js => ArrowOutlineDown.js} |   3 +-
 ...OutlineLeft.web.js => ArrowOutlineLeft.js} |   3 +-
 ...tlineRight.web.js => ArrowOutlineRight.js} |   3 +-
 ...rrowOutlineUp.web.js => ArrowOutlineUp.js} |   3 +-
 .../v1/{ArrowRight.web.js => ArrowRight.js}   |   5 +-
 ...rrowThickDown.web.js => ArrowThickDown.js} |   3 +-
 ...rrowThickLeft.web.js => ArrowThickLeft.js} |   3 +-
 ...owThickRight.web.js => ArrowThickRight.js} |   3 +-
 .../{ArrowThickUp.web.js => ArrowThickUp.js}  |   3 +-
 ...{ArrowThinDown.web.js => ArrowThinDown.js} |   5 +-
 ...{ArrowThinLeft.web.js => ArrowThinLeft.js} |   5 +-
 ...rrowThinRight.web.js => ArrowThinRight.js} |   5 +-
 .../v1/{ArrowThinUp.web.js => ArrowThinUp.js} |   5 +-
 .../src/svg/v1/{ArrowUp.web.js => ArrowUp.js} |   5 +-
 packages/loot-design/src/svg/v1/Artist.js     |  20 ++
 packages/loot-design/src/svg/v1/Artist.web.js |  19 --
 .../svg/v1/{AtSymbol.web.js => AtSymbol.js}   |   3 +-
 .../v1/{Attachment.web.js => Attachment.js}   |   3 +-
 .../svg/v1/{Backspace.web.js => Backspace.js} |   5 +-
 .../svg/v1/{Backward.web.js => Backward.js}   |   3 +-
 .../{BackwardStep.web.js => BackwardStep.js}  |   3 +-
 .../src/svg/v1/{Badge.web.js => Badge.js}     |   3 +-
 .../v1/{BatteryFull.web.js => BatteryFull.js} |   3 +-
 .../v1/{BatteryHalf.web.js => BatteryHalf.js} |   3 +-
 .../v1/{BatteryLow.web.js => BatteryLow.js}   |   3 +-
 .../svg/v1/{Beverage.web.js => Beverage.js}   |   3 +-
 .../src/svg/v1/{Block.web.js => Block.js}     |   3 +-
 .../svg/v1/{Bluetooth.web.js => Bluetooth.js} |   5 +-
 .../src/svg/v1/{Bolt.web.js => Bolt.js}       |   3 +-
 ...{BookReference.web.js => BookReference.js} |   3 +-
 .../svg/v1/{Bookmark.web.js => Bookmark.js}   |   3 +-
 ...{BookmarkCopy2.web.js => BookmarkCopy2.js} |   3 +-
 ...{BookmarkCopy3.web.js => BookmarkCopy3.js} |   3 +-
 ...kmarkOutline.web.js => BookmarkOutline.js} |   3 +-
 ...utlineAdd.web.js => BookmarkOutlineAdd.js} |   3 +-
 .../svg/v1/{BorderAll.web.js => BorderAll.js} |   3 +-
 .../{BorderBottom.web.js => BorderBottom.js}  |   3 +-
 ...rHorizontal.web.js => BorderHorizontal.js} |   3 +-
 .../v1/{BorderInner.web.js => BorderInner.js} |   3 +-
 .../v1/{BorderLeft.web.js => BorderLeft.js}   |   3 +-
 .../v1/{BorderNone.web.js => BorderNone.js}   |   3 +-
 .../v1/{BorderOuter.web.js => BorderOuter.js} |   3 +-
 .../v1/{BorderRight.web.js => BorderRight.js} |   3 +-
 .../svg/v1/{BorderTop.web.js => BorderTop.js} |   3 +-
 ...orderVertical.web.js => BorderVertical.js} |   3 +-
 .../src/svg/v1/{Box.web.js => Box.js}         |   3 +-
 ...rightnessDown.web.js => BrightnessDown.js} |   3 +-
 .../{BrightnessUp.web.js => BrightnessUp.js}  |   3 +-
 ...{BrowserWindow.web.js => BrowserWindow.js} |   3 +-
 ...erWindowNew.web.js => BrowserWindowNew.js} |   3 +-
 ...WindowOpen.web.js => BrowserWindowOpen.js} |   5 +-
 .../src/svg/v1/{Bug.web.js => Bug.js}         |   5 +-
 packages/loot-design/src/svg/v1/Buoy.js       |  20 ++
 packages/loot-design/src/svg/v1/Buoy.web.js   |  19 --
 .../v1/{Calculator.web.js => Calculator.js}   |   3 +-
 .../svg/v1/{Calendar.web.js => Calendar.js}   |   3 +-
 .../src/svg/v1/{Camera.web.js => Camera.js}   |   3 +-
 .../src/svg/v1/{Chart.web.js => Chart.js}     |   3 +-
 .../svg/v1/{ChartBar.web.js => ChartBar.js}   |   3 +-
 .../svg/v1/{ChartPie.web.js => ChartPie.js}   |   3 +-
 ...hatBubbleDots.web.js => ChatBubbleDots.js} |   5 +-
 ...Alternative.web.js => CheckAlternative.js} |   7 +-
 .../svg/v1/{Checkmark.web.js => Checkmark.js} |   5 +-
 ...markOutline.web.js => CheckmarkOutline.js} |   5 +-
 .../{CheveronDown.web.js => CheveronDown.js}  |   5 +-
 .../{CheveronLeft.web.js => CheveronLeft.js}  |   5 +-
 ...lineDown.web.js => CheveronOutlineDown.js} |   3 +-
 ...lineLeft.web.js => CheveronOutlineLeft.js} |   5 +-
 ...neRight.web.js => CheveronOutlineRight.js} |   3 +-
 ...nOutlineUp.web.js => CheveronOutlineUp.js} |   3 +-
 ...{CheveronRight.web.js => CheveronRight.js} |   5 +-
 .../v1/{CheveronUp.web.js => CheveronUp.js}   |   5 +-
 .../svg/v1/{Clipboard.web.js => Clipboard.js} |   3 +-
 .../src/svg/v1/{Close.web.js => Close.js}     |   5 +-
 .../{CloseOutline.web.js => CloseOutline.js}  |   3 +-
 .../v1/{CloseSolid.web.js => CloseSolid.js}   |   3 +-
 .../src/svg/v1/{Cloud.web.js => Cloud.js}     |   3 +-
 .../v1/{CloudCheck.web.js => CloudCheck.js}   |   7 +-
 ...{CloudDownload.web.js => CloudDownload.js} |   7 +-
 .../v1/{CloudUpload.web.js => CloudUpload.js} |   3 +-
 .../{CloudWarning.web.js => CloudWarning.js}  |   7 +-
 .../src/svg/v1/{Code.web.js => Code.js}       |   5 +-
 .../src/svg/v1/{Coffee.web.js => Coffee.js}   |   3 +-
 .../src/svg/v1/{Cog.web.js => Cog.js}         |   5 +-
 .../{ColorPalette.web.js => ColorPalette.js}  |   3 +-
 .../src/svg/v1/{Compose.web.js => Compose.js} |   5 +-
 ...puterDesktop.web.js => ComputerDesktop.js} |   3 +-
 ...omputerLaptop.web.js => ComputerLaptop.js} |   3 +-
 .../{Conversation.web.js => Conversation.js}  |   3 +-
 .../src/svg/v1/{Copy.web.js => Copy.js}       |   3 +-
 .../v1/{CreditCard.web.js => CreditCard.js}   |   3 +-
 ...urrencyDollar.web.js => CurrencyDollar.js} |   3 +-
 .../svg/v1/{Dashboard.web.js => Dashboard.js} |   5 +-
 .../src/svg/v1/{DateAdd.web.js => DateAdd.js} |   3 +-
 .../src/svg/v1/{DialPad.web.js => DialPad.js} |   3 +-
 .../v1/{Directions.web.js => Directions.js}   |   5 +-
 .../svg/v1/{Document.web.js => Document.js}   |   3 +-
 .../v1/{DocumentAdd.web.js => DocumentAdd.js} |   3 +-
 ...lDouble.web.js => DotsHorizontalDouble.js} |   3 +-
 ...lTriple.web.js => DotsHorizontalTriple.js} |   3 +-
 .../svg/v1/{Download.web.js => Download.js}   |   3 +-
 .../svg/v1/{Duplicate.web.js => Duplicate.js} |   3 +-
 .../svg/v1/{EditCopy.web.js => EditCopy.js}   |   3 +-
 .../svg/v1/{EditCrop.web.js => EditCrop.js}   |   3 +-
 .../src/svg/v1/{EditCut.web.js => EditCut.js} |   5 +-
 .../v1/{EditPencil.web.js => EditPencil.js}   |   5 +-
 .../svg/v1/{Education.web.js => Education.js} |   5 +-
 .../svg/v1/{Envelope.web.js => Envelope.js}   |   3 +-
 .../src/svg/v1/{Equals.web.js => Equals.js}   |   3 +-
 ...onOutline.web.js => ExclamationOutline.js} |   3 +-
 ...mationSolid.web.js => ExclamationSolid.js} |   3 +-
 .../src/svg/v1/{Explore.web.js => Explore.js} |   3 +-
 .../src/svg/v1/{Factory.web.js => Factory.js} |   3 +-
 .../v1/{FastForward.web.js => FastForward.js} |   5 +-
 .../v1/{FastRewind.web.js => FastRewind.js}   |   3 +-
 .../v1/{FileDouble.web.js => FileDouble.js}   |   5 +-
 .../src/svg/v1/{Film.web.js => Film.js}       |   3 +-
 .../src/svg/v1/{Filter.web.js => Filter.js}   |   5 +-
 .../src/svg/v1/{Flag.web.js => Flag.js}       |   3 +-
 .../v1/{Flashlight.web.js => Flashlight.js}   |   3 +-
 .../src/svg/v1/{Folder.web.js => Folder.js}   |   3 +-
 ...{FolderOutline.web.js => FolderOutline.js} |   3 +-
 ...rOutlineAdd.web.js => FolderOutlineAdd.js} |   3 +-
 .../v1/{FormatBold.web.js => FormatBold.js}   |   3 +-
 ...ormatFontSize.web.js => FormatFontSize.js} |   3 +-
 .../{FormatItalic.web.js => FormatItalic.js}  |   3 +-
 ...ormatTextSize.web.js => FormatTextSize.js} |   3 +-
 ...matUnderline.web.js => FormatUnderline.js} |   3 +-
 .../src/svg/v1/{Forward.web.js => Forward.js} |   5 +-
 .../v1/{ForwardStep.web.js => ForwardStep.js} |   3 +-
 .../src/svg/v1/{Gift.web.js => Gift.js}       |   3 +-
 .../src/svg/v1/{Globe.web.js => Globe.js}     |   3 +-
 .../svg/v1/{HandStop.web.js => HandStop.js}   |   3 +-
 .../svg/v1/{HardDrive.web.js => HardDrive.js} |   3 +-
 .../v1/{Headphones.web.js => Headphones.js}   |   3 +-
 .../src/svg/v1/{Heart.web.js => Heart.js}     |   5 +-
 .../src/svg/v1/{Home.web.js => Home.js}       |   3 +-
 .../src/svg/v1/{Hot.web.js => Hot.js}         |   3 +-
 .../svg/v1/{HourGlass.web.js => HourGlass.js} |   3 +-
 .../src/svg/v1/{Inbox.web.js => Inbox.js}     |   3 +-
 .../v1/{InboxCheck.web.js => InboxCheck.js}   |   3 +-
 ...{InboxDownload.web.js => InboxDownload.js} |   3 +-
 .../svg/v1/{InboxFull.web.js => InboxFull.js} |   3 +-
 ...ndentDecrease.web.js => IndentDecrease.js} |   3 +-
 ...ndentIncrease.web.js => IndentIncrease.js} |   3 +-
 ...onOutline.web.js => InformationOutline.js} |   3 +-
 ...mationSolid.web.js => InformationSolid.js} |   3 +-
 .../src/svg/v1/{Key.web.js => Key.js}         |   5 +-
 .../svg/v1/{Keyboard.web.js => Keyboard.js}   |   3 +-
 .../src/svg/v1/{Layers.web.js => Layers.js}   |   5 +-
 .../src/svg/v1/{Library.web.js => Library.js} |   5 +-
 .../svg/v1/{LightBulb.web.js => LightBulb.js} |   3 +-
 .../src/svg/v1/{Link.web.js => Link.js}       |   3 +-
 .../src/svg/v1/{List.web.js => List.js}       |   3 +-
 .../src/svg/v1/{ListAdd.web.js => ListAdd.js} |   3 +-
 .../v1/{ListBullet.web.js => ListBullet.js}   |   3 +-
 .../{LoadBalancer.web.js => LoadBalancer.js}  |   3 +-
 .../svg/v1/{Location.web.js => Location.js}   |   3 +-
 ...ationCurrent.web.js => LocationCurrent.js} |   5 +-
 .../{LocationFood.web.js => LocationFood.js}  |   3 +-
 ...asStation.web.js => LocationGasStation.js} |   3 +-
 ...{LocationHotel.web.js => LocationHotel.js} |   3 +-
 ...ocationMarina.web.js => LocationMarina.js} |   3 +-
 .../{LocationPark.web.js => LocationPark.js}  |   3 +-
 ...ionRestroom.web.js => LocationRestroom.js} |   3 +-
 ...ionShopping.web.js => LocationShopping.js} |   3 +-
 .../v1/{LockClosed.web.js => LockClosed.js}   |   3 +-
 .../svg/v1/{LockOpen.web.js => LockOpen.js}   |   3 +-
 .../src/svg/v1/{Map.web.js => Map.js}         |   5 +-
 .../src/svg/v1/{Menu.web.js => Menu.js}       |   3 +-
 .../src/svg/v1/{Mic.web.js => Mic.js}         |   3 +-
 .../{MinusOutline.web.js => MinusOutline.js}  |   3 +-
 .../v1/{MinusSolid.web.js => MinusSolid.js}   |   3 +-
 ...{MobileDevices.web.js => MobileDevices.js} |   3 +-
 .../svg/v1/{MoneyBag.web.js => MoneyBag.js}   |   5 +-
 ...appyOutline.web.js => MoodHappyOutline.js} |   3 +-
 ...oodHappySolid.web.js => MoodHappySolid.js} |   3 +-
 ...alOutline.web.js => MoodNeutralOutline.js} |   3 +-
 ...eutralSolid.web.js => MoodNeutralSolid.js} |   3 +-
 ...oodSadOutline.web.js => MoodSadOutline.js} |   3 +-
 .../{MoodSadSolid.web.js => MoodSadSolid.js}  |   3 +-
 .../src/svg/v1/{Mouse.web.js => Mouse.js}     |   3 +-
 .../svg/v1/{MoveBack.web.js => MoveBack.js}   |   5 +-
 .../v1/{MusicAlbum.web.js => MusicAlbum.js}   |   3 +-
 .../loot-design/src/svg/v1/MusicArtist.js     |  20 ++
 .../loot-design/src/svg/v1/MusicArtist.web.js |  19 --
 .../v1/{MusicNotes.web.js => MusicNotes.js}   |   3 +-
 ...{MusicPlaylist.web.js => MusicPlaylist.js} |   3 +-
 ...avigationMore.web.js => NavigationMore.js} |   3 +-
 .../src/svg/v1/{Network.web.js => Network.js} |   3 +-
 .../svg/v1/{NewsPaper.web.js => NewsPaper.js} |   3 +-
 .../{Notification.web.js => Notification.js}  |   3 +-
 ...{Notifications.web.js => Notifications.js} |   3 +-
 ...Outline.web.js => NotificationsOutline.js} |   3 +-
 .../src/svg/v1/{Paste.web.js => Paste.js}     |   3 +-
 .../src/svg/v1/{Pause.web.js => Pause.js}     |   3 +-
 .../{PauseOutline.web.js => PauseOutline.js}  |   3 +-
 .../v1/{PauseSolid.web.js => PauseSolid.js}   |   3 +-
 .../src/svg/v1/{PenTool.web.js => PenTool.js} |   3 +-
 .../v1/{PencilWrite.web.js => PencilWrite.js} |   7 +-
 .../src/svg/v1/{Phone.web.js => Phone.js}     |   3 +-
 .../src/svg/v1/{Photo.web.js => Photo.js}     |   5 +-
 .../v1/{PhpElephant.web.js => PhpElephant.js} |   3 +-
 .../svg/v1/{PiggyBank.web.js => PiggyBank.js} |   9 +-
 .../src/svg/v1/{Pin.web.js => Pin.js}         |   3 +-
 .../src/svg/v1/{Play.web.js => Play.js}       |   5 +-
 .../v1/{PlayOutline.web.js => PlayOutline.js} |   3 +-
 .../svg/v1/{Playlist.web.js => Playlist.js}   |   3 +-
 .../src/svg/v1/{Plugin.web.js => Plugin.js}   |   3 +-
 .../svg/v1/{Portfolio.web.js => Portfolio.js} |   3 +-
 .../src/svg/v1/{Printer.web.js => Printer.js} |   3 +-
 .../src/svg/v1/{Pylon.web.js => Pylon.js}     |   3 +-
 .../svg/v1/{Question.web.js => Question.js}   |   3 +-
 .../src/svg/v1/{Queue.web.js => Queue.js}     |   3 +-
 .../src/svg/v1/{Radar.web.js => Radar.js}     |   3 +-
 .../v1/{RadarCopy2.web.js => RadarCopy2.js}   |   3 +-
 .../src/svg/v1/{Radio.web.js => Radio.js}     |   3 +-
 .../src/svg/v1/{Refresh.web.js => Refresh.js} |   3 +-
 .../src/svg/v1/{Reload.web.js => Reload.js}   |   3 +-
 .../src/svg/v1/{Reply.web.js => Reply.js}     |   3 +-
 .../svg/v1/{ReplyAll.web.js => ReplyAll.js}   |   3 +-
 .../src/svg/v1/{Reports.web.js => Reports.js} |   3 +-
 .../src/svg/v1/{Repost.web.js => Repost.js}   |   3 +-
 .../svg/v1/{SaveDisk.web.js => SaveDisk.js}   |   3 +-
 .../v1/{ScreenFull.web.js => ScreenFull.js}   |   5 +-
 .../src/svg/v1/{Search.web.js => Search.js}   |   3 +-
 .../src/svg/v1/{Send.web.js => Send.js}       |   5 +-
 .../src/svg/v1/{Servers.web.js => Servers.js} |   3 +-
 .../src/svg/v1/{Share.web.js => Share.js}     |   3 +-
 .../src/svg/v1/{Share01.web.js => Share01.js} |   3 +-
 .../svg/v1/{ShareAlt.web.js => ShareAlt.js}   |   3 +-
 .../src/svg/v1/{Shield.web.js => Shield.js}   |   5 +-
 .../{ShoppingCart.web.js => ShoppingCart.js}  |   3 +-
 .../v1/{ShowSidebar.web.js => ShowSidebar.js} |   3 +-
 .../src/svg/v1/{Shuffle.web.js => Shuffle.js} |   5 +-
 .../src/svg/v1/{StandBy.web.js => StandBy.js} |   5 +-
 .../svg/v1/{StarFull.web.js => StarFull.js}   |   5 +-
 packages/loot-design/src/svg/v1/Station.js    |  20 ++
 .../loot-design/src/svg/v1/Station.web.js     |  19 --
 .../{StepBackward.web.js => StepBackward.js}  |   3 +-
 .../v1/{StepForward.web.js => StepForward.js} |   3 +-
 .../v1/{Stethoscope.web.js => Stethoscope.js} |   3 +-
 .../v1/{StoreFront.web.js => StoreFront.js}   |   3 +-
 .../v1/{StrokeWidth.web.js => StrokeWidth.js} |   3 +-
 ...rectoryLeft.web.js => SubdirectoryLeft.js} |   3 +-
 ...ctoryRight.web.js => SubdirectoryRight.js} |   3 +-
 .../svg/v1/{Subtract.web.js => Subtract.js}   |   3 +-
 .../src/svg/v1/{Swap.web.js => Swap.js}       |   3 +-
 .../src/svg/v1/{Tablet.web.js => Tablet.js}   |   3 +-
 .../src/svg/v1/{Tag.web.js => Tag.js}         |   3 +-
 .../src/svg/v1/{Target.web.js => Target.js}   |   3 +-
 .../src/svg/v1/{TextBox.web.js => TextBox.js} |   3 +-
 ...extDecoration.web.js => TextDecoration.js} |   3 +-
 .../v1/{Thermometer.web.js => Thermometer.js} |   3 +-
 .../v1/{ThumbsDown.web.js => ThumbsDown.js}   |   3 +-
 .../svg/v1/{ThumbsUp.web.js => ThumbsUp.js}   |   3 +-
 .../src/svg/v1/{Ticket.web.js => Ticket.js}   |   5 +-
 .../src/svg/v1/{Time.web.js => Time.js}       |   3 +-
 .../src/svg/v1/{Timer.web.js => Timer.js}     |   5 +-
 .../svg/v1/{ToolsCopy.web.js => ToolsCopy.js} |   3 +-
 .../svg/v1/{Translate.web.js => Translate.js} |   5 +-
 .../src/svg/v1/{Trash.web.js => Trash.js}     |   5 +-
 .../src/svg/v1/{Travel.web.js => Travel.js}   |   3 +-
 .../svg/v1/{TravelBus.web.js => TravelBus.js} |   3 +-
 .../svg/v1/{TravelCar.web.js => TravelCar.js} |   3 +-
 .../v1/{TravelCase.web.js => TravelCase.js}   |   3 +-
 ...{TravelTaxiCab.web.js => TravelTaxiCab.js} |   3 +-
 .../v1/{TravelTrain.web.js => TravelTrain.js} |   3 +-
 .../v1/{TravelWalk.web.js => TravelWalk.js}   |   5 +-
 .../src/svg/v1/{Trophy.web.js => Trophy.js}   |   3 +-
 .../src/svg/v1/{Tuning.web.js => Tuning.js}   |   3 +-
 .../src/svg/v1/{Upload.web.js => Upload.js}   |   3 +-
 .../src/svg/v1/{Usb.web.js => Usb.js}         |   3 +-
 .../src/svg/v1/{User.web.js => User.js}       |   3 +-
 .../src/svg/v1/{UserAdd.web.js => UserAdd.js} |   3 +-
 .../svg/v1/{UserGroup.web.js => UserGroup.js} |   3 +-
 ...rSolidCircle.web.js => UserSolidCircle.js} |   3 +-
 ...rSolidSquare.web.js => UserSolidSquare.js} |   3 +-
 .../src/svg/v1/{Vector.web.js => Vector.js}   |   3 +-
 .../v1/{VideoCamera.web.js => VideoCamera.js} |   5 +-
 .../{ViewCarousel.web.js => ViewCarousel.js}  |   3 +-
 .../v1/{ViewColumn.web.js => ViewColumn.js}   |   3 +-
 packages/loot-design/src/svg/v1/ViewHide.js   |  20 ++
 .../loot-design/src/svg/v1/ViewHide.web.js    |  19 --
 .../svg/v1/{ViewList.web.js => ViewList.js}   |   3 +-
 .../svg/v1/{ViewShow.web.js => ViewShow.js}   |   3 +-
 .../svg/v1/{ViewTile.web.js => ViewTile.js}   |   3 +-
 .../v1/{VolumeDown.web.js => VolumeDown.js}   |   5 +-
 .../v1/{VolumeMute.web.js => VolumeMute.js}   |   3 +-
 .../svg/v1/{VolumeOff.web.js => VolumeOff.js} |   5 +-
 packages/loot-design/src/svg/v1/VolumeUp.js   |  20 ++
 .../loot-design/src/svg/v1/VolumeUp.web.js    |  19 --
 .../src/svg/v1/{Wallet.web.js => Wallet.js}   |   3 +-
 .../src/svg/v1/{Watch.web.js => Watch.js}     |   3 +-
 .../src/svg/v1/{Window.web.js => Window.js}   |   3 +-
 .../svg/v1/{WindowNew.web.js => WindowNew.js} |   3 +-
 .../v1/{WindowOpen.web.js => WindowOpen.js}   |   5 +-
 .../src/svg/v1/{Wrench.web.js => Wrench.js}   |   3 +-
 .../src/svg/v1/{YinYang.web.js => YinYang.js} |   3 +-
 .../src/svg/v1/{ZoomIn.web.js => ZoomIn.js}   |   3 +-
 .../src/svg/v1/{ZoomOut.web.js => ZoomOut.js} |   3 +-
 ...{AlertTriangle.web.js => AlertTriangle.js} |   5 +-
 ...ButtonDown1.web.js => ArrowButtonDown1.js} |   7 +-
 ...ButtonLeft1.web.js => ArrowButtonLeft1.js} |   7 +-
 ...ttonRight1.web.js => ArrowButtonRight1.js} |   7 +-
 ...rrowButtonUp1.web.js => ArrowButtonUp1.js} |   7 +-
 ...{ArrowsExpand3.web.js => ArrowsExpand3.js} |   5 +-
 ...{ArrowsShrink3.web.js => ArrowsShrink3.js} |   5 +-
 .../src/svg/v2/ArrowsSynchronize.js           |  22 ++
 .../src/svg/v2/ArrowsSynchronize.web.js       |  21 --
 .../svg/v2/{Calendar.web.js => Calendar.js}   |   5 +-
 packages/loot-design/src/svg/v2/Calendar3.js  |  24 ++
 .../loot-design/src/svg/v2/Calendar3.web.js   |  23 --
 .../src/svg/v2/{Check.web.js => Check.js}     |   5 +-
 .../loot-design/src/svg/v2/CheckCircle1.js    |  20 ++
 .../src/svg/v2/CheckCircle1.web.js            |  19 --
 .../src/svg/v2/CheckCircleHollow.js           |   5 +-
 .../{CloudUnknown.web.js => CloudUnknown.js}  |   7 +-
 .../v2/{CloudUpload.web.js => CloudUpload.js} |   7 +-
 ...mNotesPaper.web.js => CustomNotesPaper.js} |   5 +-
 ...ckBottom.web.js => DownloadThickBottom.js} |   7 +-
 .../v2/{EditSkull1.web.js => EditSkull1.js}   |   5 +-
 .../{FavoriteStar.web.js => FavoriteStar.js}  |   5 +-
 .../src/svg/v2/{Filter2.web.js => Filter2.js} |   5 +-
 .../v2/{Hyperlink2.web.js => Hyperlink2.js}   |   9 +-
 packages/loot-design/src/svg/v2/Hyperlink3.js |  24 ++
 .../loot-design/src/svg/v2/Hyperlink3.web.js  |  23 --
 ...tionCircle.web.js => InformationCircle.js} |   5 +-
 .../src/svg/v2/{Key.web.js => Key.js}         |   5 +-
 ...avigationMenu.web.js => NavigationMenu.js} |   3 +-
 .../v2/{NotesPaper.web.js => NotesPaper.js}   |   5 +-
 ...otesPaperText.web.js => NotesPaperText.js} |   7 +-
 .../src/svg/v2/{Pencil1.web.js => Pencil1.js} |   5 +-
 ...ternate.web.js => PencilWriteAlternate.js} |   7 +-
 .../{RefreshArrow.web.js => RefreshArrow.js}  |   5 +-
 .../src/svg/v2/{Remove.web.js => Remove.js}   |   5 +-
 ...oveAlternate.web.js => RemoveAlternate.js} |   7 +-
 packages/loot-design/src/svg/v2/Search1.js    |  20 ++
 .../loot-design/src/svg/v2/Search1.web.js     |  19 --
 .../loot-design/src/svg/v2/SearchAlternate.js |  20 ++
 .../src/svg/v2/SearchAlternate.web.js         |  19 --
 ...nate.web.js => SettingsSliderAlternate.js} |   5 +-
 .../svg/v2/{Subtract.web.js => Subtract.js}   |   5 +-
 ...hickBottom.web.js => UploadThickBottom.js} |   7 +-
 ...idationCheck.web.js => ValidationCheck.js} |   5 +-
 .../src/svg/v2/check-circle-hollow.svg        |   1 +
 yarn.lock                                     | 274 +++++++++++++++++-
 416 files changed, 1612 insertions(+), 1306 deletions(-)
 create mode 100644 packages/loot-design/src/svg/.gitignore
 delete mode 100644 packages/loot-design/src/svg/Add.web.js
 rename packages/loot-design/src/svg/{v1/AnimatedLoading.web.js => AnimatedLoading.js} (100%)
 delete mode 100644 packages/loot-design/src/svg/Delete.web.js
 delete mode 100644 packages/loot-design/src/svg/ExpandArrow.web.js
 delete mode 100644 packages/loot-design/src/svg/LeftArrow2.web.js
 rename packages/loot-design/src/svg/{v1/Loading.web.js => Loading.js} (100%)
 delete mode 100644 packages/loot-design/src/svg/Math.web.js
 delete mode 100644 packages/loot-design/src/svg/RightArrow2.web.js
 delete mode 100644 packages/loot-design/src/svg/Subtract.web.js
 delete mode 100755 packages/loot-design/src/svg/generate
 delete mode 100755 packages/loot-design/src/svg/generate-new
 create mode 100755 packages/loot-design/src/svg/generate-new.sh
 rename packages/loot-design/src/svg/logo/{Logo.web.js => Logo.js} (60%)
 delete mode 100644 packages/loot-design/src/svg/merge.web.js
 delete mode 100644 packages/loot-design/src/svg/split.web.js
 create mode 100644 packages/loot-design/src/svg/v0/Add.js
 create mode 100644 packages/loot-design/src/svg/v0/Add.svg
 create mode 100644 packages/loot-design/src/svg/v0/Delete.js
 rename packages/loot-design/src/svg/{ => v0}/Delete.svg (93%)
 create mode 100644 packages/loot-design/src/svg/v0/ExpandArrow.js
 rename packages/loot-design/src/svg/{ => v0}/ExpandArrow.svg (100%)
 create mode 100644 packages/loot-design/src/svg/v0/LeftArrow2.js
 rename packages/loot-design/src/svg/{ => v0}/LeftArrow2.svg (100%)
 create mode 100644 packages/loot-design/src/svg/v0/Math.js
 rename packages/loot-design/src/svg/{ => v0}/Math.svg (100%)
 create mode 100644 packages/loot-design/src/svg/v0/Merge.js
 create mode 100644 packages/loot-design/src/svg/v0/RightArrow2.js
 rename packages/loot-design/src/svg/{ => v0}/RightArrow2.svg (100%)
 create mode 100644 packages/loot-design/src/svg/v0/Split.js
 create mode 100644 packages/loot-design/src/svg/v0/Subtract.js
 create mode 100644 packages/loot-design/src/svg/v0/Subtract.svg
 rename packages/loot-design/src/svg/{ => v0}/merge.svg (100%)
 rename packages/loot-design/src/svg/{ => v0}/split.svg (100%)
 rename packages/loot-design/src/svg/v1/{Add.web.js => Add.js} (78%)
 rename packages/loot-design/src/svg/v1/{AddOutline.web.js => AddOutline.js} (83%)
 rename packages/loot-design/src/svg/v1/{AddSolid.web.js => AddSolid.js} (81%)
 rename packages/loot-design/src/svg/v1/{Adjust.web.js => Adjust.js} (80%)
 rename packages/loot-design/src/svg/v1/{Airplane.web.js => Airplane.js} (81%)
 rename packages/loot-design/src/svg/v1/{Album.web.js => Album.js} (81%)
 rename packages/loot-design/src/svg/v1/{AlignCenter.web.js => AlignCenter.js} (81%)
 rename packages/loot-design/src/svg/v1/{AlignJustified.web.js => AlignJustified.js} (82%)
 rename packages/loot-design/src/svg/v1/{AlignLeft.web.js => AlignLeft.js} (81%)
 rename packages/loot-design/src/svg/v1/{AlignRight.web.js => AlignRight.js} (81%)
 rename packages/loot-design/src/svg/v1/{Anchor.web.js => Anchor.js} (86%)
 rename packages/loot-design/src/svg/v1/{Announcement.web.js => Announcement.js} (82%)
 rename packages/loot-design/src/svg/v1/{Apparel.web.js => Apparel.js} (80%)
 rename packages/loot-design/src/svg/v1/{ArrowDown.web.js => ArrowDown.js} (57%)
 rename packages/loot-design/src/svg/v1/{ArrowLeft.web.js => ArrowLeft.js} (66%)
 rename packages/loot-design/src/svg/v1/{ArrowOutlineDown.web.js => ArrowOutlineDown.js} (83%)
 rename packages/loot-design/src/svg/v1/{ArrowOutlineLeft.web.js => ArrowOutlineLeft.js} (83%)
 rename packages/loot-design/src/svg/v1/{ArrowOutlineRight.web.js => ArrowOutlineRight.js} (83%)
 rename packages/loot-design/src/svg/v1/{ArrowOutlineUp.web.js => ArrowOutlineUp.js} (83%)
 rename packages/loot-design/src/svg/v1/{ArrowRight.web.js => ArrowRight.js} (58%)
 rename packages/loot-design/src/svg/v1/{ArrowThickDown.web.js => ArrowThickDown.js} (78%)
 rename packages/loot-design/src/svg/v1/{ArrowThickLeft.web.js => ArrowThickLeft.js} (78%)
 rename packages/loot-design/src/svg/v1/{ArrowThickRight.web.js => ArrowThickRight.js} (78%)
 rename packages/loot-design/src/svg/v1/{ArrowThickUp.web.js => ArrowThickUp.js} (78%)
 rename packages/loot-design/src/svg/v1/{ArrowThinDown.web.js => ArrowThinDown.js} (58%)
 rename packages/loot-design/src/svg/v1/{ArrowThinLeft.web.js => ArrowThinLeft.js} (67%)
 rename packages/loot-design/src/svg/v1/{ArrowThinRight.web.js => ArrowThinRight.js} (58%)
 rename packages/loot-design/src/svg/v1/{ArrowThinUp.web.js => ArrowThinUp.js} (67%)
 rename packages/loot-design/src/svg/v1/{ArrowUp.web.js => ArrowUp.js} (66%)
 create mode 100644 packages/loot-design/src/svg/v1/Artist.js
 delete mode 100644 packages/loot-design/src/svg/v1/Artist.web.js
 rename packages/loot-design/src/svg/v1/{AtSymbol.web.js => AtSymbol.js} (85%)
 rename packages/loot-design/src/svg/v1/{Attachment.web.js => Attachment.js} (83%)
 rename packages/loot-design/src/svg/v1/{Backspace.web.js => Backspace.js} (70%)
 rename packages/loot-design/src/svg/v1/{Backward.web.js => Backward.js} (78%)
 rename packages/loot-design/src/svg/v1/{BackwardStep.web.js => BackwardStep.js} (78%)
 rename packages/loot-design/src/svg/v1/{Badge.web.js => Badge.js} (83%)
 rename packages/loot-design/src/svg/v1/{BatteryFull.web.js => BatteryFull.js} (83%)
 rename packages/loot-design/src/svg/v1/{BatteryHalf.web.js => BatteryHalf.js} (83%)
 rename packages/loot-design/src/svg/v1/{BatteryLow.web.js => BatteryLow.js} (82%)
 rename packages/loot-design/src/svg/v1/{Beverage.web.js => Beverage.js} (81%)
 rename packages/loot-design/src/svg/v1/{Block.web.js => Block.js} (83%)
 rename packages/loot-design/src/svg/v1/{Bluetooth.web.js => Bluetooth.js} (63%)
 rename packages/loot-design/src/svg/v1/{Bolt.web.js => Bolt.js} (78%)
 rename packages/loot-design/src/svg/v1/{BookReference.web.js => BookReference.js} (84%)
 rename packages/loot-design/src/svg/v1/{Bookmark.web.js => Bookmark.js} (80%)
 rename packages/loot-design/src/svg/v1/{BookmarkCopy2.web.js => BookmarkCopy2.js} (78%)
 rename packages/loot-design/src/svg/v1/{BookmarkCopy3.web.js => BookmarkCopy3.js} (79%)
 rename packages/loot-design/src/svg/v1/{BookmarkOutline.web.js => BookmarkOutline.js} (82%)
 rename packages/loot-design/src/svg/v1/{BookmarkOutlineAdd.web.js => BookmarkOutlineAdd.js} (83%)
 rename packages/loot-design/src/svg/v1/{BorderAll.web.js => BorderAll.js} (81%)
 rename packages/loot-design/src/svg/v1/{BorderBottom.web.js => BorderBottom.js} (87%)
 rename packages/loot-design/src/svg/v1/{BorderHorizontal.web.js => BorderHorizontal.js} (87%)
 rename packages/loot-design/src/svg/v1/{BorderInner.web.js => BorderInner.js} (86%)
 rename packages/loot-design/src/svg/v1/{BorderLeft.web.js => BorderLeft.js} (87%)
 rename packages/loot-design/src/svg/v1/{BorderNone.web.js => BorderNone.js} (88%)
 rename packages/loot-design/src/svg/v1/{BorderOuter.web.js => BorderOuter.js} (83%)
 rename packages/loot-design/src/svg/v1/{BorderRight.web.js => BorderRight.js} (87%)
 rename packages/loot-design/src/svg/v1/{BorderTop.web.js => BorderTop.js} (87%)
 rename packages/loot-design/src/svg/v1/{BorderVertical.web.js => BorderVertical.js} (87%)
 rename packages/loot-design/src/svg/v1/{Box.web.js => Box.js} (82%)
 rename packages/loot-design/src/svg/v1/{BrightnessDown.web.js => BrightnessDown.js} (89%)
 rename packages/loot-design/src/svg/v1/{BrightnessUp.web.js => BrightnessUp.js} (91%)
 rename packages/loot-design/src/svg/v1/{BrowserWindow.web.js => BrowserWindow.js} (82%)
 rename packages/loot-design/src/svg/v1/{BrowserWindowNew.web.js => BrowserWindowNew.js} (84%)
 rename packages/loot-design/src/svg/v1/{BrowserWindowOpen.web.js => BrowserWindowOpen.js} (72%)
 rename packages/loot-design/src/svg/v1/{Bug.web.js => Bug.js} (81%)
 create mode 100644 packages/loot-design/src/svg/v1/Buoy.js
 delete mode 100644 packages/loot-design/src/svg/v1/Buoy.web.js
 rename packages/loot-design/src/svg/v1/{Calculator.web.js => Calculator.js} (86%)
 rename packages/loot-design/src/svg/v1/{Calendar.web.js => Calendar.js} (86%)
 rename packages/loot-design/src/svg/v1/{Camera.web.js => Camera.js} (84%)
 rename packages/loot-design/src/svg/v1/{Chart.web.js => Chart.js} (87%)
 rename packages/loot-design/src/svg/v1/{ChartBar.web.js => ChartBar.js} (80%)
 rename packages/loot-design/src/svg/v1/{ChartPie.web.js => ChartPie.js} (81%)
 rename packages/loot-design/src/svg/v1/{ChatBubbleDots.web.js => ChatBubbleDots.js} (54%)
 rename packages/loot-design/src/svg/v1/{CheckAlternative.web.js => CheckAlternative.js} (63%)
 rename packages/loot-design/src/svg/v1/{Checkmark.web.js => Checkmark.js} (58%)
 rename packages/loot-design/src/svg/v1/{CheckmarkOutline.web.js => CheckmarkOutline.js} (75%)
 rename packages/loot-design/src/svg/v1/{CheveronDown.web.js => CheveronDown.js} (60%)
 rename packages/loot-design/src/svg/v1/{CheveronLeft.web.js => CheveronLeft.js} (65%)
 rename packages/loot-design/src/svg/v1/{CheveronOutlineDown.web.js => CheveronOutlineDown.js} (85%)
 rename packages/loot-design/src/svg/v1/{CheveronOutlineLeft.web.js => CheveronOutlineLeft.js} (71%)
 rename packages/loot-design/src/svg/v1/{CheveronOutlineRight.web.js => CheveronOutlineRight.js} (85%)
 rename packages/loot-design/src/svg/v1/{CheveronOutlineUp.web.js => CheveronOutlineUp.js} (85%)
 rename packages/loot-design/src/svg/v1/{CheveronRight.web.js => CheveronRight.js} (59%)
 rename packages/loot-design/src/svg/v1/{CheveronUp.web.js => CheveronUp.js} (65%)
 rename packages/loot-design/src/svg/v1/{Clipboard.web.js => Clipboard.js} (85%)
 rename packages/loot-design/src/svg/v1/{Close.web.js => Close.js} (70%)
 rename packages/loot-design/src/svg/v1/{CloseOutline.web.js => CloseOutline.js} (87%)
 rename packages/loot-design/src/svg/v1/{CloseSolid.web.js => CloseSolid.js} (85%)
 rename packages/loot-design/src/svg/v1/{Cloud.web.js => Cloud.js} (82%)
 rename packages/loot-design/src/svg/v1/{CloudCheck.web.js => CloudCheck.js} (86%)
 rename packages/loot-design/src/svg/v1/{CloudDownload.web.js => CloudDownload.js} (85%)
 rename packages/loot-design/src/svg/v1/{CloudUpload.web.js => CloudUpload.js} (84%)
 rename packages/loot-design/src/svg/v1/{CloudWarning.web.js => CloudWarning.js} (79%)
 rename packages/loot-design/src/svg/v1/{Code.web.js => Code.js} (50%)
 rename packages/loot-design/src/svg/v1/{Coffee.web.js => Coffee.js} (83%)
 rename packages/loot-design/src/svg/v1/{Cog.web.js => Cog.js} (80%)
 rename packages/loot-design/src/svg/v1/{ColorPalette.web.js => ColorPalette.js} (87%)
 rename packages/loot-design/src/svg/v1/{Compose.web.js => Compose.js} (66%)
 rename packages/loot-design/src/svg/v1/{ComputerDesktop.web.js => ComputerDesktop.js} (83%)
 rename packages/loot-design/src/svg/v1/{ComputerLaptop.web.js => ComputerLaptop.js} (83%)
 rename packages/loot-design/src/svg/v1/{Conversation.web.js => Conversation.js} (85%)
 rename packages/loot-design/src/svg/v1/{Copy.web.js => Copy.js} (84%)
 rename packages/loot-design/src/svg/v1/{CreditCard.web.js => CreditCard.js} (83%)
 rename packages/loot-design/src/svg/v1/{CurrencyDollar.web.js => CurrencyDollar.js} (84%)
 rename packages/loot-design/src/svg/v1/{Dashboard.web.js => Dashboard.js} (71%)
 rename packages/loot-design/src/svg/v1/{DateAdd.web.js => DateAdd.js} (84%)
 rename packages/loot-design/src/svg/v1/{DialPad.web.js => DialPad.js} (88%)
 rename packages/loot-design/src/svg/v1/{Directions.web.js => Directions.js} (65%)
 rename packages/loot-design/src/svg/v1/{Document.web.js => Document.js} (80%)
 rename packages/loot-design/src/svg/v1/{DocumentAdd.web.js => DocumentAdd.js} (82%)
 rename packages/loot-design/src/svg/v1/{DotsHorizontalDouble.web.js => DotsHorizontalDouble.js} (82%)
 rename packages/loot-design/src/svg/v1/{DotsHorizontalTriple.web.js => DotsHorizontalTriple.js} (83%)
 rename packages/loot-design/src/svg/v1/{Download.web.js => Download.js} (78%)
 rename packages/loot-design/src/svg/v1/{Duplicate.web.js => Duplicate.js} (85%)
 rename packages/loot-design/src/svg/v1/{EditCopy.web.js => EditCopy.js} (84%)
 rename packages/loot-design/src/svg/v1/{EditCrop.web.js => EditCrop.js} (82%)
 rename packages/loot-design/src/svg/v1/{EditCut.web.js => EditCut.js} (77%)
 rename packages/loot-design/src/svg/v1/{EditPencil.web.js => EditPencil.js} (64%)
 rename packages/loot-design/src/svg/v1/{Education.web.js => Education.js} (56%)
 rename packages/loot-design/src/svg/v1/{Envelope.web.js => Envelope.js} (85%)
 rename packages/loot-design/src/svg/v1/{Equals.web.js => Equals.js} (85%)
 rename packages/loot-design/src/svg/v1/{ExclamationOutline.web.js => ExclamationOutline.js} (84%)
 rename packages/loot-design/src/svg/v1/{ExclamationSolid.web.js => ExclamationSolid.js} (82%)
 rename packages/loot-design/src/svg/v1/{Explore.web.js => Explore.js} (83%)
 rename packages/loot-design/src/svg/v1/{Factory.web.js => Factory.js} (80%)
 rename packages/loot-design/src/svg/v1/{FastForward.web.js => FastForward.js} (59%)
 rename packages/loot-design/src/svg/v1/{FastRewind.web.js => FastRewind.js} (78%)
 rename packages/loot-design/src/svg/v1/{FileDouble.web.js => FileDouble.js} (69%)
 rename packages/loot-design/src/svg/v1/{Film.web.js => Film.js} (85%)
 rename packages/loot-design/src/svg/v1/{Filter.web.js => Filter.js} (58%)
 rename packages/loot-design/src/svg/v1/{Flag.web.js => Flag.js} (80%)
 rename packages/loot-design/src/svg/v1/{Flashlight.web.js => Flashlight.js} (83%)
 rename packages/loot-design/src/svg/v1/{Folder.web.js => Folder.js} (81%)
 rename packages/loot-design/src/svg/v1/{FolderOutline.web.js => FolderOutline.js} (82%)
 rename packages/loot-design/src/svg/v1/{FolderOutlineAdd.web.js => FolderOutlineAdd.js} (84%)
 rename packages/loot-design/src/svg/v1/{FormatBold.web.js => FormatBold.js} (83%)
 rename packages/loot-design/src/svg/v1/{FormatFontSize.web.js => FormatFontSize.js} (81%)
 rename packages/loot-design/src/svg/v1/{FormatItalic.web.js => FormatItalic.js} (80%)
 rename packages/loot-design/src/svg/v1/{FormatTextSize.web.js => FormatTextSize.js} (81%)
 rename packages/loot-design/src/svg/v1/{FormatUnderline.web.js => FormatUnderline.js} (81%)
 rename packages/loot-design/src/svg/v1/{Forward.web.js => Forward.js} (58%)
 rename packages/loot-design/src/svg/v1/{ForwardStep.web.js => ForwardStep.js} (78%)
 rename packages/loot-design/src/svg/v1/{Gift.web.js => Gift.js} (85%)
 rename packages/loot-design/src/svg/v1/{Globe.web.js => Globe.js} (87%)
 rename packages/loot-design/src/svg/v1/{HandStop.web.js => HandStop.js} (85%)
 rename packages/loot-design/src/svg/v1/{HardDrive.web.js => HardDrive.js} (88%)
 rename packages/loot-design/src/svg/v1/{Headphones.web.js => Headphones.js} (84%)
 rename packages/loot-design/src/svg/v1/{Heart.web.js => Heart.js} (56%)
 rename packages/loot-design/src/svg/v1/{Home.web.js => Home.js} (78%)
 rename packages/loot-design/src/svg/v1/{Hot.web.js => Hot.js} (82%)
 rename packages/loot-design/src/svg/v1/{HourGlass.web.js => HourGlass.js} (84%)
 rename packages/loot-design/src/svg/v1/{Inbox.web.js => Inbox.js} (83%)
 rename packages/loot-design/src/svg/v1/{InboxCheck.web.js => InboxCheck.js} (84%)
 rename packages/loot-design/src/svg/v1/{InboxDownload.web.js => InboxDownload.js} (84%)
 rename packages/loot-design/src/svg/v1/{InboxFull.web.js => InboxFull.js} (85%)
 rename packages/loot-design/src/svg/v1/{IndentDecrease.web.js => IndentDecrease.js} (82%)
 rename packages/loot-design/src/svg/v1/{IndentIncrease.web.js => IndentIncrease.js} (82%)
 rename packages/loot-design/src/svg/v1/{InformationOutline.web.js => InformationOutline.js} (85%)
 rename packages/loot-design/src/svg/v1/{InformationSolid.web.js => InformationSolid.js} (82%)
 rename packages/loot-design/src/svg/v1/{Key.web.js => Key.js} (67%)
 rename packages/loot-design/src/svg/v1/{Keyboard.web.js => Keyboard.js} (87%)
 rename packages/loot-design/src/svg/v1/{Layers.web.js => Layers.js} (64%)
 rename packages/loot-design/src/svg/v1/{Library.web.js => Library.js} (66%)
 rename packages/loot-design/src/svg/v1/{LightBulb.web.js => LightBulb.js} (83%)
 rename packages/loot-design/src/svg/v1/{Link.web.js => Link.js} (86%)
 rename packages/loot-design/src/svg/v1/{List.web.js => List.js} (81%)
 rename packages/loot-design/src/svg/v1/{ListAdd.web.js => ListAdd.js} (82%)
 rename packages/loot-design/src/svg/v1/{ListBullet.web.js => ListBullet.js} (82%)
 rename packages/loot-design/src/svg/v1/{LoadBalancer.web.js => LoadBalancer.js} (83%)
 rename packages/loot-design/src/svg/v1/{Location.web.js => Location.js} (82%)
 rename packages/loot-design/src/svg/v1/{LocationCurrent.web.js => LocationCurrent.js} (61%)
 rename packages/loot-design/src/svg/v1/{LocationFood.web.js => LocationFood.js} (85%)
 rename packages/loot-design/src/svg/v1/{LocationGasStation.web.js => LocationGasStation.js} (85%)
 rename packages/loot-design/src/svg/v1/{LocationHotel.web.js => LocationHotel.js} (82%)
 rename packages/loot-design/src/svg/v1/{LocationMarina.web.js => LocationMarina.js} (84%)
 rename packages/loot-design/src/svg/v1/{LocationPark.web.js => LocationPark.js} (86%)
 rename packages/loot-design/src/svg/v1/{LocationRestroom.web.js => LocationRestroom.js} (86%)
 rename packages/loot-design/src/svg/v1/{LocationShopping.web.js => LocationShopping.js} (83%)
 rename packages/loot-design/src/svg/v1/{LockClosed.web.js => LockClosed.js} (84%)
 rename packages/loot-design/src/svg/v1/{LockOpen.web.js => LockOpen.js} (84%)
 rename packages/loot-design/src/svg/v1/{Map.web.js => Map.js} (62%)
 rename packages/loot-design/src/svg/v1/{Menu.web.js => Menu.js} (78%)
 rename packages/loot-design/src/svg/v1/{Mic.web.js => Mic.js} (82%)
 rename packages/loot-design/src/svg/v1/{MinusOutline.web.js => MinusOutline.js} (82%)
 rename packages/loot-design/src/svg/v1/{MinusSolid.web.js => MinusSolid.js} (80%)
 rename packages/loot-design/src/svg/v1/{MobileDevices.web.js => MobileDevices.js} (86%)
 rename packages/loot-design/src/svg/v1/{MoneyBag.web.js => MoneyBag.js} (72%)
 rename packages/loot-design/src/svg/v1/{MoodHappyOutline.web.js => MoodHappyOutline.js} (86%)
 rename packages/loot-design/src/svg/v1/{MoodHappySolid.web.js => MoodHappySolid.js} (85%)
 rename packages/loot-design/src/svg/v1/{MoodNeutralOutline.web.js => MoodNeutralOutline.js} (86%)
 rename packages/loot-design/src/svg/v1/{MoodNeutralSolid.web.js => MoodNeutralSolid.js} (85%)
 rename packages/loot-design/src/svg/v1/{MoodSadOutline.web.js => MoodSadOutline.js} (86%)
 rename packages/loot-design/src/svg/v1/{MoodSadSolid.web.js => MoodSadSolid.js} (85%)
 rename packages/loot-design/src/svg/v1/{Mouse.web.js => Mouse.js} (81%)
 rename packages/loot-design/src/svg/v1/{MoveBack.web.js => MoveBack.js} (77%)
 rename packages/loot-design/src/svg/v1/{MusicAlbum.web.js => MusicAlbum.js} (82%)
 create mode 100644 packages/loot-design/src/svg/v1/MusicArtist.js
 delete mode 100644 packages/loot-design/src/svg/v1/MusicArtist.web.js
 rename packages/loot-design/src/svg/v1/{MusicNotes.web.js => MusicNotes.js} (84%)
 rename packages/loot-design/src/svg/v1/{MusicPlaylist.web.js => MusicPlaylist.js} (84%)
 rename packages/loot-design/src/svg/v1/{NavigationMore.web.js => NavigationMore.js} (83%)
 rename packages/loot-design/src/svg/v1/{Network.web.js => Network.js} (92%)
 rename packages/loot-design/src/svg/v1/{NewsPaper.web.js => NewsPaper.js} (85%)
 rename packages/loot-design/src/svg/v1/{Notification.web.js => Notification.js} (83%)
 rename packages/loot-design/src/svg/v1/{Notifications.web.js => Notifications.js} (83%)
 rename packages/loot-design/src/svg/v1/{NotificationsOutline.web.js => NotificationsOutline.js} (84%)
 rename packages/loot-design/src/svg/v1/{Paste.web.js => Paste.js} (87%)
 rename packages/loot-design/src/svg/v1/{Pause.web.js => Pause.js} (77%)
 rename packages/loot-design/src/svg/v1/{PauseOutline.web.js => PauseOutline.js} (84%)
 rename packages/loot-design/src/svg/v1/{PauseSolid.web.js => PauseSolid.js} (82%)
 rename packages/loot-design/src/svg/v1/{PenTool.web.js => PenTool.js} (81%)
 rename packages/loot-design/src/svg/v1/{PencilWrite.web.js => PencilWrite.js} (86%)
 rename packages/loot-design/src/svg/v1/{Phone.web.js => Phone.js} (85%)
 rename packages/loot-design/src/svg/v1/{Photo.web.js => Photo.js} (66%)
 rename packages/loot-design/src/svg/v1/{PhpElephant.web.js => PhpElephant.js} (85%)
 rename packages/loot-design/src/svg/v1/{PiggyBank.web.js => PiggyBank.js} (79%)
 rename packages/loot-design/src/svg/v1/{Pin.web.js => Pin.js} (80%)
 rename packages/loot-design/src/svg/v1/{Play.web.js => Play.js} (59%)
 rename packages/loot-design/src/svg/v1/{PlayOutline.web.js => PlayOutline.js} (84%)
 rename packages/loot-design/src/svg/v1/{Playlist.web.js => Playlist.js} (84%)
 rename packages/loot-design/src/svg/v1/{Plugin.web.js => Plugin.js} (86%)
 rename packages/loot-design/src/svg/v1/{Portfolio.web.js => Portfolio.js} (84%)
 rename packages/loot-design/src/svg/v1/{Printer.web.js => Printer.js} (81%)
 rename packages/loot-design/src/svg/v1/{Pylon.web.js => Pylon.js} (82%)
 rename packages/loot-design/src/svg/v1/{Question.web.js => Question.js} (85%)
 rename packages/loot-design/src/svg/v1/{Queue.web.js => Queue.js} (79%)
 rename packages/loot-design/src/svg/v1/{Radar.web.js => Radar.js} (86%)
 rename packages/loot-design/src/svg/v1/{RadarCopy2.web.js => RadarCopy2.js} (86%)
 rename packages/loot-design/src/svg/v1/{Radio.web.js => Radio.js} (87%)
 rename packages/loot-design/src/svg/v1/{Refresh.web.js => Refresh.js} (84%)
 rename packages/loot-design/src/svg/v1/{Reload.web.js => Reload.js} (81%)
 rename packages/loot-design/src/svg/v1/{Reply.web.js => Reply.js} (80%)
 rename packages/loot-design/src/svg/v1/{ReplyAll.web.js => ReplyAll.js} (82%)
 rename packages/loot-design/src/svg/v1/{Reports.web.js => Reports.js} (85%)
 rename packages/loot-design/src/svg/v1/{Repost.web.js => Repost.js} (82%)
 rename packages/loot-design/src/svg/v1/{SaveDisk.web.js => SaveDisk.js} (82%)
 rename packages/loot-design/src/svg/v1/{ScreenFull.web.js => ScreenFull.js} (51%)
 rename packages/loot-design/src/svg/v1/{Search.web.js => Search.js} (82%)
 rename packages/loot-design/src/svg/v1/{Send.web.js => Send.js} (58%)
 rename packages/loot-design/src/svg/v1/{Servers.web.js => Servers.js} (88%)
 rename packages/loot-design/src/svg/v1/{Share.web.js => Share.js} (85%)
 rename packages/loot-design/src/svg/v1/{Share01.web.js => Share01.js} (85%)
 rename packages/loot-design/src/svg/v1/{ShareAlt.web.js => ShareAlt.js} (85%)
 rename packages/loot-design/src/svg/v1/{Shield.web.js => Shield.js} (74%)
 rename packages/loot-design/src/svg/v1/{ShoppingCart.web.js => ShoppingCart.js} (84%)
 rename packages/loot-design/src/svg/v1/{ShowSidebar.web.js => ShowSidebar.js} (84%)
 rename packages/loot-design/src/svg/v1/{Shuffle.web.js => Shuffle.js} (78%)
 rename packages/loot-design/src/svg/v1/{StandBy.web.js => StandBy.js} (69%)
 rename packages/loot-design/src/svg/v1/{StarFull.web.js => StarFull.js} (55%)
 create mode 100644 packages/loot-design/src/svg/v1/Station.js
 delete mode 100644 packages/loot-design/src/svg/v1/Station.web.js
 rename packages/loot-design/src/svg/v1/{StepBackward.web.js => StepBackward.js} (78%)
 rename packages/loot-design/src/svg/v1/{StepForward.web.js => StepForward.js} (78%)
 rename packages/loot-design/src/svg/v1/{Stethoscope.web.js => Stethoscope.js} (87%)
 rename packages/loot-design/src/svg/v1/{StoreFront.web.js => StoreFront.js} (88%)
 rename packages/loot-design/src/svg/v1/{StrokeWidth.web.js => StrokeWidth.js} (81%)
 rename packages/loot-design/src/svg/v1/{SubdirectoryLeft.web.js => SubdirectoryLeft.js} (79%)
 rename packages/loot-design/src/svg/v1/{SubdirectoryRight.web.js => SubdirectoryRight.js} (79%)
 rename packages/loot-design/src/svg/v1/{Subtract.web.js => Subtract.js} (82%)
 rename packages/loot-design/src/svg/v1/{Swap.web.js => Swap.js} (83%)
 rename packages/loot-design/src/svg/v1/{Tablet.web.js => Tablet.js} (83%)
 rename packages/loot-design/src/svg/v1/{Tag.web.js => Tag.js} (81%)
 rename packages/loot-design/src/svg/v1/{Target.web.js => Target.js} (84%)
 rename packages/loot-design/src/svg/v1/{TextBox.web.js => TextBox.js} (86%)
 rename packages/loot-design/src/svg/v1/{TextDecoration.web.js => TextDecoration.js} (81%)
 rename packages/loot-design/src/svg/v1/{Thermometer.web.js => Thermometer.js} (84%)
 rename packages/loot-design/src/svg/v1/{ThumbsDown.web.js => ThumbsDown.js} (83%)
 rename packages/loot-design/src/svg/v1/{ThumbsUp.web.js => ThumbsUp.js} (83%)
 rename packages/loot-design/src/svg/v1/{Ticket.web.js => Ticket.js} (61%)
 rename packages/loot-design/src/svg/v1/{Time.web.js => Time.js} (83%)
 rename packages/loot-design/src/svg/v1/{Timer.web.js => Timer.js} (72%)
 rename packages/loot-design/src/svg/v1/{ToolsCopy.web.js => ToolsCopy.js} (82%)
 rename packages/loot-design/src/svg/v1/{Translate.web.js => Translate.js} (76%)
 rename packages/loot-design/src/svg/v1/{Trash.web.js => Trash.js} (64%)
 rename packages/loot-design/src/svg/v1/{Travel.web.js => Travel.js} (84%)
 rename packages/loot-design/src/svg/v1/{TravelBus.web.js => TravelBus.js} (87%)
 rename packages/loot-design/src/svg/v1/{TravelCar.web.js => TravelCar.js} (87%)
 rename packages/loot-design/src/svg/v1/{TravelCase.web.js => TravelCase.js} (84%)
 rename packages/loot-design/src/svg/v1/{TravelTaxiCab.web.js => TravelTaxiCab.js} (88%)
 rename packages/loot-design/src/svg/v1/{TravelTrain.web.js => TravelTrain.js} (86%)
 rename packages/loot-design/src/svg/v1/{TravelWalk.web.js => TravelWalk.js} (74%)
 rename packages/loot-design/src/svg/v1/{Trophy.web.js => Trophy.js} (84%)
 rename packages/loot-design/src/svg/v1/{Tuning.web.js => Tuning.js} (83%)
 rename packages/loot-design/src/svg/v1/{Upload.web.js => Upload.js} (78%)
 rename packages/loot-design/src/svg/v1/{Usb.web.js => Usb.js} (83%)
 rename packages/loot-design/src/svg/v1/{User.web.js => User.js} (82%)
 rename packages/loot-design/src/svg/v1/{UserAdd.web.js => UserAdd.js} (84%)
 rename packages/loot-design/src/svg/v1/{UserGroup.web.js => UserGroup.js} (87%)
 rename packages/loot-design/src/svg/v1/{UserSolidCircle.web.js => UserSolidCircle.js} (84%)
 rename packages/loot-design/src/svg/v1/{UserSolidSquare.web.js => UserSolidSquare.js} (85%)
 rename packages/loot-design/src/svg/v1/{Vector.web.js => Vector.js} (85%)
 rename packages/loot-design/src/svg/v1/{VideoCamera.web.js => VideoCamera.js} (71%)
 rename packages/loot-design/src/svg/v1/{ViewCarousel.web.js => ViewCarousel.js} (82%)
 rename packages/loot-design/src/svg/v1/{ViewColumn.web.js => ViewColumn.js} (81%)
 create mode 100644 packages/loot-design/src/svg/v1/ViewHide.js
 delete mode 100644 packages/loot-design/src/svg/v1/ViewHide.web.js
 rename packages/loot-design/src/svg/v1/{ViewList.web.js => ViewList.js} (80%)
 rename packages/loot-design/src/svg/v1/{ViewShow.web.js => ViewShow.js} (83%)
 rename packages/loot-design/src/svg/v1/{ViewTile.web.js => ViewTile.js} (83%)
 rename packages/loot-design/src/svg/v1/{VolumeDown.web.js => VolumeDown.js} (57%)
 rename packages/loot-design/src/svg/v1/{VolumeMute.web.js => VolumeMute.js} (77%)
 rename packages/loot-design/src/svg/v1/{VolumeOff.web.js => VolumeOff.js} (50%)
 create mode 100644 packages/loot-design/src/svg/v1/VolumeUp.js
 delete mode 100644 packages/loot-design/src/svg/v1/VolumeUp.web.js
 rename packages/loot-design/src/svg/v1/{Wallet.web.js => Wallet.js} (84%)
 rename packages/loot-design/src/svg/v1/{Watch.web.js => Watch.js} (84%)
 rename packages/loot-design/src/svg/v1/{Window.web.js => Window.js} (82%)
 rename packages/loot-design/src/svg/v1/{WindowNew.web.js => WindowNew.js} (83%)
 rename packages/loot-design/src/svg/v1/{WindowOpen.web.js => WindowOpen.js} (71%)
 rename packages/loot-design/src/svg/v1/{Wrench.web.js => Wrench.js} (82%)
 rename packages/loot-design/src/svg/v1/{YinYang.web.js => YinYang.js} (85%)
 rename packages/loot-design/src/svg/v1/{ZoomIn.web.js => ZoomIn.js} (84%)
 rename packages/loot-design/src/svg/v1/{ZoomOut.web.js => ZoomOut.js} (84%)
 rename packages/loot-design/src/svg/v2/{AlertTriangle.web.js => AlertTriangle.js} (50%)
 rename packages/loot-design/src/svg/v2/{ArrowButtonDown1.web.js => ArrowButtonDown1.js} (89%)
 rename packages/loot-design/src/svg/v2/{ArrowButtonLeft1.web.js => ArrowButtonLeft1.js} (81%)
 rename packages/loot-design/src/svg/v2/{ArrowButtonRight1.web.js => ArrowButtonRight1.js} (88%)
 rename packages/loot-design/src/svg/v2/{ArrowButtonUp1.web.js => ArrowButtonUp1.js} (80%)
 rename packages/loot-design/src/svg/v2/{ArrowsExpand3.web.js => ArrowsExpand3.js} (80%)
 rename packages/loot-design/src/svg/v2/{ArrowsShrink3.web.js => ArrowsShrink3.js} (78%)
 create mode 100644 packages/loot-design/src/svg/v2/ArrowsSynchronize.js
 delete mode 100644 packages/loot-design/src/svg/v2/ArrowsSynchronize.web.js
 rename packages/loot-design/src/svg/v2/{Calendar.web.js => Calendar.js} (71%)
 create mode 100644 packages/loot-design/src/svg/v2/Calendar3.js
 delete mode 100644 packages/loot-design/src/svg/v2/Calendar3.web.js
 rename packages/loot-design/src/svg/v2/{Check.web.js => Check.js} (81%)
 create mode 100644 packages/loot-design/src/svg/v2/CheckCircle1.js
 delete mode 100644 packages/loot-design/src/svg/v2/CheckCircle1.web.js
 rename packages/loot-design/src/svg/v2/{CloudUnknown.web.js => CloudUnknown.js} (79%)
 rename packages/loot-design/src/svg/v2/{CloudUpload.web.js => CloudUpload.js} (88%)
 rename packages/loot-design/src/svg/v2/{CustomNotesPaper.web.js => CustomNotesPaper.js} (68%)
 rename packages/loot-design/src/svg/v2/{DownloadThickBottom.web.js => DownloadThickBottom.js} (82%)
 rename packages/loot-design/src/svg/v2/{EditSkull1.web.js => EditSkull1.js} (66%)
 rename packages/loot-design/src/svg/v2/{FavoriteStar.web.js => FavoriteStar.js} (79%)
 rename packages/loot-design/src/svg/v2/{Filter2.web.js => Filter2.js} (71%)
 rename packages/loot-design/src/svg/v2/{Hyperlink2.web.js => Hyperlink2.js} (59%)
 create mode 100644 packages/loot-design/src/svg/v2/Hyperlink3.js
 delete mode 100644 packages/loot-design/src/svg/v2/Hyperlink3.web.js
 rename packages/loot-design/src/svg/v2/{InformationCircle.web.js => InformationCircle.js} (64%)
 rename packages/loot-design/src/svg/v2/{Key.web.js => Key.js} (59%)
 rename packages/loot-design/src/svg/v2/{NavigationMenu.web.js => NavigationMenu.js} (89%)
 rename packages/loot-design/src/svg/v2/{NotesPaper.web.js => NotesPaper.js} (68%)
 rename packages/loot-design/src/svg/v2/{NotesPaperText.web.js => NotesPaperText.js} (66%)
 rename packages/loot-design/src/svg/v2/{Pencil1.web.js => Pencil1.js} (66%)
 rename packages/loot-design/src/svg/v2/{PencilWriteAlternate.web.js => PencilWriteAlternate.js} (71%)
 rename packages/loot-design/src/svg/v2/{RefreshArrow.web.js => RefreshArrow.js} (83%)
 rename packages/loot-design/src/svg/v2/{Remove.web.js => Remove.js} (83%)
 rename packages/loot-design/src/svg/v2/{RemoveAlternate.web.js => RemoveAlternate.js} (71%)
 create mode 100644 packages/loot-design/src/svg/v2/Search1.js
 delete mode 100644 packages/loot-design/src/svg/v2/Search1.web.js
 create mode 100644 packages/loot-design/src/svg/v2/SearchAlternate.js
 delete mode 100644 packages/loot-design/src/svg/v2/SearchAlternate.web.js
 rename packages/loot-design/src/svg/v2/{SettingsSliderAlternate.web.js => SettingsSliderAlternate.js} (60%)
 rename packages/loot-design/src/svg/v2/{Subtract.web.js => Subtract.js} (63%)
 rename packages/loot-design/src/svg/v2/{UploadThickBottom.web.js => UploadThickBottom.js} (82%)
 rename packages/loot-design/src/svg/v2/{ValidationCheck.web.js => ValidationCheck.js} (81%)
 create mode 100644 packages/loot-design/src/svg/v2/check-circle-hollow.svg

diff --git a/packages/desktop-client/src/components/AppBackground.js b/packages/desktop-client/src/components/AppBackground.js
index ba8a1f1b9..254b70812 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 93e843c1d..9df30b76d 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 d16e505b4..0d6d1fff3 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 044d07b08..9acc4f018 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 e835f27d5..5e9a9fc94 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 0d70654b9..bc5f91832 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 aa5eef5e0..c3030af36 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 d283cda0d..fb1ea6c74 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 932f099b8..e30e1ff24 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 764b3b900..a52868a16 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 221807935..35dc5d242 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 c83696f0d..737c115ea 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 f9a8c3ea3..ecdf50e0c 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 4b6225f01..cbabd2d63 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 76f69cf09..957de87db 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 b8e540129..e0ac19568 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 5affaa8aa..05b354ef9 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 d7f938bfe..7097e4a25 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 8f2dbecc4..705037df5 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 000000000..012a3cd68
--- /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 6c27488c3..1e6bd5933 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 64e6b2f0f..000000000
--- 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 e54c1ba58..000000000
--- 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 d3eae8f52..000000000
--- 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 7485a72d5..000000000
--- 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 4422943f5..000000000
--- 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 276ab93f5..000000000
--- 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 3d1365591..000000000
--- 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 2c7923066..000000000
--- 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 920a0502d..000000000
--- 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 000000000..1cf7a74a6
--- /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 c8f2f69b5..3b5c1231d 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 53daeb434..000000000
--- 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 f9959e261..000000000
--- 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 000000000..721bd7754
--- /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 000000000..1d7a49568
--- /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 000000000..7dc6fb047
--- /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 38e53c844..5c4d29bae 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 000000000..b579e333a
--- /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 000000000..6e406cbdb
--- /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 000000000..50d4a066a
--- /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 000000000..f122eabc3
--- /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 000000000..b641cba2d
--- /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 000000000..6147dbc94
--- /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 000000000..d8878e99a
--- /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 000000000..ac706252c
--- /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 b0ade557f..8071b07f3 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 acb68e158..876b0ad12 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 81d2aa417..91f9dcddb 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 4017e90aa..dda72f91c 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 1da92175c..61e9d547e 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 debd65dac..c74720b93 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 501f8752f..8ca1481af 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 dc9d0e0f6..2d67d23a4 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 31cf05ea3..9319a67ac 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 80c633d0f..010485820 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 9fb1ccd4b..0dfce9dc2 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 c8c837cbd..ccb602b7f 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 1846a7201..e1215d379 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 58072fb25..3c62d336d 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 af94cd916..ec6a9f71c 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 aba85265a..8959ea87e 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 9835986c1..126f1df56 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 754c202b0..7f0d9d6f9 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 34c815e98..0398c1212 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 71d4892cf..a99488918 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 f919ce5ad..7a4b6a88e 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 865e05016..b85edca2c 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 24197e728..72c2a64b7 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 8813010c0..0d722a70e 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 ce3a9fc23..44d7e3224 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 3d47e091f..7ba23705e 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 e85098b80..7291e35e9 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 2d87bd4be..fff2cb43f 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 76a5b48d9..19ff8f944 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 000000000..6138c430a
--- /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 00f05e36f..000000000
--- 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 41332f225..b8864865d 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 3b964294e..ae1c21c34 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 16bdb87c6..09f05a2d3 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 2499757fb..66c6ffd5d 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 c95c472b3..06de02933 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 4ed55e81d..0c278bce4 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 c749df49e..704eb4a09 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 b62d9a0fc..5c768cdd0 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 f95267dbf..3d81c286a 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 d0efad7bb..fd398c424 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 dd02585a1..4130d13b8 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 716d783d4..5cac233e5 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 fd178ddc7..b9527f636 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 8c24902e8..24dd7a898 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 b6798df71..f5c85b319 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 e8976c428..e100e6f82 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 d497626ee..e3ccad7ae 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 f40eeb8ce..08bf96d8b 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 f4f29139c..b406cd792 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 1dbd36a4b..d917cd94f 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 442af4a86..430764239 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 943fc315e..d791fe8a9 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 63744d7ad..af0854dfe 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 411dbe87f..71cd7b89b 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 63dc135f2..d1abde369 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 2b8904bd7..3ba141ad7 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 046e47609..618093c51 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 a9bbe5812..b093a8bfe 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 c40dfac5f..50058ee29 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 4590b5a1f..e9235d3b0 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 a25564def..a09164eba 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 3e2cff3b1..57833fcae 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 cdf9648a8..2acf3386d 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 251dbae44..bd57e3dee 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 634772ddd..ecf00fb41 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 a05ac26f8..d699197d1 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 000000000..a5c070fc2
--- /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 b51e9fd77..000000000
--- 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 b085c46b4..09f40db01 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 701742c59..bede4c69a 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 d1d3710fb..d912d2819 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 cdcb62eeb..12ae0a4fe 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 a35cd8373..db8922d00 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 7f2c5ec15..5e975f266 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 583ad38b3..57772d0fc 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 90e78d774..a18c9949b 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 854b1c480..403ceafc1 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 11877fac7..04e31e0ae 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 06104c52f..71482700c 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 1b4793c20..007615260 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 06d098916..e43db1da0 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 ed3b77a58..f50794db4 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 7063a9932..5767e24fa 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 d83064496..f331913a2 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 21ff4199c..b33e96060 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 edaa4b377..282ebdd1f 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 cbf553bc2..a73980bce 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 e65c276e6..caf5bb0c3 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 289fa3828..18241fe12 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 84a5c551b..14c8c534e 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 d2de56b07..cb0543314 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 1f52708de..9b6110c93 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 85c85fb7a..752e875af 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 56352f59a..6f151a363 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 d0f9136aa..0101ea7b0 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 d924e9c7b..ab4a15035 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 2ce93c90a..646234d24 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 cacd4b6b5..805e863bf 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 a1ecfe301..b32da3526 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 03890fa1b..194f5662c 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 63bbcf16c..732fdb33c 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 aa0db2b8f..5f8a811f7 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 4274fabac..1b89ea05a 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 3c8917a43..9371772d3 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 7a5d1aadf..c9f256a52 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 f2d9ab39d..f742a76fd 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 b2df7ea03..aed543083 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 fa4d3c908..cc2e3733b 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 964ed8e00..b0ee040f0 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 003928a2a..125305b64 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 e9ffb88d1..921539dfa 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 f6fa036e0..2dbe89f31 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 591791be7..8f6b3e95f 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 474edaba7..c83b7c243 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 d7a085840..11241a93b 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 a1fedd62c..a083c93a2 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 53994e35c..202fb433b 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 691556179..7fce88528 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 e7f53c217..8ea41d28a 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 6635d37a3..e09b1a16a 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 6c62620b7..7915ffe4f 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 5ae70bad8..b881f7fb3 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 04b313e4e..b84c9d2ad 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 f83438a6a..518d0c6ff 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 96cfa40ba..eaf9bccff 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 5c5ae35e7..5e76bb83e 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 41a26a593..1a5a46f0c 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 c09b920c2..b8ca95271 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 4f60673a5..701559d32 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 14fd29334..be6cd26a9 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 eb97b08f4..7eed330dd 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 6ff36cc7c..36fb54156 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 31371b128..09854e159 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 517d6d745..97e5c8ce4 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 422dda5a4..298c7b988 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 892182f17..9ff65ceeb 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 eac98e175..3fb9f37de 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 a2892b056..66c85fa89 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 461b257c3..74d5c1c92 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 753821817..19df60f04 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 1fb4bf17e..52b5caf64 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 d0782f899..fec2866f6 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 dd1ab14fd..451079644 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 606bccb82..3d0a8baf9 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 e840d8d8c..1e4814f52 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 1d2f12ea5..155bdea92 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 0025d9d99..832ea14dc 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 d5c7ec460..0f7612011 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 f8e89669f..8c345fb7f 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 beca44b07..35621a7cd 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 4592dbf26..a5d7a92f2 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 1dc9d8270..092c6c551 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 e423f591d..22f3feac7 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 a89b50533..0145dd31b 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 b1b5d4deb..3e7d89988 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 781cecc0d..a05c0476c 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 cf30b647e..343ef34d6 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 9e18732e9..7417d8337 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 701a797fd..9ac2e14a9 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 aee0e41d2..9473376fa 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 2172b1d37..3561cb849 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 4d2c0a3c8..c62af86ab 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 d5bf0235e..c3b9baa74 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 7f2a8a36d..c5be72c00 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 4f98b6f7f..7dcb54a32 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 b18e0698c..0c6046a9f 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 694befe45..60859bdfa 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 504ec5ae3..55252b148 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 4e3b5e011..8cdea8dee 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 a9a137707..ec96adc5b 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 1f6b0c845..08db7b8e4 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 78eee2f04..fef513d08 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 873e7e25a..81d944ddd 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 8bb431e7a..f8f58702b 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 8bcc324f7..31c883701 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 b6a39da32..7ea31f0a8 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 605dddd80..962f0dd67 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 d0e16dbd0..bdfc1104f 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 bd6440ed6..19813b2fc 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 587caff79..b4cb5565b 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 09033c81c..43f5ff1c5 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 1b9b58511..55c081188 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 be8dda4d2..351bff61f 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 b2ad82367..addb74a28 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 0e05cd415..8b568e59d 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 11ac6ed54..7f8f1b504 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 872d2ec75..c266822a0 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 eb2d7e575..79024fcbc 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 850a3bf38..76d8065f6 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 d61d64bb0..6df148644 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 d12f55624..046bbfd69 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 010e11980..e0596f99f 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 e5bfc8927..8ab0107f3 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 3a90b0b02..46d562c00 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 c72b80553..56b521872 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 828ee5b05..c4034bde5 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 e65a0a191..aad1e8b12 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 42eeb9282..7260d0173 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 000000000..503a8510d
--- /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 db41a09df..000000000
--- 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 422466dc0..f61fb431d 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 8816d993b..9a7363443 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 e7b40be5f..77798a20e 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 89b6db65d..56f010f48 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 cbabf97f3..c97097842 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 3b6244063..2d93d8409 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 b44d7c22e..416b35f0d 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 8e8fb6679..1f7580172 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 a1147bba3..e4ed6c464 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 ebff236da..7378bd9f0 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 03c2f789d..9f83f9b3a 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 86437b3b6..4d4d9cf36 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 75d66ee49..fc640b808 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 c2c3ad70a..644401c3b 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 4de380523..00842c065 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 d07e55df6..ce17b8e9d 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 ef47bc97c..1638760fa 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 1ffa7c7da..3f7f1f300 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 6dec7fe17..c6d652d25 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 9b07d2070..0e4cec046 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 b3877ac52..061a8630a 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 cbd0196fa..b156ee81f 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 15ce0d961..8bcd4a01e 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 155207387..9c62b1920 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 74e800f3d..c2cb7a98a 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 0c5a9c589..729fa8a66 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 f7124e2c2..d0ea4ae46 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 e80469c00..2a556fad7 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 c9267bd38..71ecc1ce2 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 8f798516f..c7c217a70 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 d62378899..3691ac3b2 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 46873f5ae..07537a962 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 f4d4c1db2..61f0eae0f 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 6baba4680..940bd1243 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 25761dd8b..ffaa887c8 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 f166683ac..b934a1e2a 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 10fa691a5..6382e51c3 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 3bb25603c..9db802e42 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 d4b607e73..c67cb8a8b 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 d09f6c9ae..2b4e67e2b 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 8ca2776d8..e3f9c6d53 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 26002057d..111bb0b0d 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 e9901fa49..a552c54e9 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 6cf0a58da..9e72bee38 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 5a9cfb675..70b527206 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 485ebf8fd..f602e8fe3 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 b1434341c..2c9d019d7 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 1b4339b44..50481677b 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 fef59f146..aa2b0c58c 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 5674f75e3..54c0e9a41 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 40df360a6..3c64249ee 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 000000000..91aa933e8
--- /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 b3f16e560..000000000
--- 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 89dd83476..76266ce61 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 7eb74641b..dbee1507a 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 f3fff4eb5..3b82c2b0c 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 b91e51e41..436ddbe7f 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 adbe06ce9..89b9767ff 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 33cce3c63..dcf94a783 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 e4cbf9c11..130ef9c84 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 957d10714..9877ee54a 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 37e535fee..1bd90fd9a 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 20ef61bd6..b0a3f907d 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 80d1cea71..1f503b1d0 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 4e49e517b..1ce90f75d 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 9b03a2c25..51a4d99d3 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 d24933149..6c7f62017 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 18e5e77b2..d07b86442 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 04e3bacfa..67e7eb350 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 4a3c10144..ce092b208 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 3f501a4e5..5293d0756 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 ef1bf9684..8d19b0912 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 ba9534cff..c699fed37 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 c5859b81b..931ac52de 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 47b5db4ac..83abacdc0 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 c6fb9fe30..384d9caf7 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 442f66999..773de6930 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 6e732aa47..1928ea1a9 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 256bf2eef..2b7e3312f 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 07b6a78c6..ba64e768e 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 27f7af60d..0caaf91d5 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 10829d2b3..33e67a2e7 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 a797d254e..eeec0a072 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 93c911cb0..2f7d7a74c 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 aafbf804e..12b05d615 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 ac87b0965..944c378f0 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 71a234089..d2a4b8170 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 156559453..b7b75e766 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 caa451562..25e29f6fc 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 a96e8aa16..df8fa6d80 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 dd1f093f1..7e0db196a 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 32ce2a34f..976b4027c 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 ca6a665e6..8a37d0f04 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 81781fd9f..7d7b532a2 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 5808286dd..b76a572a0 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 e811d0e0f..328d2d840 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 000000000..658b1e28f
--- /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 e91c38a3b..000000000
--- 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 6ce749968..c13d33239 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 38efd339e..040706412 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 b8e05c1b3..bbb0ecca0 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 0e4f62879..90dd6d0fe 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 ddff078d5..009e967bf 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 b2037af9f..3686a5cef 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 000000000..d5e3ef77d
--- /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 223315339..000000000
--- 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 865796e30..39e31f18d 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 daced531d..90664ce3a 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 c06d3f878..0ebb3318b 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 41bd3cec3..2de697d06 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 31f8c9be1..f2d3e7107 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 bc5024ca7..2be7c11e5 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 393ae6fe2..90617295a 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 50d768b3a..1a8e7294e 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 8878d62eb..0725122d1 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 f4764275e..26d93e6f2 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 52e45da51..b373940f4 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 b16430806..f7f2d9ef2 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 3a0e34116..09b48c84a 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 839b0d470..cbabb90df 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 96a8fced2..28cbb2c48 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 2ff1b488c..4d6c444da 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 000000000..d7991a56f
--- /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 d10cec520..000000000
--- 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 9bb1e426a..b115b55e5 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 000000000..c19e619a2
--- /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 8a71dbf3b..000000000
--- 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 0eb345694..95db9fa5d 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 000000000..484607852
--- /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 0e7e327f6..000000000
--- 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 4f7df66ac..f2704b78c 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 817e69f0b..0e5142023 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 a305cbbc5..798748ecf 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 057bb68f3..b6813e869 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 d7979e5f0..0300fb627 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 2b0cdd893..233b0ec94 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 7eea05ff1..63ca1547e 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 cc0634c7c..411f452df 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 822ad1c38..4418e871e 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 000000000..b0ef80230
--- /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 78b658fa5..000000000
--- 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 378f2f7cb..8a970905c 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 8c8cff166..117945e15 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 0aabd0cb5..5943b2252 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 dd0d31d8d..08d939205 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 70f8c8f31..9c2f0aea4 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 3ea898309..3884dd2ab 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 a594eef83..08ff1d9bc 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 b0bf556f4..c0c422e26 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 89a66a896..403123370 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 c90122e04..66efe4e3a 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 000000000..60a0123d4
--- /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 7981b5ce3..000000000
--- 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 000000000..fb72746db
--- /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 d98f3f007..000000000
--- 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 9b3382123..da62ff84e 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 f7b345758..aa2521be2 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 185edfc8b..e7578c812 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 4aa43e668..fca310106 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 000000000..3045f6adc
--- /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 3244fb929..985db0851 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
-- 
GitLab