diff --git a/client/src/components/icons/SearchMagnifyingGlass.vue b/client/src/components/icons/SearchMagnifyingGlass.vue
new file mode 100644
index 00000000..2f145ac7
--- /dev/null
+++ b/client/src/components/icons/SearchMagnifyingGlass.vue
@@ -0,0 +1,12 @@
+<template>
+  <svg
+    id="a"
+    data-name="shape"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+  >
+    <path
+      d="m82.3799,17.6201c-6.5254-6.5264-15.2012-10.1201-24.4297-10.1201s-17.9053,3.5938-24.4307,10.1201c-6.5264,6.5254-10.1201,15.2012-10.1201,24.4297,0,8.3906,2.9788,16.3176,8.4223,22.5933l-23.5893,23.5894c-.9766.9766-.9766,2.5586,0,3.5352.4883.4883,1.1279.7324,1.7676.7324s1.2793-.2441,1.7676-.7324l23.5893-23.5894c6.2757,5.4436,14.2028,8.4224,22.5933,8.4224,9.2285,0,17.9043-3.5938,24.4297-10.1201,6.5254-6.5254,10.1201-15.2021,10.1201-24.4307s-3.5938-17.9043-10.1201-24.4297Zm-3.5352,45.3252c-5.5811,5.5811-13.002,8.6553-20.8945,8.6553s-15.3145-3.0742-20.8955-8.6553-8.6553-13.002-8.6553-20.8955,3.0742-15.3135,8.6553-20.8945,13.002-8.6553,20.8955-8.6553,15.3135,3.0742,20.8945,8.6553,8.6553,13.002,8.6553,20.8945-3.0742,15.3145-8.6553,20.8955Z"
+    />
+  </svg>
+</template>
diff --git a/client/src/components/instruments/FilterBar.vue b/client/src/components/instruments/FilterBar.vue
index 8c1d2bc9..d394381c 100644
--- a/client/src/components/instruments/FilterBar.vue
+++ b/client/src/components/instruments/FilterBar.vue
@@ -8,7 +8,7 @@
         @input="debouncedUpdate"
         placeholder="Suchbegriff eingeben..."
       />
-      <NoteIcon class="filter-bar__search-icon"></NoteIcon>
+      <SearchMagnifyingGlass class="filter-bar__search-icon"></SearchMagnifyingGlass>
       <!-- Font Awesome search icon as an example -->
     </div>
     <pill-radio-buttons
@@ -22,10 +22,10 @@
 
 <script setup lang="ts">
 import debounce from 'lodash/debounce';
-
 import { ref, watchEffect } from 'vue';
 import NoteIcon from '@/components/icons/NoteIcon.vue';
 import PillRadioButtons from '@/components/ui/PillRadioButtons.vue';
+import SearchMagnifyingGlass from "@/components/icons/SearchMagnifyingGlass.vue";
 
 const props = defineProps({
   searchText: {
@@ -78,16 +78,16 @@ const debouncedUpdate = debounce((event: Event) => {
     padding: 1rem;
     border-radius: $input-border-radius;
     border: 1px solid $color-silver;
-    font-size: 1rem;
+    font-size: $base-font-size-pixels;
   }
 
   &__search-icon {
     position: absolute;
-    right: 1rem;
+    width: $default-icon-dimension;
+    height: $default-icon-dimension;
+    right: $medium-spacing;
     top: 50%;
     transform: translateY(-50%);
-    font-size: 1rem;
-    color: $color-silver;
   }
 
   &__language-selection {