From f7aa789d381cf261c836828efdb97b36b14fab15 Mon Sep 17 00:00:00 2001
From: James Benson <jamesbe@microsoft.com>
Date: Wed, 6 Nov 2024 10:41:50 -0500
Subject: [PATCH 01/17] Add badge-icon

---
 css/src/components/badge.scss | 33 +++++++++++++++++++++++--
 site/src/components/badge.md  | 45 ++++++++++++++++++++++++++++++++++-
 2 files changed, 75 insertions(+), 3 deletions(-)

diff --git a/css/src/components/badge.scss b/css/src/components/badge.scss
index 016eb3abd..c2f16f072 100644
--- a/css/src/components/badge.scss
+++ b/css/src/components/badge.scss
@@ -8,7 +8,12 @@ $badge-font-size-sm: $font-size-9 !default;
 $badge-font-size-lg: $font-size-7 !default;
 $badge-font-weight: $weight-semibold !default;
 
-$badge-icon-font-size: 0.875em !default;
+$badge-icon-font-size-xs: $font-size-4 !default;
+$badge-icon-font-size: $font-size-2 !default;
+$badge-icon-font-size-sm: $font-size-3 !default;
+$badge-icon-font-size-lg: $font-size-1 !default;
+
+$badge-with-icon-font-size: 0.875em !default;
 
 $badge-border-width: $border-width !default;
 $badge-border-radius: $border-radius-rounded !default;
@@ -71,8 +76,32 @@ $badge-border-radius: $border-radius-rounded !default;
 		}
 	}
 
