diff --git a/src/icons/AddIcon.js b/src/icons/AddIcon.tsx
similarity index 90%
rename from src/icons/AddIcon.js
rename to src/icons/AddIcon.tsx
index 88db9d1..340ee91 100644
--- a/src/icons/AddIcon.js
+++ b/src/icons/AddIcon.tsx
@@ -1,6 +1,4 @@
-import React from "react";
-
-function AddIcon({ large }) {
+function AddIcon({ large }: { large: boolean }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/AddPartyMemberIcon.js b/src/icons/AddPartyMemberIcon.tsx
similarity index 95%
rename from src/icons/AddPartyMemberIcon.js
rename to src/icons/AddPartyMemberIcon.tsx
index 596e40b..1c5bf21 100644
--- a/src/icons/AddPartyMemberIcon.js
+++ b/src/icons/AddPartyMemberIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function AddPartyMemberIcon() {
   return (
     <svg
diff --git a/src/icons/BlendOffIcon.js b/src/icons/BlendOffIcon.tsx
similarity index 96%
rename from src/icons/BlendOffIcon.js
rename to src/icons/BlendOffIcon.tsx
index b5c6590..2a573cd 100644
--- a/src/icons/BlendOffIcon.js
+++ b/src/icons/BlendOffIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function BlendOffIcon() {
   return (
     <svg
diff --git a/src/icons/BlendOnIcon.js b/src/icons/BlendOnIcon.tsx
similarity index 95%
rename from src/icons/BlendOnIcon.js
rename to src/icons/BlendOnIcon.tsx
index 9382f9a..6992627 100644
--- a/src/icons/BlendOnIcon.js
+++ b/src/icons/BlendOnIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function BlendOnIcon() {
   return (
     <svg
diff --git a/src/icons/BrushCircleIcon.js b/src/icons/BrushCircleIcon.tsx
similarity index 92%
rename from src/icons/BrushCircleIcon.js
rename to src/icons/BrushCircleIcon.tsx
index b4cf4ed..bf769d8 100644
--- a/src/icons/BrushCircleIcon.js
+++ b/src/icons/BrushCircleIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function BrushCircleIcon() {
   return (
     <svg
diff --git a/src/icons/BrushLineIcon.js b/src/icons/BrushLineIcon.tsx
similarity index 93%
rename from src/icons/BrushLineIcon.js
rename to src/icons/BrushLineIcon.tsx
index 33483b9..90f11da 100644
--- a/src/icons/BrushLineIcon.js
+++ b/src/icons/BrushLineIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function BrushLineIcon() {
   return (
     <svg
diff --git a/src/icons/BrushPaintIcon.js b/src/icons/BrushPaintIcon.tsx
similarity index 94%
rename from src/icons/BrushPaintIcon.js
rename to src/icons/BrushPaintIcon.tsx
index 3a59e77..4cbf863 100644
--- a/src/icons/BrushPaintIcon.js
+++ b/src/icons/BrushPaintIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function BrushPaintIcon() {
   return (
     <svg
diff --git a/src/icons/BrushRectangleIcon.js b/src/icons/BrushRectangleIcon.tsx
similarity index 93%
rename from src/icons/BrushRectangleIcon.js
rename to src/icons/BrushRectangleIcon.tsx
index 9856b88..863b946 100644
--- a/src/icons/BrushRectangleIcon.js
+++ b/src/icons/BrushRectangleIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function BrushRectangleIcon() {
   return (
     <svg
diff --git a/src/icons/BrushStrokeIcon.js b/src/icons/BrushStrokeIcon.tsx
similarity index 94%
rename from src/icons/BrushStrokeIcon.js
rename to src/icons/BrushStrokeIcon.tsx
index f626cb7..432c6e1 100644
--- a/src/icons/BrushStrokeIcon.js
+++ b/src/icons/BrushStrokeIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function BrushStrokeIcon() {
   return (
     <svg
diff --git a/src/icons/BrushToolIcon.js b/src/icons/BrushToolIcon.tsx
similarity index 94%
rename from src/icons/BrushToolIcon.js
rename to src/icons/BrushToolIcon.tsx
index e9a9c68..264cb66 100644
--- a/src/icons/BrushToolIcon.js
+++ b/src/icons/BrushToolIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function BrushToolIcon() {
   return (
     <svg
diff --git a/src/icons/BrushTriangleIcon.js b/src/icons/BrushTriangleIcon.tsx
similarity index 93%
rename from src/icons/BrushTriangleIcon.js
rename to src/icons/BrushTriangleIcon.tsx
index 94c7389..7c0e4be 100644
--- a/src/icons/BrushTriangleIcon.js
+++ b/src/icons/BrushTriangleIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function BrushTriangleIcon() {
   return (
     <svg
diff --git a/src/icons/ChangeNicknameIcon.js b/src/icons/ChangeNicknameIcon.tsx
similarity index 94%
rename from src/icons/ChangeNicknameIcon.js
rename to src/icons/ChangeNicknameIcon.tsx
index 3c5d1a8..c1fdb9f 100644
--- a/src/icons/ChangeNicknameIcon.js
+++ b/src/icons/ChangeNicknameIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function ChangeNicknameIcon() {
   return (
     <svg
diff --git a/src/icons/ClearDiceIcon.js b/src/icons/ClearDiceIcon.tsx
similarity index 95%
rename from src/icons/ClearDiceIcon.js
rename to src/icons/ClearDiceIcon.tsx
index 030f248..b99ed12 100644
--- a/src/icons/ClearDiceIcon.js
+++ b/src/icons/ClearDiceIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function ClearDiceIcon() {
   return (
     <svg
diff --git a/src/icons/D100Icon.js b/src/icons/D100Icon.tsx
similarity index 98%
rename from src/icons/D100Icon.js
rename to src/icons/D100Icon.tsx
index 70aa34c..53f4bb2 100644
--- a/src/icons/D100Icon.js
+++ b/src/icons/D100Icon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function D100Icon() {
   return (
     <svg
diff --git a/src/icons/D10Icon.js b/src/icons/D10Icon.tsx
similarity index 97%
rename from src/icons/D10Icon.js
rename to src/icons/D10Icon.tsx
index c045d0b..17ba251 100644
--- a/src/icons/D10Icon.js
+++ b/src/icons/D10Icon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function D10Icon() {
   return (
     <svg
diff --git a/src/icons/D12Icon.js b/src/icons/D12Icon.tsx
similarity index 97%
rename from src/icons/D12Icon.js
rename to src/icons/D12Icon.tsx
index fa34680..514303e 100644
--- a/src/icons/D12Icon.js
+++ b/src/icons/D12Icon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function D12Icon() {
   return (
     <svg
diff --git a/src/icons/D20Icon.js b/src/icons/D20Icon.tsx
similarity index 98%
rename from src/icons/D20Icon.js
rename to src/icons/D20Icon.tsx
index 5975f0e..ce7e643 100644
--- a/src/icons/D20Icon.js
+++ b/src/icons/D20Icon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function D20Icon() {
   return (
     <svg
diff --git a/src/icons/D4Icon.js b/src/icons/D4Icon.tsx
similarity index 95%
rename from src/icons/D4Icon.js
rename to src/icons/D4Icon.tsx
index c9377cd..90f0514 100644
--- a/src/icons/D4Icon.js
+++ b/src/icons/D4Icon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function D4Icon() {
   return (
     <svg
diff --git a/src/icons/D6Icon.js b/src/icons/D6Icon.tsx
similarity index 97%
rename from src/icons/D6Icon.js
rename to src/icons/D6Icon.tsx
index 8135fa2..c21859e 100644
--- a/src/icons/D6Icon.js
+++ b/src/icons/D6Icon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function D6Icon() {
   return (
     <svg
diff --git a/src/icons/D8Icon.js b/src/icons/D8Icon.tsx
similarity index 98%
rename from src/icons/D8Icon.js
rename to src/icons/D8Icon.tsx
index ad7bef1..cd00d13 100644
--- a/src/icons/D8Icon.js
+++ b/src/icons/D8Icon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function D8Icon() {
   return (
     <svg
diff --git a/src/icons/DiceRollsIcon.js b/src/icons/DiceRollsIcon.tsx
similarity index 96%
rename from src/icons/DiceRollsIcon.js
rename to src/icons/DiceRollsIcon.tsx
index 572a707..a93af41 100644
--- a/src/icons/DiceRollsIcon.js
+++ b/src/icons/DiceRollsIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function DiceRollsIcon() {
   return (
     <svg
diff --git a/src/icons/DonateIcon.js b/src/icons/DonateIcon.tsx
similarity index 95%
rename from src/icons/DonateIcon.js
rename to src/icons/DonateIcon.tsx
index 3d4e819..85a9fbf 100644
--- a/src/icons/DonateIcon.js
+++ b/src/icons/DonateIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function DonateIcon() {
   return (
     <svg
diff --git a/src/icons/EditTileIcon.js b/src/icons/EditTileIcon.tsx
similarity index 94%
rename from src/icons/EditTileIcon.js
rename to src/icons/EditTileIcon.tsx
index 8f17bcb..36722a8 100644
--- a/src/icons/EditTileIcon.js
+++ b/src/icons/EditTileIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function EditTileIcon() {
   return (
     <svg
diff --git a/src/icons/EraseAllIcon.js b/src/icons/EraseAllIcon.tsx
similarity index 96%
rename from src/icons/EraseAllIcon.js
rename to src/icons/EraseAllIcon.tsx
index d5e66a9..725e8eb 100644
--- a/src/icons/EraseAllIcon.js
+++ b/src/icons/EraseAllIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function EraseAllIcon() {
   return (
     <svg
diff --git a/src/icons/EraseToolIcon.js b/src/icons/EraseToolIcon.tsx
similarity index 95%
rename from src/icons/EraseToolIcon.js
rename to src/icons/EraseToolIcon.tsx
index e15389e..7b80d4c 100644
--- a/src/icons/EraseToolIcon.js
+++ b/src/icons/EraseToolIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function EraseToolIcon() {
   return (
     <svg
diff --git a/src/icons/ExpandMoreDiceIcon.js b/src/icons/ExpandMoreDiceIcon.tsx
similarity index 92%
rename from src/icons/ExpandMoreDiceIcon.js
rename to src/icons/ExpandMoreDiceIcon.tsx
index 53f0a14..1da5d39 100644
--- a/src/icons/ExpandMoreDiceIcon.js
+++ b/src/icons/ExpandMoreDiceIcon.tsx
@@ -1,6 +1,4 @@
-import React from "react";
-
-function ExpandMoreDiceIcon({ isExpanded }) {
+function ExpandMoreDiceIcon({ isExpanded }: { isExpanded: boolean }) {
   return (
     <svg
       width="24"
diff --git a/src/icons/ExpandMoreDiceTrayIcon.js b/src/icons/ExpandMoreDiceTrayIcon.tsx
similarity index 96%
rename from src/icons/ExpandMoreDiceTrayIcon.js
rename to src/icons/ExpandMoreDiceTrayIcon.tsx
index 2b860d9..ad62768 100644
--- a/src/icons/ExpandMoreDiceTrayIcon.js
+++ b/src/icons/ExpandMoreDiceTrayIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function ExpandMoreDotIcon() {
   return (
     <svg
diff --git a/src/icons/ExpandMoreDotIcon.js b/src/icons/ExpandMoreDotIcon.tsx
similarity index 94%
rename from src/icons/ExpandMoreDotIcon.js
rename to src/icons/ExpandMoreDotIcon.tsx
index 6259f07..d47c5ee 100644
--- a/src/icons/ExpandMoreDotIcon.js
+++ b/src/icons/ExpandMoreDotIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function ExpandMoreDotIcon() {
   return (
     <svg
diff --git a/src/icons/ExpandMoreIcon.js b/src/icons/ExpandMoreIcon.tsx
similarity index 94%
rename from src/icons/ExpandMoreIcon.js
rename to src/icons/ExpandMoreIcon.tsx
index 35e4078..b18d0cb 100644
--- a/src/icons/ExpandMoreIcon.js
+++ b/src/icons/ExpandMoreIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function ExpandMoreIcon() {
   return (
     <svg
diff --git a/src/icons/FogBrushIcon.js b/src/icons/FogBrushIcon.tsx
similarity index 94%
rename from src/icons/FogBrushIcon.js
rename to src/icons/FogBrushIcon.tsx
index 827c10d..9b914e8 100644
--- a/src/icons/FogBrushIcon.js
+++ b/src/icons/FogBrushIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function FogBrushIcon() {
   return (
     <svg
diff --git a/src/icons/FogCutOffIcon.js b/src/icons/FogCutOffIcon.tsx
similarity index 96%
rename from src/icons/FogCutOffIcon.js
rename to src/icons/FogCutOffIcon.tsx
index f04bbe0..df8b7cf 100644
--- a/src/icons/FogCutOffIcon.js
+++ b/src/icons/FogCutOffIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function FogCutOffIcon() {
   return (
     <svg
diff --git a/src/icons/FogCutOnIcon.js b/src/icons/FogCutOnIcon.tsx
similarity index 96%
rename from src/icons/FogCutOnIcon.js
rename to src/icons/FogCutOnIcon.tsx
index fef6529..f892b21 100644
--- a/src/icons/FogCutOnIcon.js
+++ b/src/icons/FogCutOnIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function FogCutOnIcon() {
   return (
     <svg
diff --git a/src/icons/FogMultilayerOffIcon.js b/src/icons/FogMultilayerOffIcon.tsx
similarity index 97%
rename from src/icons/FogMultilayerOffIcon.js
rename to src/icons/FogMultilayerOffIcon.tsx
index f71da9b..06333ff 100644
--- a/src/icons/FogMultilayerOffIcon.js
+++ b/src/icons/FogMultilayerOffIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function FogMultilayerOffIcon() {
   return (
     <svg
diff --git a/src/icons/FogMultilayerOnIcon.js b/src/icons/FogMultilayerOnIcon.tsx
similarity index 96%
rename from src/icons/FogMultilayerOnIcon.js
rename to src/icons/FogMultilayerOnIcon.tsx
index 361e770..4e2a4de 100644
--- a/src/icons/FogMultilayerOnIcon.js
+++ b/src/icons/FogMultilayerOnIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function FogMultilayerOnIcon() {
   return (
     <svg
diff --git a/src/icons/FogPolygonIcon.js b/src/icons/FogPolygonIcon.tsx
similarity index 94%
rename from src/icons/FogPolygonIcon.js
rename to src/icons/FogPolygonIcon.tsx
index cfd2bd1..6c6c6ed 100644
--- a/src/icons/FogPolygonIcon.js
+++ b/src/icons/FogPolygonIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function FogPolygonIcon() {
   return (
     <svg
diff --git a/src/icons/FogPreviewOffIcon.js b/src/icons/FogPreviewOffIcon.tsx
similarity index 96%
rename from src/icons/FogPreviewOffIcon.js
rename to src/icons/FogPreviewOffIcon.tsx
index 458c9d6..3633fd6 100644
--- a/src/icons/FogPreviewOffIcon.js
+++ b/src/icons/FogPreviewOffIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function FogPreviewOffIcon() {
   return (
     <svg
diff --git a/src/icons/FogPreviewOnIcon.js b/src/icons/FogPreviewOnIcon.tsx
similarity index 94%
rename from src/icons/FogPreviewOnIcon.js
rename to src/icons/FogPreviewOnIcon.tsx
index baacee1..6a533a8 100644
--- a/src/icons/FogPreviewOnIcon.js
+++ b/src/icons/FogPreviewOnIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function FogPreviewOnIcon() {
   return (
     <svg
diff --git a/src/icons/FogRectangleIcon.js b/src/icons/FogRectangleIcon.tsx
similarity index 93%
rename from src/icons/FogRectangleIcon.js
rename to src/icons/FogRectangleIcon.tsx
index 7a41096..f592119 100644
--- a/src/icons/FogRectangleIcon.js
+++ b/src/icons/FogRectangleIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function FogRectangleIcon() {
   return (
     <svg
diff --git a/src/icons/FogRemoveIcon.js b/src/icons/FogRemoveIcon.tsx
similarity index 95%
rename from src/icons/FogRemoveIcon.js
rename to src/icons/FogRemoveIcon.tsx
index 9ad8330..6deb60d 100644
--- a/src/icons/FogRemoveIcon.js
+++ b/src/icons/FogRemoveIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function FogRemoveIcon() {
   return (
     <svg
diff --git a/src/icons/FogToggleIcon.js b/src/icons/FogToggleIcon.tsx
similarity index 95%
rename from src/icons/FogToggleIcon.js
rename to src/icons/FogToggleIcon.tsx
index 569288b..0ae8040 100644
--- a/src/icons/FogToggleIcon.js
+++ b/src/icons/FogToggleIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function FogToggleIcon() {
   return (
     <svg
diff --git a/src/icons/FogToolIcon.js b/src/icons/FogToolIcon.tsx
similarity index 94%
rename from src/icons/FogToolIcon.js
rename to src/icons/FogToolIcon.tsx
index d81bd89..b7e071b 100644
--- a/src/icons/FogToolIcon.js
+++ b/src/icons/FogToolIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function FogToolIcon() {
   return (
     <svg
diff --git a/src/icons/FullScreenExitIcon.js b/src/icons/FullScreenExitIcon.tsx
similarity index 95%
rename from src/icons/FullScreenExitIcon.js
rename to src/icons/FullScreenExitIcon.tsx
index 7e23c78..4dc246d 100644
--- a/src/icons/FullScreenExitIcon.js
+++ b/src/icons/FullScreenExitIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function FullScreenIcon() {
   return (
     <svg
diff --git a/src/icons/FullScreenIcon.js b/src/icons/FullScreenIcon.tsx
similarity index 95%
rename from src/icons/FullScreenIcon.js
rename to src/icons/FullScreenIcon.tsx
index 0abc848..cb4b2ab 100644
--- a/src/icons/FullScreenIcon.js
+++ b/src/icons/FullScreenIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function FullScreenIcon() {
   return (
     <svg
diff --git a/src/icons/GestureOffIcon.js b/src/icons/GestureOffIcon.tsx
similarity index 96%
rename from src/icons/GestureOffIcon.js
rename to src/icons/GestureOffIcon.tsx
index a424e5a..69c85aa 100644
--- a/src/icons/GestureOffIcon.js
+++ b/src/icons/GestureOffIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function GestureOffIcon() {
   return (
     <svg
diff --git a/src/icons/GestureOnIcon.js b/src/icons/GestureOnIcon.tsx
similarity index 95%
rename from src/icons/GestureOnIcon.js
rename to src/icons/GestureOnIcon.tsx
index f3c4f4c..df27bf2 100644
--- a/src/icons/GestureOnIcon.js
+++ b/src/icons/GestureOnIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function GestureOnIcon() {
   return (
     <svg
diff --git a/src/icons/GridOffIcon.js b/src/icons/GridOffIcon.tsx
similarity index 96%
rename from src/icons/GridOffIcon.js
rename to src/icons/GridOffIcon.tsx
index a1287c2..3475c26 100644
--- a/src/icons/GridOffIcon.js
+++ b/src/icons/GridOffIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function GridOffIcon() {
   return (
     <svg
diff --git a/src/icons/GridOnIcon.js b/src/icons/GridOnIcon.tsx
similarity index 95%
rename from src/icons/GridOnIcon.js
rename to src/icons/GridOnIcon.tsx
index 1796b30..55bb43a 100644
--- a/src/icons/GridOnIcon.js
+++ b/src/icons/GridOnIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function GridOnIcon() {
   return (
     <svg
diff --git a/src/icons/GroupIcon.js b/src/icons/GroupIcon.tsx
similarity index 94%
rename from src/icons/GroupIcon.js
rename to src/icons/GroupIcon.tsx
index 1285cfb..61dd10f 100644
--- a/src/icons/GroupIcon.js
+++ b/src/icons/GroupIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function GroupIcon() {
   return (
     <svg
diff --git a/src/icons/HelpIcon.js b/src/icons/HelpIcon.tsx
similarity index 96%
rename from src/icons/HelpIcon.js
rename to src/icons/HelpIcon.tsx
index f45c9a8..599ba39 100644
--- a/src/icons/HelpIcon.js
+++ b/src/icons/HelpIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function HelpIcon() {
   return (
     <svg
diff --git a/src/icons/MeasureToolIcon.js b/src/icons/MeasureToolIcon.tsx
similarity index 97%
rename from src/icons/MeasureToolIcon.js
rename to src/icons/MeasureToolIcon.tsx
index d62c53b..4d55ece 100644
--- a/src/icons/MeasureToolIcon.js
+++ b/src/icons/MeasureToolIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function MeasureToolIcon() {
   return (
     <svg
diff --git a/src/icons/MoveIcon.js b/src/icons/MoveIcon.tsx
similarity index 96%
rename from src/icons/MoveIcon.js
rename to src/icons/MoveIcon.tsx
index 233a691..b961751 100644
--- a/src/icons/MoveIcon.js
+++ b/src/icons/MoveIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function MoveIcon() {
   return (
     <svg
diff --git a/src/icons/MoveToolIcon.js b/src/icons/MoveToolIcon.tsx
similarity index 96%
rename from src/icons/MoveToolIcon.js
rename to src/icons/MoveToolIcon.tsx
index 04120c8..50b8891 100644
--- a/src/icons/MoveToolIcon.js
+++ b/src/icons/MoveToolIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function MoveToolIcon() {
   return (
     <svg
diff --git a/src/icons/NoteTextIcon.js b/src/icons/NoteTextIcon.tsx
similarity index 95%
rename from src/icons/NoteTextIcon.js
rename to src/icons/NoteTextIcon.tsx
index 0b3404f..c406101 100644
--- a/src/icons/NoteTextIcon.js
+++ b/src/icons/NoteTextIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function NoteTextIcon() {
   return (
     <svg
diff --git a/src/icons/NoteToolIcon.js b/src/icons/NoteToolIcon.tsx
similarity index 95%
rename from src/icons/NoteToolIcon.js
rename to src/icons/NoteToolIcon.tsx
index e9bb0e5..f40c42f 100644
--- a/src/icons/NoteToolIcon.js
+++ b/src/icons/NoteToolIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function NoteToolIcon() {
   return (
     <svg
diff --git a/src/icons/OfflineIcon.js b/src/icons/OfflineIcon.tsx
similarity index 97%
rename from src/icons/OfflineIcon.js
rename to src/icons/OfflineIcon.tsx
index 75e1c05..8c9e227 100644
--- a/src/icons/OfflineIcon.js
+++ b/src/icons/OfflineIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function PointerToolIcon() {
   return (
     <svg
diff --git a/src/icons/PointerToolIcon.js b/src/icons/PointerToolIcon.tsx
similarity index 93%
rename from src/icons/PointerToolIcon.js
rename to src/icons/PointerToolIcon.tsx
index 1e7bf24..71380a2 100644
--- a/src/icons/PointerToolIcon.js
+++ b/src/icons/PointerToolIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function PointerToolIcon() {
   return (
     <svg
diff --git a/src/icons/ReconnectingIcon.js b/src/icons/ReconnectingIcon.tsx
similarity index 97%
rename from src/icons/ReconnectingIcon.js
rename to src/icons/ReconnectingIcon.tsx
index b7ccdc9..1d30553 100644
--- a/src/icons/ReconnectingIcon.js
+++ b/src/icons/ReconnectingIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function ReconnectingIcon() {
   return (
     <svg
diff --git a/src/icons/RedoIcon.js b/src/icons/RedoIcon.tsx
similarity index 95%
rename from src/icons/RedoIcon.js
rename to src/icons/RedoIcon.tsx
index 6f0896b..e8e2b15 100644
--- a/src/icons/RedoIcon.js
+++ b/src/icons/RedoIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function RedoIcon() {
   return (
     <svg
diff --git a/src/icons/RemoveMapIcon.js b/src/icons/RemoveMapIcon.tsx
similarity index 94%
rename from src/icons/RemoveMapIcon.js
rename to src/icons/RemoveMapIcon.tsx
index a7dd3f3..d82225c 100644
--- a/src/icons/RemoveMapIcon.js
+++ b/src/icons/RemoveMapIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function RemoveMapIcon() {
   return (
     <svg
diff --git a/src/icons/RemoveTokenIcon.js b/src/icons/RemoveTokenIcon.tsx
similarity index 94%
rename from src/icons/RemoveTokenIcon.js
rename to src/icons/RemoveTokenIcon.tsx
index 2f587d2..9506d0c 100644
--- a/src/icons/RemoveTokenIcon.js
+++ b/src/icons/RemoveTokenIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function RemoveTokenIcon() {
   return (
     <svg
diff --git a/src/icons/RerollDiceIcon.js b/src/icons/RerollDiceIcon.tsx
similarity index 97%
rename from src/icons/RerollDiceIcon.js
rename to src/icons/RerollDiceIcon.tsx
index 0f3a5b1..2eb7c45 100644
--- a/src/icons/RerollDiceIcon.js
+++ b/src/icons/RerollDiceIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function RerollDiceIcon() {
   return (
     <svg
diff --git a/src/icons/ResetMapIcon.js b/src/icons/ResetMapIcon.tsx
similarity index 95%
rename from src/icons/ResetMapIcon.js
rename to src/icons/ResetMapIcon.tsx
index 02ac13b..fbfbb14 100644
--- a/src/icons/ResetMapIcon.js
+++ b/src/icons/ResetMapIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function ResetMapIcon() {
   return (
     <svg
diff --git a/src/icons/SearchIcon.js b/src/icons/SearchIcon.tsx
similarity index 95%
rename from src/icons/SearchIcon.js
rename to src/icons/SearchIcon.tsx
index 095987b..ab178a8 100644
--- a/src/icons/SearchIcon.js
+++ b/src/icons/SearchIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function SearchIcon() {
   return (
     <svg
diff --git a/src/icons/SelectDiceIcon.js b/src/icons/SelectDiceIcon.tsx
similarity index 96%
rename from src/icons/SelectDiceIcon.js
rename to src/icons/SelectDiceIcon.tsx
index c51c1a2..47e64c6 100644
--- a/src/icons/SelectDiceIcon.js
+++ b/src/icons/SelectDiceIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function SelectDiceIcon() {
   return (
     <svg
diff --git a/src/icons/SelectMapIcon.js b/src/icons/SelectMapIcon.tsx
similarity index 95%
rename from src/icons/SelectMapIcon.js
rename to src/icons/SelectMapIcon.tsx
index dbfd967..d449968 100644
--- a/src/icons/SelectMapIcon.js
+++ b/src/icons/SelectMapIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function SelectMapIcon() {
   return (
     <svg
diff --git a/src/icons/SelectMultipleIcon.js b/src/icons/SelectMultipleIcon.tsx
similarity index 96%
rename from src/icons/SelectMultipleIcon.js
rename to src/icons/SelectMultipleIcon.tsx
index 4b7184f..6e7e703 100644
--- a/src/icons/SelectMultipleIcon.js
+++ b/src/icons/SelectMultipleIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function SelectMultipleIcon() {
   return (
     <svg
diff --git a/src/icons/SelectSingleIcon.js b/src/icons/SelectSingleIcon.tsx
similarity index 94%
rename from src/icons/SelectSingleIcon.js
rename to src/icons/SelectSingleIcon.tsx
index 47b0bd6..08959b6 100644
--- a/src/icons/SelectSingleIcon.js
+++ b/src/icons/SelectSingleIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function SelectSingleIcon() {
   return (
     <svg
diff --git a/src/icons/SelectTokensIcon.js b/src/icons/SelectTokensIcon.tsx
similarity index 94%
rename from src/icons/SelectTokensIcon.js
rename to src/icons/SelectTokensIcon.tsx
index 0637422..2a62390 100644
--- a/src/icons/SelectTokensIcon.js
+++ b/src/icons/SelectTokensIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function SelectMapIcon() {
   return (
     <svg
diff --git a/src/icons/SettingsIcon.js b/src/icons/SettingsIcon.tsx
similarity index 97%
rename from src/icons/SettingsIcon.js
rename to src/icons/SettingsIcon.tsx
index 13bceb9..cb3d218 100644
--- a/src/icons/SettingsIcon.js
+++ b/src/icons/SettingsIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function SettingsIcon() {
   return (
     <svg
diff --git a/src/icons/ShareDiceOffIcon.js b/src/icons/ShareDiceOffIcon.tsx
similarity index 96%
rename from src/icons/ShareDiceOffIcon.js
rename to src/icons/ShareDiceOffIcon.tsx
index 8834ac4..27c73ab 100644
--- a/src/icons/ShareDiceOffIcon.js
+++ b/src/icons/ShareDiceOffIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function ShareDiceOffIcon() {
   return (
     <svg
diff --git a/src/icons/ShareDiceOnIcon.js b/src/icons/ShareDiceOnIcon.tsx
similarity index 95%
rename from src/icons/ShareDiceOnIcon.js
rename to src/icons/ShareDiceOnIcon.tsx
index 0f4401d..011cc3c 100644
--- a/src/icons/ShareDiceOnIcon.js
+++ b/src/icons/ShareDiceOnIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function ShareDiceOnIcon() {
   return (
     <svg
diff --git a/src/icons/SocialPatreonIcon.js b/src/icons/SocialPatreonIcon.tsx
similarity index 95%
rename from src/icons/SocialPatreonIcon.js
rename to src/icons/SocialPatreonIcon.tsx
index 676d906..aa92de6 100644
--- a/src/icons/SocialPatreonIcon.js
+++ b/src/icons/SocialPatreonIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function SocialPatreonIcon() {
   return (
     <svg
diff --git a/src/icons/SocialRedditIcon.js b/src/icons/SocialRedditIcon.tsx
similarity index 97%
rename from src/icons/SocialRedditIcon.js
rename to src/icons/SocialRedditIcon.tsx
index 191322f..f31a092 100644
--- a/src/icons/SocialRedditIcon.js
+++ b/src/icons/SocialRedditIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function SocialRedditIcon() {
   return (
     <svg
diff --git a/src/icons/SocialTwitterIcon.js b/src/icons/SocialTwitterIcon.tsx
similarity index 96%
rename from src/icons/SocialTwitterIcon.js
rename to src/icons/SocialTwitterIcon.tsx
index 9b52ab0..e599e7b 100644
--- a/src/icons/SocialTwitterIcon.js
+++ b/src/icons/SocialTwitterIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function SocialTwitterIcon() {
   return (
     <svg
diff --git a/src/icons/SocialYouTubeIcon.js b/src/icons/SocialYouTubeIcon.tsx
similarity index 96%
rename from src/icons/SocialYouTubeIcon.js
rename to src/icons/SocialYouTubeIcon.tsx
index 00ccfd4..f21e4f1 100644
--- a/src/icons/SocialYouTubeIcon.js
+++ b/src/icons/SocialYouTubeIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function SocialYouTubeIcon() {
   return (
     <svg
diff --git a/src/icons/StartTimerIcon.js b/src/icons/StartTimerIcon.tsx
similarity index 96%
rename from src/icons/StartTimerIcon.js
rename to src/icons/StartTimerIcon.tsx
index f55517f..d8698fe 100644
--- a/src/icons/StartTimerIcon.js
+++ b/src/icons/StartTimerIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function StartTimerIcon() {
   return (
     <svg
diff --git a/src/icons/StreamMuteIcon.js b/src/icons/StreamMuteIcon.tsx
similarity index 95%
rename from src/icons/StreamMuteIcon.js
rename to src/icons/StreamMuteIcon.tsx
index 82c5288..bfe1876 100644
--- a/src/icons/StreamMuteIcon.js
+++ b/src/icons/StreamMuteIcon.tsx
@@ -1,6 +1,4 @@
-import React from "react";
-
-function StreamMuteIcon({ muted }) {
+function StreamMuteIcon({ muted }: { muted: boolean }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/TokenHideIcon.js b/src/icons/TokenHideIcon.tsx
similarity index 96%
rename from src/icons/TokenHideIcon.js
rename to src/icons/TokenHideIcon.tsx
index 3ab7dd3..f5473c4 100644
--- a/src/icons/TokenHideIcon.js
+++ b/src/icons/TokenHideIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function TokenHideIcon() {
   return (
     <svg
diff --git a/src/icons/TokenLockIcon.js b/src/icons/TokenLockIcon.tsx
similarity index 94%
rename from src/icons/TokenLockIcon.js
rename to src/icons/TokenLockIcon.tsx
index c4785d9..b893bd9 100644
--- a/src/icons/TokenLockIcon.js
+++ b/src/icons/TokenLockIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function TokenLockIcon() {
   return (
     <svg
diff --git a/src/icons/TokenShowIcon.js b/src/icons/TokenShowIcon.tsx
similarity index 94%
rename from src/icons/TokenShowIcon.js
rename to src/icons/TokenShowIcon.tsx
index b6c6792..1bf0e7d 100644
--- a/src/icons/TokenShowIcon.js
+++ b/src/icons/TokenShowIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function TokenShowIcon() {
   return (
     <svg
diff --git a/src/icons/TokenUnlockIcon.js b/src/icons/TokenUnlockIcon.tsx
similarity index 95%
rename from src/icons/TokenUnlockIcon.js
rename to src/icons/TokenUnlockIcon.tsx
index 23133e6..eb3ae1a 100644
--- a/src/icons/TokenUnlockIcon.js
+++ b/src/icons/TokenUnlockIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function TokenUnlockIcon() {
   return (
     <svg
diff --git a/src/icons/UndoIcon.js b/src/icons/UndoIcon.tsx
similarity index 95%
rename from src/icons/UndoIcon.js
rename to src/icons/UndoIcon.tsx
index da08de0..0624eec 100644
--- a/src/icons/UndoIcon.js
+++ b/src/icons/UndoIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function UndoIcon() {
   return (
     <svg