diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4c5d1afa49..935bd4dfc1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### BREAKING CHANGES
+- removed logic for adding borders by default if the `Icon` has the `circular` prop @mnajdova ([#907](https://github.com/stardust-ui/react/pull/907))
+
 ### Features
 - Export `lock` SVG icon @VyshnaviDasari ([#906](https://github.com/stardust-ui/react/pull/906))
 - Adding status behavior @kolaps33 ([#880](https://github.com/stardust-ui/react/pull/880))
diff --git a/docs/src/examples/components/Animation/Types/AnimationExample.tsx b/docs/src/examples/components/Animation/Types/AnimationExample.tsx
index 1401bcbaf6..c4ef960f4e 100644
--- a/docs/src/examples/components/Animation/Types/AnimationExample.tsx
+++ b/docs/src/examples/components/Animation/Types/AnimationExample.tsx
@@ -17,7 +17,7 @@ const spinner = {
 const AnimationExample = () => (
   <Provider theme={{ animations: { spinner } }}>
     <Animation name="spinner">
-      <Icon name="umbrella" circular />
+      <Icon name="umbrella" circular bordered />
     </Animation>
   </Provider>
 )
diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleDelay.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleDelay.tsx
index 870798c023..69e87858c1 100644
--- a/docs/src/examples/components/Animation/Types/AnimationExampleDelay.tsx
+++ b/docs/src/examples/components/Animation/Types/AnimationExampleDelay.tsx
@@ -20,7 +20,7 @@ const AnimationExampleDelay = () => (
     <br />
     <Provider theme={{ animations: { spinner } }}>
       <Animation name="spinner" delay="5s">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
     </Provider>
   </div>
diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleDirection.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleDirection.tsx
index 5582331bab..1fe4beeb2e 100644
--- a/docs/src/examples/components/Animation/Types/AnimationExampleDirection.tsx
+++ b/docs/src/examples/components/Animation/Types/AnimationExampleDirection.tsx
@@ -22,16 +22,16 @@ const AnimationExampleDirection = () => (
       <Text content="Alternate" />
       <Text content="Alternate reverse" />
       <Animation name="spinner">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="spinner" direction="reverse">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="spinner" direction="alternate">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="spinner" direction="alternate-reverse">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
     </Grid>
   </Provider>
diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleDuration.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleDuration.tsx
index a1792c9f13..d32ef096b4 100644
--- a/docs/src/examples/components/Animation/Types/AnimationExampleDuration.tsx
+++ b/docs/src/examples/components/Animation/Types/AnimationExampleDuration.tsx
@@ -17,7 +17,7 @@ const spinner = {
 const AnimationExampleDuration = () => (
   <Provider theme={{ animations: { spinner } }}>
     <Animation name="spinner" duration="1s">
-      <Icon name="umbrella" circular />
+      <Icon name="umbrella" circular bordered />
     </Animation>
   </Provider>
 )
diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleFillMode.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleFillMode.tsx
index cf5712cf13..7a33ec8380 100644
--- a/docs/src/examples/components/Animation/Types/AnimationExampleFillMode.tsx
+++ b/docs/src/examples/components/Animation/Types/AnimationExampleFillMode.tsx
@@ -18,16 +18,16 @@ const AnimationExampleFillMode = () => (
       <Text content="Backwards" />
       <Text content="Both" />
       <Animation name="colorChanger" fillMode="none" delay="3s" iterationCount="1">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="colorChanger" fillMode="forwards" delay="3s" iterationCount="1">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="colorChanger" fillMode="backwards" delay="3s" iterationCount="1">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="colorChanger" fillMode="both" delay="3s" iterationCount="1">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
     </Grid>
   </Provider>
diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleIterationCount.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleIterationCount.tsx
index bfa4b025b7..90b6ef3d9c 100644
--- a/docs/src/examples/components/Animation/Types/AnimationExampleIterationCount.tsx
+++ b/docs/src/examples/components/Animation/Types/AnimationExampleIterationCount.tsx
@@ -22,16 +22,16 @@ const AnimationExampleIterationCount = () => (
       <Text content="5 iterations" />
       <Text content="Infinite" />
       <Animation name="spinner" iterationCount="1">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="spinner" iterationCount="2">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="spinner" iterationCount="5">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="spinner" iterationCount="infinite">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
     </Grid>
   </Provider>
diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleKeyframeParams.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleKeyframeParams.tsx
index d76dc484c8..112efb54ba 100644
--- a/docs/src/examples/components/Animation/Types/AnimationExampleKeyframeParams.tsx
+++ b/docs/src/examples/components/Animation/Types/AnimationExampleKeyframeParams.tsx
@@ -19,13 +19,13 @@ const AnimationExample = () => (
   <Provider theme={{ animations: { colorChanger } }}>
     <div>
       <Animation name="colorChanger">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="colorChanger" keyframeParams={{ fromColor: 'green', toColor: 'yellow' }}>
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="colorChanger" keyframeParams={{ toColor: 'black' }}>
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
     </div>
   </Provider>
diff --git a/docs/src/examples/components/Animation/Types/AnimationExamplePlayState.tsx b/docs/src/examples/components/Animation/Types/AnimationExamplePlayState.tsx
index 7180e8f537..38c16ee140 100644
--- a/docs/src/examples/components/Animation/Types/AnimationExamplePlayState.tsx
+++ b/docs/src/examples/components/Animation/Types/AnimationExamplePlayState.tsx
@@ -38,7 +38,7 @@ class AnimationExamplePlayState extends React.Component {
           <br />
           <br />
           <Animation name="spinner" playState={this.state.playState}>
-            <Icon name="umbrella" circular />
+            <Icon name="umbrella" circular bordered />
           </Animation>
         </div>
       </Provider>
diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleTimingFunction.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleTimingFunction.tsx
index 1442b14d7f..aa18dacac4 100644
--- a/docs/src/examples/components/Animation/Types/AnimationExampleTimingFunction.tsx
+++ b/docs/src/examples/components/Animation/Types/AnimationExampleTimingFunction.tsx
@@ -24,22 +24,22 @@ const AnimationExampleTimingFunction = () => (
       <Text content="Ease in out" />
       <Text content="Cubic bezier" />
       <Animation name="spinner" timingFunction="ease">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="spinner" timingFunction="linear">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="spinner" timingFunction="ease-in">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="spinner" timingFunction="ease-out">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="spinner" timingFunction="ease-in-out">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="spinner" timingFunction="cubic-bezier(0.1, 0.5, 0.1, 0.5)">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
     </Grid>
   </Provider>
diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx
index 3c3f8a6207..f2f012ba58 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx
@@ -17,7 +17,13 @@ const AvatarExampleImageCustomizationShorthand = () => (
       image={
         // This example does not react to the avatar size variable
         // and otherwise produces bad results when border is applied compared to "normal" image
-        <Icon name="user" circular variables={{ color: 'blue' }} styles={{ padding: '8px' }} />
+        <Icon
+          name="user"
+          circular
+          bordered
+          variables={{ color: 'blue' }}
+          styles={{ boxSizing: 'border-box', padding: '8px' }}
+        />
       }
       status={{ color: 'green', icon: 'check', title: 'Available' }}
     />
diff --git a/docs/src/examples/components/Icon/Variations/IconExampleCircular.shorthand.tsx b/docs/src/examples/components/Icon/Variations/IconExampleCircular.shorthand.tsx
index 41facfdb3e..cba85f6218 100644
--- a/docs/src/examples/components/Icon/Variations/IconExampleCircular.shorthand.tsx
+++ b/docs/src/examples/components/Icon/Variations/IconExampleCircular.shorthand.tsx
@@ -3,17 +3,17 @@ import { Icon } from '@stardust-ui/react'
 
 const IconExampleCircular = () => (
   <div>
-    <Icon name="chess rook" circular />
-    <Icon name="book" circular />
-    <Icon name="expand" circular />
-    <Icon name="play" circular />
-    <Icon name="call" circular />
-    <Icon name="call-video" circular />
-    <Icon name="stop" circular />
-    <Icon name="calendar alternate outline" circular />
-    <Icon name="coffee" circular />
-    <Icon name="compass outline" circular />
-    <Icon name="area chart" circular />
+    <Icon name="chess rook" circular bordered />
+    <Icon name="book" circular bordered />
+    <Icon name="expand" circular bordered />
+    <Icon name="play" circular bordered />
+    <Icon name="call" circular bordered />
+    <Icon name="call-video" circular bordered />
+    <Icon name="stop" circular bordered />
+    <Icon name="calendar alternate outline" circular bordered />
+    <Icon name="coffee" circular bordered />
+    <Icon name="compass outline" circular bordered />
+    <Icon name="area chart" circular bordered />
   </div>
 )
 
diff --git a/packages/react/src/components/RadioGroup/RadioGroupItem.tsx b/packages/react/src/components/RadioGroup/RadioGroupItem.tsx
index 7e81877829..72dc25f531 100644
--- a/packages/react/src/components/RadioGroup/RadioGroupItem.tsx
+++ b/packages/react/src/components/RadioGroup/RadioGroupItem.tsx
@@ -159,6 +159,7 @@ class RadioGroupItem extends AutoControlledComponent<
           {Icon.create(icon || '', {
             defaultProps: {
               circular: true,
+              bordered: true,
               size: 'smaller',
               styles: styles.icon,
             },
diff --git a/packages/react/src/themes/teams/components/Icon/iconStyles.ts b/packages/react/src/themes/teams/components/Icon/iconStyles.ts
index b899f4554f..8251650246 100644
--- a/packages/react/src/themes/teams/components/Icon/iconStyles.ts
+++ b/packages/react/src/themes/teams/components/Icon/iconStyles.ts
@@ -58,12 +58,11 @@ const getXSpacingStyles = (xSpacing: IconXSpacing, horizontalSpace: string): ICS
   }
 }
 
-const getBorderedStyles = (circular: boolean, boxShadowColor: string): ICSSInJSStyle => {
+const getBorderedStyles = (boxShadowColor: string): ICSSInJSStyle => {
   return {
     ...getPaddedStyle(),
 
     boxShadow: `0 0 0 .05rem ${boxShadowColor} inset`,
-    ...(circular ? { borderRadius: '50%' } : {}),
   }
 }
 
@@ -119,8 +118,10 @@ const iconStyles: ComponentSlotStylesInput<IconProps, IconVariables> = {
 
       ...getXSpacingStyles(xSpacing, v.horizontalSpace),
 
-      ...((bordered || v.borderColor || circular) &&
-        getBorderedStyles(circular, v.borderColor || getIconColor(color, v))),
+      ...(circular && { ...getPaddedStyle(), borderRadius: '50%' }),
+
+      ...((bordered || v.borderColor) &&
+        getBorderedStyles(v.borderColor || getIconColor(color, v))),
 
       ...(!rtl && {
         transform: `rotate(${rotate}deg)`,