-	.icon {
+	&.badge-icon {
 		font-size: $badge-icon-font-size;
+		border-radius: 50%;
+		padding: 0;
+	}
+
+	&.badge-icon-xs {
+		font-size: $badge-icon-font-size-xs;
+		border-radius: 50%;
+		padding: 0;
+	}
+
+	&.badge-icon-sm {
+		font-size: $badge-icon-font-size-sm;
+		border-radius: 50%;
+		padding: 0;
+	}
+
+	&.badge-icon-lg {
+		font-size: $badge-icon-font-size-lg;
+		border-radius: 50%;
+		padding: 0;
+	}
+
+	.icon {
+		font-size: $badge-with-icon-font-size;
 	}
 
 	// Sizes
diff --git a/site/src/components/badge.md b/site/src/components/badge.md
index 9a689ccf1..bf68b1290 100644
--- a/site/src/components/badge.md
+++ b/site/src/components/badge.md
@@ -45,7 +45,7 @@ By default, badges are secondary badges.
 
 ### Badge with icon
 
-Badges can include icons. To do this, nest the [icon component](./icon.md) inside a badge.
+Badges can include icons and text. To do this, nest the [icon component](./icon.md) inside a badge.
 
 ```html
 <span class="badge">
@@ -59,3 +59,46 @@ Badges can include icons. To do this, nest the [icon component](./icon.md) insid
 	<span>Badge</span>
 </span>
 ```
+
+### Badge Icon
+
+Badges with only icons. To do this, nest the [icon component](./icon.md) inside a badge.
+
+```html
+<span class="badge badge-icon-xs badge-success">
+	<span class="icon" aria-hidden="true">
+		<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="fill-current-color">
+			<path
+				d="M8 0C8.73438 0 9.44271 0.09375 10.125 0.28125C10.8073 0.46875 11.4427 0.739583 12.0312 1.09375C12.6198 1.44792 13.1589 1.86458 13.6484 2.34375C14.138 2.82292 14.5573 3.36198 14.9062 3.96094C15.2552 4.5599 15.5234 5.19792 15.7109 5.875C15.8984 6.55208 15.9948 7.26042 16 8C16 8.73438 15.9062 9.44271 15.7188 10.125C15.5312 10.8073 15.2604 11.4427 14.9062 12.0312C14.5521 12.6198 14.1354 13.1589 13.6562 13.6484C13.1771 14.138 12.638 14.5573 12.0391 14.9062C11.4401 15.2552 10.8021 15.5234 10.125 15.7109C9.44792 15.8984 8.73958 15.9948 8 16C7.26562 16 6.55729 15.9062 5.875 15.7188C5.19271 15.5312 4.55729 15.2604 3.96875 14.9062C3.38021 14.5521 2.84115 14.1354 2.35156 13.6562C1.86198 13.1771 1.44271 12.638 1.09375 12.0391C0.744792 11.4401 0.476562 10.8021 0.289062 10.125C0.101562 9.44792 0.00520833 8.73958 0 8C0 7.26562 0.09375 6.55729 0.28125 5.875C0.46875 5.19271 0.739583 4.55729 1.09375 3.96875C1.44792 3.38021 1.86458 2.84115 2.34375 2.35156C2.82292 1.86198 3.36198 1.44271 3.96094 1.09375C4.5599 0.744792 5.19792 0.476562 5.875 0.289062C6.55208 0.101562 7.26042 0.00520833 8 0ZM9 12V10H7V12H9ZM9 9V4H7V9H9Z"
+			/>
+		</svg>
+	</span>
+</span>
+<span class="badge badge-icon-sm badge-primary">
+	<span class="icon" aria-hidden="true">
+		<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="fill-current-color">
+			<path
+				d="M8 0C8.73438 0 9.44271 0.09375 10.125 0.28125C10.8073 0.46875 11.4427 0.739583 12.0312 1.09375C12.6198 1.44792 13.1589 1.86458 13.6484 2.34375C14.138 2.82292 14.5573 3.36198 14.9062 3.96094C15.2552 4.5599 15.5234 5.19792 15.7109 5.875C15.8984 6.55208 15.9948 7.26042 16 8C16 8.73438 15.9062 9.44271 15.7188 10.125C15.5312 10.8073 15.2604 11.4427 14.9062 12.0312C14.5521 12.6198 14.1354 13.1589 13.6562 13.6484C13.1771 14.138 12.638 14.5573 12.0391 14.9062C11.4401 15.2552 10.8021 15.5234 10.125 15.7109C9.44792 15.8984 8.73958 15.9948 8 16C7.26562 16 6.55729 15.9062 5.875 15.7188C5.19271 15.5312 4.55729 15.2604 3.96875 14.9062C3.38021 14.5521 2.84115 14.1354 2.35156 13.6562C1.86198 13.1771 1.44271 12.638 1.09375 12.0391C0.744792 11.4401 0.476562 10.8021 0.289062 10.125C0.101562 9.44792 0.00520833 8.73958 0 8C0 7.26562 0.09375 6.55729 0.28125 5.875C0.46875 5.19271 0.739583 4.55729 1.09375 3.96875C1.44792 3.38021 1.86458 2.84115 2.34375 2.35156C2.82292 1.86198 3.36198 1.44271 3.96094 1.09375C4.5599 0.744792 5.19792 0.476562 5.875 0.289062C6.55208 0.101562 7.26042 0.00520833 8 0ZM9 12V10H7V12H9ZM9 9V4H7V9H9Z"
+			/>
+		</svg>
+	</span>
+</span>
+<span class="badge badge-icon badge-info">
+	<span class="icon" aria-hidden="true">
+		<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="fill-current-color">
+			<path
+				d="M8 0C8.73438 0 9.44271 0.09375 10.125 0.28125C10.8073 0.46875 11.4427 0.739583 12.0312 1.09375C12.6198 1.44792 13.1589 1.86458 13.6484 2.34375C14.138 2.82292 14.5573 3.36198 14.9062 3.96094C15.2552 4.5599 15.5234 5.19792 15.7109 5.875C15.8984 6.55208 15.9948 7.26042 16 8C16 8.73438 15.9062 9.44271 15.7188 10.125C15.5312 10.8073 15.2604 11.4427 14.9062 12.0312C14.5521 12.6198 14.1354 13.1589 13.6562 13.6484C13.1771 14.138 12.638 14.5573 12.0391 14.9062C11.4401 15.2552 10.8021 15.5234 10.125 15.7109C9.44792 15.8984 8.73958 15.9948 8 16C7.26562 16 6.55729 15.9062 5.875 15.7188C5.19271 15.5312 4.55729 15.2604 3.96875 14.9062C3.38021 14.5521 2.84115 14.1354 2.35156 13.6562C1.86198 13.1771 1.44271 12.638 1.09375 12.0391C0.744792 11.4401 0.476562 10.8021 0.289062 10.125C0.101562 9.44792 0.00520833 8.73958 0 8C0 7.26562 0.09375 6.55729 0.28125 5.875C0.46875 5.19271 0.739583 4.55729 1.09375 3.96875C1.44792 3.38021 1.86458 2.84115 2.34375 2.35156C2.82292 1.86198 3.36198 1.44271 3.96094 1.09375C4.5599 0.744792 5.19792 0.476562 5.875 0.289062C6.55208 0.101562 7.26042 0.00520833 8 0ZM9 12V10H7V12H9ZM9 9V4H7V9H9Z"
+			/>
+		</svg>
+	</span>
+</span>
+<span class="badge badge-icon-lg badge-danger">
+	<span class="icon" aria-hidden="true">
+		<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="fill-current-color">
+			<path
+				d="M8 0C8.73438 0 9.44271 0.09375 10.125 0.28125C10.8073 0.46875 11.4427 0.739583 12.0312 1.09375C12.6198 1.44792 13.1589 1.86458 13.6484 2.34375C14.138 2.82292 14.5573 3.36198 14.9062 3.96094C15.2552 4.5599 15.5234 5.19792 15.7109 5.875C15.8984 6.55208 15.9948 7.26042 16 8C16 8.73438 15.9062 9.44271 15.7188 10.125C15.5312 10.8073 15.2604 11.4427 14.9062 12.0312C14.5521 12.6198 14.1354 13.1589 13.6562 13.6484C13.1771 14.138 12.638 14.5573 12.0391 14.9062C11.4401 15.2552 10.8021 15.5234 10.125 15.7109C9.44792 15.8984 8.73958 15.9948 8 16C7.26562 16 6.55729 15.9062 5.875 15.7188C5.19271 15.5312 4.55729 15.2604 3.96875 14.9062C3.38021 14.5521 2.84115 14.1354 2.35156 13.6562C1.86198 13.1771 1.44271 12.638 1.09375 12.0391C0.744792 11.4401 0.476562 10.8021 0.289062 10.125C0.101562 9.44792 0.00520833 8.73958 0 8C0 7.26562 0.09375 6.55729 0.28125 5.875C0.46875 5.19271 0.739583 4.55729 1.09375 3.96875C1.44792 3.38021 1.86458 2.84115 2.34375 2.35156C2.82292 1.86198 3.36198 1.44271 3.96094 1.09375C4.5599 0.744792 5.19792 0.476562 5.875 0.289062C6.55208 0.101562 7.26042 0.00520833 8 0ZM9 12V10H7V12H9ZM9 9V4H7V9H9Z"
+			/>
+		</svg>
+	</span>
+</span>
+```

From 6a35c12e371858e5ce8316b87a359121bb468a81 Mon Sep 17 00:00:00 2001
From: James Benson <jamesbe@microsoft.com>
Date: Wed, 6 Nov 2024 12:12:17 -0500
Subject: [PATCH 02/17] add changeset

---
 .changeset/large-buttons-ring.md | 6 ++++++
 css/src/components/badge.scss    | 8 ++++----
 2 files changed, 10 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/large-buttons-ring.md

diff --git a/.changeset/large-buttons-ring.md b/.changeset/large-buttons-ring.md
new file mode 100644
index 000000000..2e03e5d51
--- /dev/null
+++ b/.changeset/large-buttons-ring.md
@@ -0,0 +1,6 @@
+---
+'@microsoft/atlas-site': patch
+'@microsoft/atlas-css': patch
+---
+
+Add badge-icon css styles
diff --git a/css/src/components/badge.scss b/css/src/components/badge.scss
index c2f16f072..130030b19 100644
--- a/css/src/components/badge.scss
+++ b/css/src/components/badge.scss
@@ -8,10 +8,10 @@ $badge-font-size-sm: $font-size-9 !default;
 $badge-font-size-lg: $font-size-7 !default;
 $badge-font-weight: $weight-semibold !default;
 
-$badge-icon-font-size-xs: $font-size-4 !default;
-$badge-icon-font-size: $font-size-2 !default;
-$badge-icon-font-size-sm: $font-size-3 !default;
-$badge-icon-font-size-lg: $font-size-1 !default;
+$badge-icon-font-size-xs: 2.5em !default;
+$badge-icon-font-size-sm: 3.5em !default;
+$badge-icon-font-size: 4.5em !default;
+$badge-icon-font-size-lg: 5.5em !default;
 
 $badge-with-icon-font-size: 0.875em !default;
 

From 279f1c69045d02f769743b770c303b79831d771c Mon Sep 17 00:00:00 2001
From: James Benson <jamesbe@microsoft.com>
Date: Wed, 6 Nov 2024 12:15:05 -0500
Subject: [PATCH 03/17] fix linting

---
 css/src/components/badge.scss | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/css/src/components/badge.scss b/css/src/components/badge.scss
index 130030b19..5f26e26d3 100644
--- a/css/src/components/badge.scss
+++ b/css/src/components/badge.scss
@@ -77,27 +77,27 @@ $badge-border-radius: $border-radius-rounded !default;
 	}
 
 	&.badge-icon {
-		font-size: $badge-icon-font-size;
-		border-radius: 50%;
 		padding: 0;
+		border-radius: 50%;
+		font-size: $badge-icon-font-size;
 	}
 
 	&.badge-icon-xs {
-		font-size: $badge-icon-font-size-xs;
-		border-radius: 50%;
 		padding: 0;
+		border-radius: 50%;
+		font-size: $badge-icon-font-size-xs;
 	}
 
 	&.badge-icon-sm {
-		font-size: $badge-icon-font-size-sm;
-		border-radius: 50%;
 		padding: 0;
+		border-radius: 50%;
+		font-size: $badge-icon-font-size-sm;
 	}
 
 	&.badge-icon-lg {
-		font-size: $badge-icon-font-size-lg;
-		border-radius: 50%;
 		padding: 0;
+		border-radius: 50%;
+		font-size: $badge-icon-font-size-lg;
 	}
 
 	.icon {

From a05f20531206d7625a818bcd135f1137994901b0 Mon Sep 17 00:00:00 2001
From: James Benson <jamesbe@microsoft.com>
Date: Wed, 6 Nov 2024 12:41:47 -0500
Subject: [PATCH 04/17] default no border

---
 css/src/components/badge.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/css/src/components/badge.scss b/css/src/components/badge.scss
index 5f26e26d3..23ae68ca3 100644
--- a/css/src/components/badge.scss
+++ b/css/src/components/badge.scss
@@ -78,25 +78,25 @@ $badge-border-radius: $border-radius-rounded !default;
 
 	&.badge-icon {
 		padding: 0;
-		border-radius: 50%;
+		border: none;
 		font-size: $badge-icon-font-size;
 	}
 
 	&.badge-icon-xs {
 		padding: 0;
-		border-radius: 50%;
+		border: none;
 		font-size: $badge-icon-font-size-xs;
 	}
 
 	&.badge-icon-sm {
 		padding: 0;
-		border-radius: 50%;
+		border: none;
 		font-size: $badge-icon-font-size-sm;
 	}
 
 	&.badge-icon-lg {
 		padding: 0;
-		border-radius: 50%;
+		border: none;
 		font-size: $badge-icon-font-size-lg;
 	}
 

From 7b24f1d72a728afde5eee699b3a5ae182c77607c Mon Sep 17 00:00:00 2001
From: James Benson <jamesbe@microsoft.com>
Date: Fri, 8 Nov 2024 08:45:25 -0500
Subject: [PATCH 05/17] updated styles and description

---
 css/src/components/badge.scss | 40 +++++++++++++++--------------------
 site/src/components/badge.md  | 37 ++++++++++++++++++--------------
 2 files changed, 38 insertions(+), 39 deletions(-)

diff --git a/css/src/components/badge.scss b/css/src/components/badge.scss
index 23ae68ca3..1c35d0947 100644
--- a/css/src/components/badge.scss
+++ b/css/src/components/badge.scss
@@ -8,10 +8,10 @@ $badge-font-size-sm: $font-size-9 !default;
 $badge-font-size-lg: $font-size-7 !default;
 $badge-font-weight: $weight-semibold !default;
 
-$badge-icon-font-size-xs: 2.5em !default;
-$badge-icon-font-size-sm: 3.5em !default;
-$badge-icon-font-size: 4.5em !default;
-$badge-icon-font-size-lg: 5.5em !default;
+$badge-icon-font-size-xs: 1.5em !default;
+$badge-icon-font-size-sm: 2.5em !default;
+$badge-icon-font-size: 3.5em !default;
+$badge-icon-font-size-lg: 4.5em !default;
 
 $badge-with-icon-font-size: 0.875em !default;
 
@@ -76,28 +76,23 @@ $badge-border-radius: $border-radius-rounded !default;
 		}
 	}
 
