diff --git a/plugin-designs/people-groups-grid/people-groups-grid.vue b/plugin-designs/people-groups-grid/people-groups-grid.vue
index 23d9d498d..b543af13a 100644
--- a/plugin-designs/people-groups-grid/people-groups-grid.vue
+++ b/plugin-designs/people-groups-grid/people-groups-grid.vue
@@ -1060,7 +1060,7 @@ onMounted(() => {
         </svg>
         {{ filtersExpanded ? (t.hide_filters || 'Hide Filters') : (t.show_filters || 'Show Filters') }}
         <span v-if="activeFilterCount" class="filters__toggle-count">{{ activeFilterCount }}</span>
-        <svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+        <svg class="filters__toggle-chevron" width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
           <path d="M2 4l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
         </svg>
       </button>
@@ -1289,7 +1289,12 @@ onMounted(() => {
   background: var(--dx-accent, #92b195); color: #fff; border-radius: 999px;
   min-width: 18px; padding: 0 5px; font-size: 0.75rem; line-height: 18px; text-align: center;
 }
-.filters__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
+/* Only the CHEVRON turns over when the filters are open. The rule used to match every svg in the
+   button, so the filter icon beside the label flipped upside down too (its longest line at the
+   bottom), which read as a broken icon. Measured on a phone, where the grid opens with its filters
+   expanded. */
+.filters__toggle-chevron { flex: none; }
+.filters__toggle[aria-expanded="true"] .filters__toggle-chevron { transform: rotate(180deg); }
 .filters__panel { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: flex-start; }
 .filter-toggle {
   padding: 6px 12px; cursor: pointer; font-size: 0.875rem; color: inherit; background: var(--card);