diff --git a/webapp/.babelrc b/webapp/.babelrc
index b23873e12..4538e0ac0 100644
--- a/webapp/.babelrc
+++ b/webapp/.babelrc
@@ -12,6 +12,7 @@
   ],
   "env": {
     "test": {
+      "plugins": ["require-context-hook"],
       "presets": [
         [
           "@babel/preset-env",
@@ -24,4 +25,4 @@
       ]
     }
   }
-}
\ No newline at end of file
+}
diff --git a/webapp/README.md b/webapp/README.md
index def0b739e..185557fc7 100644
--- a/webapp/README.md
+++ b/webapp/README.md
@@ -92,15 +92,15 @@ You can then visit the Storybook playground on `http://localhost:3002`
 
 ## Styleguide Migration
 
-We are currently in the process of migrating our styleguide components and design tokens from the [Nitro Styleguide](https://github.com/Human-Connection/Nitro-Styleguide) into the main [Human Connection repository](https://github.com/Human-Connection/Human-Connection) and refactoring our components in the process. During this migration, our new components will live in a `view` folder to separate them from the old, yet untouched components.
+We are currently in the process of migrating our styleguide components and design tokens from the [Nitro Styleguide](https://github.com/Human-Connection/Nitro-Styleguide) into the main [Human Connection repository](https://github.com/Human-Connection/Human-Connection) and refactoring our components in the process. During this migration, our new components will live in a `_new/` folder to separate them from the old, yet untouched components.
 
 ### Folder Structure
 
-The folder structure we are aiming for is based on the [directory setup proposed by Nuxt.js](https://nuxtjs.org/guide/directory-structure):
+The folder structure we are following is [prescribed by Nuxt.js](https://nuxtjs.org/guide/directory-structure):
 
-- **assets** contains icons, images and logos in `svg` format
-- **components** are the generic building blocks of the app – small, reusable and usually not coupled to state
-- **features** are composed of components but tied to a particular function of the app (e.g. `comment` or `post`)
+- **assets** contains icons, images and logos in `svg` format and all shared SCSS files such as `tokens`
+- **components** separated into two sub-folders:
+    - **generic** are the generic building blocks of the app – small, reusable and usually not coupled to state
+    - **features** are composed of components but tied to a particular function of the app (e.g. `comment` or `post`)
 - **layouts** can use components to create layout templates for pages
 - **pages** are the entry points for all `routes` in the app and are composed of layouts, features and components
-- **styles** holds all shared SCSS files such as `variables` and `mixins`
diff --git a/webapp/assets/_new/icons/index.js b/webapp/assets/_new/icons/index.js
new file mode 100644
index 000000000..daa0714f2
--- /dev/null
+++ b/webapp/assets/_new/icons/index.js
@@ -0,0 +1,13 @@
+const svgFileList = require.context('./svgs', true, /\.svg/)
+const icons = {}
+const iconNames = []
+
+svgFileList.keys().forEach(fileName => {
+  const svgCode = svgFileList(fileName)
+  const iconName = fileName.replace('./', '').replace('.svg', '')
+  icons[iconName] = svgCode
+  iconNames.push(iconName)
+})
+
+export { iconNames }
+export default icons
diff --git a/webapp/assets/_new/icons/svgs/angellist.svg b/webapp/assets/_new/icons/svgs/angellist.svg
new file mode 100755
index 000000000..34123f5f0
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/angellist.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>angellist</title>
+<path d="M12.813 4c0.312 0.021 0.615 0.118 0.875 0.25 0.521 0.265 0.919 0.67 1.281 1.125 0.725 0.91 1.311 2.103 1.813 3.313 0.207 0.498 0.39 0.985 0.563 1.469 0.109-0.401 0.21-0.808 0.344-1.219 0.391-1.201 0.902-2.395 1.594-3.344 0.346-0.474 0.731-0.895 1.25-1.188s1.174-0.421 1.813-0.281c0.628 0.138 1.091 0.677 1.281 1.156s0.24 0.97 0.25 1.5c0.020 1.060-0.168 2.29-0.406 3.5-0.385 1.96-0.863 3.535-1.063 4.188 0.328 0.248 0.624 0.516 0.844 0.813 1.025 1.382 0.75 3.010 0.75 3.375 0 4.219-1.55 6.731-3.406 8s-3.874 1.344-4.75 1.344c-0.805 0-2.922 0.024-4.938-0.906s-3.906-3.011-3.906-6.563c0-1.078 0.261-1.996 0.906-2.625 0.403-0.392 0.929-0.57 1.469-0.625-0.205-0.548-0.361-1.162-0.281-1.844 0.089-0.757 0.563-1.558 1.344-2.063 0.319-0.206 0.672-0.326 1.031-0.344 0.169-0.008 0.336 0.001 0.5 0.031-0.273-0.768-0.577-1.665-0.844-2.625-0.325-1.173-0.597-2.383-0.625-3.469-0.014-0.543 0.037-1.059 0.219-1.563s0.577-1.017 1.156-1.25c0.303-0.122 0.625-0.177 0.938-0.156zM12.656 5.969c-0.013-0.002-0.018 0.026-0.031 0.031 0.004 0.007-0.006 0.024-0.031 0.094-0.051 0.14-0.104 0.453-0.094 0.844 0.020 0.781 0.229 1.879 0.531 2.969 0.497 1.791 1.081 3.25 1.313 3.813 0.442-0.431 1.082-0.719 1.781-0.719h0.063c-0.255-0.9-0.658-2.135-1.25-3.563-0.465-1.121-1.026-2.178-1.531-2.813-0.253-0.317-0.492-0.526-0.625-0.594-0.066-0.034-0.103-0.060-0.125-0.063zM21.656 6.125c-0.047-0-0.102 0.001-0.156 0.031-0.168 0.095-0.391 0.304-0.625 0.625-0.468 0.641-0.925 1.687-1.281 2.781-0.488 1.498-0.754 2.761-0.906 3.594 0.721 0.094 1.355 0.232 1.906 0.406 0.238-0.82 0.595-2.103 0.906-3.688 0.224-1.139 0.39-2.277 0.375-3.063-0.006-0.332-0.054-0.548-0.094-0.688-0.040 0.001-0.078 0-0.125 0zM16.125 15c-0.248 0-0.319 0.061-0.406 0.156s-0.169 0.254-0.188 0.469c-0.015 0.179 0.007 0.355 0.063 0.5 0.046 0.070 0.080 0.147 0.125 0.219 0.020 0.024 0.040 0.042 0.063 0.063 0.062 0.056 0.14 0.102 0.219 0.125 1.258 0.369 2.844 0.844 2.844 0.844 0.399 0.115 0.723 0.546 0.723 0.961 0 0.444-0.352 0.881-0.785 0.977 0 0-0.565 0.117-1.125 0.469-0.348 0.218-0.665 0.461-0.844 0.813-0.109 0.214-0.156 0.468-0.156 0.781 0 0.866 0.241 1.414 0.469 1.75s0.375 0.406 0.375 0.406l-1.094 1.656s-0.515-0.316-0.938-0.938c-0.189-0.278-0.354-0.651-0.5-1.063-0.079 0.184-0.099 0.39-0.219 0.531-0.466 0.55-1.139 0.906-1.906 0.906-0.74 0-1.409-0.369-1.906-0.813s-0.89-0.987-1.281-1.594l1.688-1.094c0.346 0.537 0.672 0.982 0.938 1.219s0.412 0.281 0.563 0.281c0.124 0 0.312-0.113 0.375-0.188-0.216-0.366-0.428-0.696-0.656-1-0.988-1.312-2.049-2.044-2.656-2.188-0.376-0.089-0.483-0.046-0.594 0.063s-0.313 0.471-0.313 1.219c0 2.907 1.245 4.056 2.75 4.75s3.296 0.719 4.094 0.719c0.727 0 2.304-0.097 3.625-1s2.531-2.589 2.531-6.344c0-0.822 0.143-1.5-0.344-2.156s-1.846-1.5-5.531-1.5zM11.5 15.031c-0.34 0.22-0.376 0.367-0.406 0.625s0.025 0.662 0.188 1.063c0.324 0.802 0.938 1.531 0.938 1.531 0.663 0.506 1.276 1.177 1.875 2l0.063-0.031c-0.196-0.257-0.218-0.129-0.063-0.125s0.414-0.041 0.594-0.125 0.279-0.181 0.313-0.25 0.064-0.147-0.063-0.469c-0.536-1.37-1.376-2.666-2.156-3.438-0.39-0.386-0.765-0.63-1-0.719s-0.239-0.090-0.281-0.063z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/angle-down.svg b/webapp/assets/_new/icons/svgs/angle-down.svg
new file mode 100755
index 000000000..aa6f763c8
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/angle-down.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>angle-down</title>
+<path d="M4.219 10.781l11.781 11.781 11.781-11.781 1.438 1.438-12.5 12.5-0.719 0.688-0.719-0.688-12.5-12.5z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/arrow-down.svg b/webapp/assets/_new/icons/svgs/arrow-down.svg
new file mode 100755
index 000000000..6cee34766
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/arrow-down.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>arrow-down</title>
+<path d="M15 4h2v20.063l6.781-6.781 1.438 1.438-8.5 8.5-0.719 0.688-0.719-0.688-8.5-8.5 1.438-1.438 6.781 6.781v-20.063z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/arrow-left.svg b/webapp/assets/_new/icons/svgs/arrow-left.svg
new file mode 100755
index 000000000..f7489c43a
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/arrow-left.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>arrow-left</title>
+<path d="M13.281 6.781l1.438 1.438-6.781 6.781h20.063v2h-20.063l6.781 6.781-1.438 1.438-8.5-8.5-0.688-0.719 0.688-0.719z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/arrow-right.svg b/webapp/assets/_new/icons/svgs/arrow-right.svg
new file mode 100755
index 000000000..62d753057
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/arrow-right.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>arrow-right</title>
+<path d="M18.719 6.781l8.5 8.5 0.688 0.719-0.688 0.719-8.5 8.5-1.438-1.438 6.781-6.781h-20.063v-2h20.063l-6.781-6.781z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/at.svg b/webapp/assets/_new/icons/svgs/at.svg
new file mode 100755
index 000000000..e046ea75a
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/at.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>at</title>
+<path d="M16.188 4c6.337 0.093 11.62 5.29 11.813 11.625 0.005 0.143 0 0.274 0 0.406-0.012 3.289-2.716 5.97-6 5.969-1.271-0.001-2.391-0.628-3.125-1.563-0.827 0.948-2.027 1.563-3.375 1.563-2.473 0-4.5-2.027-4.5-4.5v-3c0-2.473 2.027-4.5 4.5-4.5 0.928 0 1.781 0.295 2.5 0.781v-0.781h2v8c0 1.116 0.883 1.999 2 2 2.208 0.001 3.992-1.766 4-3.969 0-0.122 0.003-0.231 0-0.344-0.16-5.253-4.589-9.61-9.844-9.688-6.165-0.090-11.048 5.348-10 11.719 0.696 4.234 4.182 7.613 8.438 8.188 2.919 0.394 5.61-0.452 7.656-2.094l1.25 1.563c-2.452 1.968-5.691 2.968-9.156 2.5-5.139-0.694-9.346-4.723-10.188-9.844-1.242-7.545 4.666-14.139 12.031-14.031zM15.5 12c-1.393 0-2.5 1.107-2.5 2.5v3c0 1.393 1.107 2.5 2.5 2.5s2.5-1.107 2.5-2.5v-3c0-1.393-1.107-2.5-2.5-2.5z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/balance-scale.svg b/webapp/assets/_new/icons/svgs/balance-scale.svg
new file mode 100755
index 000000000..f5e446fd2
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/balance-scale.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>balance-scale</title>
+<path d="M16 5c1.292 0 2.394 0.844 2.813 2h7.188v2h-1.406l0.281 0.5 4 7 0.125 0.25v0.25c0 2.75-2.25 5-5 5s-5-2.25-5-5v-0.25l0.125-0.25 4-7 0.281-0.5h-4.594c-0.304 0.84-0.973 1.509-1.813 1.813v13.188h4v2h-10v-2h4v-13.188c-0.842-0.304-1.507-0.969-1.813-1.813h-4.594l0.281 0.5 4 7 0.125 0.25v0.25c0 2.75-2.251 5-5 5s-5-2.25-5-5v-0.25l0.125-0.25 4-7 0.281-0.5h-1.406v-2h7.188c0.418-1.156 1.521-2 2.813-2zM16 7c-0.564 0-1 0.436-1 1s0.436 1 1 1 1-0.436 1-1-0.436-1-1-1zM8 12.031l-2.281 3.969h4.563zM24 12.031l-2.281 3.969h4.563zM5.25 18c0.402 1.161 1.444 2 2.75 2s2.348-0.839 2.75-2h-5.5zM21.25 18c0.402 1.161 1.444 2 2.75 2s2.348-0.839 2.75-2h-5.5z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/ban.svg b/webapp/assets/_new/icons/svgs/ban.svg
new file mode 100755
index 000000000..7dc338541
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/ban.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>ban</title>
+<path d="M16 3c7.168 0 13 5.832 13 13s-5.832 13-13 13-13-5.832-13-13 5.832-13 13-13zM16 5c-2.647 0-5.073 0.918-6.969 2.469l15.344 15.656c1.635-1.919 2.625-4.399 2.625-7.125 0-6.087-4.913-11-11-11zM7.625 8.875c-1.635 1.919-2.625 4.399-2.625 7.125 0 6.087 4.913 11 11 11 2.647 0 5.073-0.918 6.969-2.469z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/bars.svg b/webapp/assets/_new/icons/svgs/bars.svg
new file mode 100755
index 000000000..5ea0f464d
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/bars.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>bars</title>
+<path d="M4 7h24v2h-24v-2zM4 15h24v2h-24v-2zM4 23h24v2h-24v-2z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/bell.svg b/webapp/assets/_new/icons/svgs/bell.svg
new file mode 100755
index 000000000..ee58c443c
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/bell.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>bell</title>
+<path d="M15 3c1.105 0 2 0.895 2 2 0 0.085-0.021 0.168-0.031 0.25 3.521 0.924 6.031 4.273 6.031 8.031v8.719c0 0.565 0.435 1 1 1h1v2h-7.188c0.114 0.316 0.188 0.647 0.188 1 0 1.645-1.355 3-3 3s-3-1.355-3-3c0-0.353 0.073-0.684 0.188-1h-7.188v-2h1c0.565 0 1-0.435 1-1v-9c0-3.726 2.574-6.866 6.031-7.75-0.010-0.082-0.031-0.165-0.031-0.25 0-1.105 0.895-2 2-2zM14.563 7c-3.118 0.226-5.563 2.824-5.563 6v9c0 0.353-0.073 0.684-0.188 1h12.375c-0.114-0.316-0.188-0.647-0.188-1v-8.719c0-3.319-2.546-6.183-5.813-6.281-0.064-0.002-0.124-0-0.188 0-0.148 0-0.292-0.011-0.438 0zM15 25c-0.564 0-1 0.436-1 1s0.436 1 1 1 1-0.436 1-1-0.436-1-1-1z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/bold.svg b/webapp/assets/_new/icons/svgs/bold.svg
new file mode 100755
index 000000000..c3516808d
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/bold.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>bold</title>
+<path d="M16 7h-9v18h11c2.8 0 5-2.2 5-5 0-2.2-1.4-4-3.3-4.7 0.8-0.9 1.3-2 1.3-3.3 0-2.8-2.2-5-5-5zM9 15v-6h7c1.7 0 3 1.3 3 3s-1.3 3-3 3h-7zM9 23v-6h9c1.7 0 3 1.3 3 3s-1.3 3-3 3h-9zM16 5v0c3.9 0 7 3.1 7 7 0 0.9-0.2 1.8-0.5 2.6 1.5 1.3 2.5 3.3 2.5 5.4 0 3.9-3.1 7-7 7h-13v-22h11zM11 11v0 2h5c0.6 0 1-0.4 1-1s-0.4-1-1-1h-5zM11 19v0 2h7c0.6 0 1-0.4 1-1s-0.4-1-1-1h-7z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/bookmark.svg b/webapp/assets/_new/icons/svgs/bookmark.svg
new file mode 100755
index 000000000..bd3ff4559
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/bookmark.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>bookmark</title>
+<path d="M7 5h18v23l-1.594-1.188-7.406-5.563-7.406 5.563-1.594 1.188v-23zM9 7v17l6.406-4.813 0.594-0.438 0.594 0.438 6.406 4.813v-17h-14z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/bullhorn.svg b/webapp/assets/_new/icons/svgs/bullhorn.svg
new file mode 100755
index 000000000..95e0d21d3
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/bullhorn.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>bullhorn</title>
+<path d="M28 3.031v9.156c1.156 0.418 2 1.521 2 2.813s-0.844 2.394-2 2.813v9.156l-1.594-1.156s-2.007-1.443-4.875-2.906-6.587-2.906-9.813-2.906h-3.375l1.625 5.719 0.344 1.281h-6.063l-0.219-0.719-2-7-0.031-0.156v-9.125h9.719c3.27 0 6.987-1.412 9.844-2.875s4.844-2.938 4.844-2.938zM26 6.75c-0.82 0.558-1.459 1.064-3.531 2.125-2.929 1.5-6.726 3.050-10.469 3.125v6c3.708 0.073 7.499 1.595 10.438 3.094 2.078 1.060 2.735 1.567 3.563 2.125v-16.469zM4 12v6h6v-6h-6zM4.344 20l1.406 5h1.906l-1.406-5h-1.906z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/check.svg b/webapp/assets/_new/icons/svgs/check.svg
new file mode 100755
index 000000000..bf49fe01d
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/check.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>check</title>
+<path d="M28.281 6.281l1.438 1.438-18 18-0.719 0.688-0.719-0.688-8-8 1.438-1.438 7.281 7.281z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/clock.svg b/webapp/assets/_new/icons/svgs/clock.svg
new file mode 100755
index 000000000..2344dd890
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/clock.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>clock-o</title>
+<path d="M16 4c6.616 0 12 5.384 12 12s-5.384 12-12 12-12-5.384-12-12 5.384-12 12-12zM16 6c-5.535 0-10 4.465-10 10s4.465 10 10 10 10-4.465 10-10-4.465-10-10-10zM15 8h2v7h5v2h-7v-9z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/close.svg b/webapp/assets/_new/icons/svgs/close.svg
new file mode 100755
index 000000000..48604d097
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/close.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>close</title>
+<path d="M7.219 5.781l8.781 8.781 8.781-8.781 1.438 1.438-8.781 8.781 8.781 8.781-1.438 1.438-8.781-8.781-8.781 8.781-1.438-1.438 8.781-8.781-8.781-8.781z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/cogs.svg b/webapp/assets/_new/icons/svgs/cogs.svg
new file mode 100755
index 000000000..3d0104d19
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/cogs.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>cogs</title>
+<path d="M21.5 2.5h2v1.406c0.828 0.146 1.586 0.474 2.25 0.938l0.938-0.938 1.406 1.406-0.938 0.938c0.464 0.664 0.792 1.421 0.938 2.25h1.406v2h-1.406c-0.147 0.837-0.466 1.613-0.938 2.281l0.969 1.031-1.469 1.375-0.938-1c-0.656 0.451-1.405 0.763-2.219 0.906v1.406h-2v-1.406c-0.828-0.146-1.586-0.474-2.25-0.938l-1.031 1.063-1.438-1.438 1.063-1.031c-0.464-0.664-0.792-1.421-0.938-2.25h-1.406v-2h1.406c0.143-0.814 0.456-1.563 0.906-2.219l-1-0.938 1.375-1.469 1.031 0.969c0.669-0.471 1.445-0.79 2.281-0.938v-1.406zM22.5 5.813c-2.055 0-3.688 1.632-3.688 3.688s1.632 3.688 3.688 3.688 3.688-1.632 3.688-3.688-1.632-3.688-3.688-3.688zM9.531 11.719l0.719 1.813c0.53-0.132 1.087-0.219 1.656-0.219 0.571 0 1.126 0.085 1.656 0.219l0.719-1.813 1.844 0.75-0.719 1.813c0.944 0.571 1.742 1.372 2.313 2.313l1.813-0.719 0.75 1.844-1.813 0.719c0.132 0.529 0.219 1.087 0.219 1.656s-0.086 1.126-0.219 1.656l1.813 0.719-0.75 1.844-1.813-0.719c-0.569 0.952-1.367 1.766-2.313 2.344l0.719 1.781-1.844 0.75-0.719-1.781c-0.529 0.134-1.087 0.219-1.656 0.219-0.573 0-1.123-0.084-1.656-0.219l-0.719 1.781-1.844-0.75 0.719-1.781c-0.961-0.577-1.765-1.384-2.344-2.344l-1.781 0.719-0.75-1.844 1.781-0.719c-0.134-0.53-0.219-1.087-0.219-1.656s0.085-1.128 0.219-1.656l-1.781-0.719 0.75-1.844 1.781 0.719c0.577-0.945 1.392-1.743 2.344-2.313l-0.719-1.813zM11.906 15.313c-2.663 0-4.813 2.118-4.813 4.781s2.15 4.813 4.813 4.813 4.781-2.15 4.781-4.813-2.118-4.781-4.781-4.781z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/comment.svg b/webapp/assets/_new/icons/svgs/comment.svg
new file mode 100755
index 000000000..fe848ec20
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/comment.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>comment</title>
+<path d="M3 6h26v20h-9.563l-2.719 2.719-0.719 0.688-0.719-0.688-2.719-2.719h-9.563v-20zM5 8v16h8.406l0.313 0.281 2.281 2.281 2.281-2.281 0.313-0.281h8.406v-16h-22zM9 11h14v2h-14v-2zM9 15h14v2h-14v-2zM9 19h10v2h-10v-2z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/comments.svg b/webapp/assets/_new/icons/svgs/comments.svg
new file mode 100755
index 000000000..551f10e4e
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/comments.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>comments</title>
+<path d="M2 5h20v16h-9.656l-4.719 3.781-1.625 1.313v-5.094h-4v-16zM4 7v12h4v2.906l3.375-2.688 0.281-0.219h8.344v-12h-16zM24 9h6v16h-4v5.094l-6.344-5.094h-9.313l2.5-2h7.5l3.656 2.906v-2.906h4v-12h-4v-2z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/edit.svg b/webapp/assets/_new/icons/svgs/edit.svg
new file mode 100755
index 000000000..a80101e6c
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/edit.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>edit</title>
+<path d="M25 4.031c0.765 0 1.517 0.298 2.094 0.875 1.154 1.154 1.154 3.034 0 4.188l-10.094 10.125-0.313 0.063-3.5 0.688-1.469 0.313 0.313-1.469 0.688-3.5 0.063-0.313 0.219-0.219 9.906-9.875c0.577-0.577 1.329-0.875 2.094-0.875zM25 5.969c-0.235 0-0.464 0.121-0.688 0.344l-9.688 9.688-0.344 1.719 1.719-0.344 9.688-9.688c0.446-0.446 0.446-0.929 0-1.375-0.223-0.223-0.453-0.344-0.688-0.344zM4 8h13.188l-2 2h-9.188v16h16v-9.188l2-2v13.188h-20v-20z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/ellipsis-v.svg b/webapp/assets/_new/icons/svgs/ellipsis-v.svg
new file mode 100755
index 000000000..89313ddfd
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/ellipsis-v.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>ellipsis-v</title>
+<path d="M16 6c1.105 0 2 0.895 2 2s-0.895 2-2 2-2-0.895-2-2 0.895-2 2-2zM16 14c1.105 0 2 0.895 2 2s-0.895 2-2 2-2-0.895-2-2 0.895-2 2-2zM16 22c1.105 0 2 0.895 2 2s-0.895 2-2 2-2-0.895-2-2 0.895-2 2-2z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/envelope.svg b/webapp/assets/_new/icons/svgs/envelope.svg
new file mode 100755
index 000000000..92d5320c0
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/envelope.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>envelope</title>
+<path d="M3 8h26v18h-26v-18zM7.313 10l8.688 5.781 8.688-5.781h-17.375zM5 10.875v13.125h22v-13.125l-10.438 6.969-0.563 0.344-0.563-0.344z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/exclamation-circle.svg b/webapp/assets/_new/icons/svgs/exclamation-circle.svg
new file mode 100755
index 000000000..cd658b997
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/exclamation-circle.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>exclamation-circle</title>
+<path d="M16 4c6.616 0 12 5.384 12 12s-5.384 12-12 12-12-5.384-12-12 5.384-12 12-12zM16 6c-5.535 0-10 4.465-10 10s4.465 10 10 10 10-4.465 10-10-4.465-10-10-10zM15 10h2v8h-2v-8zM15 20h2v2h-2v-2z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/eye-slash.svg b/webapp/assets/_new/icons/svgs/eye-slash.svg
new file mode 100755
index 000000000..4e434ac8d
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/eye-slash.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>eye-slash</title>
+<path d="M3.719 2.281l6.75 6.75c1.685-0.612 3.538-1.031 5.531-1.031 8.395 0 14.494 7.044 14.75 7.344l0.625 0.719-0.656 0.656c-0.193 0.192-3.247 3.135-7.344 5.219l6.344 6.344-1.438 1.438-8.688-8.719-11.125-11.125-6.188-6.156zM16 10c-1.389 0-2.697 0.254-3.938 0.625l2.063 2.063c0.513-0.415 1.165-0.688 1.875-0.688 1.654 0 3 1.346 3 3 0 0.71-0.273 1.362-0.688 1.875l2.844 2.844c1.144-1.249 1.844-2.904 1.844-4.719 0-1.3-0.386-2.556-1.063-3.656-1.776-0.788-3.773-1.344-5.938-1.344zM6.625 10.875l2.563 2.563c-0.121 0.513-0.188 1.027-0.188 1.563 0 3.565 2.68 6.54 6.219 6.938l0.094 0.031c0.466 0.039 0.908 0.039 1.375 0l0.125-0.031c0.261-0.029 0.531-0.068 0.781-0.125l1.719 1.719c-0.778 0.198-1.577 0.343-2.375 0.406h-0.063c-0.29 0.025-0.585 0.063-0.875 0.063s-0.585-0.037-0.875-0.063h-0.063c-6.964-0.555-13.495-6.934-13.781-7.219l-0.656-0.656 0.625-0.719c0.144-0.17 2.137-2.479 5.375-4.469zM7.281 12.844c-1.775 1.146-3.13 2.351-3.875 3.094 0.914 0.811 2.659 2.238 4.781 3.5-0.75-1.316-1.188-2.825-1.188-4.438 0-0.737 0.107-1.452 0.281-2.156zM24.719 12.844c0.173 0.702 0.281 1.421 0.281 2.156 0 1.614-0.438 3.12-1.188 4.438 2.123-1.262 3.836-2.658 4.75-3.469-0.745-0.742-2.072-1.98-3.844-3.125zM16 14c-0.163 0-0.302 0.056-0.438 0.125l1.313 1.313c0.069-0.136 0.125-0.275 0.125-0.438 0-0.551-0.448-1-1-1z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/eye.svg b/webapp/assets/_new/icons/svgs/eye.svg
new file mode 100755
index 000000000..1e3e8fef3
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/eye.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>eye</title>
+<path d="M16 8c8.336 0 14.75 7.344 14.75 7.344l0.594 0.656-0.594 0.656s-5.849 6.668-13.625 7.281c-0.372 0.047-0.741 0.063-1.125 0.063s-0.753-0.015-1.125-0.063c-7.776-0.614-13.625-7.281-13.625-7.281l-0.594-0.656 0.594-0.656s6.414-7.344 14.75-7.344zM16 10c-2.228 0-4.282 0.618-6.063 1.438h0.031c-0.618 1.044-0.969 2.258-0.969 3.563 0 3.614 2.711 6.583 6.219 6.969 0.259 0.016 0.517 0.031 0.781 0.031 0.243 0 0.48-0.018 0.719-0.031 0.021-0.002 0.042 0.002 0.063 0 3.508-0.386 6.219-3.355 6.219-6.969 0-1.325-0.365-2.54-1-3.594-1.765-0.805-3.798-1.406-6-1.406zM16 12c1.657 0 3 1.343 3 3s-1.343 3-3 3-3-1.343-3-3 1.343-3 3-3zM7.25 12.938c-1.897 1.266-3.238 2.571-3.719 3.063 0.573 0.586 2.324 2.326 4.844 3.781-0.873-1.386-1.375-3.027-1.375-4.781 0-0.714 0.092-1.392 0.25-2.063zM24.75 12.938c0.157 0.665 0.25 1.348 0.25 2.063 0 1.754-0.502 3.395-1.375 4.781 2.52-1.455 4.27-3.195 4.844-3.781-0.481-0.492-1.822-1.797-3.719-3.063z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/file.svg b/webapp/assets/_new/icons/svgs/file.svg
new file mode 100755
index 000000000..82d36fe17
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/file.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>file</title>
+<path d="M5 3h13.406l0.313 0.281 6 6 0.281 0.313v19.406h-20v-26zM7 5v22h16v-16h-6v-6h-10zM19 6.438v2.563h2.563z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/filter.svg b/webapp/assets/_new/icons/svgs/filter.svg
new file mode 100755
index 000000000..6e9f379b6
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/filter.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>filter</title>
+<path d="M5 4h22v2.344l-0.219 0.281-7.781 9.719v7.156l-0.406 0.313-4 3-1.594 1.188v-11.656l-7.781-9.719-0.219-0.281v-2.344zM7.281 6l7.188 9h3.063l7.188-9h-17.438zM15 17v7l2-1.5v-5.5h-2z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/flag.svg b/webapp/assets/_new/icons/svgs/flag.svg
new file mode 100755
index 000000000..6d2769808
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/flag.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>flag</title>
+<path d="M5 5h12v14h-10v10h-2v-24zM18 8h9v14h-9v-14z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/flash.svg b/webapp/assets/_new/icons/svgs/flash.svg
new file mode 100755
index 000000000..f3647d420
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/flash.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>flash</title>
+<path d="M18.875 4l1.438 1.375-6.031 6.406 8.344 5.031-9.188 9.188h4.563v2h-8v-8h2v4.563l7.375-7.375-7.188-4.344-1.063-0.625 0.844-0.906z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/globe.svg b/webapp/assets/_new/icons/svgs/globe.svg
new file mode 100755
index 000000000..91bf9bf2b
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/globe.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>globe</title>
+<path d="M16 4c6.616 0 12 5.384 12 12s-5.384 12-12 12-12-5.384-12-12 5.384-12 12-12zM16 6c-0.273 0-0.545 0.041-0.813 0.063l2.219 0.156 0.531 2.313-3 0.563-0.813-1.125-1.719 0.375 0.594 2.656-4 1.906-2.688 2.125 0.969 1.969h3.719l4.031 3.031-1.063 4 1.094 1.906c0.307 0.028 0.623 0.063 0.938 0.063 1.542 0 3.010-0.349 4.313-0.969l1.594-5s-0.737-1.813-0.844-1.813-2.094 0.344-2.094 0.344l-1.938-1.594 0.969-3 1.719-1.281 1.75-0.25 1.625 1 0.688-1.25-2.688-0.875-2.156 0.688-0.156-2.063 0.875-0.75 1.063 0.469-0.188-2 0.813-0.094c-1.545-0.977-3.375-1.563-5.344-1.563zM14.875 6.063c-0.807 0.089-1.576 0.263-2.313 0.531l0.75 0.125zM6.063 16.781c0.315 4.108 3.068 7.526 6.844 8.75l-2.844-3.5h-1.156l-1.875-2.063v-2.063z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/graduation-cap.svg b/webapp/assets/_new/icons/svgs/graduation-cap.svg
new file mode 100755
index 000000000..5d35226d3
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/graduation-cap.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>graduation-cap</title>
+<path d="M16 6.781l0.313 0.094 15.344 5.125-2.844 0.938-2.813 0.938v5.125c0 0.82-0.499 1.5-1.094 1.969s-1.332 0.798-2.219 1.094c-1.773 0.591-4.112 0.938-6.688 0.938s-4.914-0.346-6.688-0.938c-0.887-0.296-1.624-0.625-2.219-1.094s-1.094-1.149-1.094-1.969v-5.125l-2-0.656v8.063c0.597 0.346 1 0.979 1 1.719 0 1.105-0.895 2-2 2s-2-0.895-2-2c0-0.74 0.403-1.373 1-1.719v-8.75l-1.656-0.531 2.844-0.938 12.5-4.188zM16 8.875l-9.375 3.125 9.375 3.125 9.375-3.125zM8 14.563v4.438c0 0.009-0.004 0.126 0.313 0.375s0.883 0.565 1.625 0.813c1.484 0.495 3.667 0.813 6.063 0.813s4.579-0.318 6.063-0.813c0.742-0.247 1.309-0.563 1.625-0.813s0.313-0.366 0.313-0.375v-4.438l-7.688 2.563-0.313 0.094-0.313-0.094z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/heart-o.svg b/webapp/assets/_new/icons/svgs/heart-o.svg
new file mode 100755
index 000000000..6605b96ac
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/heart-o.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>heart-o</title>
+<path d="M9.5 5c3.433 0 5.645 2.066 6.5 2.938 0.855-0.871 3.067-2.938 6.5-2.938 4.138 0 7.5 3.404 7.5 7.5 0 2.857-2.469 5.031-2.469 5.031l-11.531 11.563-0.719-0.719-10.813-10.844s-0.619-0.573-1.219-1.469-1.25-2.134-1.25-3.563c0-4.096 3.362-7.5 7.5-7.5zM9.5 7c-3.042 0-5.5 2.496-5.5 5.5 0 0.772 0.423 1.716 0.906 2.438s0.969 1.188 0.969 1.188l10.125 10.125 10.125-10.125s1.875-2.080 1.875-3.625c0-3.004-2.458-5.5-5.5-5.5-2.986 0-5.75 2.906-5.75 2.906l-0.75 0.844-0.75-0.844s-2.764-2.906-5.75-2.906z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/image.svg b/webapp/assets/_new/icons/svgs/image.svg
new file mode 100755
index 000000000..efbd9131f
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/image.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>image</title>
+<path d="M2 5h28v22h-28v-22zM4 7v12.875l7-7 0.719 0.719 5.75 5.813 4.531-4.531 0.719 0.719 5.281 5.313v-13.906h-24zM24 9c1.105 0 2 0.895 2 2s-0.895 2-2 2-2-0.895-2-2 0.895-2 2-2zM11 15.719l-7 7v2.281h16.188zM22 17.719l-3.125 3.094 4.156 4.188h4.969v-1.281z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/italic.svg b/webapp/assets/_new/icons/svgs/italic.svg
new file mode 100755
index 000000000..81d29483c
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/italic.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>italic</title>
+<path d="M11.75 5h10.031l-0.094 1.063-0.188 3-0.063 0.938h-2l-0.875 12h2l-0.063 1.063-0.188 3-0.063 0.938h-10.031l0.094-1.063 0.188-3 0.063-0.938h2l0.875-12h-2l0.063-1.063 0.188-3zM13.625 7l-0.063 1h2l-0.063 1.063-1 14-0.063 0.938h-2l-0.063 1h6l0.063-1h-2l0.063-1.063 1-14 0.063-0.938h2l0.063-1h-6z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/link.svg b/webapp/assets/_new/icons/svgs/link.svg
new file mode 100755
index 000000000..624a255b1
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/link.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>link</title>
+<path d="M21.75 4c1.671 0 3.225 0.661 4.406 1.844s1.844 2.735 1.844 4.406-0.662 3.255-1.844 4.438l-1.469 1.469c-1.181 1.183-2.766 1.844-4.438 1.844-0.793 0-1.565-0.153-2.281-0.438l1.625-1.625c0.215 0.038 0.432 0.063 0.656 0.063 1.138 0 2.226-0.445 3.031-1.25l1.469-1.469c1.66-1.66 1.66-4.372 0-6.031-0.804-0.805-1.863-1.25-3-1.25s-2.227 0.444-3.031 1.25l-1.469 1.469c-0.997 0.996-1.391 2.393-1.188 3.688l-1.625 1.625c-0.285-0.716-0.438-1.487-0.438-2.281 0-1.671 0.662-3.255 1.844-4.438l1.469-1.469c1.181-1.183 2.766-1.844 4.438-1.844zM19.281 11.281l1.438 1.438-8 8-1.438-1.438zM11.75 14c0.793 0 1.565 0.153 2.281 0.438l-1.625 1.625c-0.215-0.038-0.432-0.063-0.656-0.063-1.138 0-2.226 0.445-3.031 1.25l-1.469 1.469c-1.66 1.66-1.66 4.372 0 6.031 0.804 0.805 1.863 1.25 3 1.25s2.227-0.444 3.031-1.25l1.469-1.469c0.997-0.996 1.391-2.393 1.188-3.688l1.625-1.625c0.285 0.716 0.438 1.487 0.438 2.281 0 1.671-0.662 3.256-1.844 4.438l-1.469 1.469c-1.181 1.183-2.766 1.844-4.438 1.844s-3.225-0.661-4.406-1.844c-1.182-1.182-1.844-2.735-1.844-4.406s0.662-3.256 1.844-4.438l1.469-1.469c1.181-1.183 2.766-1.844 4.438-1.844z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/list-ol.svg b/webapp/assets/_new/icons/svgs/list-ol.svg
new file mode 100755
index 000000000..f3fb101ac
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/list-ol.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>list-ol</title>
+<path d="M5.969 3h2.031v7h-2v-4.531c-0.444 0.255-0.913 0.531-1.594 0.531v-2c0.494 0 1.25-0.656 1.25-0.656zM11 6h17v2h-17v-2zM6.5 12c1.383 0 2.5 1.117 2.5 2.5 0 0.481-0.248 1.090-0.75 1.5l0.031 0.031-0.125 0.094-0.875 0.875h1.719v2h-5v-1.625l0.313-0.281 2.688-2.594c0-0.217-0.283-0.5-0.5-0.5s-0.5 0.283-0.5 0.5v0.5h-2v-0.5c0-1.383 1.117-2.5 2.5-2.5zM11 15h17v2h-17v-2zM4 21h4v1.469l-0.125 0.25-0.406 0.688c0.853 0.398 1.531 1.089 1.531 2.094 0 1.383-1.117 2.5-2.5 2.5h-2.5v-2h2.5c0.217 0 0.5-0.283 0.5-0.5s-0.283-0.5-0.5-0.5h-1.5v-1.375l0.125-0.219 0.25-0.406h-1.375v-2zM11 24h17v2h-17v-2z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/list-ul.svg b/webapp/assets/_new/icons/svgs/list-ul.svg
new file mode 100755
index 000000000..d565a8064
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/list-ul.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>list-ul</title>
+<path d="M4 5h6v6h-6v-6zM6 7v2h2v-2h-2zM12 7h15v2h-15v-2zM4 13h6v6h-6v-6zM6 15v2h2v-2h-2zM12 15h15v2h-15v-2zM4 21h6v6h-6v-6zM6 23v2h2v-2h-2zM12 23h15v2h-15v-2z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/lock.svg b/webapp/assets/_new/icons/svgs/lock.svg
new file mode 100755
index 000000000..31813d729
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/lock.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>lock</title>
+<path d="M15 3c3.845 0 7 3.155 7 7v3h3v16h-20v-16h3v-3c0-3.845 3.155-7 7-7zM15 5c-2.755 0-5 2.245-5 5v3h10v-3c0-2.755-2.245-5-5-5zM7 15v12h16v-12h-16z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/map-marker.svg b/webapp/assets/_new/icons/svgs/map-marker.svg
new file mode 100755
index 000000000..af7f96727
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/map-marker.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>map-marker</title>
+<path d="M16 3c4.959 0 9 4.042 9 9 0 1.406-0.57 3.020-1.344 4.781s-1.77 3.631-2.781 5.375c-2.023 3.488-4.063 6.406-4.063 6.406l-0.813 1.188-0.813-1.188s-2.039-2.918-4.063-6.406c-1.012-1.744-2.007-3.613-2.781-5.375s-1.344-3.375-1.344-4.781c0-4.958 4.041-9 9-9zM16 5c-3.877 0-7 3.123-7 7 0 0.803 0.43 2.316 1.156 3.969s1.73 3.484 2.719 5.188c1.572 2.71 2.546 4.144 3.125 5 0.579-0.856 1.553-2.29 3.125-5 0.988-1.704 1.993-3.535 2.719-5.188s1.156-3.166 1.156-3.969c0-3.877-3.122-7-7-7zM16 10c1.105 0 2 0.895 2 2s-0.895 2-2 2-2-0.895-2-2 0.895-2 2-2z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/medkit.svg b/webapp/assets/_new/icons/svgs/medkit.svg
new file mode 100755
index 000000000..43076dc9c
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/medkit.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>medkit</title>
+<path d="M14 5h4c1.093 0 2 0.907 2 2v1h6c1.645 0 3 1.355 3 3v15h-26v-15c0-1.645 1.355-3 3-3h6v-1c0-1.093 0.907-2 2-2zM14 7v1h4v-1h-4zM6 10c-0.565 0-1 0.435-1 1v13h22v-13c0-0.565-0.435-1-1-1h-20zM15 13h2v3h3v2h-3v3h-2v-3h-3v-2h3v-3z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/minus.svg b/webapp/assets/_new/icons/svgs/minus.svg
new file mode 100755
index 000000000..b7a94beb1
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/minus.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>minus</title>
+<path d="M5 15h22v2h-22v-2z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/money.svg b/webapp/assets/_new/icons/svgs/money.svg
new file mode 100755
index 000000000..04a116d2a
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/money.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>money</title>
+<path d="M27.938 4.75l0.75 4.25h-2.031l-0.344-1.938-11.313 1.938h-11.844zM2 10h28v16h-28v-16zM6.938 12c0.033 0.163 0.063 0.327 0.063 0.5 0 1.381-1.119 2.5-2.5 2.5-0.173 0-0.337-0.029-0.5-0.063v6.125c0.163-0.033 0.327-0.063 0.5-0.063 1.381 0 2.5 1.119 2.5 2.5 0 0.173-0.029 0.337-0.063 0.5h18.125c-0.033-0.163-0.063-0.327-0.063-0.5 0-1.381 1.119-2.5 2.5-2.5 0.173 0 0.337 0.029 0.5 0.063v-6.125c-0.163 0.033-0.327 0.063-0.5 0.063-1.381 0-2.5-1.119-2.5-2.5 0-0.173 0.029-0.337 0.063-0.5h-18.125zM16 13c2.75 0 5 2.25 5 5s-2.25 5-5 5-5-2.25-5-5 2.25-5 5-5zM16 15c-1.669 0-3 1.331-3 3s1.331 3 3 3 3-1.331 3-3-1.331-3-3-3z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/mouse-pointer.svg b/webapp/assets/_new/icons/svgs/mouse-pointer.svg
new file mode 100755
index 000000000..2917ef518
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/mouse-pointer.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>mouse-pointer</title>
+<path d="M9 2.594l1.719 1.688 16.125 16.156-7.094 0.875 1.844 3.625 0.438 0.906-0.875 0.438-4 2.063-0.438-0.906-2.031-4.031-4.031 3.375-1.656 1.375v-25.563zM11 7.438v16.406l4.313-3.625 0.594 1.125 2.156 4.313 1.313-0.688-2.063-4-0.656-1.281 1.406-0.188 4.5-0.531z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/paint-brush.svg b/webapp/assets/_new/icons/svgs/paint-brush.svg
new file mode 100755
index 000000000..03b06aac6
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/paint-brush.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>paint-brush</title>
+<path d="M24.813 4.031c0.837 0 1.648 0.335 2.281 0.969 1.267 1.267 1.267 3.327 0 4.594v0.031l-12.688 12.5-0.5 0.469c-0.124 0.793-0.46 1.572-1.063 2.188l-0.031 0.031c-1.318 1.318-3.898 3.188-7.813 3.188h-1.844l1-1.563c0.967-1.474 1.37-2.804 1.688-4s0.479-2.31 1.313-3.219c0.565-0.616 1.282-0.985 2.031-1.125l0.625-0.594 12.688-12.5c0.633-0.633 1.476-0.969 2.313-0.969zM24.813 6c-0.313 0-0.64 0.14-0.906 0.406l-9.063 8.906 1.813 1.813 9.031-8.938c0.533-0.533 0.533-1.248 0-1.781-0.267-0.267-0.562-0.406-0.875-0.406zM13.406 16.719l-1.5 1.469 1.813 1.813 1.5-1.469zM9.969 20.031c-0.506-0.014-0.997 0.153-1.344 0.531-0.267 0.291-0.511 1.152-0.844 2.406-0.216 0.814-0.55 1.794-1.031 2.844 2.249-0.421 3.787-1.537 4.656-2.406 0.827-0.827 0.808-2.069 0.031-2.781-0.417-0.383-0.963-0.579-1.469-0.594z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/paragraph.svg b/webapp/assets/_new/icons/svgs/paragraph.svg
new file mode 100755
index 000000000..26365f984
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/paragraph.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>paragraph</title>
+<path d="M12 5h12v2h-2v20h-2v-20h-2v20h-2v-10h-4c-3.302 0-6-2.698-6-6s2.698-6 6-6zM12 7c-2.22 0-4 1.78-4 4s1.78 4 4 4h4v-8h-4z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/paw.svg b/webapp/assets/_new/icons/svgs/paw.svg
new file mode 100755
index 000000000..364ff1918
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/paw.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>paw</title>
+<path d="M12.5 5c1.069 0 2.002 0.608 2.594 1.438s0.906 1.903 0.906 3.063-0.314 2.233-0.906 3.063-1.525 1.438-2.594 1.438-2.002-0.608-2.594-1.438-0.906-1.903-0.906-3.063 0.314-2.233 0.906-3.063 1.525-1.438 2.594-1.438zM16 9.5c0-1.159 0.314-2.233 0.906-3.063s1.525-1.438 2.594-1.438 2.002 0.608 2.594 1.438 0.906 1.903 0.906 3.063-0.314 2.233-0.906 3.063-1.525 1.438-2.594 1.438-2.002-0.608-2.594-1.438-0.906-1.903-0.906-3.063zM12.5 7c-0.312 0-0.656 0.156-0.969 0.594s-0.531 1.133-0.531 1.906 0.219 1.469 0.531 1.906 0.657 0.594 0.969 0.594 0.656-0.156 0.969-0.594 0.531-1.133 0.531-1.906-0.219-1.469-0.531-1.906-0.657-0.594-0.969-0.594zM19.5 7c-0.312 0-0.656 0.156-0.969 0.594s-0.531 1.133-0.531 1.906 0.219 1.469 0.531 1.906 0.657 0.594 0.969 0.594 0.656-0.156 0.969-0.594 0.531-1.133 0.531-1.906-0.219-1.469-0.531-1.906-0.657-0.594-0.969-0.594zM7.5 12c1.069 0 2.002 0.608 2.594 1.438s0.906 1.903 0.906 3.063-0.314 2.233-0.906 3.063-1.525 1.438-2.594 1.438-2.002-0.608-2.594-1.438-0.906-1.903-0.906-3.063 0.314-2.233 0.906-3.063 1.525-1.438 2.594-1.438zM24.5 12c1.069 0 2.002 0.608 2.594 1.438s0.906 1.903 0.906 3.063-0.314 2.233-0.906 3.063-1.525 1.438-2.594 1.438-2.002-0.608-2.594-1.438-0.906-1.903-0.906-3.063 0.314-2.233 0.906-3.063 1.525-1.438 2.594-1.438zM7.5 14c-0.312 0-0.656 0.156-0.969 0.594s-0.531 1.133-0.531 1.906 0.219 1.469 0.531 1.906 0.657 0.594 0.969 0.594 0.656-0.156 0.969-0.594 0.531-1.133 0.531-1.906-0.219-1.469-0.531-1.906-0.657-0.594-0.969-0.594zM24.5 14c-0.312 0-0.656 0.156-0.969 0.594s-0.531 1.133-0.531 1.906 0.219 1.469 0.531 1.906 0.657 0.594 0.969 0.594 0.656-0.156 0.969-0.594 0.531-1.133 0.531-1.906-0.219-1.469-0.531-1.906-0.657-0.594-0.969-0.594zM16 16c1.339 0 2.29 0.861 2.75 1.625s0.73 1.417 0.969 1.656c0.142 0.142 1.126 0.562 2.125 1.094 0.5 0.266 1.012 0.582 1.438 1.094s0.719 1.238 0.719 2.031c0 1.921-1.579 3.5-3.5 3.5-0.867 0-1.77-0.279-2.656-0.531s-1.844-0.469-1.844-0.469-0.957 0.216-1.844 0.469-1.79 0.531-2.656 0.531c-1.921 0-3.5-1.579-3.5-3.5 0-0.813 0.291-1.538 0.719-2.063s0.935-0.869 1.438-1.125c1.006-0.513 1.97-0.877 2.125-1.031 0.264-0.264 0.544-0.897 1-1.656s1.385-1.625 2.719-1.625zM16 18c-0.667 0-0.737 0.135-1.031 0.625s-0.514 1.358-1.25 2.094c-0.845 0.845-1.881 0.995-2.625 1.375-0.372 0.19-0.677 0.39-0.844 0.594s-0.25 0.41-0.25 0.813c0 0.841 0.659 1.5 1.5 1.5 0.29 0 1.224-0.221 2.094-0.469s1.59-0.531 2.406-0.531c0.817 0 1.536 0.284 2.406 0.531s1.803 0.469 2.094 0.469c0.841 0 1.5-0.659 1.5-1.5 0-0.353-0.077-0.542-0.25-0.75s-0.464-0.423-0.844-0.625c-0.759-0.404-1.801-0.583-2.625-1.406-0.727-0.727-0.952-1.568-1.25-2.063s-0.37-0.656-1.031-0.656z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/plus.svg b/webapp/assets/_new/icons/svgs/plus.svg
new file mode 100755
index 000000000..66da52005
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/plus.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>plus</title>
+<path d="M15 5h2v10h10v2h-10v10h-2v-10h-10v-2h10v-10z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/question-circle.svg b/webapp/assets/_new/icons/svgs/question-circle.svg
new file mode 100755
index 000000000..1ae2bbf6b
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/question-circle.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>question-circle</title>
+<path d="M16 4c6.616 0 12 5.384 12 12s-5.384 12-12 12-12-5.384-12-12 5.384-12 12-12zM16 6c-5.535 0-10 4.465-10 10s4.465 10 10 10 10-4.465 10-10-4.465-10-10-10zM16 10c2.197 0 4 1.803 4 4 0 1.621-1.055 3.082-2.594 3.594l-0.406 0.125v1.281h-2v-1.281c0-0.856 0.56-1.635 1.375-1.906l0.406-0.125c0.727-0.242 1.219-0.92 1.219-1.688 0-1.117-0.883-2-2-2s-2 0.883-2 2h-2c0-2.197 1.803-4 4-4zM15 20h2v2h-2v-2z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/quote-right.svg b/webapp/assets/_new/icons/svgs/quote-right.svg
new file mode 100755
index 000000000..4e6469624
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/quote-right.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>quote-right</title>
+<path d="M4 8h10v10c0 3.302-2.698 6-6 6v-2c2.22 0 4-1.78 4-4h-8v-10zM18 8h10v10c0 3.302-2.698 6-6 6v-2c2.22 0 4-1.78 4-4h-8v-10zM6 10v6h6v-6h-6zM20 10v6h6v-6h-6z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/search.svg b/webapp/assets/_new/icons/svgs/search.svg
new file mode 100755
index 000000000..ddbb4da44
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/search.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>search</title>
+<path d="M19 3c5.511 0 10 4.489 10 10s-4.489 10-10 10c-2.395 0-4.588-0.839-6.313-2.25l-7.969 7.969-1.438-1.438 7.969-7.969c-1.411-1.724-2.25-3.917-2.25-6.313 0-5.511 4.489-10 10-10zM19 5c-4.43 0-8 3.57-8 8s3.57 8 8 8 8-3.57 8-8-3.57-8-8-8z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/shield.svg b/webapp/assets/_new/icons/svgs/shield.svg
new file mode 100755
index 000000000..d897203ad
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/shield.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>shield</title>
+<path d="M16 4c2.25 0 3.764 0.886 5.125 1.625s2.606 1.375 4.875 1.375h1v1c0 7.745-2.608 12.78-5.25 15.813s-5.375 4.125-5.375 4.125l-0.375 0.125-0.375-0.125s-2.734-1.118-5.375-4.156-5.25-8.063-5.25-15.781v-1h1c2.282 0 3.517-0.637 4.875-1.375s2.875-1.625 5.125-1.625zM16 6c-1.75 0-2.755 0.613-4.156 1.375-1.183 0.643-2.748 1.262-4.781 1.469 0.192 6.736 2.429 11.027 4.688 13.625 2.046 2.354 3.763 3.156 4.25 3.375 0.486-0.217 2.205-0.997 4.25-3.344 2.258-2.591 4.497-6.892 4.688-13.656-2.027-0.206-3.597-0.826-4.781-1.469-1.403-0.761-2.406-1.375-4.156-1.375z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/shopping-cart.svg b/webapp/assets/_new/icons/svgs/shopping-cart.svg
new file mode 100755
index 000000000..9ca3c5e13
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/shopping-cart.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>shopping-cart</title>
+<path d="M4.75 7h2.219c0.918 0 1.716 0.61 1.938 1.5l2.625 10.5h11.469l1.906-7h-13.656l-0.5-2h16.75l-2.594 9.531c-0.238 0.87-1.004 1.469-1.906 1.469h-11.469c-0.917 0-1.714-0.61-1.938-1.5l-2.625-10.5h-2.219c-0.552 0-1-0.448-1-1s0.448-1 1-1zM21.75 21c1.645 0 3 1.355 3 3s-1.355 3-3 3-3-1.355-3-3 1.355-3 3-3zM12.75 21c1.645 0 3 1.355 3 3s-1.355 3-3 3-3-1.355-3-3 1.355-3 3-3zM12.75 23c-0.564 0-1 0.436-1 1s0.436 1 1 1 1-0.436 1-1-0.436-1-1-1zM21.75 23c-0.564 0-1 0.436-1 1s0.436 1 1 1 1-0.436 1-1-0.436-1-1-1z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/sign-in.svg b/webapp/assets/_new/icons/svgs/sign-in.svg
new file mode 100755
index 000000000..bb300f950
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/sign-in.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>sign-in</title>
+<path d="M6 4h20v9h-2v-7h-16v20h16v-7h2v9h-20v-24zM17.5 11l1.406 1.406-2.594 2.594h11.688v2h-11.688l2.594 2.594-1.406 1.406-4.313-4.281-0.688-0.719 0.688-0.719z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/sign-out.svg b/webapp/assets/_new/icons/svgs/sign-out.svg
new file mode 100755
index 000000000..d185fbe6f
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/sign-out.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>sign-out</title>
+<path d="M6 4h20v8l-2-2v-4h-16v20h16v-4l2-2v8h-20v-24zM22.406 11l4.313 4.281 0.688 0.719-0.688 0.719-4.313 4.281-1.406-1.406 2.563-2.594h-9.656v-2h9.656l-2.563-2.594z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/smile.svg b/webapp/assets/_new/icons/svgs/smile.svg
new file mode 100755
index 000000000..7de0ac746
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/smile.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>smile-o</title>
+<path d="M16 4c6.616 0 12 5.384 12 12s-5.384 12-12 12-12-5.384-12-12 5.384-12 12-12zM16 6c-5.535 0-10 4.465-10 10s4.465 10 10 10 10-4.465 10-10-4.465-10-10-10zM11.5 12c0.828 0 1.5 0.672 1.5 1.5s-0.672 1.5-1.5 1.5-1.5-0.672-1.5-1.5 0.672-1.5 1.5-1.5zM20.5 12c0.828 0 1.5 0.672 1.5 1.5s-0.672 1.5-1.5 1.5-1.5-0.672-1.5-1.5 0.672-1.5 1.5-1.5zM10.813 19c1.039 1.793 2.962 3 5.188 3s4.149-1.207 5.188-3l1.719 1c-1.383 2.387-3.954 4-6.906 4s-5.523-1.613-6.906-4z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/sort-amount-asc.svg b/webapp/assets/_new/icons/svgs/sort-amount-asc.svg
new file mode 100755
index 000000000..6344da1a9
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/sort-amount-asc.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>sort-amount-asc</title>
+<path d="M4 5h2v2h-2v-2zM21 5h2v18.688l2.594-2.594 1.406 1.406-4.281 4.313-0.719 0.688-0.719-0.688-4.281-4.313 1.406-1.406 2.594 2.594v-18.688zM4 9h4v2h-4v-2zM4 13h6v2h-6v-2zM4 17h8v2h-8v-2zM4 21h10v2h-10v-2zM4 25h12v2h-12v-2z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/sort-amount-desc.svg b/webapp/assets/_new/icons/svgs/sort-amount-desc.svg
new file mode 100755
index 000000000..7239c1d72
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/sort-amount-desc.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>sort-amount-desc</title>
+<path d="M4 5h12v2h-12v-2zM21 5h2v18.688l2.594-2.594 1.406 1.406-4.281 4.313-0.719 0.688-0.719-0.688-4.281-4.313 1.406-1.406 2.594 2.594v-18.688zM4 9h10v2h-10v-2zM4 13h8v2h-8v-2zM4 17h6v2h-6v-2zM4 21h4v2h-4v-2zM4 25h2v2h-2v-2z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/trash.svg b/webapp/assets/_new/icons/svgs/trash.svg
new file mode 100755
index 000000000..6475fd236
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/trash.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>trash</title>
+<path d="M14.25 4h4c0.522 0 1.061 0.186 1.438 0.563s0.563 0.915 0.563 1.438v1h6v2h-1v16c0 1.645-1.355 3-3 3h-12c-1.645 0-3-1.355-3-3v-16h-1v-2h6v-1c0-0.522 0.185-1.061 0.563-1.438s0.915-0.563 1.438-0.563zM14.25 6v1h4v-1h-4zM9.25 9v16c0 0.555 0.445 1 1 1h12c0.555 0 1-0.445 1-1v-16h-14zM11.25 12h2v11h-2v-11zM15.25 12h2v11h-2v-11zM19.25 12h2v11h-2v-11z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/tree.svg b/webapp/assets/_new/icons/svgs/tree.svg
new file mode 100755
index 000000000..e0534af45
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/tree.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>tree</title>
+<path d="M16 3.594l0.719 0.688 5.938 5.969 1 0.969-1.281 0.625s-1.015 0.366-2.438 0.688l4.406 4.406 1 0.969-1.25 0.625s-1.079 0.304-1.625 0.5l3.594 3.594 0.969 1-1.219 0.625s-2.462 1.176-6.813 1.594v3.156h-2v-3.031c-0.335 0.011-0.648 0.031-1 0.031s-0.666-0.021-1-0.031v3.031h-2v-3.156c-4.343-0.417-6.781-1.594-6.781-1.594l-1.25-0.625 0.969-1 3.594-3.594c-0.546-0.196-1.625-0.5-1.625-0.5l-1.25-0.625 1-0.969 4.406-4.406c-1.422-0.322-2.438-0.688-2.438-0.688l-1.281-0.625 1-0.969 5.938-5.969zM16 6.438l-4 3.969c0.593 0.199 0.714 0.356 2.188 0.5l1.813 0.188 1.813-0.188c1.474-0.144 1.594-0.301 2.188-0.5zM16 11.438l-1.188 1.156-4.594 4.594c0.465 0.163 0.453 0.219 1.406 0.406l1.844 0.375-1.344 1.313-3.625 3.656c1.287 0.457 3.459 1.063 7.5 1.063 4.077 0 6.258-0.607 7.531-1.063l-3.656-3.656-1.344-1.313 1.844-0.375c0.953-0.188 0.941-0.243 1.406-0.406l-4.594-4.594z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/university.svg b/webapp/assets/_new/icons/svgs/university.svg
new file mode 100755
index 000000000..cddb5775a
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/university.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>university</title>
+<path d="M16 3.906l12.375 5.156 0.625 0.281v2.656h-2v11h2v5h-26v-5h2v-11h-2v-2.656l0.625-0.281 12-5zM16 6.094l-9.375 3.906h18.75zM7 12v11h2v-11h-2zM11 12v11h2v-11h-2zM15 12v11h2v-11h-2zM19 12v11h2v-11h-2zM23 12v11h2v-11h-2zM5 25v1h22v-1h-22z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/unlink.svg b/webapp/assets/_new/icons/svgs/unlink.svg
new file mode 100755
index 000000000..f63b36e9b
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/unlink.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>unlink</title>
+<path d="M21.75 4c1.603 0 3.189 0.626 4.406 1.844 2.435 2.435 2.435 6.409 0 8.844l-1.469 1.469c-1.015 1.016-2.304 1.618-3.625 1.781l-0.25-2c0.901-0.111 1.745-0.494 2.438-1.188h0.031l1.469-1.469c1.671-1.671 1.671-4.36 0-6.031s-4.36-1.671-6.031 0l-1.469 1.469c-0.692 0.692-1.076 1.564-1.188 2.469l-2-0.25c0.162-1.319 0.765-2.609 1.781-3.625l1.469-1.469c1.218-1.218 2.834-1.844 4.438-1.844zM7.719 6.281l4 4-1.438 1.438-4-4zM10.938 14.063l0.25 2c-0.901 0.111-1.745 0.494-2.438 1.188h-0.031l-1.469 1.469c-1.671 1.671-1.671 4.36 0 6.031s4.36 1.671 6.031 0l1.469-1.469c0.692-0.692 1.076-1.564 1.188-2.469l2 0.25c-0.162 1.319-0.765 2.609-1.781 3.625l-1.469 1.469c-2.435 2.435-6.409 2.435-8.844 0s-2.435-6.409 0-8.844l1.469-1.469c1.015-1.016 2.304-1.618 3.625-1.781zM21.719 20.281l4 4-1.438 1.438-4-4z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/user-plus.svg b/webapp/assets/_new/icons/svgs/user-plus.svg
new file mode 100755
index 000000000..dea6ab228
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/user-plus.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>user-plus</title>
+<path d="M12 2c3.854 0 7 3.146 7 7 0 2.409-1.231 4.552-3.094 5.813 0.486 0.208 0.964 0.441 1.406 0.719 1.318-0.957 2.94-1.531 4.688-1.531 4.406 0 8 3.594 8 8s-3.594 8-8 8-8-3.594-8-8c0-1.897 0.671-3.657 1.781-5.031-1.127-0.611-2.405-0.969-3.781-0.969-4.431 0-8 3.569-8 8h-2c0-4.119 2.527-7.658 6.094-9.188-1.863-1.26-3.094-3.404-3.094-5.813 0-3.854 3.146-7 7-7zM12 4c-2.773 0-5 2.227-5 5s2.227 5 5 5 5-2.227 5-5-2.227-5-5-5zM22 16c-3.326 0-6 2.674-6 6s2.674 6 6 6 6-2.674 6-6-2.674-6-6-6zM21 18h2v3h3v2h-3v3h-2v-3h-3v-2h3v-3z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/user-times.svg b/webapp/assets/_new/icons/svgs/user-times.svg
new file mode 100755
index 000000000..8f4cb905a
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/user-times.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>user-times</title>
+<path d="M12 2c3.854 0 7 3.146 7 7 0 2.409-1.231 4.552-3.094 5.813 0.486 0.208 0.964 0.441 1.406 0.719 1.318-0.957 2.94-1.531 4.688-1.531 4.406 0 8 3.594 8 8s-3.594 8-8 8-8-3.594-8-8c0-1.897 0.671-3.657 1.781-5.031-1.127-0.611-2.405-0.969-3.781-0.969-4.431 0-8 3.569-8 8h-2c0-4.119 2.527-7.658 6.094-9.188-1.863-1.26-3.094-3.404-3.094-5.813 0-3.854 3.146-7 7-7zM12 4c-2.773 0-5 2.227-5 5s2.227 5 5 5 5-2.227 5-5-2.227-5-5-5zM22 16c-3.326 0-6 2.674-6 6s2.674 6 6 6 6-2.674 6-6-2.674-6-6-6zM19.719 18.281l2.281 2.281 2.281-2.281 1.438 1.438-2.281 2.281 2.281 2.281-1.438 1.438-2.281-2.281-2.281 2.281-1.438-1.438 2.281-2.281-2.281-2.281z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/user.svg b/webapp/assets/_new/icons/svgs/user.svg
new file mode 100755
index 000000000..04cc45b41
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/user.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>user</title>
+<path d="M15 5c3.854 0 7 3.146 7 7 0 2.409-1.231 4.552-3.094 5.813 3.567 1.53 6.094 5.069 6.094 9.188h-2c0-4.431-3.569-8-8-8s-8 3.569-8 8h-2c0-4.119 2.527-7.658 6.094-9.188-1.863-1.26-3.094-3.404-3.094-5.813 0-3.854 3.146-7 7-7zM15 7c-2.773 0-5 2.227-5 5s2.227 5 5 5 5-2.227 5-5-2.227-5-5-5z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/users.svg b/webapp/assets/_new/icons/svgs/users.svg
new file mode 100755
index 000000000..7572021ba
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/users.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>users</title>
+<path d="M8 7c3.302 0 6 2.698 6 6 0 1.984-0.975 3.75-2.469 4.844 1.459 0.725 2.68 1.862 3.469 3.281 0.789-1.42 2.010-2.557 3.469-3.281-1.494-1.094-2.469-2.86-2.469-4.844 0-3.302 2.698-6 6-6s6 2.698 6 6c0 1.984-0.975 3.75-2.469 4.844 2.638 1.31 4.469 4.020 4.469 7.156h-2c0-3.326-2.674-6-6-6s-6 2.674-6 6h-2c0-3.326-2.674-6-6-6s-6 2.674-6 6h-2c0-3.136 1.831-5.846 4.469-7.156-1.494-1.094-2.469-2.86-2.469-4.844 0-3.302 2.698-6 6-6zM8 9c-2.221 0-4 1.779-4 4s1.779 4 4 4 4-1.779 4-4-1.779-4-4-4zM22 9c-2.221 0-4 1.779-4 4s1.779 4 4 4 4-1.779 4-4-1.779-4-4-4z"></path>
+</svg>
diff --git a/webapp/assets/_new/icons/svgs/warning.svg b/webapp/assets/_new/icons/svgs/warning.svg
new file mode 100755
index 000000000..cd0a7baed
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/warning.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>warning</title>
+<path d="M16 3.219l0.875 1.5 12 20.781 0.844 1.5h-27.438l0.844-1.5 12-20.781zM16 7.219l-10.25 17.781h20.5zM15 14h2v6h-2v-6zM15 21h2v2h-2v-2z"></path>
+</svg>
diff --git a/webapp/view/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss
similarity index 100%
rename from webapp/view/styles/tokens.scss
rename to webapp/assets/_new/styles/tokens.scss
diff --git a/webapp/assets/styles/main.scss b/webapp/assets/styles/main.scss
index 5c4964688..b59399b02 100644
--- a/webapp/assets/styles/main.scss
+++ b/webapp/assets/styles/main.scss
@@ -160,7 +160,7 @@ hr {
     align-content: center;
     align-items: center;
 
-    .ds-icon {
+    .base-icon {
       padding-right: $space-xx-small;
     }
   }
diff --git a/webapp/components/Avatar/Avatar.spec.js b/webapp/components/Avatar/Avatar.spec.js
index 626e584c9..03eaee160 100644
--- a/webapp/components/Avatar/Avatar.spec.js
+++ b/webapp/components/Avatar/Avatar.spec.js
@@ -1,11 +1,7 @@
-import { mount, createLocalVue } from '@vue/test-utils'
-import Styleguide from '@human-connection/styleguide'
+import { mount } from '@vue/test-utils'
 import Avatar from './Avatar.vue'
-import Filters from '~/plugins/vue-filters'
 
-const localVue = createLocalVue()
-localVue.use(Styleguide)
-localVue.use(Filters)
+const localVue = global.localVue
 
 describe('Avatar.vue', () => {
   let propsData = {}
@@ -22,6 +18,7 @@ describe('Avatar.vue', () => {
     ).toBe(false)
   })
 
+  // this is testing the style guide
   it('renders an icon', () => {
     expect(
       Wrapper()
diff --git a/webapp/components/AvatarMenu/AvatarMenu.spec.js b/webapp/components/AvatarMenu/AvatarMenu.spec.js
index 6327ded0a..519b61d00 100644
--- a/webapp/components/AvatarMenu/AvatarMenu.spec.js
+++ b/webapp/components/AvatarMenu/AvatarMenu.spec.js
@@ -1,15 +1,8 @@
-import { config, mount, createLocalVue } from '@vue/test-utils'
+import { config, mount } from '@vue/test-utils'
 import Vuex from 'vuex'
-import VTooltip from 'v-tooltip'
-import Styleguide from '@human-connection/styleguide'
 import AvatarMenu from './AvatarMenu.vue'
-import Filters from '~/plugins/vue-filters'
 
-const localVue = createLocalVue()
-localVue.use(Styleguide)
-localVue.use(Vuex)
-localVue.use(Filters)
-localVue.use(VTooltip)
+const localVue = global.localVue
 
 config.stubs['nuxt-link'] = '<span><slot /></span>'
 config.stubs['router-link'] = '<span><slot /></span>'
diff --git a/webapp/components/AvatarMenu/AvatarMenu.vue b/webapp/components/AvatarMenu/AvatarMenu.vue
index 7443c91a7..54426852e 100644
--- a/webapp/components/AvatarMenu/AvatarMenu.vue
+++ b/webapp/components/AvatarMenu/AvatarMenu.vue
@@ -12,7 +12,7 @@
         @click.prevent="toggleMenu"
       >
         <hc-avatar :user="user" />
-        <ds-icon size="xx-small" name="angle-down" />
+        <base-icon class="dropdown-arrow" name="angle-down" />
       </a>
     </template>
     <template #popover="{ closeMenu }">
@@ -33,13 +33,13 @@
             :parents="item.parents"
             @click.native="closeMenu(false)"
           >
-            <ds-icon :name="item.route.icon" />
+            <base-icon :name="item.route.icon" />
             {{ item.route.name }}
           </ds-menu-item>
         </ds-menu>
         <hr />
         <nuxt-link class="logout-link" :to="{ name: 'logout' }">
-          <ds-icon name="sign-out" />
+          <base-icon name="sign-out" />
           {{ $t('login.logout') }}
         </nuxt-link>
       </div>
diff --git a/webapp/components/CategoriesSelect/CategoriesSelect.spec.js b/webapp/components/CategoriesSelect/CategoriesSelect.spec.js
index 56534c6ad..b633e5811 100644
--- a/webapp/components/CategoriesSelect/CategoriesSelect.spec.js
+++ b/webapp/components/CategoriesSelect/CategoriesSelect.spec.js
@@ -1,9 +1,7 @@
-import { mount, createLocalVue } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import CategoriesSelect from './CategoriesSelect'
-import Styleguide from '@human-connection/styleguide'
 
-const localVue = createLocalVue()
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 describe('CategoriesSelect.vue', () => {
   let wrapper
diff --git a/webapp/components/CategoriesSelect/CategoriesSelect.vue b/webapp/components/CategoriesSelect/CategoriesSelect.vue
index 1fdb3ce0a..493256546 100644
--- a/webapp/components/CategoriesSelect/CategoriesSelect.vue
+++ b/webapp/components/CategoriesSelect/CategoriesSelect.vue
@@ -10,7 +10,7 @@
             :primary="isActive(category.id)"
             :disabled="isDisabled(category.id)"
           >
-            <ds-icon :name="category.icon" />
+            <base-icon :name="category.icon" />
             {{ $t(`contribution.category.name.${category.slug}`) }}
           </ds-button>
         </ds-flex-item>
diff --git a/webapp/components/Category/index.spec.js b/webapp/components/Category/index.spec.js
index 13de0b690..9abb8a11d 100644
--- a/webapp/components/Category/index.spec.js
+++ b/webapp/components/Category/index.spec.js
@@ -1,9 +1,8 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils'
-import Styleguide from '@human-connection/styleguide'
+import { shallowMount } from '@vue/test-utils'
+
 import Category from './index'
 
-const localVue = createLocalVue()
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 describe('Category', () => {
   let icon
@@ -21,7 +20,7 @@ describe('Category', () => {
 
   describe('given Strings for Icon and Name', () => {
     beforeEach(() => {
-      icon = 'mouse-cursor'
+      icon = 'mouse-pointer'
       name = 'Peter'
     })
 
diff --git a/webapp/components/Category/index.vue b/webapp/components/Category/index.vue
index acc35772a..a6410d750 100644
--- a/webapp/components/Category/index.vue
+++ b/webapp/components/Category/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <ds-tag>
-    <ds-icon size="large" :name="icon" />
+  <ds-tag class="category-tag">
+    <base-icon :name="icon" />
     {{ name }}
   </ds-tag>
 </template>
@@ -14,3 +14,15 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.category-tag {
+  display: inline-flex;
+  align-items: center;
+
+  > .base-icon {
+    margin-right: $space-xx-small;
+    font-size: $font-size-base;
+  }
+}
+</style>
diff --git a/webapp/components/Comment/Comment.spec.js b/webapp/components/Comment/Comment.spec.js
index 59e3f6c5a..b307700d9 100644
--- a/webapp/components/Comment/Comment.spec.js
+++ b/webapp/components/Comment/Comment.spec.js
@@ -1,12 +1,8 @@
-import { config, shallowMount, createLocalVue } from '@vue/test-utils'
+import { config, shallowMount } from '@vue/test-utils'
 import Comment from './Comment.vue'
 import Vuex from 'vuex'
-import Styleguide from '@human-connection/styleguide'
 
-const localVue = createLocalVue()
-
-localVue.use(Vuex)
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 config.stubs['client-only'] = '<span><slot /></span>'
 
diff --git a/webapp/components/Comment/Comment.vue b/webapp/components/Comment/Comment.vue
index 2da0df5fa..06816e5bf 100644
--- a/webapp/components/Comment/Comment.vue
+++ b/webapp/components/Comment/Comment.vue
@@ -3,7 +3,7 @@
     <ds-card>
       <ds-space margin-bottom="base" />
       <ds-text style="padding-left: 40px; font-weight: bold;" color="soft">
-        <ds-icon name="ban" />
+        <base-icon name="ban" />
         {{ this.$t('comment.content.unavailable-placeholder') }}
       </ds-text>
       <ds-space margin-bottom="base" />
diff --git a/webapp/components/CommentForm/CommentForm.spec.js b/webapp/components/CommentForm/CommentForm.spec.js
index 94ce5aa66..47bc01982 100644
--- a/webapp/components/CommentForm/CommentForm.spec.js
+++ b/webapp/components/CommentForm/CommentForm.spec.js
@@ -1,12 +1,11 @@
-import { mount, createLocalVue } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import CommentForm from './CommentForm'
-import Styleguide from '@human-connection/styleguide'
+
 import MutationObserver from 'mutation-observer'
 
 global.MutationObserver = MutationObserver
 
-const localVue = createLocalVue()
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 describe('CommentForm.vue', () => {
   let mocks
diff --git a/webapp/components/CommentList/CommentList.spec.js b/webapp/components/CommentList/CommentList.spec.js
index 3287b7cd4..0c037d2ff 100644
--- a/webapp/components/CommentList/CommentList.spec.js
+++ b/webapp/components/CommentList/CommentList.spec.js
@@ -1,14 +1,9 @@
-import { config, mount, createLocalVue } from '@vue/test-utils'
+import { config, mount } from '@vue/test-utils'
 import CommentList from './CommentList'
 import Vuex from 'vuex'
-import Styleguide from '@human-connection/styleguide'
-import Filters from '~/plugins/vue-filters'
 
-const localVue = createLocalVue()
+const localVue = global.localVue
 
-localVue.use(Styleguide)
-localVue.use(Vuex)
-localVue.use(Filters)
 localVue.filter('truncate', string => string)
 
 config.stubs['v-popover'] = '<span><slot /></span>'
diff --git a/webapp/components/CommentList/CommentList.vue b/webapp/components/CommentList/CommentList.vue
index df008e9ee..888c167e9 100644
--- a/webapp/components/CommentList/CommentList.vue
+++ b/webapp/components/CommentList/CommentList.vue
@@ -2,7 +2,7 @@
   <div id="comments">
     <h3 style="margin-top: -10px;">
       <span>
-        <ds-icon name="comments" />
+        <base-icon name="comments" />
         <ds-tag
           v-if="post.comments.length"
           style="margin-top: -4px; margin-left: -12px; position: absolute;"
diff --git a/webapp/components/ContentMenu.vue b/webapp/components/ContentMenu.vue
index 72b514ce2..f0d9dc8d3 100644
--- a/webapp/components/ContentMenu.vue
+++ b/webapp/components/ContentMenu.vue
@@ -3,7 +3,7 @@
     <template slot="default" slot-scope="{ toggleMenu }">
       <slot name="button" :toggleMenu="toggleMenu">
         <ds-button class="content-menu-trigger" size="small" ghost @click.prevent="toggleMenu">
-          <ds-icon name="ellipsis-v" />
+          <base-icon name="ellipsis-v" />
         </ds-button>
       </slot>
     </template>
@@ -16,7 +16,7 @@
           :parents="item.parents"
           @click.stop.prevent="openItem(item.route, toggleMenu)"
         >
-          <ds-icon :name="item.route.icon" />
+          <base-icon :name="item.route.icon" />
           {{ item.route.name }}
         </ds-menu-item>
       </ds-menu>
diff --git a/webapp/components/ContributionForm/ContributionForm.spec.js b/webapp/components/ContributionForm/ContributionForm.spec.js
index 52f77b3f2..3ec538bde 100644
--- a/webapp/components/ContributionForm/ContributionForm.spec.js
+++ b/webapp/components/ContributionForm/ContributionForm.spec.js
@@ -1,20 +1,16 @@
-import { config, mount, createLocalVue } from '@vue/test-utils'
+import { config, mount } from '@vue/test-utils'
 import ContributionForm from './ContributionForm.vue'
-import Styleguide from '@human-connection/styleguide'
+
 import Vuex from 'vuex'
 import PostMutations from '~/graphql/PostMutations.js'
 import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
-import Filters from '~/plugins/vue-filters'
+
 import TeaserImage from '~/components/TeaserImage/TeaserImage'
 import MutationObserver from 'mutation-observer'
 
 global.MutationObserver = MutationObserver
 
-const localVue = createLocalVue()
-
-localVue.use(Vuex)
-localVue.use(Styleguide)
-localVue.use(Filters)
+const localVue = global.localVue
 
 config.stubs['client-only'] = '<span><slot /></span>'
 config.stubs['nuxt-link'] = '<span><slot /></span>'
diff --git a/webapp/components/DeleteData/DeleteData.spec.js b/webapp/components/DeleteData/DeleteData.spec.js
index 73ca985fa..abcdf9101 100644
--- a/webapp/components/DeleteData/DeleteData.spec.js
+++ b/webapp/components/DeleteData/DeleteData.spec.js
@@ -1,12 +1,9 @@
-import { mount, createLocalVue } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import DeleteData from './DeleteData.vue'
-import Styleguide from '@human-connection/styleguide'
+
 import Vuex from 'vuex'
 
-const localVue = createLocalVue()
-
-localVue.use(Vuex)
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 describe('DeleteData.vue', () => {
   let mocks
diff --git a/webapp/components/DeleteData/DeleteData.vue b/webapp/components/DeleteData/DeleteData.vue
index 451a44eb4..045d00f26 100644
--- a/webapp/components/DeleteData/DeleteData.vue
+++ b/webapp/components/DeleteData/DeleteData.vue
@@ -5,7 +5,7 @@
       <ds-container>
         <ds-flex>
           <ds-flex-item :width="{ base: '22%', sm: '12%', md: '12%', lg: '8%' }">
-            <ds-icon name="warning" size="xxx-large" class="delete-warning-icon" />
+            <base-icon name="warning" class="delete-warning-icon" />
           </ds-flex-item>
           <ds-flex-item :width="{ base: '78%', sm: '88%', md: '88%', lg: '92%' }">
             <ds-heading>{{ $t('settings.deleteUserAccount.name') }}</ds-heading>
@@ -134,6 +134,7 @@ export default {
 <style lang="scss">
 .delete-warning-icon {
   color: $color-danger;
+  font-size: $font-size-xxx-large;
 }
 
 .checkbox-container {
diff --git a/webapp/components/DonationInfo/DonationInfo.spec.js b/webapp/components/DonationInfo/DonationInfo.spec.js
index ca719c19a..c308e2146 100644
--- a/webapp/components/DonationInfo/DonationInfo.spec.js
+++ b/webapp/components/DonationInfo/DonationInfo.spec.js
@@ -1,9 +1,8 @@
-import { mount, createLocalVue } from '@vue/test-utils'
-import Styleguide from '@human-connection/styleguide'
+import { mount } from '@vue/test-utils'
+
 import DonationInfo from './DonationInfo.vue'
 
-const localVue = createLocalVue()
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 const mockDate = new Date(2019, 11, 6)
 global.Date = jest.fn(() => mockDate)
diff --git a/webapp/components/DropdownFilter/DropdownFilter.spec.js b/webapp/components/DropdownFilter/DropdownFilter.spec.js
index 9566fa6ef..8020a487f 100644
--- a/webapp/components/DropdownFilter/DropdownFilter.spec.js
+++ b/webapp/components/DropdownFilter/DropdownFilter.spec.js
@@ -1,11 +1,8 @@
-import { mount, createLocalVue } from '@vue/test-utils'
-import VTooltip from 'v-tooltip'
-import Styleguide from '@human-connection/styleguide'
+import { mount } from '@vue/test-utils'
+
 import DropdownFilter from './DropdownFilter.vue'
 
-const localVue = createLocalVue()
-localVue.use(Styleguide)
-localVue.use(VTooltip)
+const localVue = global.localVue
 
 describe('DropdownFilter.vue', () => {
   let propsData, wrapper, mocks
diff --git a/webapp/components/DropdownFilter/DropdownFilter.vue b/webapp/components/DropdownFilter/DropdownFilter.vue
index c24cf18bc..2a3637f41 100644
--- a/webapp/components/DropdownFilter/DropdownFilter.vue
+++ b/webapp/components/DropdownFilter/DropdownFilter.vue
@@ -9,9 +9,9 @@
       href="#"
       @click.prevent="toggleMenu()"
     >
-      <ds-icon style="margin-right: 2px;" name="filter" />
-      <label for="dropdown">{{ selected }}</label>
-      <ds-icon style="margin-left: 2px" size="xx-small" name="angle-down" />
+      <base-icon name="filter" />
+      <label class="label" for="dropdown">{{ selected }}</label>
+      <base-icon class="dropdown-arrow" name="angle-down" />
     </a>
     <ds-menu
       slot="popover"
@@ -59,7 +59,16 @@ export default {
   height: 100%;
   padding: $space-xx-small;
   color: $text-color-soft;
+
+  > .label {
+    margin: 0 $space-xx-small;
+  }
 }
+
+.dropdown-arrow {
+  font-size: $font-size-xx-small;
+}
+
 .dropdown-menu {
   user-select: none;
   display: flex;
diff --git a/webapp/components/Editor/Editor.spec.js b/webapp/components/Editor/Editor.spec.js
index 68ed6de53..ee762b332 100644
--- a/webapp/components/Editor/Editor.spec.js
+++ b/webapp/components/Editor/Editor.spec.js
@@ -1,13 +1,12 @@
-import { mount, createLocalVue } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Editor from './Editor'
-import Styleguide from '@human-connection/styleguide'
+
 import MutationObserver from 'mutation-observer'
 import Vue from 'vue'
 
 global.MutationObserver = MutationObserver
 
-const localVue = createLocalVue()
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 describe('Editor.vue', () => {
   let wrapper
diff --git a/webapp/components/Editor/nodes/Embed.spec.js b/webapp/components/Editor/nodes/Embed.spec.js
index 639f99338..e87ee1570 100644
--- a/webapp/components/Editor/nodes/Embed.spec.js
+++ b/webapp/components/Editor/nodes/Embed.spec.js
@@ -1,14 +1,9 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils'
-import Vuex from 'vuex'
-import Styleguide from '@human-connection/styleguide'
+import { shallowMount } from '@vue/test-utils'
+
 import Embed from './Embed'
 
 let Wrapper, propsData, component
 const someUrl = 'https://www.youtube.com/watch?v=qkdXAtO40Fo'
-const localVue = createLocalVue()
-
-localVue.use(Vuex)
-localVue.use(Styleguide)
 
 describe('Embed.vue', () => {
   beforeEach(() => {
diff --git a/webapp/components/Embed/EmbedComponent.spec.js b/webapp/components/Embed/EmbedComponent.spec.js
index 5ad8dd324..ab0f0c8fb 100644
--- a/webapp/components/Embed/EmbedComponent.spec.js
+++ b/webapp/components/Embed/EmbedComponent.spec.js
@@ -1,14 +1,11 @@
-import { mount, createLocalVue } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Vuex from 'vuex'
-import Styleguide from '@human-connection/styleguide'
+
 import EmbedComponent from './EmbedComponent'
 
 let wrapper, propsData, getters, mocks
 const someUrl = 'https://www.youtube.com/watch?v=qkdXAtO40Fo'
-const localVue = createLocalVue()
-
-localVue.use(Vuex)
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 describe('EmbedComponent.vue', () => {
   const Wrapper = () => {
diff --git a/webapp/components/Emotions/Emotions.spec.js b/webapp/components/Emotions/Emotions.spec.js
index ecc7f9e94..b7a2bbe34 100644
--- a/webapp/components/Emotions/Emotions.spec.js
+++ b/webapp/components/Emotions/Emotions.spec.js
@@ -1,13 +1,10 @@
-import { mount, createLocalVue } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Emotions from './Emotions.vue'
-import Styleguide from '@human-connection/styleguide'
+
 import Vuex from 'vuex'
 import PostMutations from '~/graphql/PostMutations.js'
 
-const localVue = createLocalVue()
-
-localVue.use(Styleguide)
-localVue.use(Vuex)
+const localVue = global.localVue
 
 describe('Emotions.vue', () => {
   let wrapper
diff --git a/webapp/components/Empty/Empty.spec.js b/webapp/components/Empty/Empty.spec.js
index a4220fa63..6b1a37324 100644
--- a/webapp/components/Empty/Empty.spec.js
+++ b/webapp/components/Empty/Empty.spec.js
@@ -1,9 +1,8 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils'
-import Styleguide from '@human-connection/styleguide'
+import { shallowMount } from '@vue/test-utils'
+
 import Empty from './Empty.vue'
 
-const localVue = createLocalVue()
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 describe('Empty.vue', () => {
   let propsData, wrapper
diff --git a/webapp/components/EnterNonce/EnterNonce.spec.js b/webapp/components/EnterNonce/EnterNonce.spec.js
index 67f1f9073..3e05e45d0 100644
--- a/webapp/components/EnterNonce/EnterNonce.spec.js
+++ b/webapp/components/EnterNonce/EnterNonce.spec.js
@@ -1,10 +1,7 @@
-import { mount, createLocalVue } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import EnterNonce from './EnterNonce.vue'
-import Styleguide from '@human-connection/styleguide'
 
-const localVue = createLocalVue()
-
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 describe('EnterNonce ', () => {
   let wrapper
diff --git a/webapp/components/FilterMenu/FilterMenu.spec.js b/webapp/components/FilterMenu/FilterMenu.spec.js
index c377e1838..079ef5487 100644
--- a/webapp/components/FilterMenu/FilterMenu.spec.js
+++ b/webapp/components/FilterMenu/FilterMenu.spec.js
@@ -1,12 +1,7 @@
-import { mount, createLocalVue } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import FilterMenu from './FilterMenu.vue'
-import Styleguide from '@human-connection/styleguide'
-import VTooltip from 'v-tooltip'
 
-const localVue = createLocalVue()
-
-localVue.use(Styleguide)
-localVue.use(VTooltip)
+const localVue = global.localVue
 
 describe('FilterMenu.vue', () => {
   let wrapper
diff --git a/webapp/components/FilterPosts/FilterPosts.spec.js b/webapp/components/FilterPosts/FilterPosts.spec.js
index 504112572..f27074b7b 100644
--- a/webapp/components/FilterPosts/FilterPosts.spec.js
+++ b/webapp/components/FilterPosts/FilterPosts.spec.js
@@ -1,16 +1,11 @@
-import { mount, createLocalVue } from '@vue/test-utils'
-import VTooltip from 'v-tooltip'
-import Styleguide from '@human-connection/styleguide'
+import { mount } from '@vue/test-utils'
+
 import Vuex from 'vuex'
 import FilterPosts from './FilterPosts.vue'
 import locales from '~/locales'
 import orderBy from 'lodash/orderBy'
 
-const localVue = createLocalVue()
-
-localVue.use(Styleguide)
-localVue.use(VTooltip)
-localVue.use(Vuex)
+const localVue = global.localVue
 
 let mutations
 let getters
diff --git a/webapp/components/FilterPosts/FilterPosts.vue b/webapp/components/FilterPosts/FilterPosts.vue
index 1dd0fa737..b83e99fd8 100644
--- a/webapp/components/FilterPosts/FilterPosts.vue
+++ b/webapp/components/FilterPosts/FilterPosts.vue
@@ -8,7 +8,7 @@
       slot-scope="{ toggleMenu }"
       @click.prevent="toggleMenu()"
     >
-      <ds-icon size="xx-small" name="angle-down" />
+      <base-icon class="dropdown-arrow" name="angle-down" />
     </ds-button>
     <template slot="popover">
       <ds-container>
diff --git a/webapp/components/Hashtag/Hashtag.spec.js b/webapp/components/Hashtag/Hashtag.spec.js
index a8b9f7641..4a420d7d8 100644
--- a/webapp/components/Hashtag/Hashtag.spec.js
+++ b/webapp/components/Hashtag/Hashtag.spec.js
@@ -1,9 +1,8 @@
-import { config, shallowMount, createLocalVue } from '@vue/test-utils'
-import Styleguide from '@human-connection/styleguide'
+import { config, shallowMount } from '@vue/test-utils'
+
 import Hashtag from './Hashtag'
 
-const localVue = createLocalVue()
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 config.stubs['nuxt-link'] = '<span><slot /></span>'
 
diff --git a/webapp/components/LocaleSwitch/LocaleSwitch.spec.js b/webapp/components/LocaleSwitch/LocaleSwitch.spec.js
index 3e9e17443..ee28b742a 100644
--- a/webapp/components/LocaleSwitch/LocaleSwitch.spec.js
+++ b/webapp/components/LocaleSwitch/LocaleSwitch.spec.js
@@ -1,14 +1,9 @@
-import { mount, createLocalVue } from '@vue/test-utils'
-import Styleguide from '@human-connection/styleguide'
-import VTooltip from 'v-tooltip'
+import { mount } from '@vue/test-utils'
+
 import LocaleSwitch from './LocaleSwitch.vue'
 import Vuex from 'vuex'
 
-const localVue = createLocalVue()
-
-localVue.use(Styleguide)
-localVue.use(VTooltip)
-localVue.use(Vuex)
+const localVue = global.localVue
 
 describe('LocaleSwitch.vue', () => {
   let wrapper, mocks, computed, deutschLanguageItem, getters
diff --git a/webapp/components/LocaleSwitch/LocaleSwitch.vue b/webapp/components/LocaleSwitch/LocaleSwitch.vue
index 37a6c97e7..564de20f7 100644
--- a/webapp/components/LocaleSwitch/LocaleSwitch.vue
+++ b/webapp/components/LocaleSwitch/LocaleSwitch.vue
@@ -7,9 +7,9 @@
       href="#"
       @click.prevent="toggleMenu()"
     >
-      <ds-icon style="margin-right: 2px;" name="globe" />
-      {{ current.code.toUpperCase() }}
-      <ds-icon style="margin-left: 2px" size="xx-small" name="angle-down" />
+      <base-icon name="globe" />
+      <span class="label">{{ current.code.toUpperCase() }}</span>
+      <base-icon class="dropdown-arrow" name="angle-down" />
     </a>
     <ds-menu
       slot="popover"
@@ -124,6 +124,10 @@ export default {
   height: 100%;
   padding: $space-xx-small;
   color: $text-color-soft;
+
+  > .label {
+    margin: 0 $space-xx-small;
+  }
 }
 
 nav.locale-menu-popover {
diff --git a/webapp/components/MasonryGrid/MasonryGrid.spec.js b/webapp/components/MasonryGrid/MasonryGrid.spec.js
index 2a52f9a85..8eed5e150 100644
--- a/webapp/components/MasonryGrid/MasonryGrid.spec.js
+++ b/webapp/components/MasonryGrid/MasonryGrid.spec.js
@@ -1,9 +1,8 @@
-import { mount, createLocalVue } from '@vue/test-utils'
-import Styleguide from '@human-connection/styleguide'
+import { mount } from '@vue/test-utils'
+
 import MasonryGrid from './MasonryGrid'
 
-const localVue = createLocalVue()
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 describe('MasonryGrid', () => {
   let wrapper
diff --git a/webapp/components/MasonryGrid/MasonryGridItem.spec.js b/webapp/components/MasonryGrid/MasonryGridItem.spec.js
index fc799dadc..1783f0a15 100644
--- a/webapp/components/MasonryGrid/MasonryGridItem.spec.js
+++ b/webapp/components/MasonryGrid/MasonryGridItem.spec.js
@@ -1,9 +1,8 @@
-import { config, shallowMount, createLocalVue } from '@vue/test-utils'
-import Styleguide from '@human-connection/styleguide'
+import { config, shallowMount } from '@vue/test-utils'
+
 import MasonryGridItem from './MasonryGridItem'
 
-const localVue = createLocalVue()
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 config.stubs['ds-grid-item'] = '<span><slot /></span>'
 
diff --git a/webapp/components/Modal.spec.js b/webapp/components/Modal.spec.js
index 35ece0bee..2dae4285a 100644
--- a/webapp/components/Modal.spec.js
+++ b/webapp/components/Modal.spec.js
@@ -1,16 +1,12 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import Modal from './Modal.vue'
 import ConfirmModal from './Modal/ConfirmModal.vue'
 import DisableModal from './Modal/DisableModal.vue'
 import ReportModal from './Modal/ReportModal.vue'
 import Vuex from 'vuex'
 import { getters, mutations } from '../store/modal'
-import Styleguide from '@human-connection/styleguide'
 
-const localVue = createLocalVue()
-
-localVue.use(Vuex)
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 describe('Modal.vue', () => {
   let wrapper
diff --git a/webapp/components/Modal/ConfirmModal.spec.js b/webapp/components/Modal/ConfirmModal.spec.js
index f6adecb81..a1fc998ef 100644
--- a/webapp/components/Modal/ConfirmModal.spec.js
+++ b/webapp/components/Modal/ConfirmModal.spec.js
@@ -1,13 +1,10 @@
-import { config, shallowMount, mount, createLocalVue } from '@vue/test-utils'
-import Vuex from 'vuex'
-import Styleguide from '@human-connection/styleguide'
+import { config, shallowMount, mount } from '@vue/test-utils'
+
 import ConfirmModal from './ConfirmModal.vue'
 import { postMenuModalsData } from '~/components/utils/PostHelpers'
 
-const localVue = createLocalVue()
+const localVue = global.localVue
 
-localVue.use(Vuex)
-localVue.use(Styleguide)
 config.stubs['sweetalert-icon'] = '<span><slot /></span>'
 
 describe('ConfirmModal.vue', () => {
diff --git a/webapp/components/Modal/DisableModal.spec.js b/webapp/components/Modal/DisableModal.spec.js
index b5ebf888c..8bf796921 100644
--- a/webapp/components/Modal/DisableModal.spec.js
+++ b/webapp/components/Modal/DisableModal.spec.js
@@ -1,10 +1,7 @@
-import { shallowMount, mount, createLocalVue } from '@vue/test-utils'
+import { shallowMount, mount } from '@vue/test-utils'
 import DisableModal from './DisableModal.vue'
-import Styleguide from '@human-connection/styleguide'
 
-const localVue = createLocalVue()
-
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 describe('DisableModal.vue', () => {
   let mocks
diff --git a/webapp/components/Modal/ReportModal.spec.js b/webapp/components/Modal/ReportModal.spec.js
index d6350f595..b151f3c7b 100644
--- a/webapp/components/Modal/ReportModal.spec.js
+++ b/webapp/components/Modal/ReportModal.spec.js
@@ -1,12 +1,8 @@
-import { config, shallowMount, mount, createLocalVue } from '@vue/test-utils'
+import { config, shallowMount, mount } from '@vue/test-utils'
 import ReportModal from './ReportModal.vue'
-import Vuex from 'vuex'
-import Styleguide from '@human-connection/styleguide'
 
-const localVue = createLocalVue()
+const localVue = global.localVue
 
-localVue.use(Vuex)
-localVue.use(Styleguide)
 config.stubs['sweetalert-icon'] = '<span><slot /></span>'
 
 describe('ReportModal.vue', () => {
diff --git a/webapp/components/Notification/Notification.spec.js b/webapp/components/Notification/Notification.spec.js
index 54e6b4ab3..750f59b3a 100644
--- a/webapp/components/Notification/Notification.spec.js
+++ b/webapp/components/Notification/Notification.spec.js
@@ -1,14 +1,9 @@
-import { config, mount, createLocalVue, RouterLinkStub } from '@vue/test-utils'
+import { config, mount, RouterLinkStub } from '@vue/test-utils'
 import Notification from './Notification.vue'
-import Styleguide from '@human-connection/styleguide'
-import Filters from '~/plugins/vue-filters'
+
 import Vuex from 'vuex'
 
-const localVue = createLocalVue()
-
-localVue.use(Vuex)
-localVue.use(Styleguide)
-localVue.use(Filters)
+const localVue = global.localVue
 
 config.stubs['client-only'] = '<span><slot /></span>'
 
diff --git a/webapp/components/NotificationList/NotificationList.spec.js b/webapp/components/NotificationList/NotificationList.spec.js
index c48daefe6..f70b7a482 100644
--- a/webapp/components/NotificationList/NotificationList.spec.js
+++ b/webapp/components/NotificationList/NotificationList.spec.js
@@ -1,16 +1,12 @@
-import { config, shallowMount, mount, createLocalVue, RouterLinkStub } from '@vue/test-utils'
+import { config, shallowMount, mount, RouterLinkStub } from '@vue/test-utils'
 import NotificationList from './NotificationList'
 import Notification from '../Notification/Notification'
 import Vuex from 'vuex'
-import Filters from '~/plugins/vue-filters'
-import Styleguide from '@human-connection/styleguide'
+
 import { notifications } from '~/components/utils/Notifications'
 
-const localVue = createLocalVue()
+const localVue = global.localVue
 
-localVue.use(Vuex)
-localVue.use(Styleguide)
-localVue.use(Filters)
 localVue.filter('truncate', string => string)
 
 config.stubs['client-only'] = '<span><slot /></span>'
diff --git a/webapp/components/NotificationMenu/NotificationMenu.spec.js b/webapp/components/NotificationMenu/NotificationMenu.spec.js
index 6b19b7fb1..01c972d05 100644
--- a/webapp/components/NotificationMenu/NotificationMenu.spec.js
+++ b/webapp/components/NotificationMenu/NotificationMenu.spec.js
@@ -1,13 +1,8 @@
-import { config, shallowMount, createLocalVue } from '@vue/test-utils'
+import { config, shallowMount } from '@vue/test-utils'
 import NotificationMenu from './NotificationMenu'
 
-import Styleguide from '@human-connection/styleguide'
-import Filters from '~/plugins/vue-filters'
+const localVue = global.localVue
 
-const localVue = createLocalVue()
-
-localVue.use(Styleguide)
-localVue.use(Filters)
 localVue.filter('truncate', string => string)
 
 config.stubs.dropdown = '<span class="dropdown"><slot /></span>'
diff --git a/webapp/components/NotificationsTable/NotificationsTable.spec.js b/webapp/components/NotificationsTable/NotificationsTable.spec.js
index 59b8953e9..80095666f 100644
--- a/webapp/components/NotificationsTable/NotificationsTable.spec.js
+++ b/webapp/components/NotificationsTable/NotificationsTable.spec.js
@@ -1,16 +1,11 @@
-import { config, mount, createLocalVue, RouterLinkStub } from '@vue/test-utils'
-import Styleguide from '@human-connection/styleguide'
-import VTooltip from 'v-tooltip'
+import { config, mount, RouterLinkStub } from '@vue/test-utils'
+
 import Vuex from 'vuex'
 import NotificationsTable from './NotificationsTable'
-import Filters from '~/plugins/vue-filters'
-import { notifications } from '~/components/utils/Notifications'
-const localVue = createLocalVue()
 
-localVue.use(Styleguide)
-localVue.use(Filters)
-localVue.use(VTooltip)
-localVue.use(Vuex)
+import { notifications } from '~/components/utils/Notifications'
+const localVue = global.localVue
+
 localVue.filter('truncate', string => string)
 
 config.stubs['client-only'] = '<span><slot /></span>'
diff --git a/webapp/components/NotificationsTable/NotificationsTable.vue b/webapp/components/NotificationsTable/NotificationsTable.vue
index 6a9d9b033..caf30d6c0 100644
--- a/webapp/components/NotificationsTable/NotificationsTable.vue
+++ b/webapp/components/NotificationsTable/NotificationsTable.vue
@@ -1,12 +1,12 @@
 <template>
   <ds-table v-if="notifications && notifications.length" :data="notifications" :fields="fields">
     <template #icon="scope">
-      <ds-icon
+      <base-icon
         v-if="scope.row.from.post"
         name="comment"
         v-tooltip="{ content: $t('notifications.comment'), placement: 'right' }"
       />
-      <ds-icon
+      <base-icon
         v-else
         name="bookmark"
         v-tooltip="{ content: $t('notifications.post'), placement: 'right' }"
diff --git a/webapp/components/Paginate/Paginate.spec.js b/webapp/components/Paginate/Paginate.spec.js
index a71e8cec8..f542533fd 100644
--- a/webapp/components/Paginate/Paginate.spec.js
+++ b/webapp/components/Paginate/Paginate.spec.js
@@ -1,10 +1,8 @@
-import { mount, createLocalVue } from '@vue/test-utils'
-import Styleguide from '@human-connection/styleguide'
+import { mount } from '@vue/test-utils'
+
 import Paginate from './Paginate'
 
-const localVue = createLocalVue()
-
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 describe('Paginate.vue', () => {
   let propsData, wrapper, nextButton, backButton
diff --git a/webapp/components/Password/Change.spec.js b/webapp/components/Password/Change.spec.js
index ef89c34f7..6010f5d8c 100644
--- a/webapp/components/Password/Change.spec.js
+++ b/webapp/components/Password/Change.spec.js
@@ -1,12 +1,7 @@
-import { mount, createLocalVue } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import ChangePassword from './Change.vue'
-import Styleguide from '@human-connection/styleguide'
-import Filters from '~/plugins/vue-filters'
 
-const localVue = createLocalVue()
-
-localVue.use(Styleguide)
-localVue.use(Filters)
+const localVue = global.localVue
 
 describe('ChangePassword.vue', () => {
   let mocks
diff --git a/webapp/components/PasswordReset/ChangePassword.spec.js b/webapp/components/PasswordReset/ChangePassword.spec.js
index b5d85dea7..b1b55cb06 100644
--- a/webapp/components/PasswordReset/ChangePassword.spec.js
+++ b/webapp/components/PasswordReset/ChangePassword.spec.js
@@ -1,10 +1,8 @@
-import { config, mount, createLocalVue } from '@vue/test-utils'
+import { config, mount } from '@vue/test-utils'
 import ChangePassword from './ChangePassword'
-import Styleguide from '@human-connection/styleguide'
 
-const localVue = createLocalVue()
+const localVue = global.localVue
 
-localVue.use(Styleguide)
 config.stubs['sweetalert-icon'] = '<span><slot /></span>'
 
 describe('ChangePassword ', () => {
diff --git a/webapp/components/PasswordReset/Request.spec.js b/webapp/components/PasswordReset/Request.spec.js
index 4a6dbde9f..df55cff18 100644
--- a/webapp/components/PasswordReset/Request.spec.js
+++ b/webapp/components/PasswordReset/Request.spec.js
@@ -1,10 +1,8 @@
-import { config, mount, createLocalVue } from '@vue/test-utils'
+import { config, mount } from '@vue/test-utils'
 import Request from './Request'
-import Styleguide from '@human-connection/styleguide'
 
-const localVue = createLocalVue()
+const localVue = global.localVue
 
-localVue.use(Styleguide)
 config.stubs['sweetalert-icon'] = '<span><slot /></span>'
 config.stubs['client-only'] = '<span><slot /></span>'
 config.stubs['nuxt-link'] = '<span><slot /></span>'
diff --git a/webapp/components/PostCard/PostCard.spec.js b/webapp/components/PostCard/PostCard.spec.js
index ab902f05a..28ce10b9e 100644
--- a/webapp/components/PostCard/PostCard.spec.js
+++ b/webapp/components/PostCard/PostCard.spec.js
@@ -1,14 +1,10 @@
-import { config, shallowMount, mount, createLocalVue, RouterLinkStub } from '@vue/test-utils'
-import Styleguide from '@human-connection/styleguide'
+import { config, shallowMount, mount, RouterLinkStub } from '@vue/test-utils'
+
 import Vuex from 'vuex'
-import Filters from '~/plugins/vue-filters'
+
 import PostCard from './PostCard.vue'
 
-const localVue = createLocalVue()
-
-localVue.use(Vuex)
-localVue.use(Styleguide)
-localVue.use(Filters)
+const localVue = global.localVue
 
 config.stubs['client-only'] = '<span><slot /></span>'
 config.stubs['v-popover'] = '<span><slot /></span>'
diff --git a/webapp/components/PostCard/PostCard.vue b/webapp/components/PostCard/PostCard.vue
index e65e17102..0947ed05b 100644
--- a/webapp/components/PostCard/PostCard.vue
+++ b/webapp/components/PostCard/PostCard.vue
@@ -48,13 +48,13 @@
         <div style="display: inline-block; float: right">
           <!-- Shouts Count -->
           <span :style="{ opacity: post.shoutedCount ? 1 : 0.5 }">
-            <ds-icon name="bullhorn" />
+            <base-icon name="bullhorn" />
             <small>{{ post.shoutedCount }}</small>
           </span>
           &nbsp;
           <!-- Comments Count -->
           <span :style="{ opacity: post.commentsCount ? 1 : 0.5 }">
-            <ds-icon name="comments" />
+            <base-icon name="comments" />
             <small>{{ post.commentsCount }}</small>
           </span>
           <!-- Menu -->
diff --git a/webapp/components/Registration/CreateUserAccount.spec.js b/webapp/components/Registration/CreateUserAccount.spec.js
index 7bc2aba28..81f825956 100644
--- a/webapp/components/Registration/CreateUserAccount.spec.js
+++ b/webapp/components/Registration/CreateUserAccount.spec.js
@@ -1,12 +1,10 @@
-import { config, mount, createLocalVue } from '@vue/test-utils'
+import { config, mount } from '@vue/test-utils'
 import { VERSION } from '~/constants/terms-and-conditions-version.js'
 import CreateUserAccount from './CreateUserAccount'
 import { SignupVerificationMutation } from '~/graphql/Registration.js'
-import Styleguide from '@human-connection/styleguide'
 
-const localVue = createLocalVue()
+const localVue = global.localVue
 
-localVue.use(Styleguide)
 config.stubs['sweetalert-icon'] = '<span><slot /></span>'
 config.stubs['client-only'] = '<span><slot /></span>'
 config.stubs['nuxt-link'] = '<span><slot /></span>'
diff --git a/webapp/components/Registration/Signup.spec.js b/webapp/components/Registration/Signup.spec.js
index c25c2e216..b8970b1dc 100644
--- a/webapp/components/Registration/Signup.spec.js
+++ b/webapp/components/Registration/Signup.spec.js
@@ -1,10 +1,8 @@
-import { config, mount, createLocalVue } from '@vue/test-utils'
+import { config, mount } from '@vue/test-utils'
 import Signup, { SignupMutation, SignupByInvitationMutation } from './Signup'
-import Styleguide from '@human-connection/styleguide'
 
-const localVue = createLocalVue()
+const localVue = global.localVue
 
-localVue.use(Styleguide)
 config.stubs['sweetalert-icon'] = '<span><slot /></span>'
 config.stubs['nuxt-link'] = '<span><slot /></span>'
 
diff --git a/webapp/components/RelativeDateTime/spec.js b/webapp/components/RelativeDateTime/spec.js
index 356ea8874..833baae3a 100644
--- a/webapp/components/RelativeDateTime/spec.js
+++ b/webapp/components/RelativeDateTime/spec.js
@@ -1,7 +1,7 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import RelativeDateTime from './'
 
-const localVue = createLocalVue()
+const localVue = global.localVue
 
 describe('RelativeDateTime', () => {
   let mocks
diff --git a/webapp/components/ReleaseModal/ReleaseModal.spec.js b/webapp/components/ReleaseModal/ReleaseModal.spec.js
index bb7281ab7..22201a406 100644
--- a/webapp/components/ReleaseModal/ReleaseModal.spec.js
+++ b/webapp/components/ReleaseModal/ReleaseModal.spec.js
@@ -1,10 +1,7 @@
-import { shallowMount, mount, createLocalVue } from '@vue/test-utils'
+import { shallowMount, mount } from '@vue/test-utils'
 import ReleaseModal from './ReleaseModal.vue'
-import Styleguide from '@human-connection/styleguide'
 
-const localVue = createLocalVue()
-
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 describe('ReleaseModal.vue', () => {
   let mocks
diff --git a/webapp/components/Ribbon/index.spec.js b/webapp/components/Ribbon/index.spec.js
index c642378f6..5e09db1f2 100644
--- a/webapp/components/Ribbon/index.spec.js
+++ b/webapp/components/Ribbon/index.spec.js
@@ -1,7 +1,7 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import Ribbon from './index'
 
-const localVue = createLocalVue()
+const localVue = global.localVue
 
 describe('Ribbon', () => {
   let text
diff --git a/webapp/components/SearchInput.spec.js b/webapp/components/SearchInput.spec.js
index bf44b906b..8cc8b9459 100644
--- a/webapp/components/SearchInput.spec.js
+++ b/webapp/components/SearchInput.spec.js
@@ -1,11 +1,8 @@
-import { mount, createLocalVue } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import SearchInput from './SearchInput.vue'
-import Vuex from 'vuex'
-import Styleguide from '@human-connection/styleguide'
-const localVue = createLocalVue()
 
-localVue.use(Vuex)
-localVue.use(Styleguide)
+const localVue = global.localVue
+
 localVue.filter('truncate', () => 'truncated string')
 localVue.filter('dateTime', () => Date.now)
 
diff --git a/webapp/components/SearchInput.vue b/webapp/components/SearchInput.vue
index 098b30610..b1b967355 100644
--- a/webapp/components/SearchInput.vue
+++ b/webapp/components/SearchInput.vue
@@ -47,11 +47,11 @@
                     <ds-text size="small" color="softer" class="search-meta">
                       <span style="text-align: right;">
                         <b>{{ option.commentsCount }}</b>
-                        <ds-icon name="comments" />
+                        <base-icon name="comments" />
                       </span>
                       <span style="width: 36px; display: inline-block; text-align: right;">
                         <b>{{ option.shoutedCount }}</b>
-                        <ds-icon name="bullhorn" />
+                        <base-icon name="bullhorn" />
                       </span>
                     </ds-text>
                   </ds-flex-item>
@@ -239,7 +239,7 @@ export default {
     white-space: nowrap;
     word-wrap: none;
 
-    .ds-icon {
+    .base-icon {
       vertical-align: sub;
     }
   }
diff --git a/webapp/components/TeaserImage/TeaserImage.spec.js b/webapp/components/TeaserImage/TeaserImage.spec.js
index 048a7914c..dd89c8cfd 100644
--- a/webapp/components/TeaserImage/TeaserImage.spec.js
+++ b/webapp/components/TeaserImage/TeaserImage.spec.js
@@ -1,10 +1,7 @@
-import { mount, createLocalVue } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import TeaserImage from './TeaserImage.vue'
-import Styleguide from '@human-connection/styleguide'
 
-const localVue = createLocalVue()
-
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 describe('TeaserImage.vue', () => {
   let wrapper
diff --git a/webapp/components/TeaserImage/TeaserImage.vue b/webapp/components/TeaserImage/TeaserImage.vue
index 636a9e0ca..2a11743a8 100644
--- a/webapp/components/TeaserImage/TeaserImage.vue
+++ b/webapp/components/TeaserImage/TeaserImage.vue
@@ -27,7 +27,7 @@
           'hc-drag-marker-update-post': contribution,
         }"
       >
-        <ds-icon name="image" size="xxx-large" />
+        <base-icon name="image" />
       </div>
     </div>
   </vue-dropzone>
diff --git a/webapp/components/Upload/index.vue b/webapp/components/Upload/index.vue
index c348dda92..64a6ce891 100644
--- a/webapp/components/Upload/index.vue
+++ b/webapp/components/Upload/index.vue
@@ -12,7 +12,7 @@
         <slot></slot>
         <div class="hc-attachments-upload-area">
           <div class="hc-drag-marker">
-            <ds-icon v-if="hover" name="image" size="xxx-large" />
+            <base-icon v-if="hover" name="image" />
           </div>
         </div>
       </div>
diff --git a/webapp/components/Upload/spec.js b/webapp/components/Upload/spec.js
index 8ee5f6046..d9878ea2d 100644
--- a/webapp/components/Upload/spec.js
+++ b/webapp/components/Upload/spec.js
@@ -1,12 +1,7 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import Upload from '.'
-import Vuex from 'vuex'
-import Styleguide from '@human-connection/styleguide'
 
-const localVue = createLocalVue()
-
-localVue.use(Vuex)
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 describe('Upload', () => {
   let wrapper
diff --git a/webapp/components/User/User.spec.js b/webapp/components/User/User.spec.js
index 71babe641..4a6e37df1 100644
--- a/webapp/components/User/User.spec.js
+++ b/webapp/components/User/User.spec.js
@@ -1,19 +1,10 @@
-import { mount, createLocalVue, RouterLinkStub } from '@vue/test-utils'
+import { mount, RouterLinkStub } from '@vue/test-utils'
 import User from './User.vue'
 import Vuex from 'vuex'
-import VTooltip from 'v-tooltip'
-import Filters from '~/plugins/vue-filters'
 
-import Styleguide from '@human-connection/styleguide'
-
-const localVue = createLocalVue()
+const localVue = global.localVue
 const filter = jest.fn(str => str)
 
-localVue.use(Vuex)
-localVue.use(VTooltip)
-localVue.use(Styleguide)
-localVue.use(Filters)
-
 localVue.filter('truncate', filter)
 
 describe('User', () => {
diff --git a/webapp/components/User/User.vue b/webapp/components/User/User.vue
index 2e5b7e501..81d004ca8 100644
--- a/webapp/components/User/User.vue
+++ b/webapp/components/User/User.vue
@@ -11,10 +11,10 @@
         <div @mouseover="openMenu(true)" @mouseleave="closeMenu(true)">
           <hc-avatar class="avatar" :user="user" />
           <div>
-            <ds-text>
+            <ds-text class="userinfo">
               <b class="username">{{ userName | truncate(18) }}</b>
               <ds-text v-if="dateTime" size="small" color="soft">
-                <ds-icon name="clock" />
+                <base-icon name="clock" />
                 <client-only>
                   <hc-relative-date-time :date-time="dateTime" />
                 </client-only>
@@ -39,7 +39,7 @@
           style="margin-top: 5px"
           bold
         >
-          <ds-icon name="map-marker" />
+          <base-icon name="map-marker" />
           {{ user.location.name }}
         </ds-text>
         <ds-flex style="margin-top: -10px">
@@ -156,6 +156,17 @@ export default {
   vertical-align: middle;
 }
 
+.userinfo {
+  display: flex;
+  align-items: center;
+
+  > .ds-text {
+    display: flex;
+    align-items: center;
+    margin-left: $space-xx-small;
+  }
+}
+
 .user {
   white-space: nowrap;
   position: relative;
diff --git a/webapp/components/_new/generic/BaseIcon/BaseIcon.story.js b/webapp/components/_new/generic/BaseIcon/BaseIcon.story.js
new file mode 100644
index 000000000..321ebc0de
--- /dev/null
+++ b/webapp/components/_new/generic/BaseIcon/BaseIcon.story.js
@@ -0,0 +1,53 @@
+import { storiesOf } from '@storybook/vue'
+import helpers from '~/storybook/helpers'
+import BaseIcon from './BaseIcon.vue'
+import { iconNames } from '~/assets/_new/icons'
+
+const wrapperStyles = `
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: 100%;
+`
+
+const iconPresenterStyles = `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
+  width: 20%;
+  max-width: 120px;
+  height: 120px;
+  padding: 12px;
+  margin-right: 20px;
+  margin-bottom: 20px;
+  background-color: white;
+  text-align: center;
+`
+
+const iconStyles = `
+  font-size: 20px;
+`
+
+storiesOf('BaseIcon', module)
+  .addDecorator(helpers.layout)
+
+  .add('pure icon', () => ({
+    components: { BaseIcon },
+    template: '<base-icon name="tree" />',
+  }))
+
+  .add('all icons', () => ({
+    components: { BaseIcon },
+    data() {
+      return { iconNames }
+    },
+    template: `
+      <div style="${wrapperStyles}">
+        <div v-for="name in iconNames" :key="name" style="${iconPresenterStyles}">
+          <base-icon :name="name" style="${iconStyles}" />
+          {{ name }}
+        </div>
+      </div>
+    `,
+  }))
diff --git a/webapp/components/_new/generic/BaseIcon/BaseIcon.vue b/webapp/components/_new/generic/BaseIcon/BaseIcon.vue
new file mode 100644
index 000000000..c7752b7ec
--- /dev/null
+++ b/webapp/components/_new/generic/BaseIcon/BaseIcon.vue
@@ -0,0 +1,46 @@
+<template>
+  <span v-if="svgIcon" class="base-icon">
+    <component :is="svgIcon" aria-hidden="true" focusable="false" class="svg" />
+  </span>
+</template>
+
+<script>
+import icons, { iconNames } from '~/assets/_new/icons'
+
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+      validator(value) {
+        return iconNames.includes(value)
+      },
+    },
+  },
+  computed: {
+    svgIcon() {
+      const icon = icons[this.name]
+      if (!icon) {
+        return false
+      }
+      /*
+      a Vue component needs a render function,
+      so we check if there is a render function directly on the icon –
+      otherwise we know it is wrapped in icon.default
+      */
+      return icon.render ? icon : icon.default
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.base-icon {
+  display: inline-flex;
+
+  > .svg {
+    height: 1.2em;
+    fill: currentColor;
+  }
+}
+</style>
diff --git a/webapp/nuxt.config.js b/webapp/nuxt.config.js
index eb628c7d6..0d61302ff 100644
--- a/webapp/nuxt.config.js
+++ b/webapp/nuxt.config.js
@@ -100,13 +100,14 @@ export default {
    ** Global processed styles
    */
   styleResources: {
-    scss: [styleguideStyles, '~view/styles/tokens.scss'],
+    scss: [styleguideStyles, '~assets/_new/styles/tokens.scss'],
   },
 
   /*
    ** Plugins to load before mounting the App
    */
   plugins: [
+    { src: '~/plugins/base-components.js', ssr: true },
     {
       src: `~/plugins/styleguide${process.env.STYLEGUIDE_DEV ? '-dev' : ''}.js`,
       ssr: true,
diff --git a/webapp/package.json b/webapp/package.json
index 4af522143..a4322aebd 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -45,8 +45,13 @@
     "moduleNameMapper": {
       "^@/(.*)$": "<rootDir>/src/$1",
       "^~/(.*)$": "<rootDir>/$1",
-      "\\.(css|less)$": "identity-obj-proxy"
+      "\\.(css|less)$": "identity-obj-proxy",
+      "\\.(svg)$": "<rootDir>/test/fileMock.js"
     },
+    "setupFiles": [
+      "<rootDir>/test/registerContext.js",
+      "<rootDir>/test/testSetup.js"
+    ],
     "testMatch": [
       "**/?(*.)+(spec|test).js?(x)"
     ]
@@ -108,6 +113,7 @@
     "babel-eslint": "~10.0.3",
     "babel-jest": "~24.9.0",
     "babel-loader": "~8.0.6",
+    "babel-plugin-require-context-hook": "^1.0.0",
     "babel-preset-vue": "~2.0.2",
     "core-js": "~2.6.10",
     "css-loader": "~3.2.0",
diff --git a/webapp/pages/admin/categories.vue b/webapp/pages/admin/categories.vue
index 23aa4d606..c72506e64 100644
--- a/webapp/pages/admin/categories.vue
+++ b/webapp/pages/admin/categories.vue
@@ -2,7 +2,7 @@
   <ds-card :header="$t('admin.categories.name')">
     <ds-table :data="Category" :fields="fields" condensed>
       <template slot="icon" slot-scope="scope">
-        <ds-icon :name="scope.row.icon" />
+        <base-icon :name="scope.row.icon" />
       </template>
     </ds-table>
   </ds-card>
diff --git a/webapp/pages/admin/index.spec.js b/webapp/pages/admin/index.spec.js
index 68256aa9d..35e8ba212 100644
--- a/webapp/pages/admin/index.spec.js
+++ b/webapp/pages/admin/index.spec.js
@@ -1,11 +1,10 @@
-import { mount, createLocalVue } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import AdminIndexPage from './index.vue'
-import Styleguide from '@human-connection/styleguide'
+
 import VueApollo from 'vue-apollo'
 
-const localVue = createLocalVue()
+const localVue = global.localVue
 
-localVue.use(Styleguide)
 localVue.use(VueApollo)
 
 describe('admin/index.vue', () => {
diff --git a/webapp/pages/admin/users.spec.js b/webapp/pages/admin/users.spec.js
index f477aab1d..37d155b92 100644
--- a/webapp/pages/admin/users.spec.js
+++ b/webapp/pages/admin/users.spec.js
@@ -1,10 +1,7 @@
-import { mount, createLocalVue } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Users from './users.vue'
-import Styleguide from '@human-connection/styleguide'
 
-const localVue = createLocalVue()
-
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 describe('Users', () => {
   let wrapper
diff --git a/webapp/pages/index.spec.js b/webapp/pages/index.spec.js
index 73e88d972..d5d677af1 100644
--- a/webapp/pages/index.spec.js
+++ b/webapp/pages/index.spec.js
@@ -1,19 +1,9 @@
-import { config, shallowMount, mount, createLocalVue } from '@vue/test-utils'
+import { config, shallowMount, mount } from '@vue/test-utils'
 import PostIndex from './index.vue'
 import Vuex from 'vuex'
-import Styleguide from '@human-connection/styleguide'
-import Filters from '~/plugins/vue-filters'
-import VTooltip from 'v-tooltip'
 import FilterMenu from '~/components/FilterMenu/FilterMenu'
-import InfiniteLoading from '~/plugins/vue-infinite-loading'
 
-const localVue = createLocalVue()
-
-localVue.use(Vuex)
-localVue.use(Styleguide)
-localVue.use(Filters)
-localVue.use(VTooltip)
-localVue.use(InfiniteLoading)
+const localVue = global.localVue
 
 config.stubs['client-only'] = '<span><slot /></span>'
 config.stubs['router-link'] = '<span><slot /></span>'
diff --git a/webapp/pages/moderation/index.vue b/webapp/pages/moderation/index.vue
index f5dd06a57..57c7ccab4 100644
--- a/webapp/pages/moderation/index.vue
+++ b/webapp/pages/moderation/index.vue
@@ -5,17 +5,17 @@
       <!-- Icon -->
       <template slot="type" slot-scope="scope">
         <ds-text color="soft">
-          <ds-icon
+          <base-icon
             v-if="scope.row.type === 'Post'"
             v-tooltip="{ content: $t('report.contribution.type'), placement: 'right' }"
             name="bookmark"
           />
-          <ds-icon
+          <base-icon
             v-else-if="scope.row.type === 'Comment'"
             v-tooltip="{ content: $t('report.comment.type'), placement: 'right' }"
             name="comments"
           />
-          <ds-icon
+          <base-icon
             v-else-if="scope.row.type === 'User'"
             v-tooltip="{ content: $t('report.user.type'), placement: 'right' }"
             name="user"
diff --git a/webapp/pages/notifications/index.spec.js b/webapp/pages/notifications/index.spec.js
index 8d0413063..61af56f63 100644
--- a/webapp/pages/notifications/index.spec.js
+++ b/webapp/pages/notifications/index.spec.js
@@ -1,15 +1,11 @@
-import { config, shallowMount, mount, createLocalVue } from '@vue/test-utils'
+import { config, shallowMount, mount } from '@vue/test-utils'
 import NotificationsPage from './index.vue'
-import Styleguide from '@human-connection/styleguide'
-import VTooltip from 'v-tooltip'
+
 import DropdownFilter from '~/components/DropdownFilter/DropdownFilter'
 import NotificationsTable from '~/components/NotificationsTable/NotificationsTable'
 import Paginate from '~/components/Paginate/Paginate'
 
-const localVue = createLocalVue()
-
-localVue.use(Styleguide)
-localVue.use(VTooltip)
+const localVue = global.localVue
 
 config.stubs['client-only'] = '<span><slot /></span>'
 
diff --git a/webapp/pages/post/_id/_slug/index.spec.js b/webapp/pages/post/_id/_slug/index.spec.js
index b5827db8d..db960bb67 100644
--- a/webapp/pages/post/_id/_slug/index.spec.js
+++ b/webapp/pages/post/_id/_slug/index.spec.js
@@ -1,14 +1,8 @@
-import { config, shallowMount, createLocalVue } from '@vue/test-utils'
+import { config, shallowMount } from '@vue/test-utils'
 import PostSlug from './index.vue'
 import Vuex from 'vuex'
-import Styleguide from '@human-connection/styleguide'
-import Filters from '~/plugins/vue-filters'
 
-const localVue = createLocalVue()
-
-localVue.use(Vuex)
-localVue.use(Styleguide)
-localVue.use(Filters)
+const localVue = global.localVue
 
 config.stubs['client-only'] = '<span><slot /></span>'
 
diff --git a/webapp/pages/post/_id/_slug/more-info.vue b/webapp/pages/post/_id/_slug/more-info.vue
index dae3021aa..fa690c354 100644
--- a/webapp/pages/post/_id/_slug/more-info.vue
+++ b/webapp/pages/post/_id/_slug/more-info.vue
@@ -3,10 +3,7 @@
     <h2 style="margin-bottom: .2em;">{{ $t('post.moreInfo.title') }}</h2>
     <p>{{ $t('post.moreInfo.description') }}</p>
     <ds-space />
-    <h3>
-      <!-- <ds-icon name="compass" /> -->
-      {{ $t('post.moreInfo.titleOfCategoriesSection') }}
-    </h3>
+    <h3>{{ $t('post.moreInfo.titleOfCategoriesSection') }}</h3>
     <hc-category
       v-for="category in post.categories"
       :key="category.id"
diff --git a/webapp/pages/profile/_id/_slug.spec.js b/webapp/pages/profile/_id/_slug.spec.js
index 4dfbbd3e0..e1db5b5b6 100644
--- a/webapp/pages/profile/_id/_slug.spec.js
+++ b/webapp/pages/profile/_id/_slug.spec.js
@@ -1,16 +1,8 @@
-import { config, mount, createLocalVue } from '@vue/test-utils'
+import { config, mount } from '@vue/test-utils'
 import ProfileSlug from './_slug.vue'
-import Vuex from 'vuex'
-import Styleguide from '@human-connection/styleguide'
-import Filters from '~/plugins/vue-filters'
-import InfiniteLoading from '~/plugins/vue-infinite-loading'
 
-const localVue = createLocalVue()
+const localVue = global.localVue
 
-localVue.use(Vuex)
-localVue.use(Styleguide)
-localVue.use(Filters)
-localVue.use(InfiniteLoading)
 localVue.filter('date', d => d)
 
 config.stubs['client-only'] = '<span><slot /></span>'
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index c04bdf4ca..061b8479a 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -34,7 +34,7 @@
               {{ userSlug }}
             </ds-text>
             <ds-text v-if="user.location" align="center" color="soft" size="small">
-              <ds-icon name="map-marker" />
+              <base-icon name="map-marker" />
               {{ user.location.name }}
             </ds-text>
             <ds-text align="center" color="soft" size="small">
diff --git a/webapp/pages/settings/index.spec.js b/webapp/pages/settings/index.spec.js
index 1040f2ad0..ff2781073 100644
--- a/webapp/pages/settings/index.spec.js
+++ b/webapp/pages/settings/index.spec.js
@@ -1,12 +1,8 @@
-import { mount, createLocalVue } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import index from './index.vue'
 import Vuex from 'vuex'
-import Styleguide from '@human-connection/styleguide'
 
-const localVue = createLocalVue()
-
-localVue.use(Vuex)
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 describe('index.vue', () => {
   let store
diff --git a/webapp/pages/settings/my-email-address/enter-nonce.spec.js b/webapp/pages/settings/my-email-address/enter-nonce.spec.js
index abb6a71bf..3e0ed5a4c 100644
--- a/webapp/pages/settings/my-email-address/enter-nonce.spec.js
+++ b/webapp/pages/settings/my-email-address/enter-nonce.spec.js
@@ -1,10 +1,7 @@
-import { mount, createLocalVue } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import EnterNoncePage from './enter-nonce.vue'
-import Styleguide from '@human-connection/styleguide'
 
-const localVue = createLocalVue()
-
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 describe('EnterNoncePage', () => {
   let mocks
diff --git a/webapp/pages/settings/my-email-address/index.spec.js b/webapp/pages/settings/my-email-address/index.spec.js
index 6f99f182a..dd64c1733 100644
--- a/webapp/pages/settings/my-email-address/index.spec.js
+++ b/webapp/pages/settings/my-email-address/index.spec.js
@@ -1,12 +1,8 @@
-import { config, mount, createLocalVue } from '@vue/test-utils'
+import { config, mount } from '@vue/test-utils'
 import EmailSettingsIndexPage from './index.vue'
 import Vuex from 'vuex'
-import Styleguide from '@human-connection/styleguide'
 
-const localVue = createLocalVue()
-
-localVue.use(Vuex)
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 config.stubs['sweetalert-icon'] = '<span><slot /></span>'
 
diff --git a/webapp/pages/settings/my-email-address/verify.spec.js b/webapp/pages/settings/my-email-address/verify.spec.js
index d0f098bb0..e9c2e5a34 100644
--- a/webapp/pages/settings/my-email-address/verify.spec.js
+++ b/webapp/pages/settings/my-email-address/verify.spec.js
@@ -1,12 +1,8 @@
-import { config, mount, createLocalVue } from '@vue/test-utils'
+import { config, mount } from '@vue/test-utils'
 import EmailVerifyPage from './verify.vue'
 import Vuex from 'vuex'
-import Styleguide from '@human-connection/styleguide'
 
-const localVue = createLocalVue()
-
-localVue.use(Vuex)
-localVue.use(Styleguide)
+const localVue = global.localVue
 
 config.stubs['client-only'] = '<span><slot /></span>'
 config.stubs['sweetalert-icon'] = '<span><slot /></span>'
diff --git a/webapp/pages/settings/my-social-media.spec.js b/webapp/pages/settings/my-social-media.spec.js
index 046edf152..b1c9e0649 100644
--- a/webapp/pages/settings/my-social-media.spec.js
+++ b/webapp/pages/settings/my-social-media.spec.js
@@ -1,15 +1,9 @@
-import { mount, createLocalVue } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import flushPromises from 'flush-promises'
 import MySocialMedia from './my-social-media.vue'
 import Vuex from 'vuex'
-import Styleguide from '@human-connection/styleguide'
-import Filters from '~/plugins/vue-filters'
 
-const localVue = createLocalVue()
-
-localVue.use(Vuex)
-localVue.use(Styleguide)
-localVue.use(Filters)
+const localVue = global.localVue
 
 describe('my-social-media.vue', () => {
   let wrapper
diff --git a/webapp/pages/settings/my-social-media.vue b/webapp/pages/settings/my-social-media.vue
index cf8537aa5..677c4423d 100644
--- a/webapp/pages/settings/my-social-media.vue
+++ b/webapp/pages/settings/my-social-media.vue
@@ -25,7 +25,7 @@
               </a>
               <span class="divider">|</span>
               <a name="edit" @click="handleEditSocialMedia(link)">
-                <ds-icon
+                <base-icon
                   :aria-label="$t('actions.edit')"
                   class="icon-button"
                   name="edit"
@@ -33,7 +33,7 @@
                 />
               </a>
               <a name="delete" @click="handleDeleteSocialMedia(link)">
-                <ds-icon
+                <base-icon
                   :aria-label="$t('actions.delete')"
                   class="icon-button"
                   name="trash"
diff --git a/webapp/plugins/base-components.js b/webapp/plugins/base-components.js
new file mode 100644
index 000000000..7f3f7d7b2
--- /dev/null
+++ b/webapp/plugins/base-components.js
@@ -0,0 +1,11 @@
+import Vue from 'vue'
+
+const componentFiles = require.context('../components/_new/generic', true, /Base[a-zA-Z]+\.vue/)
+
+componentFiles.keys().forEach(fileName => {
+  const component = componentFiles(fileName)
+  const componentConfig = component.default || component
+  const componentName = component.name || fileName.replace(/^.+\//, '').replace('.vue', '')
+
+  Vue.component(componentName, componentConfig)
+})
diff --git a/webapp/storybook/config.js b/webapp/storybook/config.js
index 377a71fa8..2631285e1 100644
--- a/webapp/storybook/config.js
+++ b/webapp/storybook/config.js
@@ -22,8 +22,19 @@ Vue.component('v-popover', {
   template: '<div><slot>Popover Content</slot></div>',
 })
 
+// Globally register base components
+const componentFiles = require.context('../components/_new/generic', true, /Base[a-zA-Z]+\.vue/)
+
+componentFiles.keys().forEach(fileName => {
+  const component = componentFiles(fileName)
+  const componentConfig = component.default || component
+  const componentName = component.name || fileName.replace(/^.+\//, '').replace('.vue', '')
+
+  Vue.component(componentName, componentConfig)
+})
+
 // Setup design token addon
-const scssReq = require.context('!!raw-loader!~/view/styles', true, /.\.scss$/)
+const scssReq = require.context('!!raw-loader!~/assets/_new/styles', true, /.\.scss$/)
 const scssTokenFiles = scssReq
   .keys()
   .map(filename => ({ filename, content: scssReq(filename).default }))
diff --git a/webapp/storybook/webpack.config.js b/webapp/storybook/webpack.config.js
index db0a8924c..72c1944c8 100644
--- a/webapp/storybook/webpack.config.js
+++ b/webapp/storybook/webpack.config.js
@@ -23,7 +23,7 @@ module.exports = async ({ config, mode }) => {
               __dirname,
               '../node_modules/@human-connection/styleguide/dist/shared.scss',
             ),
-            path.resolve(__dirname, '../view/styles/tokens.scss'),
+            path.resolve(__dirname, '../assets/_new/styles/tokens.scss'),
           ],
           injector: 'prepend',
         },
@@ -32,6 +32,30 @@ module.exports = async ({ config, mode }) => {
     include: path.resolve(__dirname, '../'),
   })
 
+  // load svgs with vue-svg-loader instead of file-loader
+  const rule = config.module.rules.find(
+    r =>
+      r.test && r.test.toString().includes('svg') && r.loader && r.loader.includes('file-loader'),
+  )
+  rule.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/
+
+  config.module.rules.push({
+    test: /\.svg$/,
+    loader: 'vue-svg-loader',
+    options: {
+      svgo: {
+        plugins: [
+          {
+            removeViewBox: false,
+          },
+          {
+            removeDimensions: true,
+          },
+        ],
+      },
+    },
+  })
+
   config.resolve.alias = {
     ...config.resolve.alias,
     '~~': path.resolve(__dirname, rootDir),
diff --git a/webapp/test/fileMock.js b/webapp/test/fileMock.js
new file mode 100644
index 000000000..0e56c5b5f
--- /dev/null
+++ b/webapp/test/fileMock.js
@@ -0,0 +1 @@
+module.exports = 'test-file-stub'
diff --git a/webapp/test/registerContext.js b/webapp/test/registerContext.js
new file mode 100644
index 000000000..a27ca2f7a
--- /dev/null
+++ b/webapp/test/registerContext.js
@@ -0,0 +1,2 @@
+import registerRequireContextHook from 'babel-plugin-require-context-hook/register'
+registerRequireContextHook()
diff --git a/webapp/test/testSetup.js b/webapp/test/testSetup.js
new file mode 100644
index 000000000..3e0a04645
--- /dev/null
+++ b/webapp/test/testSetup.js
@@ -0,0 +1,16 @@
+import { createLocalVue } from '@vue/test-utils'
+import Vuex from 'vuex'
+import VTooltip from 'v-tooltip'
+import Styleguide from '@human-connection/styleguide'
+import BaseComponents from '~/plugins/base-components'
+import Filters from '~/plugins/vue-filters'
+import InfiniteLoading from '~/plugins/vue-infinite-loading'
+
+global.localVue = createLocalVue()
+
+global.localVue.use(Vuex)
+global.localVue.use(VTooltip)
+global.localVue.use(Styleguide)
+global.localVue.use(BaseComponents)
+global.localVue.use(Filters)
+global.localVue.use(InfiniteLoading)
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index ea4d5dc5a..ba93f8f2a 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -4471,6 +4471,11 @@ babel-plugin-minify-type-constructors@^0.4.3:
   dependencies:
     babel-helper-is-void-0 "^0.4.3"
 
+babel-plugin-require-context-hook@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-require-context-hook/-/babel-plugin-require-context-hook-1.0.0.tgz#3f0e7cce87c338f53639b948632fd4e73834632d"
+  integrity sha512-EMZD1563QUqLhzrqcThk759RhuNVX/ZJdrtGK6drwzgvnR+ARjWyXIHPbu+tUNaMGtPz/gQeAM2M6VUw2UiUeA==
+
 babel-plugin-syntax-jsx@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
@@ -14278,6 +14283,11 @@ serve-static@1.14.1, serve-static@^1.14.1:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.14.1.tgz#666e636dc4f010f7ef29970a88a674320898b2f9"
   integrity sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==
+  dependencies:
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    parseurl "~1.3.3"
+    send "0.17.1"
 
 server-destroy@^1.0.1:
   version "1.0.1"