diff --git a/.changeset/orange-turkeys-work.md b/.changeset/orange-turkeys-work.md
new file mode 100644
index 000000000..1c2a2016b
--- /dev/null
+++ b/.changeset/orange-turkeys-work.md
@@ -0,0 +1,5 @@
+---
+'@primer/octicons': patch
+---
+
+Adjust flex wrap in UI examples.Fixes #731
diff --git a/docs/src/components/ui-examples-16.js b/docs/src/components/ui-examples-16.js
index 6d7093a41..6f58272c4 100644
--- a/docs/src/components/ui-examples-16.js
+++ b/docs/src/components/ui-examples-16.js
@@ -40,26 +40,26 @@ export default function UIExamples16({icon: Icon}) {
             </Timeline.Body>
           </Timeline.Item>
         </Timeline>
-        <Flex>
-          <Button mr={2}>
+        <Flex flexWrap={'wrap'} sx={{gap: 2}}>
+          <Button>
             <Icon />
             <Text ml={2} contentEditable>
               Button
             </Text>
           </Button>
-          <ButtonPrimary mr={2}>
+          <ButtonPrimary>
             <Icon />
             <Text ml={2} contentEditable>
               Button
             </Text>
           </ButtonPrimary>
-          <ButtonDanger mr={2}>
+          <ButtonDanger>
             <Icon />
             <Text ml={2} contentEditable>
               Button
             </Text>
           </ButtonDanger>
-          <ButtonOutline mr={2}>
+          <ButtonOutline>
             <Icon />
             <Text ml={2} contentEditable>
               Button