-	&.badge-icon {
+	&:has(.icon:only-child) {
 		padding: 0;
 		border: none;
-		font-size: $badge-icon-font-size;
-	}
-
-	&.badge-icon-xs {
-		padding: 0;
-		border: none;
-		font-size: $badge-icon-font-size-xs;
-	}
 
-	&.badge-icon-sm {
-		padding: 0;
-		border: none;
-		font-size: $badge-icon-font-size-sm;
-	}
+		.icon {
+			font-size: $badge-icon-font-size;
 
-	&.badge-icon-lg {
-		padding: 0;
-		border: none;
-		font-size: $badge-icon-font-size-lg;
+			&.icon-xs {
+				font-size: $badge-icon-font-size-xs;
+			}
+			&.icon-sm {
+				font-size: $badge-icon-font-size-sm;
+			}
+			&.icon-lg {
+				font-size: $badge-icon-font-size-lg;
+			}
+		}
 	}
 
 	.icon {
@@ -105,7 +100,6 @@ $badge-border-radius: $border-radius-rounded !default;
 	}
 
 	// Sizes
-
 	&.badge-sm {
 		font-size: $badge-font-size-sm;
 	}
diff --git a/site/src/components/badge.md b/site/src/components/badge.md
index bf68b1290..59f3d41d1 100644
--- a/site/src/components/badge.md
+++ b/site/src/components/badge.md
@@ -62,43 +62,48 @@ Badges can include icons and text. To do this, nest the [icon component](./icon.
 
 ### Badge Icon
 
-Badges with only icons. To do this, nest the [icon component](./icon.md) inside a badge.
+Badges with only icons. To do this, the following classes are available for resizing: `icon-xs`, `icon-sm`, `icon-lg`.
 
 ```html
-<span class="badge badge-icon-xs badge-success">
-	<span class="icon" aria-hidden="true">
-		<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="fill-current-color">
+<span class="badge badge-success">
+	<span class="icon icon-xs" aria-hidden="true">
+		<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
-				d="M8 0C8.73438 0 9.44271 0.09375 10.125 0.28125C10.8073 0.46875 11.4427 0.739583 12.0312 1.09375C12.6198 1.44792 13.1589 1.86458 13.6484 2.34375C14.138 2.82292 14.5573 3.36198 14.9062 3.96094C15.2552 4.5599 15.5234 5.19792 15.7109 5.875C15.8984 6.55208 15.9948 7.26042 16 8C16 8.73438 15.9062 9.44271 15.7188 10.125C15.5312 10.8073 15.2604 11.4427 14.9062 12.0312C14.5521 12.6198 14.1354 13.1589 13.6562 13.6484C13.1771 14.138 12.638 14.5573 12.0391 14.9062C11.4401 15.2552 10.8021 15.5234 10.125 15.7109C9.44792 15.8984 8.73958 15.9948 8 16C7.26562 16 6.55729 15.9062 5.875 15.7188C5.19271 15.5312 4.55729 15.2604 3.96875 14.9062C3.38021 14.5521 2.84115 14.1354 2.35156 13.6562C1.86198 13.1771 1.44271 12.638 1.09375 12.0391C0.744792 11.4401 0.476562 10.8021 0.289062 10.125C0.101562 9.44792 0.00520833 8.73958 0 8C0 7.26562 0.09375 6.55729 0.28125 5.875C0.46875 5.19271 0.739583 4.55729 1.09375 3.96875C1.44792 3.38021 1.86458 2.84115 2.34375 2.35156C2.82292 1.86198 3.36198 1.44271 3.96094 1.09375C4.5599 0.744792 5.19792 0.476562 5.875 0.289062C6.55208 0.101562 7.26042 0.00520833 8 0ZM9 12V10H7V12H9ZM9 9V4H7V9H9Z"
+				d="M10 3C6.13401 3 3 6.13401 3 10C3 11.7547 3.64565 13.3586 4.71233 14.5872L8.94781 10.4185C9.5316 9.84393 10.4684 9.84393 11.0522 10.4185L15.2877 14.5872C16.3544 13.3586 17 11.7547 17 10C17 6.13401 13.866 3 10 3ZM10 17C11.7513 17 13.3525 16.3568 14.5801 15.2938L10.3507 11.1312C10.1561 10.9397 9.84387 10.9397 9.64927 11.1312L5.41994 15.2938C6.64753 16.3568 8.24866 17 10 17ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10ZM13 7.5C13 7.22386 12.7761 7 12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8C12.7761 8 13 7.77614 13 7.5ZM14 7.5C14 8.32843 13.3284 9 12.5 9C11.6716 9 11 8.32843 11 7.5C11 6.67157 11.6716 6 12.5 6C13.3284 6 14 6.67157 14 7.5Z"
+				fill="white"
 			/>
 		</svg>
 	</span>
 </span>
-<span class="badge badge-icon-sm badge-primary">
-	<span class="icon" aria-hidden="true">
-		<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="fill-current-color">
+<span class="badge badge-primary">
+	<span class="icon icon-sm" aria-hidden="true">
+		<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
-				d="M8 0C8.73438 0 9.44271 0.09375 10.125 0.28125C10.8073 0.46875 11.4427 0.739583 12.0312 1.09375C12.6198 1.44792 13.1589 1.86458 13.6484 2.34375C14.138 2.82292 14.5573 3.36198 14.9062 3.96094C15.2552 4.5599 15.5234 5.19792 15.7109 5.875C15.8984 6.55208 15.9948 7.26042 16 8C16 8.73438 15.9062 9.44271 15.7188 10.125C15.5312 10.8073 15.2604 11.4427 14.9062 12.0312C14.5521 12.6198 14.1354 13.1589 13.6562 13.6484C13.1771 14.138 12.638 14.5573 12.0391 14.9062C11.4401 15.2552 10.8021 15.5234 10.125 15.7109C9.44792 15.8984 8.73958 15.9948 8 16C7.26562 16 6.55729 15.9062 5.875 15.7188C5.19271 15.5312 4.55729 15.2604 3.96875 14.9062C3.38021 14.5521 2.84115 14.1354 2.35156 13.6562C1.86198 13.1771 1.44271 12.638 1.09375 12.0391C0.744792 11.4401 0.476562 10.8021 0.289062 10.125C0.101562 9.44792 0.00520833 8.73958 0 8C0 7.26562 0.09375 6.55729 0.28125 5.875C0.46875 5.19271 0.739583 4.55729 1.09375 3.96875C1.44792 3.38021 1.86458 2.84115 2.34375 2.35156C2.82292 1.86198 3.36198 1.44271 3.96094 1.09375C4.5599 0.744792 5.19792 0.476562 5.875 0.289062C6.55208 0.101562 7.26042 0.00520833 8 0ZM9 12V10H7V12H9ZM9 9V4H7V9H9Z"
+				d="M10 3C6.13401 3 3 6.13401 3 10C3 11.7547 3.64565 13.3586 4.71233 14.5872L8.94781 10.4185C9.5316 9.84393 10.4684 9.84393 11.0522 10.4185L15.2877 14.5872C16.3544 13.3586 17 11.7547 17 10C17 6.13401 13.866 3 10 3ZM10 17C11.7513 17 13.3525 16.3568 14.5801 15.2938L10.3507 11.1312C10.1561 10.9397 9.84387 10.9397 9.64927 11.1312L5.41994 15.2938C6.64753 16.3568 8.24866 17 10 17ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10ZM13 7.5C13 7.22386 12.7761 7 12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8C12.7761 8 13 7.77614 13 7.5ZM14 7.5C14 8.32843 13.3284 9 12.5 9C11.6716 9 11 8.32843 11 7.5C11 6.67157 11.6716 6 12.5 6C13.3284 6 14 6.67157 14 7.5Z"
+				fill="white"
 			/>
 		</svg>
 	</span>
 </span>
-<span class="badge badge-icon badge-info">
+<span class="badge badge-info">
 	<span class="icon" aria-hidden="true">
-		<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="fill-current-color">
+		<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
-				d="M8 0C8.73438 0 9.44271 0.09375 10.125 0.28125C10.8073 0.46875 11.4427 0.739583 12.0312 1.09375C12.6198 1.44792 13.1589 1.86458 13.6484 2.34375C14.138 2.82292 14.5573 3.36198 14.9062 3.96094C15.2552 4.5599 15.5234 5.19792 15.7109 5.875C15.8984 6.55208 15.9948 7.26042 16 8C16 8.73438 15.9062 9.44271 15.7188 10.125C15.5312 10.8073 15.2604 11.4427 14.9062 12.0312C14.5521 12.6198 14.1354 13.1589 13.6562 13.6484C13.1771 14.138 12.638 14.5573 12.0391 14.9062C11.4401 15.2552 10.8021 15.5234 10.125 15.7109C9.44792 15.8984 8.73958 15.9948 8 16C7.26562 16 6.55729 15.9062 5.875 15.7188C5.19271 15.5312 4.55729 15.2604 3.96875 14.9062C3.38021 14.5521 2.84115 14.1354 2.35156 13.6562C1.86198 13.1771 1.44271 12.638 1.09375 12.0391C0.744792 11.4401 0.476562 10.8021 0.289062 10.125C0.101562 9.44792 0.00520833 8.73958 0 8C0 7.26562 0.09375 6.55729 0.28125 5.875C0.46875 5.19271 0.739583 4.55729 1.09375 3.96875C1.44792 3.38021 1.86458 2.84115 2.34375 2.35156C2.82292 1.86198 3.36198 1.44271 3.96094 1.09375C4.5599 0.744792 5.19792 0.476562 5.875 0.289062C6.55208 0.101562 7.26042 0.00520833 8 0ZM9 12V10H7V12H9ZM9 9V4H7V9H9Z"
+				d="M10 3C6.13401 3 3 6.13401 3 10C3 11.7547 3.64565 13.3586 4.71233 14.5872L8.94781 10.4185C9.5316 9.84393 10.4684 9.84393 11.0522 10.4185L15.2877 14.5872C16.3544 13.3586 17 11.7547 17 10C17 6.13401 13.866 3 10 3ZM10 17C11.7513 17 13.3525 16.3568 14.5801 15.2938L10.3507 11.1312C10.1561 10.9397 9.84387 10.9397 9.64927 11.1312L5.41994 15.2938C6.64753 16.3568 8.24866 17 10 17ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10ZM13 7.5C13 7.22386 12.7761 7 12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8C12.7761 8 13 7.77614 13 7.5ZM14 7.5C14 8.32843 13.3284 9 12.5 9C11.6716 9 11 8.32843 11 7.5C11 6.67157 11.6716 6 12.5 6C13.3284 6 14 6.67157 14 7.5Z"
+				fill="white"
 			/>
 		</svg>
 	</span>
 </span>
-<span class="badge badge-icon-lg badge-danger">
-	<span class="icon" aria-hidden="true">
-		<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="fill-current-color">
+<span class="badge badge-warning">
+	<span class="icon icon-lg" aria-hidden="true">
+		<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
-				d="M8 0C8.73438 0 9.44271 0.09375 10.125 0.28125C10.8073 0.46875 11.4427 0.739583 12.0312 1.09375C12.6198 1.44792 13.1589 1.86458 13.6484 2.34375C14.138 2.82292 14.5573 3.36198 14.9062 3.96094C15.2552 4.5599 15.5234 5.19792 15.7109 5.875C15.8984 6.55208 15.9948 7.26042 16 8C16 8.73438 15.9062 9.44271 15.7188 10.125C15.5312 10.8073 15.2604 11.4427 14.9062 12.0312C14.5521 12.6198 14.1354 13.1589 13.6562 13.6484C13.1771 14.138 12.638 14.5573 12.0391 14.9062C11.4401 15.2552 10.8021 15.5234 10.125 15.7109C9.44792 15.8984 8.73958 15.9948 8 16C7.26562 16 6.55729 15.9062 5.875 15.7188C5.19271 15.5312 4.55729 15.2604 3.96875 14.9062C3.38021 14.5521 2.84115 14.1354 2.35156 13.6562C1.86198 13.1771 1.44271 12.638 1.09375 12.0391C0.744792 11.4401 0.476562 10.8021 0.289062 10.125C0.101562 9.44792 0.00520833 8.73958 0 8C0 7.26562 0.09375 6.55729 0.28125 5.875C0.46875 5.19271 0.739583 4.55729 1.09375 3.96875C1.44792 3.38021 1.86458 2.84115 2.34375 2.35156C2.82292 1.86198 3.36198 1.44271 3.96094 1.09375C4.5599 0.744792 5.19792 0.476562 5.875 0.289062C6.55208 0.101562 7.26042 0.00520833 8 0ZM9 12V10H7V12H9ZM9 9V4H7V9H9Z"
+				d="M10 3C6.13401 3 3 6.13401 3 10C3 11.7547 3.64565 13.3586 4.71233 14.5872L8.94781 10.4185C9.5316 9.84393 10.4684 9.84393 11.0522 10.4185L15.2877 14.5872C16.3544 13.3586 17 11.7547 17 10C17 6.13401 13.866 3 10 3ZM10 17C11.7513 17 13.3525 16.3568 14.5801 15.2938L10.3507 11.1312C10.1561 10.9397 9.84387 10.9397 9.64927 11.1312L5.41994 15.2938C6.64753 16.3568 8.24866 17 10 17ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10ZM13 7.5C13 7.22386 12.7761 7 12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8C12.7761 8 13 7.77614 13 7.5ZM14 7.5C14 8.32843 13.3284 9 12.5 9C11.6716 9 11 8.32843 11 7.5C11 6.67157 11.6716 6 12.5 6C13.3284 6 14 6.67157 14 7.5Z"
+				fill="white"
 			/>
 		</svg>
 	</span>
 </span>
+</span>
 ```

From 43e0ae0c3d37ba3b498d2d51724953295453a940 Mon Sep 17 00:00:00 2001
From: James Benson <jamesbe@microsoft.com>
Date: Fri, 8 Nov 2024 09:21:42 -0500
Subject: [PATCH 06/17] fix lint errors

---
 css/src/components/badge.scss | 31 +++++++++++++++++--------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/css/src/components/badge.scss b/css/src/components/badge.scss
index 1c35d0947..e4a454bd1 100644
--- a/css/src/components/badge.scss
+++ b/css/src/components/badge.scss
@@ -76,30 +76,21 @@ $badge-border-radius: $border-radius-rounded !default;
 		}
 	}
 
