diff --git a/src/components/Chip.stories.tsx b/src/components/Chip.stories.tsx
index 6a97be728..2820b15d3 100644
--- a/src/components/Chip.stories.tsx
+++ b/src/components/Chip.stories.tsx
@@ -49,3 +49,12 @@ export function ChipWithCustomTitle() {
 export function ChipWithCustomColor() {
   return <Chip text="Chip with custom color" xss={Css.bgBlue100.$} />;
 }
+
+export function WithIcon() {
+  return (
+    <div css={Css.wPx(200).$}>
+      <Chip icon="map" text="Kitchen" />
+      <Chip icon="map" text="A very long chip name that will eventually truncate" />
+    </div>
+  );
+}
diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx
index 663d8d7be..06468ea29 100644
--- a/src/components/Chip.tsx
+++ b/src/components/Chip.tsx
@@ -3,6 +3,7 @@ import { usePresentationContext } from "src/components/PresentationContext";
 import { maybeTooltip } from "src/components/Tooltip";
 import { Css, Margin, Only, Properties, Xss } from "src/Css";
 import { useTestIds } from "src/utils/useTestIds";
+import { Icon, IconKey } from "src/components/Icon";
 
 export type ChipType = "caution" | "warning" | "success" | "light" | "dark" | "neutral" | "darkMode" | "info";
 
@@ -24,6 +25,7 @@ export interface ChipProps<X> {
   xss?: X;
   type?: ChipType;
   compact?: boolean;
+  icon?: IconKey;
 }
 
 /** Kinda like a chip, but read-only, so no `onClick` or `hover`. */
@@ -32,7 +34,7 @@ export function Chip<X extends Only<Xss<Margin | "color" | "backgroundColor">, X
   ...props
 }: ChipProps<X>) {
   const { fieldProps } = usePresentationContext();
-  const { text, title, xss = {}, compact = fieldProps?.compact } = props;
+  const { text, title, xss = {}, compact = fieldProps?.compact, icon } = props;
   const tid = useTestIds(props, "chip");
 
   return maybeTooltip({
@@ -41,12 +43,13 @@ export function Chip<X extends Only<Xss<Margin | "color" | "backgroundColor">, X
     children: (
       <span
         css={{
-          ...Css[compact ? "xs" : "sm"].dif.aic.br16.pl1.px1.pyPx(2).gray900.$,
+          ...Css[compact ? "xs" : "sm"].dif.aic.gapPx(4).br16.pl1.px1.pyPx(2).gray900.$,
           ...typeStyles[type],
           ...xss,
         }}
         {...tid}
       >
+        {icon && <Icon icon={icon} inc={2} xss={Css.fs0.$} />}
         <span css={Css.lineClamp1.breakAll.$}>{text}</span>
       </span>
     ),
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
index ddab9e531..fd20cc3f9 100644
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -11,7 +11,7 @@ export interface IconProps extends AriaAttributes, DOMProps {
   /** The size of the icon in increments, i.e. 1 == 8px, default is 3 == 24px. */
   inc?: number;
   /** Styles overrides */
-  xss?: Xss<Margin | "visibility">;
+  xss?: Xss<Margin | "visibility" | "flexShrink">;
   tooltip?: ReactNode;
 }