4 files changed, 19 insertions, 7 deletions
diff --git a/src/view/com/util/Toast.style.tsx b/src/view/com/util/Toast.style.tsx
index dfa4f4fd6..8b952fd00 100644
--- a/src/view/com/util/Toast.style.tsx
+++ b/src/view/com/util/Toast.style.tsx
@@ -4,7 +4,17 @@ import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/ico
 import {CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon} from '#/components/icons/CircleInfo'
 import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
 
-export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info'
+export type ToastType =
+  | 'default'
+  | 'success'
+  | 'error'
+  | 'warning'
+  | 'info'
+  | 'xmark'
+  | 'exclamation-circle'
+  | 'check'
+  | 'clipboard-check'
+  | 'circle-exclamation'
 
 export const TOAST_ANIMATION_CONFIG = {
   duration: 300,
diff --git a/src/view/com/util/Toast.tsx b/src/view/com/util/Toast.tsx
index 7258eac9d..4c999ca2a 100644
--- a/src/view/com/util/Toast.tsx
+++ b/src/view/com/util/Toast.tsx
@@ -57,8 +57,9 @@ function Toast({
   const [cardHeight, setCardHeight] = useState(0)
 
   const toastStyles = getToastTypeStyles(t)
-  const colors = toastStyles[type]
-  const IconComponent = TOAST_TYPE_TO_ICON[type]
+  const colors = toastStyles[type as keyof typeof toastStyles]
+  const IconComponent =
+    TOAST_TYPE_TO_ICON[type as keyof typeof TOAST_TYPE_TO_ICON]
 
   // for the exit animation to work on iOS the animated component
   // must not be the root component
diff --git a/src/view/com/util/Toast.web.tsx b/src/view/com/util/Toast.web.tsx
index 9ed1f0397..1abbaa003 100644
--- a/src/view/com/util/Toast.web.tsx
+++ b/src/view/com/util/Toast.web.tsx
@@ -63,11 +63,11 @@ export const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
 
   const toastTypeStyles = getToastTypeStyles(t)
   const toastStyles = activeToast
-    ? toastTypeStyles[activeToast.type]
+    ? toastTypeStyles[activeToast.type as keyof typeof toastTypeStyles]
     : toastTypeStyles.default
 
   const IconComponent = activeToast
-    ? TOAST_TYPE_TO_ICON[activeToast.type]
+    ? TOAST_TYPE_TO_ICON[activeToast.type as keyof typeof TOAST_TYPE_TO_ICON]
     : TOAST_TYPE_TO_ICON.default
 
   const animationStyles = getToastWebAnimationStyles()
diff --git a/src/view/screens/Storybook/Toasts.tsx b/src/view/screens/Storybook/Toasts.tsx
index 54735f7bb..4c17f1c33 100644
--- a/src/view/screens/Storybook/Toasts.tsx
+++ b/src/view/screens/Storybook/Toasts.tsx
@@ -12,8 +12,9 @@ import {H1, Text} from '#/components/Typography'
 function ToastPreview({message, type}: {message: string; type: ToastType}) {
   const t = useTheme()
   const toastStyles = getToastTypeStyles(t)
-  const colors = toastStyles[type]
-  const IconComponent = TOAST_TYPE_TO_ICON[type]
+  const colors = toastStyles[type as keyof typeof toastStyles]
+  const IconComponent =
+    TOAST_TYPE_TO_ICON[type as keyof typeof TOAST_TYPE_TO_ICON]
 
   return (
     <Pressable