diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss
index ad967f21..ca1d2739 100644
--- a/app/assets/stylesheets/dashboard.scss
+++ b/app/assets/stylesheets/dashboard.scss
@@ -72,26 +72,14 @@
   stroke: $black;
 }
 
-.harvey-ball--ideal {
+.harvey-ball--approval, .harvey-ball--ideal {
   fill: $purple;
 }
 
-.harvey-ball--approval {
-  fill: $purple;
-}
-
-.harvey-ball--growth {
-  fill: $gold;
-}
-
-.harvey-ball--watch {
+.harvey-ball--warning, .harvey-ball--watch, .harvey-ball--growth {
   fill: $gold;
 }
 
-.harvey-ball--warning {
-  fill: $white;
-}
-
 .harvey-ball--insufficient_data {
   stroke: $gray-2;
   fill: $gray-3;
diff --git a/app/presenters/subcategory_card_presenter.rb b/app/presenters/subcategory_card_presenter.rb
index b97f39bb..bc7458ba 100644
--- a/app/presenters/subcategory_card_presenter.rb
+++ b/app/presenters/subcategory_card_presenter.rb
@@ -8,15 +8,7 @@ class SubcategoryCardPresenter
   end
 
   def harvey_ball_icon
-    icons_by_zone_type = {
-      ideal: "full-circle",
-      approval: "three-quarter-circle",
-      growth: "half-circle",
-      watch: "one-quarter-circle",
-      warning: "full-circle",
-      insufficient_data: "full-circle"
-    }
-    icons_by_zone_type[zone.type]
+    "#{zone.type}-harvey-ball"
   end
 
   def color
diff --git a/app/views/dashboard/_quality_framework_indicators.erb b/app/views/dashboard/_quality_framework_indicators.erb
index 8d592470..7ddfebb1 100644
--- a/app/views/dashboard/_quality_framework_indicators.erb
+++ b/app/views/dashboard/_quality_framework_indicators.erb
@@ -1,7 +1,7 @@
 <div class="mt-5 school-quality-frameworks">
   <% category_presenters.each do |category_presenter| %>
     <div class="text-center">
-      <i class="<%= category_presenter.icon_class %> fa-2x color-gray-2"></i>
+      <i class="<%= category_presenter.icon_class %> <%= category_presenter.icon_color_class %> fa-2x"></i>
     </div>
     <div class="text-center">
       <h3 class="sub-header-3">
diff --git a/app/views/dashboard/index.html.erb b/app/views/dashboard/index.html.erb
index ed30d2d4..2b8eb21a 100644
--- a/app/views/dashboard/index.html.erb
+++ b/app/views/dashboard/index.html.erb
@@ -3,7 +3,8 @@
 <% end %>
 
 <svg class="d-none">
-  <symbol viewBox="0 0 24 24" id="one-quarter-circle">
+
+  <symbol viewBox="0 0 24 24" id="warning-harvey-ball">
     <circle cx="12" cy="12" r="11.5" fill="white" stroke="none" />
     <path d="
                       M 12 0
@@ -15,8 +16,7 @@
     <circle cx="12" cy="12" r="11.5" fill="none" />
   </symbol>
 
-  <symbol viewBox="0 0 24 24" id="half-circle">
-    <circle cx="12" cy="12" r="11.5" fill="white" stroke="none" />
+  <symbol viewBox="0 0 24 24" id="watch-harvey-ball">
     <path d="
                       M 12 0
                       A 12 12 0 1 1 12 24
@@ -27,7 +27,7 @@
     <circle cx="12" cy="12" r="11.5" fill="none" />
   </symbol>
 
-  <symbol viewBox="0 0 24 24" id="three-quarter-circle">
+  <symbol viewBox="0 0 24 24" id="growth-harvey-ball">
     <circle cx="12" cy="12" r="11.5" fill="white" stroke="none" />
     <path d="
                       M 12 0
@@ -39,7 +39,19 @@
     <circle cx="12" cy="12" r="11.5" fill="none" />
   </symbol>
 
-  <symbol viewBox="0 0 24 24" id="full-circle">
+  <symbol viewBox="0 0 24 24" id="approval-harvey-ball">
+    <circle cx="12" cy="12" r="11.5" />
+    <path d="M19 8C19 8.28125 18.875 8.53125 18.6875 8.71875L10.6875 16.7188C10.5 16.9062 10.25 17 10 17C9.71875 17 9.46875 16.9062 9.28125 16.7188L5.28125 12.7188C5.09375 12.5312 5 12.2812 5 12C5 11.4375 5.4375 11 6 11C6.25 11 6.5 11.125 6.6875 11.3125L10 14.5938L17.2812 7.3125C17.4688 7.125 17.7188 7 18 7C18.5312 7 19 7.4375 19 8Z"
+          stroke-width=".5" stroke="white" fill="white" />
+  </symbol>
+
+  <symbol viewBox="0 0 24 24" id="ideal-harvey-ball">
+    <circle cx="12" cy="12" r="11.5" />
+    <path d="M9.28125 11.7188C9.46875 11.9062 9.71875 12 10 12C10.25 12 10.5 11.9062 10.6875 11.7188L15.6875 6.71875C15.875 6.53125 16 6.28125 16 6C16 5.4375 15.5312 5 15 5C14.7188 5 14.4688 5.125 14.2812 5.3125L10 9.59375L8.1875 7.8125C8 7.625 7.75 7.5 7.5 7.5C6.9375 7.5 6.5 7.9375 6.5 8.5C6.5 8.78125 6.59375 9.03125 6.78125 9.21875L9.28125 11.7188ZM19 10C19 9.4375 18.5312 9 18 9C17.7188 9 17.4688 9.125 17.2812 9.3125L10 16.5938L6.6875 13.3125C6.5 13.125 6.25 13 6 13C5.4375 13 5 13.4375 5 14C5 14.2812 5.09375 14.5312 5.28125 14.7188L9.28125 18.7188C9.46875 18.9062 9.71875 19 10 19C10.25 19 10.5 18.9062 10.6875 18.7188L18.6875 10.7188C18.875 10.5312 19 10.2812 19 10Z"
+          stroke-width=".5" stroke="white" fill="white" />
+  </symbol>
+
+  <symbol viewBox="0 0 24 24" id="insufficient_data-harvey-ball">
     <circle cx="12" cy="12" r="11.5" />
   </symbol>
 </svg>
@@ -51,19 +63,19 @@
     <div class="harvey-ball-legend">
       <div class="font-size-14">Warning</div>
       <svg class="ms-3 me-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-        <use class="harvey-ball harvey-ball--warning" xlink:href="#full-circle"></use>
+        <use class="harvey-ball harvey-ball--warning" xlink:href="#warning-harvey-ball"></use>
       </svg>
       <svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-        <use class="harvey-ball harvey-ball--watch" xlink:href="#one-quarter-circle"></use>
+        <use class="harvey-ball harvey-ball--watch" xlink:href="#watch-harvey-ball"></use>
       </svg>
       <svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-        <use class="harvey-ball harvey-ball--growth" xlink:href="#half-circle"></use>
+        <use class="harvey-ball harvey-ball--growth" xlink:href="#growth-harvey-ball"></use>
       </svg>
       <svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-        <use class="harvey-ball harvey-ball--approval" xlink:href="#three-quarter-circle"></use>
+        <use class="harvey-ball harvey-ball--approval" xlink:href="#approval-harvey-ball"></use>
       </svg>
       <svg class="ms-1 me-3" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-        <use class="harvey-ball harvey-ball--ideal" xlink:href="#full-circle"></use>
+        <use class="harvey-ball harvey-ball--ideal" xlink:href="#ideal-harvey-ball"></use>
       </svg>
       <div class="font-size-14">Ideal</div>
     </div>
diff --git a/spec/presenters/subcategory_card_presenter_spec.rb b/spec/presenters/subcategory_card_presenter_spec.rb
index 98867e95..7b27ac42 100644
--- a/spec/presenters/subcategory_card_presenter_spec.rb
+++ b/spec/presenters/subcategory_card_presenter_spec.rb
@@ -16,7 +16,7 @@ describe SubcategoryCardPresenter do
     let(:score) { 1 }
 
     it 'returns the icon that represents the zone' do
-      expect(subcategory_card_presenter.harvey_ball_icon).to eq "full-circle"
+      expect(subcategory_card_presenter.harvey_ball_icon).to eq "warning-harvey-ball"
     end
 
     it 'returns the color class of the zone' do
@@ -28,7 +28,7 @@ describe SubcategoryCardPresenter do
     let(:score) { 2 }
 
     it 'returns the icon that represents the zone' do
-      expect(subcategory_card_presenter.harvey_ball_icon).to eq "one-quarter-circle"
+      expect(subcategory_card_presenter.harvey_ball_icon).to eq "watch-harvey-ball"
     end
 
     it 'returns the color class of the zone' do
@@ -40,7 +40,7 @@ describe SubcategoryCardPresenter do
     let(:score) { 3 }
 
     it 'returns the icon that represents the zone' do
-      expect(subcategory_card_presenter.harvey_ball_icon).to eq "half-circle"
+      expect(subcategory_card_presenter.harvey_ball_icon).to eq "growth-harvey-ball"
     end
 
     it 'returns the color class of the zone' do
@@ -52,7 +52,7 @@ describe SubcategoryCardPresenter do
     let(:score) { 4 }
 
     it 'returns the icon that represents the zone' do
-      expect(subcategory_card_presenter.harvey_ball_icon).to eq "three-quarter-circle"
+      expect(subcategory_card_presenter.harvey_ball_icon).to eq "approval-harvey-ball"
     end
 
     it 'returns the color class of the zone' do
@@ -64,7 +64,7 @@ describe SubcategoryCardPresenter do
     let(:score) { 5 }
 
     it 'returns the icon that represents the zone' do
-      expect(subcategory_card_presenter.harvey_ball_icon).to eq "full-circle"
+      expect(subcategory_card_presenter.harvey_ball_icon).to eq "ideal-harvey-ball"
     end
 
     it 'returns the color class of the zone' do
@@ -76,7 +76,7 @@ describe SubcategoryCardPresenter do
     let(:score) { 0 }
 
     it 'returns the icon that represents the zone' do
-      expect(subcategory_card_presenter.harvey_ball_icon).to eq "full-circle"
+      expect(subcategory_card_presenter.harvey_ball_icon).to eq "insufficient_data-harvey-ball"
     end
 
     it 'reports that there is insufficient data' do