diff --git a/src/assets/svgs/noun-fish-7471722.svg b/src/assets/svgs/noun-fish-7471722.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1ff5052bd85c8f5c9f8284ebe36f81c8ab7825df
--- /dev/null
+++ b/src/assets/svgs/noun-fish-7471722.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="128pt" height="128pt" version="1.1" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
+ <path d="m67.859 83.73c9.2812-2.2383 17.391-7.5391 23.191-14.758 4.1562 5.1758 9.4961 9.3555 15.613 12.125-2.4102-5.3203-3.75-11.211-3.75-17.43 0-6.2148 1.3516-12.109 3.75-17.426-6.1211 2.7695-11.461 6.9492-15.613 12.113-2.5352-3.1484-5.5117-5.9414-8.8086-8.2461 0.75391-2.4805 1.7148-4.8516 2.8555-7.0898-4.6836-2.4336-12.859-6.2344-18.18-7.3281-3.2383 1.8516-6.2383 4.1445-8.9102 6.8008-15.668 0-29.34 8.5352-36.668 21.168 7.3281 12.648 21 21.184 36.668 21.184 3.9414 3.9297 9.0352 6.5664 14.566 7.4688-2.0391-2.4766-3.6562-5.3594-4.7109-8.5859" fill-rule="evenodd"/>
+</svg>
diff --git a/src/components/FindexGlobalThreatsViz.vue b/src/components/FindexGlobalThreatsViz.vue
index a38e4d5da0ef636fac1274c4b4fe3f035a94ac0a..0624cdb0d4dd31c24107a4fb1a9210a6de71edf8 100644
--- a/src/components/FindexGlobalThreatsViz.vue
+++ b/src/components/FindexGlobalThreatsViz.vue
@@ -24,7 +24,9 @@
                         <h4 v-if="tab.subThreatData.length > 1">Subthreat categories:
                             <span v-for="subThreatCategory, index in tab.subThreatData" :key="subThreatCategory.subThreat">
                                 <button @click="switchToSubCategory(subThreatCategory.subThreat, tab.subThreatPrefix)" :class="[tab.tabContentTitleID, { 'highlight': currentCategory == subThreatCategory.subThreat }]" v-html="subThreatCategory.subThreat" class="category-button sub"></button>
-                                <span v-if="index < tab.subThreatData.length-1" :class="tab.tabContentTitleID" class="separator"> &#x2022; </span>
+                                <span v-if="index < tab.subThreatData.length-1" :class="tab.tabContentTitleID" class="separator">
+                                    <FishIcon id="findex-fish" :class="tab.tabContentTitleID"/>
+                                </span>
                             </span>
                         </h4>
                     </div>
@@ -50,6 +52,7 @@
 <script setup>
     import { computed, nextTick, onMounted, ref } from "vue";
     import VizSection from '@/components/VizSection.vue';
+    import FishIcon from '@/assets/svgs/noun-fish-7471722.svg';
 
     // define props
     const props = defineProps({
@@ -166,6 +169,11 @@ $fishing-pressure: #835192;
 #button-container {
     margin-bottom: 2rem;
 }
+#findex-fish {
+    width: 20px;
+    height: 20px;
+    transform: translate(0, 4px);
+}
 #icon-legend-container{
     display: flex;
     flex-direction: row;
@@ -192,19 +200,24 @@ $fishing-pressure: #835192;
     width: 100%;
 }
 .habitat {
-    color: $habitat
+    color: $habitat;
+    fill: $habitat;
 }
 .pollution {
     color: $pollution;
+    fill: $pollution;
 }
 .climate-and-weather {
     color: $climate-and-weather;
+    fill: $climate-and-weather;
 }
 .invasive-species {
     color: $invasive-species;
+    fill: $invasive-species;
 }
 .fishing-pressure {
     color: $fishing-pressure;
+    fill: $fishing-pressure;
 }
 .highlight.habitat {
     background-color: $habitat;