+	.icon {
+		font-size: $badge-with-icon-font-size;
+	}
+
 	&:has(.icon:only-child) {
 		padding: 0;
 		border: none;
 
 		.icon {
 			font-size: $badge-icon-font-size;
-
-			&.icon-xs {
-				font-size: $badge-icon-font-size-xs;
-			}
-			&.icon-sm {
-				font-size: $badge-icon-font-size-sm;
-			}
-			&.icon-lg {
-				font-size: $badge-icon-font-size-lg;
-			}
 		}
 	}
 
-	.icon {
-		font-size: $badge-with-icon-font-size;
-	}
-
 	// Sizes
+
 	&.badge-sm {
 		font-size: $badge-font-size-sm;
 	}
@@ -107,4 +98,16 @@ $badge-border-radius: $border-radius-rounded !default;
 	&.badge-lg {
 		font-size: $badge-font-size-lg;
 	}
+
+	&.icon-xs {
+		font-size: $badge-icon-font-size-xs;
+	}
+
+	&.icon-sm {
+		font-size: $badge-icon-font-size-sm;
+	}
+
+	&.icon-lg {
+		font-size: $badge-icon-font-size-lg;
+	}
 }

From 197ee7215ef16339029049f1ad19b591cfefc90a Mon Sep 17 00:00:00 2001
From: James Benson <jamesbe@microsoft.com>
Date: Fri, 8 Nov 2024 12:17:06 -0500
Subject: [PATCH 07/17] nest icon sizes in has selector

---
 css/src/components/badge.scss | 31 ++++++++++++++++---------------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/css/src/components/badge.scss b/css/src/components/badge.scss
index e4a454bd1..0186c4524 100644
--- a/css/src/components/badge.scss
+++ b/css/src/components/badge.scss
@@ -1,4 +1,5 @@
 $badge-padding-block: 0.2em !default;
+$badge-icon-padding-block: 0.5em !default;
 $badge-padding-inline: 0.5em !default;
 
 $badge-gap-size: 0.375em !default;
@@ -13,7 +14,7 @@ $badge-icon-font-size-sm: 2.5em !default;
 $badge-icon-font-size: 3.5em !default;
 $badge-icon-font-size-lg: 4.5em !default;
 
-$badge-with-icon-font-size: 0.875em !default;
+$badge-icon-with-text-font-size: 0.875em !default;
 
 $badge-border-width: $border-width !default;
 $badge-border-radius: $border-radius-rounded !default;
@@ -77,15 +78,27 @@ $badge-border-radius: $border-radius-rounded !default;
 	}
 
 	.icon {
-		font-size: $badge-with-icon-font-size;
+		font-size: $badge-icon-with-text-font-size;
 	}
 
 	&:has(.icon:only-child) {
-		padding: 0;
+		padding: $badge-icon-padding-block;
 		border: none;
 
 		.icon {
 			font-size: $badge-icon-font-size;
+
+			&.icon-xs {
+				font-size: $badge-icon-font-size-xs;
+			}
+
+			&.icon-sm {
+				font-size: $badge-icon-font-size-sm;
+			}
+
+			&.icon-lg {
+				font-size: $badge-icon-font-size-lg;
+			}
 		}
 	}
 
