diff --git a/.changeset/proud-dragons-sin.md b/.changeset/proud-dragons-sin.md
new file mode 100644
index 000000000..de107cea2
--- /dev/null
+++ b/.changeset/proud-dragons-sin.md
@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/icons": patch
+---
+
+Change `FlairIcon` to `BadgeIcon`
diff --git a/packages/icons/__tests__/Icon.spec.tsx b/packages/icons/__tests__/Icon.spec.tsx
index 20022e11d..fffb4f303 100644
--- a/packages/icons/__tests__/Icon.spec.tsx
+++ b/packages/icons/__tests__/Icon.spec.tsx
@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 
 import { render, screen } from '../../../test/utils';
-import { FlairIcon, Icon, StatusIcon } from '../src';
+import { BadgeIcon, Icon, StatusIcon } from '../src';
 
 describe('Icon', () => {
 	it('renders', () => {
@@ -42,11 +42,11 @@ describe('Icon', () => {
 		expect(screen.getByRole('img', { hidden: true })).toHaveAttribute('aria-hidden', 'true');
 	});
 
-	it('renders a flair icon', () => {
+	it('renders a badge icon', () => {
 		render(
-			<FlairIcon>
+			<BadgeIcon>
 				<Icon name="info" size="medium" />
-			</FlairIcon>,
+			</BadgeIcon>,
 		);
 		expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
 	});
diff --git a/packages/icons/src/BadgeIcon.tsx b/packages/icons/src/BadgeIcon.tsx
new file mode 100644
index 000000000..79ec29856
--- /dev/null
+++ b/packages/icons/src/BadgeIcon.tsx
@@ -0,0 +1,59 @@
+import type { BoxProps } from '@launchpad-ui/box';
+import type { VariantProps } from 'class-variance-authority';
+
+import { Box } from '@launchpad-ui/box';
+import { cva } from 'class-variance-authority';
+
+import { IconContext } from './Icon';
+import styles from './styles/BadgeIcon.module.css';
+
+const badge = cva(styles.base, {
+	variants: {
+		size: {
+			tiny: styles.tiny,
+			small: styles.small,
+			medium: styles.medium,
+			large: styles.large,
+		},
+		variant: {
+			default: styles.default,
+			blue: styles.blue,
+			cyan: styles.cyan,
+			purple: styles.purple,
+			pink: styles.pink,
+			orange: styles.orange,
+			yellow: styles.yellow,
+			green: styles.green,
+			'gradient-1': styles.gradient1,
+			'gradient-2': styles.gradient2,
+			'gradient-3': styles.gradient3,
+			'gradient-4': styles.gradient4,
+			'gradient-5': styles.gradient5,
+			'gradient-6': styles.gradient6,
+			'gradient-7': styles.gradient7,
+		},
+	},
+	defaultVariants: {
+		size: 'medium',
+		variant: 'default',
+	},
+});
+
+interface BadgeIconProps extends BoxProps, VariantProps<typeof badge> {}
+
+const BadgeIcon = ({
+	children,
+	className,
+	size = 'medium',
+	variant = 'default',
+	...props
+}: BadgeIconProps) => {
+	return (
+		<Box className={badge({ size, variant, className })} {...props}>
+			<IconContext.Provider value={{ size }}>{children}</IconContext.Provider>
+		</Box>
+	);
+};
+
+export { BadgeIcon };
+export type { BadgeIconProps };
diff --git a/packages/icons/src/FlairIcon.tsx b/packages/icons/src/FlairIcon.tsx
deleted file mode 100644
index 5f08492b6..000000000
--- a/packages/icons/src/FlairIcon.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { BoxProps } from '@launchpad-ui/box';
-
-import { Box } from '@launchpad-ui/box';
-import { cva, cx } from 'class-variance-authority';
-
-import styles from './styles/FlairIcon.module.css';
-
-const flair = cva(styles.flair);
-
-interface FlairIconProps extends BoxProps {}
-
-const FlairIcon = ({ children, className, ...props }: FlairIconProps) => {
-	return (
-		<Box
-			background="$purple-blue"
-			borderRadius="50%"
-			color="$white.950"
-			display="inline-flex"
-			padding="$400"
-			className={cx(flair(), className)}
-			{...props}
-		>
-			{children}
-		</Box>
-	);
-};
-
-export { FlairIcon };
-export type { FlairIconProps };
diff --git a/packages/icons/src/Icon.tsx b/packages/icons/src/Icon.tsx
index e9f28e94f..8d6ff844d 100644
--- a/packages/icons/src/Icon.tsx
+++ b/packages/icons/src/Icon.tsx
@@ -3,12 +3,14 @@ import type { SVGAttributes } from 'react';
 import type { IconName } from './types';
 
 import { cva } from 'class-variance-authority';
+import { createContext, useContext } from 'react';
 
 import styles from './styles/Icon.module.css';
 
 const icon = cva(styles.base, {
 	variants: {
 		size: {
+			tiny: styles.tiny,
 			small: styles.small,
 			medium: styles.medium,
 			large: styles.large,
@@ -24,6 +26,8 @@ const icon = cva(styles.base, {
 	},
 });
 
+const IconContext = createContext<IconProps>({});
+
 interface IconProps extends SVGAttributes<SVGElement>, VariantProps<typeof icon> {
 	name?: IconName;
 }
@@ -38,12 +42,13 @@ const Icon = ({
 	variant = 'default',
 	...props
 }: IconProps) => {
+	const ctx = useContext(IconContext);
 	return (
 		<svg
 			aria-hidden={props['aria-hidden'] ?? (!props['aria-labelledby'] && !props['aria-label'])}
 			focusable={focusable}
 			role={role}
-			className={icon({ size, variant, className })}
+			className={icon({ size: ctx.size || size, variant, className })}
 			data-icon={name}
 			{...props}
 		>
@@ -53,5 +58,5 @@ const Icon = ({
 	);
 };
 
-export { Icon };
+export { Icon, IconContext };
 export type { IconProps };
diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts
index 67a226eb7..5a87cc4ea 100644
--- a/packages/icons/src/index.ts
+++ b/packages/icons/src/index.ts
@@ -1,8 +1,8 @@
 export type { IconProps } from './Icon';
-export type { FlairIconProps } from './FlairIcon';
+export type { BadgeIconProps } from './BadgeIcon';
 export type { StatusIconProps } from './StatusIcon';
 export type { IconName } from './types';
 
 export { Icon } from './Icon';
-export { FlairIcon } from './FlairIcon';
+export { BadgeIcon } from './BadgeIcon';
 export { StatusIcon } from './StatusIcon';
diff --git a/packages/icons/src/styles/BadgeIcon.module.css b/packages/icons/src/styles/BadgeIcon.module.css
new file mode 100644
index 000000000..83bea5179
--- /dev/null
+++ b/packages/icons/src/styles/BadgeIcon.module.css
@@ -0,0 +1,110 @@
+.base {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+}
+
+.default {
+	background: var(--lp-color-bg-ui-tertiary);
+
+	& [data-icon] {
+		fill: var(--lp-color-fill-ui-secondary);
+	}
+}
+
+.tiny {
+	padding: var(--lp-size-2);
+}
+
+.small {
+	padding: var(--lp-spacing-200);
+}
+
+.medium {
+	padding: var(--lp-spacing-300);
+}
+
+.large {
+	padding: var(--lp-spacing-400);
+}
+
+.blue {
+	background: var(--lp-color-brand-blue-light);
+}
+
+.cyan {
+	background: var(--lp-color-brand-cyan-base);
+}
+
+.purple {
+	background: var(--lp-color-brand-purple-base);
+}
+
+.pink {
+	background: var(--lp-color-brand-pink-base);
+}
+
+.orange {
+	background: var(--lp-color-brand-orange-base);
+}
+
+.yellow {
+	background: var(--lp-color-brand-yellow-base);
+}
+
+.green {
+	background: var(--lp-color-brand-green-base);
+}
+
+.gradient1 {
+	background: var(--lp-color-gradient-yellow-cyan);
+}
+
+.gradient2 {
+	background: var(--lp-color-gradient-yellow-pink);
+}
+
+.gradient3 {
+	background: var(--lp-color-gradient-cyan-purple);
+}
+
+.gradient4 {
+	background: var(--lp-color-gradient-cyan-blue);
+}
+
+.gradient5 {
+	background: var(--lp-color-gradient-purple-blue);
+}
+
+.gradient6 {
+	background: var(--lp-color-gradient-purple-pink);
+}
+
+.gradient7 {
+	background: var(--lp-color-gradient-yellow-blue-pale);
+}
+
+.blue,
+.cyan,
+.purple,
+.pink,
+.orange,
+.gradient1,
+.gradient2,
+.gradient3,
+.gradient4,
+.gradient5,
+.gradient6 {
+	& [data-icon] {
+		fill: var(--lp-color-white-900);
+	}
+}
+
+.yellow,
+.green,
+.gradient7 {
+	& [data-icon] {
+		fill: var(--lp-color-black-700);
+	}
+}
diff --git a/packages/icons/src/styles/FlairIcon.module.css b/packages/icons/src/styles/FlairIcon.module.css
deleted file mode 100644
index 378fad1e5..000000000
--- a/packages/icons/src/styles/FlairIcon.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.flair {
-	& [data-icon] {
-		fill: var(--lp-color-white-950);
-	}
-}
diff --git a/packages/icons/src/styles/Icon.module.css b/packages/icons/src/styles/Icon.module.css
index 8e5b61ef1..12c1582c2 100644
--- a/packages/icons/src/styles/Icon.module.css
+++ b/packages/icons/src/styles/Icon.module.css
@@ -12,6 +12,11 @@
 	fill: var(--lp-color-fill-ui-secondary);
 }
 
+.tiny {
+	width: var(--lp-size-12);
+	height: var(--lp-size-12);
+}
+
 .small {
 	width: var(--lp-size-16);
 	height: var(--lp-size-16);
diff --git a/packages/icons/stories/BadgeIcon.stories.tsx b/packages/icons/stories/BadgeIcon.stories.tsx
new file mode 100644
index 000000000..a9644cd47
--- /dev/null
+++ b/packages/icons/stories/BadgeIcon.stories.tsx
@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { BadgeIcon, Icon } from '../src';
+
+const meta: Meta<typeof BadgeIcon> = {
+	component: BadgeIcon,
+	title: 'Foundations/Icons/BadgeIcon',
+	parameters: {
+		status: {
+			type: import.meta.env.STORYBOOK_PACKAGE_STATUS__ICONS,
+		},
+	},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BadgeIcon>;
+
+const children = <Icon name="crown" />;
+
+export const Default: Story = {
+	args: { children },
+};
+
+export const Blue: Story = {
+	args: { children, variant: 'blue' },
+};
+
+export const Cyan: Story = {
+	args: { children, variant: 'cyan' },
+};
+
+export const Puple: Story = {
+	args: { children, variant: 'purple' },
+};
+
+export const Pink: Story = {
+	args: { children, variant: 'pink' },
+};
+
+export const Orange: Story = {
+	args: { children, variant: 'orange' },
+};
+
+export const Yellow: Story = {
+	args: { children, variant: 'yellow' },
+};
+
+export const Green: Story = {
+	args: { children, variant: 'green' },
+};
+
+export const Gradient1: Story = {
+	args: { children, variant: 'gradient-1' },
+};
+
+export const Gradient2: Story = {
+	args: { children, variant: 'gradient-2' },
+};
+
+export const Gradient3: Story = {
+	args: { children, variant: 'gradient-3' },
+};
+
+export const Gradient4: Story = {
+	args: { children, variant: 'gradient-4' },
+};
+
+export const Gradient5: Story = {
+	args: { children, variant: 'gradient-5' },
+};
+
+export const Gradient6: Story = {
+	args: { children, variant: 'gradient-6' },
+};
+
+export const Gradient7: Story = {
+	args: { children, variant: 'gradient-7' },
+};
diff --git a/packages/icons/stories/FlairIcon.stories.tsx b/packages/icons/stories/FlairIcon.stories.tsx
deleted file mode 100644
index 8c73a1ef4..000000000
--- a/packages/icons/stories/FlairIcon.stories.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { FlairIcon, Icon } from '../src';
-
-const meta: Meta<typeof FlairIcon> = {
-	component: FlairIcon,
-	title: 'Foundations/Icons/FlairIcon',
-	parameters: {
-		status: {
-			type: import.meta.env.STORYBOOK_PACKAGE_STATUS__ICONS,
-		},
-	},
-};
-
-export default meta;
-
-type Story = StoryObj<typeof FlairIcon>;
-
-export const Square: Story = {
-	args: { children: <Icon name="flag" />, borderRadius: '0' },
-};
-
-export const BluePurple: Story = {
-	args: { children: <Icon name="shield-key" /> },
-};
-
-export const YellowCyan: Story = {
-	args: { children: <Icon name="arrow-up-right-circle" />, background: '$yellow-cyan' },
-};
-
-export const PurplePink: Story = {
-	args: { children: <Icon name="flask" />, background: '$purple-pink' },
-};
-
-export const CyanBlue: Story = {
-	args: { children: <Icon name="a-to-b" />, background: '$cyan-blue' },
-};
-
-export const CyanPurple: Story = {
-	args: { children: <Icon name="warning" />, background: '$cyan-purple' },
-};