diff --git a/web/src/components/RecordingPlaylist.jsx b/web/src/components/RecordingPlaylist.jsx
index da04e1770..1404d08a0 100644
--- a/web/src/components/RecordingPlaylist.jsx
+++ b/web/src/components/RecordingPlaylist.jsx
@@ -1,8 +1,7 @@
 import { h } from 'preact';
 import { useState } from 'preact/hooks';
 import { addSeconds, differenceInSeconds, fromUnixTime, format, parseISO, startOfHour } from 'date-fns';
-import ArrowDropdown from '../icons/ArrowDropdown';
-import ArrowDropup from '../icons/ArrowDropup';
+import Arrow from '../icons/Arrow';
 import Link from '../components/Link';
 import Menu from '../icons/Menu';
 import MenuOpen from '../icons/MenuOpen';
@@ -73,7 +72,7 @@ export function ExpandableList({ title, events = 0, children, selected = false }
       <div className="flex items-center w-full p-2 cursor-pointer md:text-lg" onClick={toggle}>
         <div className="flex-1 font-bold">{title}</div>
         <div className="flex-1 text-right mr-4">{events} Events</div>
-        <div className="w-6 md:w-10 h-6 md:h-10">{active ? <ArrowDropup /> : <ArrowDropdown />}</div>
+        <div className="w-6 md:w-10 h-6 md:h-10">{active ? <Arrow /> : <Arrow rotate_degrees="180" />}</div>
       </div>
       <div className={`bg-gray-800 bg-opacity-50 ${active ? '' : 'hidden'}`}>{children}</div>
     </div>
diff --git a/web/src/components/Select.jsx b/web/src/components/Select.jsx
index 4b9fac7f5..956f7ea91 100644
--- a/web/src/components/Select.jsx
+++ b/web/src/components/Select.jsx
@@ -1,6 +1,5 @@
 import { h, Fragment } from 'preact';
-import ArrowDropdown from '../icons/ArrowDropdown';
-import ArrowDropup from '../icons/ArrowDropup';
+import Arrow from '../icons/Arrow';
 import Menu, { MenuItem } from './Menu';
 import TextField from './TextField';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
@@ -94,7 +93,7 @@ export default function Select({ label, onChange, options: inputOptions = [], se
         onclick={handleClick}
         onkeydown={handleKeydown}
         readonly
-        trailingIcon={showMenu ? ArrowDropup : ArrowDropdown}
+        trailingIcon={showMenu ? Arrow : (() => <Arrow rotate_degrees="180" />)}
         value={options[selected]?.label}
       />
       {showMenu ? (
diff --git a/web/src/icons/ArrowDropup.jsx b/web/src/icons/Arrow.jsx
similarity index 63%
rename from web/src/icons/ArrowDropup.jsx
rename to web/src/icons/Arrow.jsx
index 8805e274c..ae5e3a987 100644
--- a/web/src/icons/ArrowDropup.jsx
+++ b/web/src/icons/Arrow.jsx
@@ -1,13 +1,13 @@
 import { h } from 'preact';
 import { memo } from 'preact/compat';
 
-export function ArrowDropup({ className = '' }) {
+export function Arrow({ rotate_degrees = 0, className = '' }) {
   return (
-    <svg className={`fill-current ${className}`} viewBox="0 0 24 24">
+    <svg className={`fill-current ${className}`} viewBox="0 0 24 24" transform={`rotate(${rotate_degrees})`}>
       <path d="M0 0h24v24H0z" fill="none" />
       <path d="M7 14l5-5 5 5z" />
     </svg>
   );
 }
 
-export default memo(ArrowDropup);
+export default memo(Arrow);
diff --git a/web/src/icons/ArrowDropdown.jsx b/web/src/icons/ArrowDropdown.jsx
deleted file mode 100644
index 0563e1194..000000000
--- a/web/src/icons/ArrowDropdown.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { h } from 'preact';
-import { memo } from 'preact/compat';
-
-export function ArrowDropdown({ className = '' }) {
-  return (
-    <svg className={`fill-current ${className}`} viewBox="0 0 24 24">
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M7 10l5 5 5-5z" />
-    </svg>
-  );
-}
-
-export default memo(ArrowDropdown);
diff --git a/web/src/routes/Event.jsx b/web/src/routes/Event.jsx
index d69a882e0..9494f0eed 100644
--- a/web/src/routes/Event.jsx
+++ b/web/src/routes/Event.jsx
@@ -3,8 +3,7 @@ import { useCallback, useState, useEffect } from 'preact/hooks';
 import Link from '../components/Link';
 import ActivityIndicator from '../components/ActivityIndicator';
 import Button from '../components/Button';
-import ArrowDown from '../icons/ArrowDropdown';
-import ArrowDropup from '../icons/ArrowDropup';
+import Arrow from '../icons/Arrow';
 import Clip from '../icons/Clip';
 import Close from '../icons/Close';
 import Delete from '../icons/Delete';
@@ -108,12 +107,12 @@ export default function Event({ eventId, close, scrollRef }) {
           <Button className="w-full sm:w-auto" onClick={() => setShowDetails(!showDetails)}>
             {showDetails ? (
               <Fragment>
-                <ArrowDropup className="w-6" />
+                <Arrow className="w-6" />
                 Hide event Details
               </Fragment>
             ) : (
               <Fragment>
-                <ArrowDown className="w-6" />
+                <Arrow rotate_degrees="180" className="w-6" />
                 Show event Details
               </Fragment>
             )}
diff --git a/web/src/routes/StyleGuide.jsx b/web/src/routes/StyleGuide.jsx
index 3e79b36f1..acd0c5f1b 100644
--- a/web/src/routes/StyleGuide.jsx
+++ b/web/src/routes/StyleGuide.jsx
@@ -1,6 +1,5 @@
 import { h } from 'preact';
-import ArrowDropdown from '../icons/ArrowDropdown';
-import ArrowDropup from '../icons/ArrowDropup';
+import Arrow from '../icons/Arrow';
 import Button from '../components/Button';
 import Dialog from '../components/Dialog';
 import Heading from '../components/Heading';
@@ -118,8 +117,8 @@ export default function StyleGuide() {
         <TextField label="Default text field" />
         <TextField label="Pre-filled" value="This is my pre-filled value" />
         <TextField label="With help" helpText="This is some help text" />
-        <TextField label="Leading icon" leadingIcon={ArrowDropdown} />
-        <TextField label="Trailing icon" trailingIcon={ArrowDropup} />
+        <TextField label="Leading icon" leadingIcon={(() => <Arrow rotate_degrees="180" />)} />
+        <TextField label="Trailing icon" trailingIcon={Arrow} />
       </div>
     </div>
   );