diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts
new file mode 100644
index 0000000..7f45dae
--- /dev/null
+++ b/src/assets/icons/index.ts
@@ -0,0 +1,21 @@
+import Birdseye from './birdseye.svg';
+import Camera from './camera.svg';
+import DownSquare from './downSquare.svg';
+import Event from './event.svg';
+import Home from './home.svg';
+import PlayRect from './play-rect.svg';
+import Recording from './recording.svg';
+import Settings from './settings.svg';
+import Live from './video-waveform.svg';
+
+export {
+  PlayRect,
+  Camera,
+  Birdseye,
+  DownSquare,
+  Event,
+  Home,
+  Recording,
+  Settings,
+  Live,
+};
diff --git a/src/navigation/components/LeftHeaderButton.tsx b/src/navigation/components/LeftHeaderButton.tsx
index 5737c7c..ec7afa7 100644
--- a/src/navigation/components/LeftHeaderButton.tsx
+++ b/src/navigation/components/LeftHeaderButton.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import {TouchableOpacity} from 'react-native';
 
-import BirdseyeIcon from '@icons/birdseye.svg';
 import {useNavigation} from '@react-navigation/native';
 
 import {useConfig} from '@api';
+import {Birdseye} from '@icons';
 
 export const LeftHeaderButton = ({tintColor}: {tintColor?: string}) => {
   const nav = useNavigation();
@@ -19,7 +19,7 @@ export const LeftHeaderButton = ({tintColor}: {tintColor?: string}) => {
       onPress={() => {
         nav.navigate('Birdseye');
       }}>
-      <BirdseyeIcon
+      <Birdseye
         height={24}
         width={24}
         fill={tintColor}
diff --git a/src/navigation/components/RightHeaderButton.tsx b/src/navigation/components/RightHeaderButton.tsx
index 3ddc2d6..80734f0 100644
--- a/src/navigation/components/RightHeaderButton.tsx
+++ b/src/navigation/components/RightHeaderButton.tsx
@@ -1,15 +1,16 @@
 import React from 'react';
 import {TouchableOpacity} from 'react-native';
 
-import SettingsIcon from '@icons/settings.svg';
 import {useNavigation} from '@react-navigation/native';
 
+import {Settings} from '@icons';
+
 export const RightHeaderButton = ({tintColor}: {tintColor?: string}) => {
   const navigation = useNavigation();
 
   return (
     <TouchableOpacity onPress={() => navigation.navigate('Settings')}>
-      <SettingsIcon height={22} width={22} fill={tintColor} />
+      <Settings height={22} width={22} fill={tintColor} />
     </TouchableOpacity>
   );
 };
diff --git a/src/navigation/components/TabBarIcon.tsx b/src/navigation/components/TabBarIcon.tsx
index 55f2f2a..e873e81 100644
--- a/src/navigation/components/TabBarIcon.tsx
+++ b/src/navigation/components/TabBarIcon.tsx
@@ -1,8 +1,7 @@
-import EventIcon from '@icons/event.svg';
-import RecordingIcon from '@icons/recording.svg';
-import VideoIcon from '@icons/video-waveform.svg';
 import {RouteProp} from '@react-navigation/native';
 
+import {Event, Live, Recording} from '@icons';
+
 import {CameraTabsStackParamList} from '../CameraTabNavigator';
 
 export const TabBarIcon = ({
@@ -18,7 +17,7 @@ export const TabBarIcon = ({
 }) => {
   if (route.name === 'Recordings') {
     return (
-      <RecordingIcon
+      <Recording
         height={size}
         width={size}
         fill={color}
@@ -28,17 +27,12 @@ export const TabBarIcon = ({
   }
   if (route.name === 'Events') {
     return (
-      <EventIcon
-        height={size}
-        width={size}
-        fill={color}
-        fillSecondary={color}
-      />
+      <Event height={size} width={size} fill={color} fillSecondary={color} />
     );
   }
   if (route.name === 'Live') {
     return (
-      <VideoIcon
+      <Live
         height={size}
         width={size}
         fill={color}
diff --git a/src/screens/CameraScreens/RecordingsScreen/RecordingsScreen.tsx b/src/screens/CameraScreens/RecordingsScreen/RecordingsScreen.tsx
index 70b6213..a9b68da 100644
--- a/src/screens/CameraScreens/RecordingsScreen/RecordingsScreen.tsx
+++ b/src/screens/CameraScreens/RecordingsScreen/RecordingsScreen.tsx
@@ -1,65 +1,12 @@
-import {Pressable} from 'react-native';
-
-import PlayRect from '@icons/play-rect.svg';
-import {useNavigation} from '@react-navigation/native';
 import {FlashList} from '@shopify/flash-list';
-import clsx from 'clsx';
-import {getTimeZone} from 'react-native-localize';
 
+import {HourChip} from './components';
 import {useRecordingSummary} from '@api';
-import {BaseText, BaseView, Label, LoadingView} from '@components';
-import {API_BASE} from '@env';
+import {BaseView, LoadingView} from '@components';
 import {useAppDataStore} from '@stores';
 
 import {SectionDateHeader} from '../components';
 
-const getRecordingUrl = (cameraName: string, dateTime: Date): string => {
-  const dateString = `${dateTime.getFullYear()}-${
-    dateTime.getMonth() + 1
-  }/${dateTime.getDate()}/${dateTime.getHours()}`;
-  return `${API_BASE}vod/${dateString}/${cameraName}/${getTimeZone().replace(
-    '/',
-    ',',
-  )}/master.m3u8`;
-};
-
-const HourChip = ({
-  numEvents,
-  date,
-  cameraName,
-}: {
-  numEvents: number;
-  date: Date;
-  cameraName: string;
-}) => {
-  const navigation = useNavigation();
-  const hourString = date.getHours() + ':00';
-  const vodUrl = getRecordingUrl(cameraName, date);
-  const videoTitle = `${date.toLocaleDateString(undefined, {
-    weekday: undefined,
-  })} - ${hourString}`;
-
-  return (
-    <Pressable
-      onPress={() => {
-        navigation.navigate('Fullscreen Video', {
-          videoURI: vodUrl,
-          title: videoTitle,
-        });
-      }}>
-      <Label
-        className={clsx(
-          'mx-1 my-2 justify-between p-2 items-center border border-transparent',
-          numEvents > 0 && 'border-destructive dark:border-destructive-dark',
-        )}>
-        <BaseText className="mb-1">{hourString}</BaseText>
-        <PlayRect className="h-8 w-8" fill={'white'} />
-        <BaseText>{numEvents} Events</BaseText>
-      </Label>
-    </Pressable>
-  );
-};
-
 export const RecordingsScreen = () => {
   const currentCamera = useAppDataStore(state => state.currentCamera);
   const {data, isLoading} = useRecordingSummary(currentCamera);
diff --git a/src/screens/CameraScreens/RecordingsScreen/components/HourChip.tsx b/src/screens/CameraScreens/RecordingsScreen/components/HourChip.tsx
new file mode 100644
index 0000000..a1fb95b
--- /dev/null
+++ b/src/screens/CameraScreens/RecordingsScreen/components/HourChip.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import {Pressable} from 'react-native';
+
+import {useNavigation} from '@react-navigation/native';
+import clsx from 'clsx';
+
+import {BaseText, Label} from '@components';
+import {PlayRect} from '@icons';
+import {getRecordingUrl} from '@utils';
+
+export const HourChip = ({
+  numEvents,
+  date,
+  cameraName,
+}: {
+  numEvents: number;
+  date: Date;
+  cameraName: string;
+}) => {
+  const navigation = useNavigation();
+  const hourString = date.getHours() + ':00';
+  const vodUrl = getRecordingUrl(cameraName, date);
+  const videoTitle = `${date.toLocaleDateString(undefined, {
+    weekday: undefined,
+  })} - ${hourString}`;
+
+  return (
+    <Pressable
+      onPress={() => {
+        navigation.navigate('Fullscreen Video', {
+          videoURI: vodUrl,
+          title: videoTitle,
+        });
+      }}>
+      <Label
+        className={clsx(
+          'mx-1 my-2 justify-between p-2 items-center border border-transparent',
+          numEvents > 0 && 'border-destructive dark:border-destructive-dark',
+        )}>
+        <BaseText className="mb-1">{hourString}</BaseText>
+        <PlayRect className="h-8 w-8" fill={'white'} />
+        <BaseText>{numEvents} Events</BaseText>
+      </Label>
+    </Pressable>
+  );
+};
diff --git a/src/screens/CameraScreens/RecordingsScreen/components/index.ts b/src/screens/CameraScreens/RecordingsScreen/components/index.ts
index e69de29..2257d52 100644
--- a/src/screens/CameraScreens/RecordingsScreen/components/index.ts
+++ b/src/screens/CameraScreens/RecordingsScreen/components/index.ts
@@ -0,0 +1 @@
+export * from './HourChip';
diff --git a/src/screens/CameraScreens/components/SectionDateHeader.tsx b/src/screens/CameraScreens/components/SectionDateHeader.tsx
index f4a96fb..fe9eb82 100644
--- a/src/screens/CameraScreens/components/SectionDateHeader.tsx
+++ b/src/screens/CameraScreens/components/SectionDateHeader.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import {Pressable, useColorScheme, View} from 'react-native';
 
-import DownSquare from '@icons/downSquare.svg';
 import clsx from 'clsx';
 
 import {BaseText, Label} from '@components';
+import {DownSquare} from '@icons';
 import {getFgColorHex} from '@utils';
 
 export const SectionDateHeader = ({
diff --git a/src/utils/urls.ts b/src/utils/urls.ts
index fe40132..41afda6 100644
--- a/src/utils/urls.ts
+++ b/src/utils/urls.ts
@@ -1,3 +1,7 @@
+import {getTimeZone} from 'react-native-localize';
+
+import {API_BASE} from '@env';
+
 export const showIPOnly = (url: string) => {
   url = url.replace('http://', '');
   if (url[url.length - 1] === '/') {
@@ -10,3 +14,13 @@ export const ipToAPIBase = (ip: string) => {
   ip = 'http://' + ip + '/';
   return ip;
 };
+
+export const getRecordingUrl = (cameraName: string, dateTime: Date): string => {
+  const dateString = `${dateTime.getFullYear()}-${
+    dateTime.getMonth() + 1
+  }/${dateTime.getDate()}/${dateTime.getHours()}`;
+  return `${API_BASE}vod/${dateString}/${cameraName}/${getTimeZone().replace(
+    '/',
+    ',',
+  )}/master.m3u8`;
+};