1 files changed, 14 insertions, 6 deletions
diff --git a/app/assets/javascripts/vue_shared/components/toggle_button.vue b/app/assets/javascripts/vue_shared/components/toggle_button.vue
index 1de866bed37..540edc9f61c 100644
--- a/app/assets/javascripts/vue_shared/components/toggle_button.vue
+++ b/app/assets/javascripts/vue_shared/components/toggle_button.vue
@@ -1,7 +1,6 @@
 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { s__ } from '../../locale';
-import icon from './icon.vue';
 
 const ICON_ON = 'status_success_borderless';
 const ICON_OFF = 'status_failed_borderless';
@@ -10,7 +9,7 @@ const LABEL_OFF = s__('ToggleButton|Toggle Status: OFF');
 
 export default {
   components: {
-    icon,
+    GlIcon,
     GlLoadingIcon,
   },
 
@@ -63,18 +62,27 @@ export default {
   <label class="toggle-wrapper">
     <input v-if="name" :name="name" :value="value" type="hidden" />
     <button
+      type="button"
+      role="switch"
+      class="project-feature-toggle"
       :aria-label="ariaLabel"
+      :aria-checked="value"
       :class="{
         'is-checked': value,
+        'gl-blue-500': value,
         'is-disabled': disabledInput,
         'is-loading': isLoading,
       }"
-      type="button"
-      class="project-feature-toggle"
       @click="toggleFeature"
     >
       <gl-loading-icon class="loading-icon" />
-      <span class="toggle-icon"> <icon :name="toggleIcon" class="toggle-icon-svg" /> </span>
+      <span class="toggle-icon">
+        <gl-icon
+          :size="18"
+          :name="toggleIcon"
+          :class="value ? 'gl-text-blue-500' : 'gl-text-gray-400'"
+        />
+      </span>
     </button>
   </label>
 </template>