diff --git a/scm-ui/ui-components/src/CardColumn.stories.tsx b/scm-ui/ui-components/src/CardColumn.stories.tsx
index d2a59e0d4b..a8193a193b 100644
--- a/scm-ui/ui-components/src/CardColumn.stories.tsx
+++ b/scm-ui/ui-components/src/CardColumn.stories.tsx
@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { FC } from "react";
+import React from "react";
 import { MemoryRouter } from "react-router-dom";
 import { storiesOf } from "@storybook/react";
 import CardColumn from "./CardColumn";
@@ -35,8 +35,6 @@ const Wrapper = styled.div`
   max-width: 400px;
 `;
 
-const Container: FC = ({ children }) => <Wrapper>{children}</Wrapper>;
-
 const link = "/foo/bar";
 const avatar = <Icon name="icons fa-2x fa-fw" />;
 const title = <strong>title</strong>;
@@ -46,8 +44,8 @@ const baseDate = "2020-03-26T12:13:42+02:00";
 
 storiesOf("CardColumn", module)
   .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
-  .addDecorator(storyFn => <Container>{storyFn()}</Container>)
-  .add("default", () => (
+  .addDecorator(storyFn => <Wrapper>{storyFn()}</Wrapper>)
+  .add("Default", () => (
     <CardColumn
       link={link}
       avatar={avatar}
@@ -57,16 +55,15 @@ storiesOf("CardColumn", module)
       footerRight={footerRight}
     />
   ))
-  .add("minimal", () => (
+  .add("Minimal", () => <CardColumn title={title} footerLeft={footerLeft} footerRight={footerRight} />)
+  .add("With hoverable date", () => (
     <CardColumn
       title={title}
       footerLeft={footerLeft}
-      footerRight={footerRight}
+      footerRight={
+        <small className="level-item">
+          <DateFromNow baseDate={baseDate} date={repository.creationDate} />
+        </small>
+      }
     />
-  ))
-  .add("with hoverable date", () => (
-    <CardColumn title={title} footerLeft={footerLeft} footerRight={
-      <small className="level-item">
-      <DateFromNow baseDate={baseDate} date={repository.creationDate}/>
-    </small>} />
-    ));
+  ));
diff --git a/scm-ui/ui-components/src/CardColumnSmall.stories.tsx b/scm-ui/ui-components/src/CardColumnSmall.stories.tsx
index 029e5b1548..eab79635cc 100644
--- a/scm-ui/ui-components/src/CardColumnSmall.stories.tsx
+++ b/scm-ui/ui-components/src/CardColumnSmall.stories.tsx
@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { FC } from "react";
+import React from "react";
 import { MemoryRouter } from "react-router-dom";
 import { storiesOf } from "@storybook/react";
 import CardColumnSmall from "./CardColumnSmall";
@@ -33,8 +33,6 @@ const Wrapper = styled.div`
   max-width: 400px;
 `;
 
-const Container: FC = ({ children }) => <Wrapper>{children}</Wrapper>;
-
 const link = "/foo/bar";
 const icon = <Icon name="icons fa-2x fa-fw" />;
 const contentLeft = <strong className="is-marginless">main content</strong>;
@@ -42,10 +40,8 @@ const contentRight = <small>more text</small>;
 
 storiesOf("CardColumnSmall", module)
   .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
-  .addDecorator(storyFn => <Container>{storyFn()}</Container>)
-  .add("default", () => (
+  .addDecorator(storyFn => <Wrapper>{storyFn()}</Wrapper>)
+  .add("Default", () => (
     <CardColumnSmall link={link} avatar={icon} contentLeft={contentLeft} contentRight={contentRight} />
   ))
-  .add("minimal", () => (
-    <CardColumnSmall link={link} contentLeft={contentLeft} contentRight={contentRight} />
-  ));
+  .add("Minimal", () => <CardColumnSmall link={link} contentLeft={contentLeft} contentRight={contentRight} />);
diff --git a/scm-ui/ui-components/src/Icon.stories.tsx b/scm-ui/ui-components/src/Icon.stories.tsx
index 8d4e2c2cd2..f51b615120 100644
--- a/scm-ui/ui-components/src/Icon.stories.tsx
+++ b/scm-ui/ui-components/src/Icon.stories.tsx
@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { FC } from "react";
+import React from "react";
 import { storiesOf } from "@storybook/react";
 import styled from "styled-components";
 import Icon from "./Icon";
@@ -32,31 +32,56 @@ const Wrapper = styled.div`
   }
 `;
 
-const Container: FC = ({ children }) => <Wrapper>{children}</Wrapper>;
-
 const helloWorld = () => {
   alert("Hello world!");
 };
 
+const colors = ["primary", "link", "info", "success", "warning", "danger", "white", "light", "dark", "black", "text"];
+const sizing = ["xs", "sm", "lg", "2x", "3x", "5x", "7x", "10x"];
+
 storiesOf("Icon", module)
-  .addDecorator(storyFn => <Container>{storyFn()}</Container>)
-  .add("default", () => (
+  .addDecorator(storyFn => <Wrapper>{storyFn()}</Wrapper>)
+  .add("Default", () => (
     <>
+      <Icon name="cat" />
       <Icon title="Download" name="download" color="info" />
       <Icon title="Pull Request" name="code-branch fa-rotate-180" color="warning" />
       <Icon title="Star" iconStyle="far" name="star" color="inherit" />
+    </>
+  ))
+  .add("Colors", () => (
+    <>
+      <Icon title="default color" name="cat" />
+      {colors.map(color => (
+        <Icon key={color} title={color} name="cat" color={color} />
+      ))}
+    </>
+  ))
+  .add("Sizing", () => (
+    <>
+      <Icon title="default size" name="cat" />
+      {sizing.map(size => (
+        <Icon key={size} title={"fa-" + size} name={"cat fa-" + size} />
+      ))}
+    </>
+  ))
+  .add("Icon styles", () => (
+    <>
+      <Icon title="solid style" name="star" color="inherit" />
+      <Icon title="regular style" iconStyle="far" name="star" color="inherit" />
+      <Icon title="brand style" iconStyle="fab" name="react" color="inherit" />
+    </>
+  ))
+  .add("More options", () => (
+    <>
+      <Icon title="rotate-270" name="snowboarding fa-rotate-270" />
+      <Icon title="spin" name="spinner fa-spin" />
+      <Icon title="custom sizing" name="cat" className="is-size-4" />
       <Icon
-        title="Hello world!"
+        title="custom background and onClick"
         name="hand-sparkles"
         className="has-background-primary-25"
         onClick={() => helloWorld()}
       />
     </>
-  ))
-  .add("minimal", () => (
-    <>
-      <Icon name="download" />
-      <Icon name="icons" />
-      <Icon name="cat" />
-    </>
   ));
diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index 05312337e3..47cf3c699b 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -445,7 +445,7 @@ exports[`Storyshots Buttons|SubmitButton Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots CardColumn default 1`] = `
+exports[`Storyshots CardColumn Default 1`] = `
 <div
   className="CardColumnstories__Wrapper-sc-1ztucl-0 IFDjP"
 >
@@ -510,7 +510,7 @@ exports[`Storyshots CardColumn default 1`] = `
 </div>
 `;
 
-exports[`Storyshots CardColumn minimal 1`] = `
+exports[`Storyshots CardColumn Minimal 1`] = `
 <div
   className="CardColumnstories__Wrapper-sc-1ztucl-0 IFDjP"
 >
@@ -558,7 +558,7 @@ exports[`Storyshots CardColumn minimal 1`] = `
 </div>
 `;
 
-exports[`Storyshots CardColumn with hoverable date 1`] = `
+exports[`Storyshots CardColumn With hoverable date 1`] = `
 <div
   className="CardColumnstories__Wrapper-sc-1ztucl-0 IFDjP"
 >
@@ -613,7 +613,7 @@ exports[`Storyshots CardColumn with hoverable date 1`] = `
 </div>
 `;
 
-exports[`Storyshots CardColumnSmall default 1`] = `
+exports[`Storyshots CardColumnSmall Default 1`] = `
 <div
   className="CardColumnSmallstories__Wrapper-ofr817-0 fwZASP"
 >
@@ -661,7 +661,7 @@ exports[`Storyshots CardColumnSmall default 1`] = `
 </div>
 `;
 
-exports[`Storyshots CardColumnSmall minimal 1`] = `
+exports[`Storyshots CardColumnSmall Minimal 1`] = `
 <div
   className="CardColumnSmallstories__Wrapper-ofr817-0 fwZASP"
 >
@@ -32706,10 +32706,68 @@ exports[`Storyshots Forms|Textarea OnSubmit 1`] = `
 </div>
 `;
 
-exports[`Storyshots Icon default 1`] = `
+exports[`Storyshots Icon Colors 1`] = `
 <div
   className="Iconstories__Wrapper-sc-1g657fe-0 hCEjkH"
 >
+  <i
+    className="fas fa-fw fa-cat has-text-grey-light"
+    title="default color"
+  />
+  <i
+    className="fas fa-fw fa-cat has-text-primary"
+    title="primary"
+  />
+  <i
+    className="fas fa-fw fa-cat has-text-link"
+    title="link"
+  />
+  <i
+    className="fas fa-fw fa-cat has-text-info"
+    title="info"
+  />
+  <i
+    className="fas fa-fw fa-cat has-text-success"
+    title="success"
+  />
+  <i
+    className="fas fa-fw fa-cat has-text-warning"
+    title="warning"
+  />
+  <i
+    className="fas fa-fw fa-cat has-text-danger"
+    title="danger"
+  />
+  <i
+    className="fas fa-fw fa-cat has-text-white"
+    title="white"
+  />
+  <i
+    className="fas fa-fw fa-cat has-text-light"
+    title="light"
+  />
+  <i
+    className="fas fa-fw fa-cat has-text-dark"
+    title="dark"
+  />
+  <i
+    className="fas fa-fw fa-cat has-text-black"
+    title="black"
+  />
+  <i
+    className="fas fa-fw fa-cat has-text-text"
+    title="text"
+  />
+</div>
+`;
+
+exports[`Storyshots Icon Default 1`] = `
+<div
+  className="Iconstories__Wrapper-sc-1g657fe-0 hCEjkH"
+>
+  <i
+    className="fas fa-cat has-text-grey-light"
+  />
   <i
     className="fas fa-fw fa-download has-text-info"
     title="Download"
@@ -32722,26 +32780,91 @@ exports[`Storyshots Icon default 1`] = `
     className="far fa-fw fa-star has-text-inherit"
     title="Star"
   />
-  <i
-    className="fas fa-fw fa-hand-sparkles has-text-grey-light has-background-primary-25"
-    onClick={[Function]}
-    title="Hello world!"
-  />
 </div>
 `;
 
-exports[`Storyshots Icon minimal 1`] = `
+exports[`Storyshots Icon Icon styles 1`] = `
 <div
   className="Iconstories__Wrapper-sc-1g657fe-0 hCEjkH"
 >
   <i
-    className="fas fa-download has-text-grey-light"
+    className="fas fa-fw fa-star has-text-inherit"
+    title="solid style"
   />
   <i
-    className="fas fa-icons has-text-grey-light"
+    className="far fa-fw fa-star has-text-inherit"
+    title="regular style"
   />
   <i
-    className="fas fa-cat has-text-grey-light"
+    className="fab fa-fw fa-react has-text-inherit"
+    title="brand style"
+  />
+</div>
+`;
+
+exports[`Storyshots Icon More options 1`] = `
+<div
+  className="Iconstories__Wrapper-sc-1g657fe-0 hCEjkH"
+>
+  <i
+    className="fas fa-fw fa-snowboarding fa-rotate-270 has-text-grey-light"
+    title="rotate-270"
+  />
+  <i
+    className="fas fa-fw fa-spinner fa-spin has-text-grey-light"
+    title="spin"
+  />
+  <i
+    className="fas fa-fw fa-cat has-text-grey-light is-size-4"
+    title="custom sizing"
+  />
+  <i
+    className="fas fa-fw fa-hand-sparkles has-text-grey-light has-background-primary-25"
+    onClick={[Function]}
+    title="custom background and onClick"
+  />
+</div>
+`;
+
+exports[`Storyshots Icon Sizing 1`] = `
+<div
+  className="Iconstories__Wrapper-sc-1g657fe-0 hCEjkH"
+>
+  <i
+    className="fas fa-fw fa-cat has-text-grey-light"
+    title="default size"
+  />
+  <i
+    className="fas fa-fw fa-cat fa-xs has-text-grey-light"
+    title="fa-xs"
+  />
+  <i
+    className="fas fa-fw fa-cat fa-sm has-text-grey-light"
+    title="fa-sm"
+  />
+  <i
+    className="fas fa-fw fa-cat fa-lg has-text-grey-light"
+    title="fa-lg"
+  />
+  <i
+    className="fas fa-fw fa-cat fa-2x has-text-grey-light"
+    title="fa-2x"
+  />
+  <i
+    className="fas fa-fw fa-cat fa-3x has-text-grey-light"
+    title="fa-3x"
+  />
+  <i
+    className="fas fa-fw fa-cat fa-5x has-text-grey-light"
+    title="fa-5x"
+  />
+  <i
+    className="fas fa-fw fa-cat fa-7x has-text-grey-light"
+    title="fa-7x"
+  />
+  <i
+    className="fas fa-fw fa-cat fa-10x has-text-grey-light"
+    title="fa-10x"
   />
 </div>
 `;