diff --git a/modules/primer-labels/README.md b/modules/primer-labels/README.md
index 2f34b9a5ad..d93247aa26 100644
--- a/modules/primer-labels/README.md
+++ b/modules/primer-labels/README.md
@@ -129,7 +129,7 @@ Use `State--small` for a state label with reduced padding a smaller font size. T
 
 ## Counters
 
-Use the `Counter` component to add a count to navigational elements and buttons. Counters come in 3 variations: the default `Counter` with a light gray background, `Counter--gray` with a dark-gray background and inverse white text, and `Counter--gray-light` with a light-gray background and dark gray text.
+Use the `Counter` component to add a count to navigational elements and buttons. Counters come in 3 variations: the default `Counter` with a light gray background, `Counter--gray` with a dark-gray background and inverse white text, and `Counter--gray-light` with a light-gray background and dark gray text. When a counter is empty, it's visibility will be hidden.
 
 ```html title="Counter"
 <span class="Counter">16</span>
diff --git a/modules/primer-labels/lib/counters.scss b/modules/primer-labels/lib/counters.scss
index d4ceb6447b..359f903672 100644
--- a/modules/primer-labels/lib/counters.scss
+++ b/modules/primer-labels/lib/counters.scss
@@ -8,6 +8,10 @@
   color: $gray-600;
   background-color: rgba($black, 0.08);
   border-radius: 20px;
+
+  &:empty {
+    visibility: hidden;
+  }
 }
 
 .Counter--gray-light {