@@ -98,16 +111,4 @@ $badge-border-radius: $border-radius-rounded !default;
 	&.badge-lg {
 		font-size: $badge-font-size-lg;
 	}
-
-	&.icon-xs {
-		font-size: $badge-icon-font-size-xs;
-	}
-
-	&.icon-sm {
-		font-size: $badge-icon-font-size-sm;
-	}
-
-	&.icon-lg {
-		font-size: $badge-icon-font-size-lg;
-	}
 }

From ba9511ef14894f4f64d66d861aa161ecd620a7b8 Mon Sep 17 00:00:00 2001
From: Will Bjorn <wibjorn@microsoft.com>
Date: Fri, 8 Nov 2024 10:06:40 -0800
Subject: [PATCH 08/17] few modifications to try and avoid icon specific rules

---
 css/src/components/badge.scss | 29 +++++---------
 site/src/components/badge.md  | 71 +++++++++++++++++++++++++++--------
 2 files changed, 66 insertions(+), 34 deletions(-)

diff --git a/css/src/components/badge.scss b/css/src/components/badge.scss
index 0186c4524..44023619e 100644
--- a/css/src/components/badge.scss
+++ b/css/src/components/badge.scss
@@ -1,5 +1,5 @@
-$badge-padding-block: 0.2em !default;
 $badge-icon-padding-block: 0.5em !default;
+$badge-padding-block: 0.25em !default;
 $badge-padding-inline: 0.5em !default;
 
 $badge-gap-size: 0.375em !default;
@@ -7,9 +7,12 @@ $badge-gap-size: 0.375em !default;
 $badge-font-size: $font-size-8 !default;
 $badge-font-size-sm: $font-size-9 !default;
 $badge-font-size-lg: $font-size-7 !default;
+$badge-font-size-xl: $font-size-6 !default;
 $badge-font-weight: $weight-semibold !default;
 
-$badge-icon-font-size-xs: 1.5em !default;
+$badge-icon-size: 1.3em !default;
+
+$badge-icon-font-size-xs: 1.2em !default;
 $badge-icon-font-size-sm: 2.5em !default;
 $badge-icon-font-size: 3.5em !default;
 $badge-icon-font-size-lg: 4.5em !default;
@@ -78,28 +81,12 @@ $badge-border-radius: $border-radius-rounded !default;
 	}
 
 	.icon {
-		font-size: $badge-icon-with-text-font-size;
+		font-size: $badge-icon-size;
 	}
 
 	&:has(.icon:only-child) {
 		padding: $badge-icon-padding-block;
 		border: none;
-
-		.icon {
-			font-size: $badge-icon-font-size;
-
-			&.icon-xs {
-				font-size: $badge-icon-font-size-xs;
-			}
-
-			&.icon-sm {
-				font-size: $badge-icon-font-size-sm;
-			}
-
-			&.icon-lg {
-				font-size: $badge-icon-font-size-lg;
-			}
-		}
 	}
 
 	// Sizes
@@ -111,4 +98,8 @@ $badge-border-radius: $border-radius-rounded !default;
 	&.badge-lg {
 		font-size: $badge-font-size-lg;
 	}
+
+	&.badge-xl {
+		font-size: $badge-font-size-xl;
+	}
 }
diff --git a/site/src/components/badge.md b/site/src/components/badge.md
index 59f3d41d1..809747cca 100644
--- a/site/src/components/badge.md
+++ b/site/src/components/badge.md
@@ -48,62 +48,103 @@ By default, badges are secondary badges.
 Badges can include icons and text. To do this, nest the [icon component](./icon.md) inside a badge.
 
 ```html
+<span class="badge badge-sm">
+	<span class="icon" aria-hidden="true">
+		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path
+				class="fill-current-color"
+				d="M10 3C6.13401 3 3 6.13401 3 10C3 11.7547 3.64565 13.3586 4.71233 14.5872L8.94781 10.4185C9.5316 9.84393 10.4684 9.84393 11.0522 10.4185L15.2877 14.5872C16.3544 13.3586 17 11.7547 17 10C17 6.13401 13.866 3 10 3ZM10 17C11.7513 17 13.3525 16.3568 14.5801 15.2938L10.3507 11.1312C10.1561 10.9397 9.84387 10.9397 9.64927 11.1312L5.41994 15.2938C6.64753 16.3568 8.24866 17 10 17ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10ZM13 7.5C13 7.22386 12.7761 7 12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8C12.7761 8 13 7.77614 13 7.5ZM14 7.5C14 8.32843 13.3284 9 12.5 9C11.6716 9 11 8.32843 11 7.5C11 6.67157 11.6716 6 12.5 6C13.3284 6 14 6.67157 14 7.5Z"
+				fill="white"
+			/>
+		</svg>
+	</span>
+	<span>Badge Small</span>
+</span>
 <span class="badge">
 	<span class="icon" aria-hidden="true">
-		<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="fill-current-color">
+		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
-				d="M8 0C8.73438 0 9.44271 0.09375 10.125 0.28125C10.8073 0.46875 11.4427 0.739583 12.0312 1.09375C12.6198 1.44792 13.1589 1.86458 13.6484 2.34375C14.138 2.82292 14.5573 3.36198 14.9062 3.96094C15.2552 4.5599 15.5234 5.19792 15.7109 5.875C15.8984 6.55208 15.9948 7.26042 16 8C16 8.73438 15.9062 9.44271 15.7188 10.125C15.5312 10.8073 15.2604 11.4427 14.9062 12.0312C14.5521 12.6198 14.1354 13.1589 13.6562 13.6484C13.1771 14.138 12.638 14.5573 12.0391 14.9062C11.4401 15.2552 10.8021 15.5234 10.125 15.7109C9.44792 15.8984 8.73958 15.9948 8 16C7.26562 16 6.55729 15.9062 5.875 15.7188C5.19271 15.5312 4.55729 15.2604 3.96875 14.9062C3.38021 14.5521 2.84115 14.1354 2.35156 13.6562C1.86198 13.1771 1.44271 12.638 1.09375 12.0391C0.744792 11.4401 0.476562 10.8021 0.289062 10.125C0.101562 9.44792 0.00520833 8.73958 0 8C0 7.26562 0.09375 6.55729 0.28125 5.875C0.46875 5.19271 0.739583 4.55729 1.09375 3.96875C1.44792 3.38021 1.86458 2.84115 2.34375 2.35156C2.82292 1.86198 3.36198 1.44271 3.96094 1.09375C4.5599 0.744792 5.19792 0.476562 5.875 0.289062C6.55208 0.101562 7.26042 0.00520833 8 0ZM9 12V10H7V12H9ZM9 9V4H7V9H9Z"
+				class="fill-current-color"
+				d="M10 3C6.13401 3 3 6.13401 3 10C3 11.7547 3.64565 13.3586 4.71233 14.5872L8.94781 10.4185C9.5316 9.84393 10.4684 9.84393 11.0522 10.4185L15.2877 14.5872C16.3544 13.3586 17 11.7547 17 10C17 6.13401 13.866 3 10 3ZM10 17C11.7513 17 13.3525 16.3568 14.5801 15.2938L10.3507 11.1312C10.1561 10.9397 9.84387 10.9397 9.64927 11.1312L5.41994 15.2938C6.64753 16.3568 8.24866 17 10 17ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10ZM13 7.5C13 7.22386 12.7761 7 12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8C12.7761 8 13 7.77614 13 7.5ZM14 7.5C14 8.32843 13.3284 9 12.5 9C11.6716 9 11 8.32843 11 7.5C11 6.67157 11.6716 6 12.5 6C13.3284 6 14 6.67157 14 7.5Z"
+				fill="white"
 			/>
 		</svg>
 	</span>
 	<span>Badge</span>
 </span>
+<span class="badge badge-lg">
+	<span class="icon" aria-hidden="true">
+		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path
+				class="fill-current-color"
+				d="M10 3C6.13401 3 3 6.13401 3 10C3 11.7547 3.64565 13.3586 4.71233 14.5872L8.94781 10.4185C9.5316 9.84393 10.4684 9.84393 11.0522 10.4185L15.2877 14.5872C16.3544 13.3586 17 11.7547 17 10C17 6.13401 13.866 3 10 3ZM10 17C11.7513 17 13.3525 16.3568 14.5801 15.2938L10.3507 11.1312C10.1561 10.9397 9.84387 10.9397 9.64927 11.1312L5.41994 15.2938C6.64753 16.3568 8.24866 17 10 17ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10ZM13 7.5C13 7.22386 12.7761 7 12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8C12.7761 8 13 7.77614 13 7.5ZM14 7.5C14 8.32843 13.3284 9 12.5 9C11.6716 9 11 8.32843 11 7.5C11 6.67157 11.6716 6 12.5 6C13.3284 6 14 6.67157 14 7.5Z"
+				fill="white"
+			/>
+		</svg>
+	</span>
+	<span>Badge Large</span>
+</span>
+<span class="badge badge-xl">
+	<span class="icon" aria-hidden="true">
+		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path
+				class="fill-current-color"
+				d="M10 3C6.13401 3 3 6.13401 3 10C3 11.7547 3.64565 13.3586 4.71233 14.5872L8.94781 10.4185C9.5316 9.84393 10.4684 9.84393 11.0522 10.4185L15.2877 14.5872C16.3544 13.3586 17 11.7547 17 10C17 6.13401 13.866 3 10 3ZM10 17C11.7513 17 13.3525 16.3568 14.5801 15.2938L10.3507 11.1312C10.1561 10.9397 9.84387 10.9397 9.64927 11.1312L5.41994 15.2938C6.64753 16.3568 8.24866 17 10 17ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10ZM13 7.5C13 7.22386 12.7761 7 12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8C12.7761 8 13 7.77614 13 7.5ZM14 7.5C14 8.32843 13.3284 9 12.5 9C11.6716 9 11 8.32843 11 7.5C11 6.67157 11.6716 6 12.5 6C13.3284 6 14 6.67157 14 7.5Z"
+				fill="white"
+			/>
+		</svg>
+	</span>
+	<span>Badge Extra Large</span>
+</span>
 ```
 
 ### Badge Icon
 
