diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4209598c8d..1a6e58bee3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,24 +5,26 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Unreleased
+### Added
+- Add iconStyle + onClick option and story shot for icon component ([#1100](https://github.com/scm-manager/scm-manager/pull/1100))
 
 ### Changed
 - Removed the `requires` attribute on the `@Extension` annotation and instead create a new `@Requires` annotation ([#1097](https://github.com/scm-manager/scm-manager/pull/1097))
 
-## 2.0.0-rc7 - 2020-04-09
+## [2.0.0-rc7] - 2020-04-09
 ### Added
 - Fire various plugin events ([#1088](https://github.com/scm-manager/scm-manager/pull/1088))
-- Display version for plugins ([#1089](https://github.com/scm-manager/scm-manager/pull/1089)
+- Display version for plugins ([#1089](https://github.com/scm-manager/scm-manager/pull/1089))
 
 ### Changed
-- Simplified collapse state management of the secondary navigation ([#1086](https://github.com/scm-manager/scm-manager/pull/1086)
-- Ensure same monospace font-family throughout whole SCM-Manager ([#1091](https://github.com/scm-manager/scm-manager/pull/1091)
+- Simplified collapse state management of the secondary navigation ([#1086](https://github.com/scm-manager/scm-manager/pull/1086))
+- Ensure same monospace font-family throughout whole SCM-Manager ([#1091](https://github.com/scm-manager/scm-manager/pull/1091))
 
 ### Fixed
 - Authentication for write requests for repositories with anonymous read access ([#108](https://github.com/scm-manager/scm-manager/pull/1081))
 - Submodules in git do no longer lead to a server error in the browser command ([#1093](https://github.com/scm-manager/scm-manager/pull/1093))
 
-## 2.0.0-rc6 - 2020-03-26
+## [2.0.0-rc6] - 2020-03-26
 ### Added
 - Extension point to add links to the repository cards from plug ins ([#1041](https://github.com/scm-manager/scm-manager/pull/1041))
 - Libc based restart strategy for posix operating systems ([#1079](https://github.com/scm-manager/scm-manager/pull/1079))
@@ -46,7 +48,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Show specific notification for plugin actions on plugin administration ([#1057](https://github.com/scm-manager/scm-manager/pull/1057))
 - Invalid markdown could make parts of the page inaccessible ([#1077](https://github.com/scm-manager/scm-manager/pull/1077)) 
 
-## 2.0.0-rc5 - 2020-03-12
+## [2.0.0-rc5] - 2020-03-12
 ### Added
 - Added footer extension points for links and avatar
 - Create OpenAPI specification during build
@@ -71,7 +73,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Enunciate rest documentation
 - Obsolete fields in data transfer objects
 
-## 2.0.0-rc4 - 2020-02-14
+## [2.0.0-rc4] - 2020-02-14
 ### Added
 - Support for Java versions > 8
 - Simple ClassLoaderLifeCycle to fix integration tests on Java > 8
@@ -87,12 +89,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 - Committer of new Git commits set to "SCM-Manager <noreply@scm-manager.org>"
 
-## 2.0.0-rc3 - 2020-01-31
+## [2.0.0-rc3] - 2020-01-31
 ### Fixed
 - Broken plugin order fixed
 - MarkdownViewer in code section renders markdown properly
 
-## 2.0.0-rc2 - 2020-01-29
+## [2.0.0-rc2] - 2020-01-29
 ### Added
 - Set individual page title
 - Copy on write
@@ -115,7 +117,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Page title is now set correctly
 - Restart after migration
 
-## 2.0.0-rc1 - 2019-12-02
+## [2.0.0-rc1] - 2019-12-02
 ### Added
 - Namespace concept and endpoints
 - File history
@@ -132,3 +134,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Anonymous access via git-clone and API access with anonymous user
 - Cache and x-requested-with header to bundle requests
 - remove public flag from repository and migrate permissions to anonymous user
+
+[2.0.0-rc1]: https://github.com/scm-manager/scm-manager/releases/tag/2.0.0-rc1
+[2.0.0-rc2]: https://github.com/scm-manager/scm-manager/releases/tag/2.0.0-rc2
+[2.0.0-rc3]: https://github.com/scm-manager/scm-manager/releases/tag/2.0.0-rc3
+[2.0.0-rc4]: https://github.com/scm-manager/scm-manager/releases/tag/2.0.0-rc4
+[2.0.0-rc5]: https://github.com/scm-manager/scm-manager/releases/tag/2.0.0-rc5
+[2.0.0-rc6]: https://github.com/scm-manager/scm-manager/releases/tag/2.0.0-rc6
+[2.0.0-rc7]: https://github.com/scm-manager/scm-manager/releases/tag/2.0.0-rc7
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
new file mode 100644
index 0000000000..88fdff7731
--- /dev/null
+++ b/scm-ui/ui-components/src/Icon.stories.tsx
@@ -0,0 +1,78 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import styled from "styled-components";
+import Icon from "./Icon";
+
+const Wrapper = styled.div`
+  * {
+    margin: 0.5rem;
+  }
+`;
+
+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 => <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="custom background" name="hand-sparkles" className="has-background-primary-25" />
+    </>
+  ));
diff --git a/scm-ui/ui-components/src/Icon.tsx b/scm-ui/ui-components/src/Icon.tsx
index e93979ed5d..77b6591529 100644
--- a/scm-ui/ui-components/src/Icon.tsx
+++ b/scm-ui/ui-components/src/Icon.tsx
@@ -26,6 +26,7 @@ import classNames from "classnames";
 
 type Props = {
   title?: string;
+  iconStyle: string;
   name: string;
   color: string;
   className?: string;
@@ -33,14 +34,17 @@ type Props = {
 
 export default class Icon extends React.Component<Props> {
   static defaultProps = {
+    iconStyle: "fas",
     color: "grey-light"
   };
 
   render() {
-    const { title, name, color, className } = this.props;
+    const { title, iconStyle, name, color, className } = this.props;
     if (title) {
-      return <i title={title} className={classNames("fas", "fa-fw", "fa-" + name, `has-text-${color}`, className)} />;
+      return (
+        <i title={title} className={classNames(iconStyle, "fa-fw", "fa-" + name, `has-text-${color}`, className)} />
+      );
     }
-    return <i className={classNames("fas", "fa-" + name, `has-text-${color}`, className)} />;
+    return <i className={classNames(iconStyle, "fa-" + name, `has-text-${color}`, className)} />;
   }
 }
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 26b6c0c320..9e6a8a7200 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,6 +32706,168 @@ exports[`Storyshots Forms|Textarea OnSubmit 1`] = `
 </div>
 `;
 
+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"
+  />
+  <i
+    className="fas fa-fw fa-code-branch fa-rotate-180 has-text-warning"
+    title="Pull Request"
+  />
+  <i
+    className="far fa-fw fa-star has-text-inherit"
+    title="Star"
+  />
+</div>
+`;
+
+exports[`Storyshots Icon Icon styles 1`] = `
+<div
+  className="Iconstories__Wrapper-sc-1g657fe-0 hCEjkH"
+>
+  <i
+    className="fas fa-fw fa-star has-text-inherit"
+    title="solid style"
+  />
+  <i
+    className="far fa-fw fa-star has-text-inherit"
+    title="regular style"
+  />
+  <i
+    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"
+    title="custom background"
+  />
+</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>
+`;
+
 exports[`Storyshots Layout|Footer Default 1`] = `
 <footer
   className="footer"