diff --git a/ui/components/ui/circle-icon/README.mdx b/ui/components/ui/circle-icon/README.mdx
new file mode 100644
index 000000000..ee4a95b7d
--- /dev/null
+++ b/ui/components/ui/circle-icon/README.mdx
@@ -0,0 +1,16 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import CircleIcon from '.';
+
+# Circle Icon
+
+Add circle border to the image component
+
+<Canvas>
+  <Story id="ui-components-ui-circle-icon-circle-icon-stories-js--default-story" />
+</Canvas>
+
+## Component API
+
+<ArgsTable of={CircleIcon} />
+
diff --git a/ui/components/ui/circle-icon/circle-icon.component.js b/ui/components/ui/circle-icon/circle-icon.component.js
index 522953286..c772941c4 100644
--- a/ui/components/ui/circle-icon/circle-icon.component.js
+++ b/ui/components/ui/circle-icon/circle-icon.component.js
@@ -3,9 +3,21 @@ import PropTypes from 'prop-types';
 
 export default class CircleIcon extends PureComponent {
   static propTypes = {
+    /**
+     * add size (px) for the image container
+     */
     size: PropTypes.string,
+    /**
+     * add css classname for the component based on the parent css
+     */
     circleClass: PropTypes.string,
+    /**
+     * image source path
+     */
     iconSource: PropTypes.string.isRequired,
+    /**
+     * add size (px) for the image
+     */
     iconSize: PropTypes.string,
   };
 
diff --git a/ui/components/ui/circle-icon/circle-icon.stories.js b/ui/components/ui/circle-icon/circle-icon.stories.js
index 786efaa1a..5fb969737 100644
--- a/ui/components/ui/circle-icon/circle-icon.stories.js
+++ b/ui/components/ui/circle-icon/circle-icon.stories.js
@@ -1,17 +1,37 @@
 import React from 'react';
+import README from './README.mdx';
 import CircleIcon from './circle-icon.component';
 
 export default {
-  title: 'CircleIcon',
+  title: 'Components/UI/Circle Icon',
   id: __filename,
+  component: CircleIcon,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    size: { control: 'text' },
+    circleClass: { control: 'text' },
+    iconSource: { control: 'text' },
+    iconSize: { control: 'text' },
+  },
 };
 
-export const basicCircleIcon = () => (
+export const DefaultStory = (args) => (
   <CircleIcon
     border="1px solid"
     borderColor="black"
     background="white"
-    iconSize="42px"
-    iconSource="images/eth_logo.svg"
+    iconSize={args.iconSize}
+    iconSource={args.iconSource}
   />
 );
+
+DefaultStory.storyName = 'Default';
+
+DefaultStory.args = {
+  iconSize: '42px',
+  iconSource: 'images/eth_logo.svg',
+};