diff --git a/mobile/app/(app)/(tabs)/_layout.tsx b/mobile/app/(app)/(tabs)/_layout.tsx
index b139193a5..3d3abc331 100644
--- a/mobile/app/(app)/(tabs)/_layout.tsx
+++ b/mobile/app/(app)/(tabs)/_layout.tsx
@@ -1,13 +1,9 @@
 import React from "react";
 import { Tabs } from "expo-router";
-import ObservationSVG from "../../../assets/icons/observation.svg";
-import QuickReportSVG from "../../../assets/icons/quick-report.svg";
-import GuidesSVG from "../../../assets/icons/Learning.svg";
-import InboxSVG from "../../../assets/icons/Inbox.svg";
-import MoreSVG from "../../../assets/icons/More.svg";
 import { TextStyle, ViewStyle } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useTheme } from "tamagui";
+import { Icon } from "../../../components/Icon";
 
 export default function TabLayout() {
   const insets = useSafeAreaInsets();
@@ -27,35 +23,35 @@ export default function TabLayout() {
         name="index"
         options={{
           title: "Observation",
-          tabBarIcon: ({ color }) => <ObservationSVG fill={color} />,
+          tabBarIcon: ({ color }) => <Icon icon="eyeOff" color={color} />,
         }}
       />
       <Tabs.Screen
         name="quick-report"
         options={{
           title: "Quick Report",
-          tabBarIcon: ({ color }) => <QuickReportSVG fill={color} />,
+          tabBarIcon: ({ color }) => <Icon icon="quickReport" color={color} />,
         }}
       />
       <Tabs.Screen
         name="guides"
         options={{
           title: "Guides",
-          tabBarIcon: ({ color }) => <GuidesSVG fill={color} />,
+          tabBarIcon: ({ color }) => <Icon icon="learning" color={color} />,
         }}
       />
       <Tabs.Screen
         name="inbox"
         options={{
           title: "Inbox",
-          tabBarIcon: ({ color }) => <InboxSVG fill={color} />,
+          tabBarIcon: ({ color }) => <Icon icon="inbox" color={color} />,
         }}
       />
       <Tabs.Screen
         name="more"
         options={{
           title: "More",
-          tabBarIcon: ({ color }) => <MoreSVG fill={color} />,
+          tabBarIcon: ({ color }) => <Icon icon="more" color={color} />,
         }}
       />
     </Tabs>
diff --git a/mobile/app/(app)/(tabs)/index.tsx b/mobile/app/(app)/(tabs)/index.tsx
index affbf68a9..afb2d3571 100644
--- a/mobile/app/(app)/(tabs)/index.tsx
+++ b/mobile/app/(app)/(tabs)/index.tsx
@@ -1,6 +1,7 @@
 import { View, Text } from "react-native";
 import { useAuth } from "../../../hooks/useAuth";
 import OfflinePersistComponentExample from "../../../components/OfflinePersistComponentExample";
+import { Icon } from "../../../components/Icon";
 
 const Index = () => {
   const { signOut } = useAuth();
@@ -8,6 +9,12 @@ const Index = () => {
   return (
     <View style={{ gap: 20 }}>
       <Text>Observation</Text>
+      <Icon
+        icon="eyeOff"
+        size={24}
+        color="$purple5"
+        backgroundColor="$yellow2"
+      />
       <OfflinePersistComponentExample></OfflinePersistComponentExample>
       <Text onPress={signOut}>Logout</Text>
     </View>
diff --git a/mobile/assets/icons/adaptive-icon.png b/mobile/assets/icons/adaptive-icon.png
deleted file mode 100644
index 03d6f6b6c..000000000
Binary files a/mobile/assets/icons/adaptive-icon.png and /dev/null differ
diff --git a/mobile/components/Icon.tsx b/mobile/components/Icon.tsx
new file mode 100644
index 000000000..40d5411f9
--- /dev/null
+++ b/mobile/components/Icon.tsx
@@ -0,0 +1,163 @@
+import * as React from "react";
+import EyeOff from "../assets/icons/Eye off.svg";
+import Eye from "../assets/icons/Eye.svg";
+import Observation from "../assets/icons/observation.svg";
+import QuickReport from "../assets/icons/quick-report.svg";
+import Learning from "../assets/icons/Learning.svg";
+import Inbox from "../assets/icons/Inbox.svg";
+import More from "../assets/icons/More.svg";
+import ChevronRight from "../assets/icons/Chevron right.svg";
+import ChevronLeft from "../assets/icons/Chevron left.svg";
+import AddNote from "../assets/icons/add-note.svg";
+import Trash from "../assets/icons/Trash.svg";
+import Logout from "../assets/icons/logout.svg";
+import PencilAlt from "../assets/icons/Pencil alt.svg";
+import XCircle from "../assets/icons/x-circle.svg";
+import MenuAlt2 from "../assets/icons/menu-alt-2.svg";
+import DotsVertical from "../assets/icons/dots-vertical.svg";
+
+import { styled } from "tamagui";
+import { View } from "tamagui";
+import { StyleProp, ViewStyle } from "react-native";
+
+interface IconProps {
+  /**
+   * The name of the icon
+   */
+  icon: string;
+
+  /**
+   * An optional tint color for the icon
+   */
+  color?: string;
+
+  /**
+   * An optional size for the icon. If not provided, the icon will be sized to the icon's resolution.
+   */
+  size?: number;
+
+  /**
+   * Style overrides for the view container
+   */
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * A component to render a registered icon.
+ * It is wrapped in a <TouchableOpacity /> if `onPress` is provided, otherwise a <View />.
+ * @see [Documentation and Examples]{@link https://docs.infinite.red/ignite-cli/boilerplate/components/Icon/}
+ * @param {IconProps} props - The props for the `Icon` component.
+ * @returns {JSX.Element} The rendered `Icon` component.
+ */
+
+type IconRegistry = {
+  [key: string]: React.ReactNode;
+};
+
+export const defaultIcon = (props: IconProps) => {
+  const {
+    icon,
+    color,
+    size,
+    style: $viewStyleOverride,
+    ...tamaguiProps
+  } = props;
+
+  const iconRegistry: IconRegistry = {
+    eyeOff: (
+      <EyeOff fill={color || "black"} width={size || 24} height={size || 24} />
+    ),
+    eye: <Eye fill={color || "black"} width={size || 24} height={size || 24} />,
+    observation: (
+      <Observation
+        fill={color || "black"}
+        width={size || 24}
+        height={size || 24}
+      />
+    ),
+
+    quickReport: (
+      <QuickReport
+        fill={color || "black"}
+        width={size || 24}
+        height={size || 24}
+      />
+    ),
+    learning: (
+      <Learning
+        fill={color || "black"}
+        width={size || 24}
+        height={size || 24}
+      />
+    ),
+    inbox: (
+      <Inbox fill={color || "black"} width={size || 24} height={size || 24} />
+    ),
+    more: (
+      <More fill={color || "black"} width={size || 24} height={size || 24} />
+    ),
+    chevronRight: (
+      <ChevronRight
+        fill={color || "black"}
+        width={size || 24}
+        height={size || 24}
+      />
+    ),
+    chevronLeft: (
+      <ChevronLeft
+        fill={color || "black"}
+        width={size || 24}
+        height={size || 24}
+      />
+    ),
+    addNote: (
+      <AddNote fill={color || "black"} width={size || 24} height={size || 24} />
+    ),
+    trash: (
+      <Trash fill={color || "black"} width={size || 24} height={size || 24} />
+    ),
+    logout: (
+      <Logout fill={color || "black"} width={size || 24} height={size || 24} />
+    ),
+    pencilAlt: (
+      <PencilAlt
+        fill={color || "black"}
+        width={size || 24}
+        height={size || 24}
+      />
+    ),
+    xCircle: (
+      <XCircle fill={color || "black"} width={size || 24} height={size || 24} />
+    ),
+    menuAlt2: (
+      <MenuAlt2
+        fill={color || "black"}
+        width={size || 24}
+        height={size || 24}
+      />
+    ),
+    dotsVertical: (
+      <DotsVertical
+        fill={color || "black"}
+        width={size || 24}
+        height={size || 24}
+      />
+    ),
+  };
+
+  return (
+    <View {...tamaguiProps} style={$viewStyleOverride}>
+      {iconRegistry[icon]}
+    </View>
+  );
+};
+
+export const Icon = styled(
+  defaultIcon,
+  {},
+  {
+    accept: {
+      color: "color",
+    },
+  }
+);