diff --git a/client/src/components/SearchBar/SearchBar.tsx b/client/src/components/SearchBar/SearchBar.tsx
index 7b1ee58b902..73df12fe103 100644
--- a/client/src/components/SearchBar/SearchBar.tsx
+++ b/client/src/components/SearchBar/SearchBar.tsx
@@ -16,6 +16,7 @@ import { useRef, useState } from 'react';
 import logo from '../../static/img/otp-logo.svg';
 import GraphiQLRouteButton from './GraphiQLRouteButton.tsx';
 import WheelchairAccessibleCheckBox from './WheelchairAccessibleCheckBox.tsx';
+import { SwapLocationsButton } from './SwapLocationsButton.tsx';
 
 type SearchBarProps = {
   onRoute: () => void;
@@ -38,6 +39,7 @@ export function SearchBar({ onRoute, tripQueryVariables, setTripQueryVariables,
         </div>
       </Navbar.Brand>
       <LocationInputField location={tripQueryVariables.from} label="From" id="fromInputField" />
+      <SwapLocationsButton tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
       <LocationInputField location={tripQueryVariables.to} label="To" id="toInputField" />
       <DepartureArrivalSelect tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
       <DateTimeInputField tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
diff --git a/client/src/components/SearchBar/SwapLocationsButton.tsx b/client/src/components/SearchBar/SwapLocationsButton.tsx
new file mode 100644
index 00000000000..28d25f2fac7
--- /dev/null
+++ b/client/src/components/SearchBar/SwapLocationsButton.tsx
@@ -0,0 +1,24 @@
+import { TripQueryVariables } from '../../gql/graphql.ts';
+import icon from '../../static/img/swap.svg';
+
+export function SwapLocationsButton({
+  tripQueryVariables,
+  setTripQueryVariables,
+}: {
+  tripQueryVariables: TripQueryVariables;
+  setTripQueryVariables: (tripQueryVariables: TripQueryVariables) => void;
+}) {
+  const swapFromTo = () => {
+    setTripQueryVariables({
+      ...tripQueryVariables,
+      from: tripQueryVariables.to,
+      to: tripQueryVariables.from,
+    });
+  };
+
+  return (
+    <button className="swap-from-to" onClick={swapFromTo} title="Swap from/to">
+      <img alt="Swap from/to" src={icon} />
+    </button>
+  );
+}
diff --git a/client/src/static/img/swap.svg b/client/src/static/img/swap.svg
new file mode 100644
index 00000000000..858e5e99831
--- /dev/null
+++ b/client/src/static/img/swap.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100pt" height="100pt" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+ <path d="m92.223 50.707c-2.5234 0-4.5469 2.0195-4.5469 4.5469v13.938h-51.516l10.203-10.203c1.8164-1.8164 1.8164-4.6445 0-6.4648-1.8164-1.8164-4.6445-1.8164-6.4648 0l-18.082 18.082c-1.7188 1.7188-1.8164 4.6445 0 6.3633l18.082 18.383c0.91016 0.91016 2.0195 1.3125 3.2305 1.3125 1.1094 0 2.3242-0.40234 3.2305-1.3125 1.8164-1.7188 1.8164-4.6445 0.10156-6.4648l-10.703-10.605h56.465c2.5234 0 4.5469-2.0195 4.5469-4.5469v-18.48c0-2.5273-2.0234-4.5469-4.5469-4.5469z"/>
+ <path d="m63.738 29.695-10.305 10.406c-1.7188 1.8164-1.7188 4.6445 0.10156 6.4648 0.91016 0.91016 2.0195 1.3125 3.2305 1.3125s2.3242-0.40234 3.2305-1.3125l18.082-18.383c1.7188-1.8164 1.7188-4.6445 0-6.3633l-18.18-18.184c-1.8164-1.8164-4.6445-1.8164-6.4648 0-1.8164 1.8164-1.8164 4.6445 0 6.4648l10.504 10.504h-56.363c-2.5234 0-4.5469 2.0195-4.5469 4.5469v18.383c0 2.5234 2.0195 4.5469 4.5469 4.5469 2.5234 0 4.5469-2.0195 4.5469-4.5469v-13.84z"/>
+</svg>
diff --git a/client/src/style.css b/client/src/style.css
index 86310fd857d..e5815d24c12 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -67,6 +67,16 @@
   margin-top: -2px;
 }
 
+.search-bar .swap-from-to {
+  border: none;
+  background: none;
+  margin: 30px 0 auto 0;
+}
+
+.search-bar .swap-from-to img {
+  width: 15px;
+}
+
 .itinerary-list-container {
   width: 36rem;
   overflow-y: auto;