diff --git a/packages/components/src/badge/index.tsx b/packages/components/src/badge/index.tsx
index ee08003c3911dc..e57be66db0a7aa 100644
--- a/packages/components/src/badge/index.tsx
+++ b/packages/components/src/badge/index.tsx
@@ -15,45 +15,46 @@ import type { BadgeProps } from './types';
 import type { WordPressComponentProps } from '../context';
 import Icon from '../icon';
 
+/**
+ * Returns an icon based on the badge context.
+ *
+ * @return The corresponding icon for the provided context.
+ */
+function contextBasedIcon( intent: BadgeProps[ 'intent' ] = 'default' ) {
+	switch ( intent ) {
+		case 'info':
+			return info;
+		case 'success':
+			return published;
+		case 'warning':
+			return caution;
+		case 'error':
+			return error;
+		default:
+			return null;
+	}
+}
+
 function Badge( {
 	className,
 	intent = 'default',
 	children,
 	...props
 }: WordPressComponentProps< BadgeProps, 'span', false > ) {
-	/**
-	 * Returns an icon based on the badge context.
-	 *
-	 * @return The corresponding icon for the provided context.
-	 */
-	function contextBasedIcon() {
-		switch ( intent ) {
-			case 'info':
-				return info;
-			case 'success':
-				return published;
-			case 'warning':
-				return caution;
-			case 'error':
-				return error;
-			default:
-				return null;
-		}
-	}
+	const icon = contextBasedIcon( intent );
+	const hasIcon = !! icon;
 
 	return (
 		<span
-			className={ clsx(
-				'components-badge',
-				`is-${ intent }`,
-				intent !== 'default' && 'has-icon',
-				className
-			) }
+			className={ clsx( 'components-badge', className, {
+				[ `is-${ intent }` ]: intent,
+				'has-icon': hasIcon,
+			} ) }
 			{ ...props }
 		>
-			{ intent !== 'default' && (
+			{ hasIcon && (
 				<Icon
-					icon={ contextBasedIcon() }
+					icon={ icon }
 					size={ 16 }
 					fill="currentColor"
 					className="components-badge__icon"