-Badges with only icons. To do this, the following classes are available for resizing: `icon-xs`, `icon-sm`, `icon-lg`.
+Badges with only icons.
 
 ```html
-<span class="badge badge-success">
-	<span class="icon icon-xs" aria-hidden="true">
-		<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<span class="badge badge-sm">
+	<span class="icon" aria-hidden="true">
+		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
+				class="fill-current-color"
 				d="M10 3C6.13401 3 3 6.13401 3 10C3 11.7547 3.64565 13.3586 4.71233 14.5872L8.94781 10.4185C9.5316 9.84393 10.4684 9.84393 11.0522 10.4185L15.2877 14.5872C16.3544 13.3586 17 11.7547 17 10C17 6.13401 13.866 3 10 3ZM10 17C11.7513 17 13.3525 16.3568 14.5801 15.2938L10.3507 11.1312C10.1561 10.9397 9.84387 10.9397 9.64927 11.1312L5.41994 15.2938C6.64753 16.3568 8.24866 17 10 17ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10ZM13 7.5C13 7.22386 12.7761 7 12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8C12.7761 8 13 7.77614 13 7.5ZM14 7.5C14 8.32843 13.3284 9 12.5 9C11.6716 9 11 8.32843 11 7.5C11 6.67157 11.6716 6 12.5 6C13.3284 6 14 6.67157 14 7.5Z"
 				fill="white"
 			/>
 		</svg>
 	</span>
 </span>
-<span class="badge badge-primary">
-	<span class="icon icon-sm" aria-hidden="true">
-		<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<span class="badge">
+	<span class="icon" aria-hidden="true">
+		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
+				class="fill-current-color"
 				d="M10 3C6.13401 3 3 6.13401 3 10C3 11.7547 3.64565 13.3586 4.71233 14.5872L8.94781 10.4185C9.5316 9.84393 10.4684 9.84393 11.0522 10.4185L15.2877 14.5872C16.3544 13.3586 17 11.7547 17 10C17 6.13401 13.866 3 10 3ZM10 17C11.7513 17 13.3525 16.3568 14.5801 15.2938L10.3507 11.1312C10.1561 10.9397 9.84387 10.9397 9.64927 11.1312L5.41994 15.2938C6.64753 16.3568 8.24866 17 10 17ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10ZM13 7.5C13 7.22386 12.7761 7 12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8C12.7761 8 13 7.77614 13 7.5ZM14 7.5C14 8.32843 13.3284 9 12.5 9C11.6716 9 11 8.32843 11 7.5C11 6.67157 11.6716 6 12.5 6C13.3284 6 14 6.67157 14 7.5Z"
 				fill="white"
 			/>
 		</svg>
 	</span>
 </span>
-<span class="badge badge-info">
+<span class="badge badge-lg">
 	<span class="icon" aria-hidden="true">
-		<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
+				class="fill-current-color"
 				d="M10 3C6.13401 3 3 6.13401 3 10C3 11.7547 3.64565 13.3586 4.71233 14.5872L8.94781 10.4185C9.5316 9.84393 10.4684 9.84393 11.0522 10.4185L15.2877 14.5872C16.3544 13.3586 17 11.7547 17 10C17 6.13401 13.866 3 10 3ZM10 17C11.7513 17 13.3525 16.3568 14.5801 15.2938L10.3507 11.1312C10.1561 10.9397 9.84387 10.9397 9.64927 11.1312L5.41994 15.2938C6.64753 16.3568 8.24866 17 10 17ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10ZM13 7.5C13 7.22386 12.7761 7 12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8C12.7761 8 13 7.77614 13 7.5ZM14 7.5C14 8.32843 13.3284 9 12.5 9C11.6716 9 11 8.32843 11 7.5C11 6.67157 11.6716 6 12.5 6C13.3284 6 14 6.67157 14 7.5Z"
 				fill="white"
 			/>
 		</svg>
 	</span>
 </span>
-<span class="badge badge-warning">
-	<span class="icon icon-lg" aria-hidden="true">
-		<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<span class="badge badge-xl">
+	<span class="icon" aria-hidden="true">
+		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
+				class="fill-current-color"
 				d="M10 3C6.13401 3 3 6.13401 3 10C3 11.7547 3.64565 13.3586 4.71233 14.5872L8.94781 10.4185C9.5316 9.84393 10.4684 9.84393 11.0522 10.4185L15.2877 14.5872C16.3544 13.3586 17 11.7547 17 10C17 6.13401 13.866 3 10 3ZM10 17C11.7513 17 13.3525 16.3568 14.5801 15.2938L10.3507 11.1312C10.1561 10.9397 9.84387 10.9397 9.64927 11.1312L5.41994 15.2938C6.64753 16.3568 8.24866 17 10 17ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10ZM13 7.5C13 7.22386 12.7761 7 12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8C12.7761 8 13 7.77614 13 7.5ZM14 7.5C14 8.32843 13.3284 9 12.5 9C11.6716 9 11 8.32843 11 7.5C11 6.67157 11.6716 6 12.5 6C13.3284 6 14 6.67157 14 7.5Z"
 				fill="white"
 			/>
 		</svg>
 	</span>
 </span>
-</span>
 ```

From e33869a4c43544ee5b3e81c5806d762c9f700fd7 Mon Sep 17 00:00:00 2001
From: James Benson <jamesbe@microsoft.com>
Date: Fri, 8 Nov 2024 13:44:05 -0500
Subject: [PATCH 09/17] Update cheangeset and descriptions

---
 .changeset/large-buttons-ring.md |  2 +-
 site/src/components/badge.md     | 19 ++++++++++---------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/.changeset/large-buttons-ring.md b/.changeset/large-buttons-ring.md
index 2e03e5d51..814490cfb 100644
--- a/.changeset/large-buttons-ring.md
+++ b/.changeset/large-buttons-ring.md
@@ -3,4 +3,4 @@
 '@microsoft/atlas-css': patch
 ---
 
-Add badge-icon css styles
+Update badge styles to handle icon only badges and add multiple sizes for icon badges
diff --git a/site/src/components/badge.md b/site/src/components/badge.md
index 809747cca..e774779c2 100644
--- a/site/src/components/badge.md
+++ b/site/src/components/badge.md
@@ -22,12 +22,13 @@ Badges use short text, color, and an optional icon for quick recognition.
 
 ### Sizes
 
-The following classes are available for resizing: `badge-sm`, `badge-lg`.
+The following classes are available for resizing: `badge-sm`, `badge-lg`, `badge-xl`.
 
 ```html
-<span class="badge badge-sm">Badge</span>
+<span class="badge badge-sm">Badge Small</span>
 <span class="badge">Badge</span>
-<span class="badge badge-lg">Badge</span>
+<span class="badge badge-lg">Badge Large</span>
+<span class="badge badge-xl">Badge Extra Large</span>
 ```
 
 ### Semantic colors & types
