diff --git a/ui/components/ui/url-icon/url-icon.stories.js b/ui/components/ui/url-icon/url-icon.stories.js
new file mode 100644
index 000000000..630fefba3
--- /dev/null
+++ b/ui/components/ui/url-icon/url-icon.stories.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { text } from '@storybook/addon-knobs';
+import UrlIcon from './url-icon';
+
+export default {
+  title: 'UrlIcon',
+  id: __filename,
+};
+
+export const AST = () => {
+  return <UrlIcon name="AST" url="AST.png" />;
+};
+
+export const BAT = () => {
+  return <UrlIcon name="BAT" url="BAT_icon.svg" />;
+};
+
+export const CustomProps = () => {
+  return (
+    <UrlIcon
+      name={text('Symbol', '')}
+      url={text('Icon URL', '')}
+      className={text('className', '')}
+      fallbackClassName={text('fallbackClassName', '')}
+    />
+  );
+};