diff --git a/ui/app/components/ui/identicon/identicon.component.js b/ui/app/components/ui/identicon/identicon.component.js
index 5fed06304..740957af7 100644
--- a/ui/app/components/ui/identicon/identicon.component.js
+++ b/ui/app/components/ui/identicon/identicon.component.js
@@ -26,7 +26,12 @@ export default class Identicon extends PureComponent {
}
static defaultProps = {
+ addBorder: false,
+ address: undefined,
+ className: undefined,
diameter: 46,
+ image: undefined,
+ useBlockie: false,
}
renderImage () {
diff --git a/ui/app/components/ui/identicon/identicon.stories.js b/ui/app/components/ui/identicon/identicon.stories.js
new file mode 100644
index 000000000..69d4d2721
--- /dev/null
+++ b/ui/app/components/ui/identicon/identicon.stories.js
@@ -0,0 +1,45 @@
+import React from 'react'
+import { text, boolean } from '@storybook/addon-knobs/react'
+import Identicon from './identicon.component'
+import { number } from '@storybook/addon-knobs'
+
+export default { title: 'Identicon' }
+
+const diameterOptions = {
+ range: true,
+ min: 10,
+ max: 200,
+ step: 1,
+}
+export const standard = () => (
+
+)
+
+export const image = () => (
+
+)
+
+export const blockie = () => (
+
+)
+
+// The border size is hard-coded in CSS, and was designed with this size identicon in mind
+const withBorderDiameter = 32
+
+export const withBorder = () => (
+
+)