diff --git a/hypha/apply/review/templatetags/review_tags.py b/hypha/apply/review/templatetags/review_tags.py
index 9c8a4cc7dd..d57277f7bf 100644
--- a/hypha/apply/review/templatetags/review_tags.py
+++ b/hypha/apply/review/templatetags/review_tags.py
@@ -1,5 +1,5 @@
 from django import template
-from django.utils.safestring import mark_safe
+from django.utils.html import format_html
 from django.utils.translation import gettext_lazy as _
 
 from ..models import MAYBE, NO, YES
@@ -8,25 +8,31 @@
 register = template.Library()
 
 
-TRAFFIC_LIGHT_COLORS = {
-    YES: {
-        "color": "green",
-        "value": "Y",
-    },
-    MAYBE: {
-        "color": "amber",
-        "value": "M",
-    },
-    NO: {"color": "red", "value": "N"},
-}
-
-TRAFFIC_LIGHT_TEMPLATE = '<span class="traffic-light traffic-light--{color}"></span>'
-
-
 @register.filter()
 def traffic_light(value):
+    mapping = {
+        YES: {
+            "label": _("Overall recommendation: Yes"),
+            "class": "triangle-up text-success",
+        },
+        MAYBE: {
+            "label": _("Overall recommendation: Maybe"),
+            "class": "circle text-warning",
+        },
+        NO: {
+            "label": _("Overall recommendation: No"),
+            "class": "triangle-down text-error",
+        },
+    }
+
     try:
-        return mark_safe(TRAFFIC_LIGHT_TEMPLATE.format(**TRAFFIC_LIGHT_COLORS[value]))
+        html = """
+            <div class="flex items-center">
+                <span class="size-3 {class}" aria-hidden=true></span>
+                <span class="sr-only">{label}</span>
+            </div>
+        """
+        return format_html(html, **mapping[value])
     except KeyError:
         return ""
 
diff --git a/hypha/static_src/sass/components/_traffic-light.scss b/hypha/static_src/sass/components/_traffic-light.scss
deleted file mode 100644
index f7ae2637e2..0000000000
--- a/hypha/static_src/sass/components/_traffic-light.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@use "../abstracts/variables";
-
-.traffic-light {
-  display: block;
-  width: 1em;
-  height: 1em;
-  aspect-ratio: 1/1;
-
-  &--no,
-  &--red {
-    background-color: var(--color-error);
-    clip-path: polygon(100% 0, 0 0, 50% 100%);
-  }
-
-  &--maybe,
-  &--amber {
-    background-color: var(--color-warning);
-    border-radius: 50%;
-  }
-
-  &--yes,
-  &--green {
-    background-color: var(--color-success);
-    clip-path: polygon(50% 0, 0 100%, 100% 100%);
-  }
-}
diff --git a/hypha/static_src/sass/main.scss b/hypha/static_src/sass/main.scss
index dea4ff1271..d6612d4f06 100644
--- a/hypha/static_src/sass/main.scss
+++ b/hypha/static_src/sass/main.scss
@@ -5,7 +5,6 @@
 @use "components/reviews-sidebar";
 @use "components/reviews-summary";
 @use "components/sidebar";
-@use "components/traffic-light";
 @use "components/two-factor";
 @use "components/wrapper";
 
diff --git a/hypha/static_src/tailwind/utilities/misc.css b/hypha/static_src/tailwind/utilities/misc.css
index 534ec7d936..f4aeda6baa 100644
--- a/hypha/static_src/tailwind/utilities/misc.css
+++ b/hypha/static_src/tailwind/utilities/misc.css
@@ -97,3 +97,20 @@
 @utility js-hidden {
   @apply hidden noscript:block;
 }
+
+@utility triangle-up {
+  @apply size-4 inline-block aspect-square;
+  background-color: currentColor;
+  clip-path: polygon(50% 0, 0 100%, 100% 100%);
+}
+
+@utility triangle-down {
+  @apply size-4 inline-block aspect-square;
+  background-color: currentColor;
+  clip-path: polygon(100% 0, 0 0, 50% 100%);
+}
+
+@utility circle {
+  @apply size-4 inline-block aspect-square rounded-full;
+  background-color: currentColor;
+}