@@ -98,12 +99,12 @@ Badges can include icons and text. To do this, nest the [icon component](./icon.
 </span>
 ```
 
-### Badge Icon
+### Badge with Icon only
 
-Badges with only icons.
+Badges with only icons, can be used with all badge sizes
 
 ```html
-<span class="badge badge-sm">
+<span class="badge badge-sm badge-danger">
 	<span class="icon" aria-hidden="true">
 		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
@@ -114,7 +115,7 @@ Badges with only icons.
 		</svg>
 	</span>
 </span>
-<span class="badge">
+<span class="badge badge-success">
 	<span class="icon" aria-hidden="true">
 		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
@@ -125,7 +126,7 @@ Badges with only icons.
 		</svg>
 	</span>
 </span>
-<span class="badge badge-lg">
+<span class="badge badge-lg badge-warning">
 	<span class="icon" aria-hidden="true">
 		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
@@ -136,7 +137,7 @@ Badges with only icons.
 		</svg>
 	</span>
 </span>
-<span class="badge badge-xl">
+<span class="badge badge-xl badge-info">
 	<span class="icon" aria-hidden="true">
 		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path

From 1793ff7b069c6c04d615d8f4c76835edd272f7a4 Mon Sep 17 00:00:00 2001
From: James Benson <jamesbe@microsoft.com>
Date: Fri, 8 Nov 2024 22:20:48 -0500
Subject: [PATCH 10/17] Add acessibility for icon only and remove unused vars

---
 .changeset/large-buttons-ring.md |  6 +++---
 css/src/components/badge.scss    |  7 -------
 site/src/components/badge.md     | 11 +++++------
 3 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/.changeset/large-buttons-ring.md b/.changeset/large-buttons-ring.md
index 814490cfb..5efcb6bda 100644
--- a/.changeset/large-buttons-ring.md
+++ b/.changeset/large-buttons-ring.md
@@ -1,6 +1,6 @@
 ---
-'@microsoft/atlas-site': patch
-'@microsoft/atlas-css': patch
+'@microsoft/atlas-site': minor
+'@microsoft/atlas-css': minor
 ---
 
-Update badge styles to handle icon only badges and add multiple sizes for icon badges
+Update badge styles to handle icon only badges. Add new extra large badge size.
diff --git a/css/src/components/badge.scss b/css/src/components/badge.scss
index 44023619e..7c43faed3 100644
--- a/css/src/components/badge.scss
+++ b/css/src/components/badge.scss
@@ -12,13 +12,6 @@ $badge-font-weight: $weight-semibold !default;
 
 $badge-icon-size: 1.3em !default;
 
-$badge-icon-font-size-xs: 1.2em !default;
-$badge-icon-font-size-sm: 2.5em !default;
-$badge-icon-font-size: 3.5em !default;
-$badge-icon-font-size-lg: 4.5em !default;
-
-$badge-icon-with-text-font-size: 0.875em !default;
-
 $badge-border-width: $border-width !default;
 $badge-border-radius: $border-radius-rounded !default;
 
diff --git a/site/src/components/badge.md b/site/src/components/badge.md
index e774779c2..d57e497c2 100644
--- a/site/src/components/badge.md
+++ b/site/src/components/badge.md
@@ -2,7 +2,6 @@
 title: Badge
 description: The Badge component in the Atlas Design System
 template: standard
-figmaEmbed: https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FuVA2amRR71yJZ0GS6RI6zL%2F%25F0%259F%258C%259E-Atlas-Design-Library%3Fm%3Dauto%26node-id%3D3381-10722%26t%3DZhpJOvxIFDBwfkR7-1
 classType: Component
 classPrefixes:
   - badge
@@ -101,10 +100,10 @@ Badges can include icons and text. To do this, nest the [icon component](./icon.
 
 ### Badge with Icon only
 
-Badges with only icons, can be used with all badge sizes
+Badges with only icons, can be used with all badge sizes. If including an icon is the only child of the element, ensure that `aria-label` is added to the badge for accessibility.
 
 ```html
-<span class="badge badge-sm badge-danger">
+<span class="badge badge-sm badge-danger" aria-label="Small icon only badge with danger color.">
 	<span class="icon" aria-hidden="true">
 		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
@@ -115,7 +114,7 @@ Badges with only icons, can be used with all badge sizes
 		</svg>
 	</span>
 </span>
-<span class="badge badge-success">
+<span class="badge badge-success" aria-label="Icon only badge with success color.">
 	<span class="icon" aria-hidden="true">
 		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
@@ -126,7 +125,7 @@ Badges with only icons, can be used with all badge sizes
 		</svg>
 	</span>
 </span>
-<span class="badge badge-lg badge-warning">
+<span class="badge badge-lg badge-warning" aria-label="Large icon only badge with warning color.">
 	<span class="icon" aria-hidden="true">
 		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
@@ -137,7 +136,7 @@ Badges with only icons, can be used with all badge sizes
 		</svg>
 	</span>
 </span>
-<span class="badge badge-xl badge-info">
+<span class="badge badge-xl badge-info" aria-label="Extra large icon only badge with info color.">
 	<span class="icon" aria-hidden="true">
 		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path

From 2acc20df4c2182dd135f935a22adcdcbd262dfe9 Mon Sep 17 00:00:00 2001
From: James Benson <jamesbe@microsoft.com>
Date: Mon, 11 Nov 2024 09:22:07 -0500
Subject: [PATCH 11/17] add role for accessibility

---
 site/src/components/badge.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/site/src/components/badge.md b/site/src/components/badge.md
index d57e497c2..c6da52fbc 100644
--- a/site/src/components/badge.md
+++ b/site/src/components/badge.md
@@ -100,10 +100,10 @@ Badges can include icons and text. To do this, nest the [icon component](./icon.
 
 ### Badge with Icon only
 
-Badges with only icons, can be used with all badge sizes. If including an icon is the only child of the element, ensure that `aria-label` is added to the badge for accessibility.
+Badges with only icons, can be used with all badge sizes. If including an icon is the only child of the element, ensure that `aria-label` and `role` are added to the badge for accessibility.
 
 ```html
-<span class="badge badge-sm badge-danger" aria-label="Small icon only badge with danger color.">
+<span class="badge badge-sm badge-danger" aria-label="Small icon only badge with danger color." role="badge">
 	<span class="icon" aria-hidden="true">
 		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
@@ -114,7 +114,7 @@ Badges with only icons, can be used with all badge sizes. If including an icon i
 		</svg>
 	</span>
 </span>
-<span class="badge badge-success" aria-label="Icon only badge with success color.">
+<span class="badge badge-success" aria-label="Icon only badge with success color." role="badge">
 	<span class="icon" aria-hidden="true">
 		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
@@ -125,7 +125,7 @@ Badges with only icons, can be used with all badge sizes. If including an icon i
 		</svg>
 	</span>
 </span>
-<span class="badge badge-lg badge-warning" aria-label="Large icon only badge with warning color.">
+<span class="badge badge-lg badge-warning" aria-label="Large icon only badge with warning color." role="badge">
 	<span class="icon" aria-hidden="true">
 		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
@@ -136,7 +136,7 @@ Badges with only icons, can be used with all badge sizes. If including an icon i
 		</svg>
 	</span>
 </span>
-<span class="badge badge-xl badge-info" aria-label="Extra large icon only badge with info color.">
+<span class="badge badge-xl badge-info" aria-label="Extra large icon only badge with info color." role="badge">
 	<span class="icon" aria-hidden="true">
 		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path

From bc77a6daf8efc933a20c44877b1b4f5251c03a46 Mon Sep 17 00:00:00 2001
From: James Benson <jamesbe@microsoft.com>
Date: Mon, 11 Nov 2024 09:43:56 -0500
Subject: [PATCH 12/17] change from span to div

---
 site/src/components/badge.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/site/src/components/badge.md b/site/src/components/badge.md
index c6da52fbc..be1d376d1 100644
--- a/site/src/components/badge.md
+++ b/site/src/components/badge.md
@@ -100,10 +100,10 @@ Badges can include icons and text. To do this, nest the [icon component](./icon.
 
 ### Badge with Icon only
 
-Badges with only icons, can be used with all badge sizes. If including an icon is the only child of the element, ensure that `aria-label` and `role` are added to the badge for accessibility.
+Badges with only icons, can be used with all badge sizes. If including an icon is the only child of the element, ensure that `aria-label` is added to the badge for accessibility.
 
 ```html
-<span class="badge badge-sm badge-danger" aria-label="Small icon only badge with danger color." role="badge">
+<div class="badge badge-sm badge-danger" aria-label="Small icon only badge with danger color.">
 	<span class="icon" aria-hidden="true">
 		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
@@ -113,8 +113,8 @@ Badges with only icons, can be used with all badge sizes. If including an icon i
 			/>
 		</svg>
 	</span>
-</span>
-<span class="badge badge-success" aria-label="Icon only badge with success color." role="badge">
+</div>
+<dive class="badge badge-success" aria-label="Icon only badge with success color.">
 	<span class="icon" aria-hidden="true">
 		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
@@ -124,8 +124,8 @@ Badges with only icons, can be used with all badge sizes. If including an icon i
 			/>
 		</svg>
 	</span>
-</span>
-<span class="badge badge-lg badge-warning" aria-label="Large icon only badge with warning color." role="badge">
+</dive>
+<div class="badge badge-lg badge-warning" aria-label="Large icon only badge with warning color.">
 	<span class="icon" aria-hidden="true">
 		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
@@ -135,8 +135,8 @@ Badges with only icons, can be used with all badge sizes. If including an icon i
 			/>
 		</svg>
 	</span>
-</span>
-<span class="badge badge-xl badge-info" aria-label="Extra large icon only badge with info color." role="badge">
+</div>
+<div class="badge badge-xl badge-info" aria-label="Extra large icon only badge with info color.">
 	<span class="icon" aria-hidden="true">
 		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
@@ -146,5 +146,5 @@ Badges with only icons, can be used with all badge sizes. If including an icon i
 			/>
 		</svg>
 	</span>
-</span>
+</div>
 ```

From 4d18de8a81a7cc9b863c4d318de6ee04777cc72f Mon Sep 17 00:00:00 2001
From: James Benson <jamesbe@microsoft.com>
Date: Mon, 11 Nov 2024 09:59:08 -0500
Subject: [PATCH 13/17] update aria role

---
 site/src/components/badge.md | 28 ++++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/site/src/components/badge.md b/site/src/components/badge.md
index be1d376d1..40f606666 100644
--- a/site/src/components/badge.md
+++ b/site/src/components/badge.md
@@ -103,7 +103,11 @@ Badges can include icons and text. To do this, nest the [icon component](./icon.
 Badges with only icons, can be used with all badge sizes. If including an icon is the only child of the element, ensure that `aria-label` is added to the badge for accessibility.
 
 ```html
-<div class="badge badge-sm badge-danger" aria-label="Small icon only badge with danger color.">
+<span
+	class="badge badge-sm badge-danger"
+	aria-label="Small icon only badge with danger color."
+	role="img"
+>
 	<span class="icon" aria-hidden="true">
 		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
@@ -113,8 +117,8 @@ Badges with only icons, can be used with all badge sizes. If including an icon i
 			/>
 		</svg>
 	</span>
-</div>
-<dive class="badge badge-success" aria-label="Icon only badge with success color.">
+</span>
+<span class="badge badge-success" aria-label="Icon only badge with success color." role="img">
 	<span class="icon" aria-hidden="true">
 		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
@@ -124,8 +128,12 @@ Badges with only icons, can be used with all badge sizes. If including an icon i
 			/>
 		</svg>
 	</span>
-</dive>
-<div class="badge badge-lg badge-warning" aria-label="Large icon only badge with warning color.">
+</span>
+<span
+	class="badge badge-lg badge-warning"
+	aria-label="Large icon only badge with warning color."
+	role="img"
+>
 	<span class="icon" aria-hidden="true">
 		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
@@ -135,8 +143,12 @@ Badges with only icons, can be used with all badge sizes. If including an icon i
 			/>
 		</svg>
 	</span>
-</div>
-<div class="badge badge-xl badge-info" aria-label="Extra large icon only badge with info color.">
+</span>
+<span
+	class="badge badge-xl badge-info"
+	aria-label="Extra large icon only badge with info color."
+	role="img"
+>
 	<span class="icon" aria-hidden="true">
 		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
@@ -146,5 +158,5 @@ Badges with only icons, can be used with all badge sizes. If including an icon i
 			/>
 		</svg>
 	</span>
-</div>
+</span>
 ```

From f7dd3352ed00d0dfca88b79cdc69030d9798a174 Mon Sep 17 00:00:00 2001
From: James Benson <jamesbe@microsoft.com>
Date: Mon, 11 Nov 2024 10:01:22 -0500
Subject: [PATCH 14/17] update description

---
 site/src/components/badge.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/badge.md b/site/src/components/badge.md
index 40f606666..5d58ff3da 100644
--- a/site/src/components/badge.md
+++ b/site/src/components/badge.md
@@ -100,7 +100,7 @@ Badges can include icons and text. To do this, nest the [icon component](./icon.
 
 ### Badge with Icon only
 
-Badges with only icons, can be used with all badge sizes. If including an icon is the only child of the element, ensure that `aria-label` is added to the badge for accessibility.
+Badges with only icons, can be used with all badge sizes. If including an icon is the only child of the element, ensure that `aria-label` and `role="img" are added to the badge for accessibility.
 
 ```html
 <span

From 263f62da45f3f63b8baa54ed88d1a016eb553827 Mon Sep 17 00:00:00 2001
From: James Benson <jamesbe@microsoft.com>
Date: Mon, 11 Nov 2024 12:54:56 -0500
Subject: [PATCH 15/17] update description

---
 site/src/components/badge.md | 24 +++++++-----------------
 1 file changed, 7 insertions(+), 17 deletions(-)

diff --git a/site/src/components/badge.md b/site/src/components/badge.md
index 5d58ff3da..9ba372459 100644
--- a/site/src/components/badge.md
+++ b/site/src/components/badge.md
@@ -100,14 +100,12 @@ Badges can include icons and text. To do this, nest the [icon component](./icon.
 
 ### Badge with Icon only
 
-Badges with only icons, can be used with all badge sizes. If including an icon is the only child of the element, ensure that `aria-label` and `role="img" are added to the badge for accessibility.
+Badges with only icons, can be used with all badge sizes.
+
+When a badge is required to understand some information (i.e. not decorative), ensure that context is exposed to screenreaders with by applying `role="img"` and an `aria-label` to the badge.
 
 ```html
-<span
-	class="badge badge-sm badge-danger"
-	aria-label="Small icon only badge with danger color."
-	role="img"
->
+<span class="badge badge-sm badge-danger" aria-label="Danger" role="img">
 	<span class="icon" aria-hidden="true">
 		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
@@ -118,7 +116,7 @@ Badges with only icons, can be used with all badge sizes. If including an icon i
 		</svg>
 	</span>
 </span>
-<span class="badge badge-success" aria-label="Icon only badge with success color." role="img">
+<span class="badge badge-success" aria-label="Success" role="img">
 	<span class="icon" aria-hidden="true">
 		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
@@ -129,11 +127,7 @@ Badges with only icons, can be used with all badge sizes. If including an icon i
 		</svg>
 	</span>
 </span>
-<span
-	class="badge badge-lg badge-warning"
-	aria-label="Large icon only badge with warning color."
-	role="img"
->
+<span class="badge badge-lg badge-warning" aria-label="Warning" role="img">
 	<span class="icon" aria-hidden="true">
 		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
@@ -144,11 +138,7 @@ Badges with only icons, can be used with all badge sizes. If including an icon i
 		</svg>
 	</span>
 </span>
-<span
-	class="badge badge-xl badge-info"
-	aria-label="Extra large icon only badge with info color."
-	role="img"
->
+<span class="badge badge-xl badge-info" aria-label="Info" role="img">
 	<span class="icon" aria-hidden="true">
 		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path

From 2492e72fb8b0ea4ecf4c8b87ad5e1d230ae283bb Mon Sep 17 00:00:00 2001
From: James Benson <jamesbe@microsoft.com>
Date: Mon, 11 Nov 2024 14:56:47 -0500
Subject: [PATCH 16/17] fix border

---
 css/src/components/badge.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/css/src/components/badge.scss b/css/src/components/badge.scss
index 7c43faed3..91fcc15e4 100644
--- a/css/src/components/badge.scss
+++ b/css/src/components/badge.scss
@@ -79,7 +79,7 @@ $badge-border-radius: $border-radius-rounded !default;
 
 	&:has(.icon:only-child) {
 		padding: $badge-icon-padding-block;
-		border: none;
+		border: 0;
 	}
 
 	// Sizes

From 49631e14c1f9555bfa03f94b996fcf63e53c009b Mon Sep 17 00:00:00 2001
From: James Benson <jamesbe@microsoft.com>
Date: Mon, 11 Nov 2024 16:07:24 -0500
Subject: [PATCH 17/17] restore border

---
 css/src/components/badge.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/css/src/components/badge.scss b/css/src/components/badge.scss
index 91fcc15e4..ad2bdf6f3 100644
--- a/css/src/components/badge.scss
+++ b/css/src/components/badge.scss
@@ -79,7 +79,6 @@ $badge-border-radius: $border-radius-rounded !default;
 
 	&:has(.icon:only-child) {
 		padding: $badge-icon-padding-block;
-		border: 0;
 	}
 
 	// Sizes