diff --git a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
index dfdd00cff47221f2af59b65c01478a58ffdf6414..f2b1099a678b741a98e1bcf80eaff3e0867815f7 100644
--- a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
+++ b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
@@ -70,11 +70,11 @@ export default {
         :update-confidential-attribute="updateConfidentialAttribute"
       />
       <div v-if="!isConfidential" class="no-value sidebar-item-value">
-        <i class="fa fa-eye not-active"></i>
+        <i class="fa fa-eye sidebar-item-icon"></i>
         Not confidential
       </div>
       <div v-else class="value sidebar-item-value hide-collapsed">
-        <i aria-hidden="true" class="fa fa-eye-slash is-active"></i>
+        <i aria-hidden="true" class="fa fa-eye-slash sidebar-item-icon is-active"></i>
         This issue is confidential
       </div>
     </div>
diff --git a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
index a6a3920764856f4305e88e254609ff0700f1c3ec..9021d17dddf0db52763931024970e50c074baeae 100644
--- a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
+++ b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
@@ -95,12 +95,12 @@ export default {
       />
 
       <div v-if="isLocked" class="value sidebar-item-value">
-        <i aria-hidden="true" class="fa fa-lock is-active"></i>
+        <i aria-hidden="true" class="fa fa-lock sidebar-item-icon is-active"></i>
         {{ __('Locked') }}
       </div>
 
       <div v-else class="no-value sidebar-item-value hide-collapsed">
-        <i aria-hidden="true" class="fa fa-unlock not-active"></i>
+        <i aria-hidden="true" class="fa fa-unlock sidebar-item-icon"></i>
         {{ __('Unlocked') }}
       </div>
     </div>
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index e0083be7be9c64eafc57aaf8415a38c835f8f603..a88484d1a9ee387573c8c607f3ae07c311517357 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -16,15 +16,12 @@
   text-align: center;
 }
 
-.issuable-sidebar-item {
-  .not-active,
-  .is-active {
-    border-radius: $border-radius-default;
-    padding: 5px;
-    margin: 0 3px 0 -4px;
-  }
+.sidebar-item-icon {
+  border-radius: $border-radius-default;
+  padding: 5px;
+  margin: 0 3px 0 -4px;
 
-  .is-active {
+  &.is-active {
     color: $orange-600;
     background-color: $orange-50;
   }