diff --git a/changelog/unreleased/change-use-remixicons b/changelog/unreleased/change-use-remixicons
new file mode 100644
index 00000000000..778b2a49e4d
--- /dev/null
+++ b/changelog/unreleased/change-use-remixicons
@@ -0,0 +1,7 @@
+Change: Use remixicons for redesign
+
+We've switched the iconset to remixicons to
+fit the new design.
+
+https://github.com/owncloud/web/pull/6142
+https://github.com/owncloud/web/issues/6100
diff --git a/changelog/unreleased/enhancement-update-ods b/changelog/unreleased/enhancement-update-ods
index 26d9e0b8d8a..dd517da2eea 100644
--- a/changelog/unreleased/enhancement-update-ods
+++ b/changelog/unreleased/enhancement-update-ods
@@ -1,6 +1,6 @@
-Enhancement: Update ODS to v12.0.0-alpha5
+Enhancement: Update ODS to v12.0.0-alpha7
 
-We updated the ownCloud Design System to version 12.0.0-alpha5. Please refer to the full changelog in the ODS release (linked) for more details. Summary:
+We updated the ownCloud Design System to version 12.0.0-alpha7. Please refer to the full changelog in the ODS release (linked) for more details. Summary:
 
 - Change - Do not sort in OcTable: https://github.com/owncloud/owncloud-design-system/pull/1825
 - Change - Remove OcAppSideBar component: https://github.com/owncloud/owncloud-design-system/pull/1810
@@ -14,4 +14,5 @@ We updated the ownCloud Design System to version 12.0.0-alpha5. Please refer to
 - Bugfix - Rename GhostElement: https://github.com/owncloud/owncloud-design-system/pull/1845
 
 https://github.com/owncloud/web/pull/6086
-https://github.com/owncloud/owncloud-design-system/releases/tag/v12.0.0-alpha5
+https://github.com/owncloud/web/pull/6142
+https://github.com/owncloud/owncloud-design-system/releases/tag/v12.0.0-alpha7
diff --git a/dev/docker/oc10.web.config.json b/dev/docker/oc10.web.config.json
index f3b3e66e556..f1388aaccec 100644
--- a/dev/docker/oc10.web.config.json
+++ b/dev/docker/oc10.web.config.json
@@ -22,11 +22,11 @@
         "fr": "Fichiers",
         "zh_CN": "文件"
       },
-      "icon": "switch_ui",
+      "icon": "swap-box",
       "url": "http://host.docker.internal:8080/index.php/apps/files"
     },
     {
-      "icon": "application",
+      "icon": "settings-4",
       "menu": "user",
       "target": "_self",
       "title": {
diff --git a/docker-compose.yml b/docker-compose.yml
index 695c3fd2db9..e755ddf182b 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -38,6 +38,7 @@ services:
       - ./dist/img:/mnt/data/apps/web/img
       - ./dist/js:/mnt/data/apps/web/js
       - ./dist/themes:/mnt/data/apps/web/themes
+      - ./dist/icons:/mnt/data/apps/web/icons
       - ./dist/index.html:/mnt/data/apps/web/index.html
       - ./dist/manifest.json:/mnt/data/apps/web/manifest.json
       - ./dist/oidc-callback.html:/mnt/data/apps/web/oidc-callback.html
diff --git a/docs/deployments/oc10-app.md b/docs/deployments/oc10-app.md
index a66954cacf4..c19e5db5e48 100644
--- a/docs/deployments/oc10-app.md
+++ b/docs/deployments/oc10-app.md
@@ -91,7 +91,7 @@ There are a few config values which need to be set in order for ownCloud Web to
       "url": "https://<your-owncloud-server>/index.php/apps/files"
     },
     {
-      "icon": "application",
+      "icon": "settings-4",
       "menu": "user",
       "target": "_self",
       "title": {
@@ -152,7 +152,7 @@ To add new elements in the app switcher, paste the following into the `applicati
         "en": "Custom Groups",
         "de": "Benutzerdefinierte Gruppen" 
       },
-      "icon": "application",
+      "icon": "settings-4",
       "url": "https://<your-owncloud-server>/settings/personal?sectionid=customgroups"
     }
 ```
@@ -166,7 +166,7 @@ Just like adding links to the app switcher, you can also add links to the user m
 
 ```json
     {
-      "icon": "application",
+      "icon": "settings-4",
       "menu": "user",
       "target": "_self",
       "title": {
diff --git a/package.json b/package.json
index 8506b58cd88..0ad02a9bb93 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-typescript": "^8.2.5",
     "@testing-library/dom": "^8.11.0",
-    "@testing-library/jest-dom": "^5.15.0",
+    "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/user-event": "^13.5.0",
     "@testing-library/vue": "^5.8.2",
     "@types/jest": "^26.0.23",
@@ -74,7 +74,7 @@
     "eslint-plugin-jest": "^24.1.3",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-promise": "^5.1.0",
+    "eslint-plugin-promise": "^5.2.0",
     "eslint-plugin-vue": "^7.13.0",
     "eslint-plugin-vuejs-accessibility": "^0.7.1",
     "focus-trap": "^6.4.0",
@@ -82,7 +82,7 @@
     "jest": "^26.6.3",
     "jest-axe": "^4.1.0",
     "jest-fetch-mock": "^3.0.3",
-    "jest-mock-axios": "^4.4.0",
+    "jest-mock-axios": "^4.5.0",
     "jest-serializer-vue": "^2.0.2",
     "jest-svg-transformer": "^1.0.0",
     "join-path": "^1.1.1",
@@ -114,7 +114,7 @@
     "rollup-plugin-vue": "^5.1.4",
     "sync-fetch": "^0.3.1",
     "ts-jest": "^26.5.6",
-    "ts-node": "^10.2.0",
+    "ts-node": "^10.4.0",
     "tslib": "^2.2.0",
     "typescript": "^4.3.2",
     "url-search-params-polyfill": "^8.0.0",
diff --git a/packages/web-app-draw-io/src/index.js b/packages/web-app-draw-io/src/index.js
index 7b72babc072..c46a29895ed 100644
--- a/packages/web-app-draw-io/src/index.js
+++ b/packages/web-app-draw-io/src/index.js
@@ -15,7 +15,7 @@ const routes = [
 const appInfo = {
   name: 'Draw.io',
   id: 'draw-io',
-  icon: 'grid_on',
+  icon: 'grid',
   extensions: [
     {
       extension: 'drawio',
diff --git a/packages/web-app-external/src/components/ErrorScreen.vue b/packages/web-app-external/src/components/ErrorScreen.vue
index 569051bfbed..c75e34c8631 100644
--- a/packages/web-app-external/src/components/ErrorScreen.vue
+++ b/packages/web-app-external/src/components/ErrorScreen.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="uk-text-center">
-    <oc-icon size="xxlarge" name="warning" />
+    <oc-icon size="xxlarge" name="error-warning" fill-type="line" />
     <p v-if="message" class="oc-text-lead">{{ message }}</p>
   </div>
 </template>
diff --git a/packages/web-app-external/tests/unit/components/__snapshots__/ErrorScreen.spec.ts.snap b/packages/web-app-external/tests/unit/components/__snapshots__/ErrorScreen.spec.ts.snap
index e550e41a5ac..f96db4e4f15 100644
--- a/packages/web-app-external/tests/unit/components/__snapshots__/ErrorScreen.spec.ts.snap
+++ b/packages/web-app-external/tests/unit/components/__snapshots__/ErrorScreen.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`The external app error screen component displays an icon and a paragraph 1`] = `
 <div class="uk-text-center">
-  <ocicon-stub size="xxlarge" name="warning"></ocicon-stub>
+  <ocicon-stub size="xxlarge" name="error-warning" fill-type="line"></ocicon-stub>
   <p class="oc-text-lead">Error when loading the application</p>
 </div>
 `;
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index 410599d6ed1..c218eecc8ad 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -83,7 +83,7 @@
                       justify-content="left"
                       @click="showCreateResourceModal"
                     >
-                      <oc-icon name="create_new_folder" />
+                      <oc-icon name="folder-add" />
                       <translate>New folder…</translate>
                     </oc-button>
                   </div>
diff --git a/packages/web-app-files/src/components/AppBar/Upload/FileUpload.vue b/packages/web-app-files/src/components/AppBar/Upload/FileUpload.vue
index ac98182a100..bcc266406e8 100644
--- a/packages/web-app-files/src/components/AppBar/Upload/FileUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/Upload/FileUpload.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <oc-button class="uk-width-1-1" justify-content="left" appearance="raw" @click="triggerUpload">
-      <oc-icon name="file_upload" />
+      <oc-icon name="upload" fill-type="line" />
       <span id="files-file-upload-button" v-translate>Upload File</span>
     </oc-button>
     <input
diff --git a/packages/web-app-files/src/components/AppBar/Upload/FolderUpload.vue b/packages/web-app-files/src/components/AppBar/Upload/FolderUpload.vue
index 1f33bdab98d..19b67f95530 100644
--- a/packages/web-app-files/src/components/AppBar/Upload/FolderUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/Upload/FolderUpload.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <oc-button class="uk-width-1-1" justify-content="left" appearance="raw" @click="triggerUpload">
-      <oc-icon name="cloud_upload" />
+      <oc-icon name="upload-cloud" />
       <span id="files-folder-upload-button" v-translate>Upload Folder</span>
     </oc-button>
     <input
diff --git a/packages/web-app-files/src/components/AppBar/ViewOptions.vue b/packages/web-app-files/src/components/AppBar/ViewOptions.vue
index 7ba6725cff9..4576d680734 100644
--- a/packages/web-app-files/src/components/AppBar/ViewOptions.vue
+++ b/packages/web-app-files/src/components/AppBar/ViewOptions.vue
@@ -10,7 +10,7 @@
       appearance="raw"
       class="oc-py-s oc-mb-xs"
     >
-      <oc-icon name="tune" />
+      <oc-icon name="list-settings" fill-type="line" />
     </oc-button>
     <oc-button
       id="files-toggle-sidebar"
@@ -21,7 +21,7 @@
       class="oc-ml-s oc-py-s oc-mb-xs"
       @click.stop="toggleSidebar"
     >
-      <oc-icon :name="toggleIcon" />
+      <oc-icon :name="toggleIcon" fill-type="line" />
     </oc-button>
     <oc-drop
       drop-id="files-view-options-drop"
@@ -83,7 +83,7 @@ export default {
     },
 
     toggleIcon() {
-      return this.sidebarClosed ? 'chevron_double_left' : 'chevron_double_right'
+      return this.sidebarClosed ? 'arrow-drop-left' : 'arrow-drop-right'
     },
 
     hiddenFilesShownModel: {
diff --git a/packages/web-app-files/src/components/FilesList/QuickActions.vue b/packages/web-app-files/src/components/FilesList/QuickActions.vue
index f696f007157..18e4614e3ac 100644
--- a/packages/web-app-files/src/components/FilesList/QuickActions.vue
+++ b/packages/web-app-files/src/components/FilesList/QuickActions.vue
@@ -10,7 +10,7 @@
       :class="`files-quick-action-${action.id}`"
       @click="action.handler({ item, client: $client, store: $store, $gettext })"
     >
-      <oc-icon :name="action.icon" class="uk-flex" />
+      <oc-icon :name="action.icon" :fill-type="action.iconFillType" class="uk-flex" />
     </oc-button>
   </div>
 </template>
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
index f4230c299fa..2b05dc9595c 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -113,7 +113,7 @@
             resetDropPosition(`context-menu-drop-ref-${resourceDomSelector(item)}`, $event, item)
           "
         >
-          <oc-icon name="more_vert" />
+          <oc-icon name="more-2" />
         </oc-button>
         <oc-drop
           :ref="`context-menu-drop-ref-${resourceDomSelector(item)}`"
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
index e608e099b70..82bbfbd5fe2 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
@@ -36,7 +36,7 @@
           :aria-label="linkSharesLabel"
           @click="expandLinksPanel"
         >
-          <oc-icon name="link" />
+          <oc-icon name="links" />
         </oc-button>
         <p class="oc-my-rm oc-mx-s" v-text="detailSharingInformation" />
       </div>
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
index 94c48b43c4f..d391fbb076b 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
@@ -2,7 +2,7 @@
   <div id="oc-file-details-multiple-sidebar">
     <div class="files-preview oc-mb">
       <div class="files-preview-body">
-        <oc-icon class="preview-icon" size="xxlarge" variation="passive" name="file_copy" />
+        <oc-icon class="preview-icon" size="xxlarge" variation="passive" name="file-copy" />
         <p class="preview-text" data-testid="selectedFilesText" v-text="selectedFilesString" />
       </div>
     </div>
diff --git a/packages/web-app-files/src/components/SideBar/Links/CopyToClipboardButton.vue b/packages/web-app-files/src/components/SideBar/Links/CopyToClipboardButton.vue
index c9f5d2e1c90..c43f7c6ba7f 100644
--- a/packages/web-app-files/src/components/SideBar/Links/CopyToClipboardButton.vue
+++ b/packages/web-app-files/src/components/SideBar/Links/CopyToClipboardButton.vue
@@ -8,10 +8,10 @@
     <oc-icon
       v-if="copied"
       key="oc-copy-to-clipboard-copied"
-      name="ready"
+      name="checkbox-circle"
       class="_clipboard-success-animation"
     />
-    <oc-icon v-else key="oc-copy-to-clipboard-copy" name="copy_to_clipboard" />
+    <oc-icon v-else key="oc-copy-to-clipboard-copy" name="clipboard" />
   </oc-button>
 </template>
 
diff --git a/packages/web-app-files/src/components/SideBar/Links/PublicLinks/LinkActions.vue b/packages/web-app-files/src/components/SideBar/Links/PublicLinks/LinkActions.vue
index 2b3fec32a70..efa986e7ecf 100644
--- a/packages/web-app-files/src/components/SideBar/Links/PublicLinks/LinkActions.vue
+++ b/packages/web-app-files/src/components/SideBar/Links/PublicLinks/LinkActions.vue
@@ -10,7 +10,7 @@
         class="oc-files-file-link-edit oc-mr-xs"
         @click="editLink"
       >
-        <oc-icon name="edit" />
+        <oc-icon name="pencil" />
       </oc-button>
       <oc-button
         v-oc-tooltip="deleteButtonLabel"
@@ -19,7 +19,7 @@
         class="oc-files-file-link-delete"
         @click="$_removeLink"
       >
-        <oc-icon name="delete" />
+        <oc-icon name="delete-bin-5" />
       </oc-button>
     </template>
   </div>
diff --git a/packages/web-app-files/src/components/SideBar/Links/PublicLinks/LinkEdit.vue b/packages/web-app-files/src/components/SideBar/Links/PublicLinks/LinkEdit.vue
index a2ee5458529..5503b6ec693 100644
--- a/packages/web-app-files/src/components/SideBar/Links/PublicLinks/LinkEdit.vue
+++ b/packages/web-app-files/src/components/SideBar/Links/PublicLinks/LinkEdit.vue
@@ -63,7 +63,7 @@
               >
                 Expires %{expires}
               </translate>
-              <oc-icon name="expand_more" />
+              <oc-icon name="arrow-down-s" fill-type="line" />
             </oc-button>
           </template>
         </oc-datepicker>
diff --git a/packages/web-app-files/src/components/SideBar/Links/PublicLinks/LinkInfo.vue b/packages/web-app-files/src/components/SideBar/Links/PublicLinks/LinkInfo.vue
index 3a990a53930..934772b7b5a 100644
--- a/packages/web-app-files/src/components/SideBar/Links/PublicLinks/LinkInfo.vue
+++ b/packages/web-app-files/src/components/SideBar/Links/PublicLinks/LinkInfo.vue
@@ -36,7 +36,7 @@
           :data-testid="`files-link-id-${link.id}-expiration-date`"
           :aria-label="expirationDateRelative + ' (' + expirationDate + ')'"
         >
-          <oc-icon name="text-calendar" />
+          <oc-icon name="calendar-2" fill-type="line" />
           <translate :translate-params="{ expires: expirationDateRelative }">
             Expires %{expires}
           </translate>
@@ -55,7 +55,7 @@
           class="oc-files-file-link-via"
           :to="viaRouterParams"
         >
-          <oc-icon name="exit_to_app" />
+          <oc-icon name="close" />
           <span class="uk-text-truncate files-file-links-link-via-label" v-text="viaLabel" />
         </oc-tag>
       </div>
@@ -90,16 +90,16 @@ export default {
     roleTagIcon() {
       switch (this.link.description) {
         case 'Viewer':
-          return 'remove_red_eye'
+          return 'eye'
 
         case 'Contributor':
-          return 'edit'
+          return 'pencil'
 
         case 'Editor':
-          return 'edit'
+          return 'pencil'
 
         case 'Uploader':
-          return 'file_upload'
+          return 'file-add'
 
         default:
           return 'key'
diff --git a/packages/web-app-files/src/components/SideBar/NoSelection.vue b/packages/web-app-files/src/components/SideBar/NoSelection.vue
index c7a47d56e63..37deea24636 100644
--- a/packages/web-app-files/src/components/SideBar/NoSelection.vue
+++ b/packages/web-app-files/src/components/SideBar/NoSelection.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="oc-no-selection" class="uk-text-center oc-mt-xl">
-    <oc-icon size="xxlarge" name="select_items" />
+    <oc-icon size="xxlarge" name="drag-drop" fill-type="line" />
     <p data-testid="selectedFilesText" v-text="selectedFilesString" />
   </div>
 </template>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
index bd1ecb2c34b..2b49d32dca9 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
@@ -1,7 +1,7 @@
 <template>
   <span class="uk-flex uk-flex-middle">
     <oc-button :id="editShareBtnId" class="collaborator-edit-dropdown-options-btn" appearance="raw">
-      <oc-icon name="more_vert" />
+      <oc-icon name="more-2" />
     </oc-button>
     <oc-drop
       ref="expirationDateDrop"
diff --git a/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue b/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
index e5539f5f3c6..7843101f14f 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
@@ -25,7 +25,7 @@
             :is-tooltip-displayed="false"
             class="sharee-avatars"
           />
-          <oc-icon v-else name="chevron_up" />
+          <oc-icon v-else name="arrow-up-s" />
         </oc-button>
       </div>
       <template v-if="showShareesList && hasSharees">
diff --git a/packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/ExpirationDatepicker.vue b/packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/ExpirationDatepicker.vue
index a2d676d056b..96c854f42ac 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/ExpirationDatepicker.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/ExpirationDatepicker.vue
@@ -27,7 +27,7 @@
           >
             Expires %{expires}
           </translate>
-          <oc-icon v-if="!dateCurrent" name="expand_more" />
+          <oc-icon v-if="!dateCurrent" name="arrow-down-s" />
         </oc-button>
       </template>
     </oc-datepicker>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/RoleDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/RoleDropdown.vue
index 11528d3ea43..1e02aa84780 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/RoleDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/RoleDropdown.vue
@@ -8,7 +8,7 @@
     >
       <span v-if="!existingRole" v-text="inviteLabel" />
       <span v-else>{{ $gettext(selectedRole.label) }}</span>
-      <oc-icon name="expand_more" />
+      <oc-icon name="arrow-down-s" />
     </oc-button>
     <oc-drop
       ref="rolesDrop"
diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index 5761ad11230..8e96373941e 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -34,7 +34,7 @@
             :aria-label="accessibleLabelBack"
             @click="closePanel"
           >
-            <oc-icon name="chevron_left" />
+            <oc-icon name="arrow-left-s" fill-type="line" />
             {{ defaultPanel.component.title($gettext) }}
           </oc-button>
 
@@ -74,7 +74,7 @@
               >
                 <oc-icon :name="panelSelect.icon" />
                 {{ panelSelect.component.title($gettext) }}
-                <oc-icon name="chevron_right" />
+                <oc-icon name="arrow-right-s" fill-type="line" />
               </oc-button>
             </div>
           </template>
diff --git a/packages/web-app-files/src/components/SideBar/Versions/FileVersions.vue b/packages/web-app-files/src/components/SideBar/Versions/FileVersions.vue
index ec83ecd595e..c5e9b56cb49 100644
--- a/packages/web-app-files/src/components/SideBar/Versions/FileVersions.vue
+++ b/packages/web-app-files/src/components/SideBar/Versions/FileVersions.vue
@@ -26,7 +26,7 @@
                 :aria-label="$gettext('Restore older version')"
                 @click="revertVersion(item)"
               >
-                <oc-icon name="restore" />
+                <oc-icon name="restart" fill-type="line" />
               </oc-button>
             </div>
           </oc-td>
@@ -39,7 +39,7 @@
                 :aria-label="$gettext('Download older version')"
                 @click="downloadVersion(item)"
               >
-                <oc-icon name="cloud_download" />
+                <oc-icon name="download-cloud" fill-type="line" />
               </oc-button>
             </div>
           </oc-td>
diff --git a/packages/web-app-files/src/components/Upload/DetailsWidget.vue b/packages/web-app-files/src/components/Upload/DetailsWidget.vue
index 1e4a98e6ad6..7570c2b913c 100644
--- a/packages/web-app-files/src/components/Upload/DetailsWidget.vue
+++ b/packages/web-app-files/src/components/Upload/DetailsWidget.vue
@@ -2,7 +2,7 @@
   <ul class="uk-list uk-list-divider oc-ml-rm oc-mr-rm">
     <li v-for="item in items" :key="item.id">
       <div class="uk-flex uk-flex-middle">
-        <oc-icon name="file_copy" class="oc-mr-s" />
+        <oc-icon name="file-copy2" class="oc-mr-s" />
         <div class="uk-width-expand">
           <div class="uk-flex">
             <div class="oc-text-bold uk-width-expand uk-text-truncate upload-details-item-name">
diff --git a/packages/web-app-files/src/components/Upload/ProgressBar.vue b/packages/web-app-files/src/components/Upload/ProgressBar.vue
index ad39b268888..b5bb02058cd 100644
--- a/packages/web-app-files/src/components/Upload/ProgressBar.vue
+++ b/packages/web-app-files/src/components/Upload/ProgressBar.vue
@@ -19,7 +19,11 @@
       :aria-label="$gettext('Click row to toggle upload progress details')"
       @click.native="$_toggleExpanded"
     >
-      <oc-icon class="uk-width-auto" :name="expanded ? 'expand_less' : 'expand_more'" />
+      <oc-icon
+        class="uk-width-auto"
+        :name="expanded ? 'arrow-up-s' : 'arrow-down-s'"
+        fill-type="line"
+      />
       <div class="uk-width-expand uk-text-truncate">
         <span
           v-if="count === 1"
diff --git a/packages/web-app-files/src/fileSideBars.js b/packages/web-app-files/src/fileSideBars.js
index 537051f7f10..c1b316ab033 100644
--- a/packages/web-app-files/src/fileSideBars.js
+++ b/packages/web-app-files/src/fileSideBars.js
@@ -12,7 +12,7 @@ export default [
   // Only allow `actions` panel on trashbin route for now.
   ({ rootFolder }) => ({
     app: 'no-selection-item',
-    icon: 'info_outline',
+    icon: 'questionnaire-line',
     component: NoSelection,
     default: () => true,
     get enabled() {
@@ -21,7 +21,7 @@ export default [
   }),
   ({ router, multipleSelection, rootFolder }) => ({
     app: 'details-item',
-    icon: 'info_outline',
+    icon: 'questionnaire-line',
     component: FileDetails,
     default: !isLocationCommonActive(router, 'files-common-trash'),
     get enabled() {
@@ -32,7 +32,7 @@ export default [
   }),
   ({ multipleSelection, rootFolder }) => ({
     app: 'details-multiple-item',
-    icon: 'info_outline',
+    icon: 'questionnaire-line',
     component: FileDetailsMultiple,
     default: () => true,
     get enabled() {
@@ -42,7 +42,7 @@ export default [
   ({ router, multipleSelection, rootFolder }) => ({
     app: 'actions-item',
     component: FileActions,
-    icon: 'slideshow',
+    icon: 'slideshow-2',
     default: isLocationCommonActive(router, 'files-common-trash'),
     get enabled() {
       return !multipleSelection && !rootFolder
@@ -66,7 +66,7 @@ export default [
   }),
   ({ capabilities, router, multipleSelection, rootFolder }) => ({
     app: 'links-item',
-    icon: 'link',
+    icon: 'links',
     component: FileLinks,
     get enabled() {
       if (multipleSelection || rootFolder) return false
@@ -82,7 +82,7 @@ export default [
   }),
   ({ capabilities, highlightedFile, router, multipleSelection, rootFolder }) => ({
     app: 'versions-item',
-    icon: 'file_version',
+    icon: 'git-branch',
     component: FileVersions,
     get enabled() {
       if (multipleSelection || rootFolder) return false
diff --git a/packages/web-app-files/src/fileTypeIconMappings.json b/packages/web-app-files/src/fileTypeIconMappings.json
index e012e230316..b4f4633e3d6 100644
--- a/packages/web-app-files/src/fileTypeIconMappings.json
+++ b/packages/web-app-files/src/fileTypeIconMappings.json
@@ -1,99 +1,99 @@
 {
-  "7z": "package-x-generic",
+  "7z": "file-zip",
   "accdb": "file",
   "ai": "image",
-  "apk": "package-x-generic",
-  "bash": "text-code",
-  "bz2": "package-x-generic",
-  "cb7": "text",
-  "cba": "text",
-  "cbr": "text",
-  "cbt": "text",
-  "cbtc": "text",
-  "cbz": "text",
-  "cc": "text-code",
+  "apk": "file-zip",
+  "bash": "file-code",
+  "bz2": "file-zip",
+  "cb7": "file-text",
+  "cba": "file-text",
+  "cbr": "file-text",
+  "cbt": "file-text",
+  "cbtc": "file-text",
+  "cbz": "file-text",
+  "cc": "file-code",
   "cdr": "image",
-  "cpp": "text-code",
-  "css": "text-code",
-  "csv": "x-office-spreadsheet",
-  "cvbdl": "text",
-  "c": "text-code",
-  "c++": "text-code",
-  "deb": "package-x-generic",
-  "doc": "x-office-document",
-  "docm": "x-office-document",
-  "docx": "x-office-document",
-  "dot": "x-office-document",
-  "dotx": "x-office-document",
-  "eml": "text",
+  "cpp": "file-code",
+  "css": "file-code",
+  "csv": "file-excel-2",
+  "cvbdl": "file-text",
+  "c": "file-code",
+  "c++": "file-code",
+  "deb": "file-zip",
+  "doc": "file-word-2",
+  "docm": "file-word-2",
+  "docx": "file-word-2",
+  "dot": "file-word-2",
+  "dotx": "file-word-2",
+  "eml": "file-text",
   "eot": "image",
-  "epub": "text",
+  "epub": "file-text",
   "eps": "image",
-  "gz": "package-x-generic",
-  "gzip": "package-x-generic",
-  "h": "text-code",
-  "hh": "text-code",
-  "hpp": "text-code",
-  "html": "text-code",
-  "htm": "text-code",
-  "java": "text-code",
-  "js": "text-code",
-  "json": "text-code",
+  "gz": "file-zip",
+  "gzip": "file-zip",
+  "h": "file-code",
+  "hh": "file-code",
+  "hpp": "file-code",
+  "html": "file-code",
+  "htm": "file-code",
+  "java": "file-code",
+  "js": "file-code",
+  "json": "file-code",
   "jpeg": "image",
   "jpg": "image",
-  "lwp": "x-office-document",
+  "lwp": "file-word-2",
   "mdb": "file",
-  "odp": "x-office-presentation",
-  "ods": "x-office-spreadsheet",
-  "odt": "x-office-document",
-  "one": "x-office-document",
+  "odp": "file-ppt-2",
+  "ods": "file-excel-2",
+  "odt": "file-word-2",
+  "one": "file-word-2",
   "otf": "image",
-  "pdf": "application-pdf",
+  "pdf": "file-pdf",
   "pfb": "image",
-  "php": "text-code",
-  "pl": "text-code",
+  "php": "file-code",
+  "pl": "file-code",
   "png": "image",
-  "pot": "x-office-presentation",
-  "potm": "x-office-presentation",
-  "potx": "x-office-presentation",
-  "ppa": "x-office-presentation",
-  "ppam": "x-office-presentation",
-  "pps": "x-office-presentation",
-  "ppsm": "x-office-presentation",
-  "ppsx": "x-office-presentation",
-  "ppt": "x-office-presentation",
-  "pptm": "x-office-presentation",
-  "pptx": "x-office-presentation",
+  "pot": "file-ppt-2",
+  "potm": "file-ppt-2",
+  "potx": "file-ppt-2",
+  "ppa": "file-ppt-2",
+  "ppam": "file-ppt-2",
+  "pps": "file-ppt-2",
+  "ppsm": "file-ppt-2",
+  "ppsx": "file-ppt-2",
+  "ppt": "file-ppt-2",
+  "pptm": "file-ppt-2",
+  "pptx": "file-ppt-2",
   "ps": "image",
   "psd": "image",
-  "py": "text-code",
-  "rar": "package-x-generic",
+  "py": "file-code",
+  "rar": "file-zip",
   "rss": "file",
-  "sh-lib": "text-code",
-  "sh": "text-code",
+  "sh-lib": "file-code",
+  "sh": "file-code",
   "swf": "file",
-  "tar": "package-x-generic",
-  "tar.bz2": "package-x-generic",
-  "tar.gz": "package-x-generic",
-  "tbz2": "package-x-generic",
-  "tex": "text",
-  "tgz": "package-x-generic",
+  "tar": "file-zip",
+  "tar.bz2": "file-zip",
+  "tar.gz": "file-zip",
+  "tbz2": "file-zip",
+  "tex": "file-text",
+  "tgz": "file-zip",
   "ttf": "image",
-  "vsd": "x-office-document",
+  "vsd": "file-word-2",
   "woff": "image",
-  "wpd": "x-office-document",
+  "wpd": "file-word-2",
   "xcf": "image",
-  "xla": "x-office-spreadsheet",
-  "xlam": "x-office-spreadsheet",
-  "xls": "x-office-spreadsheet",
-  "xlsb": "x-office-spreadsheet",
-  "xlsm": "x-office-spreadsheet",
-  "xlsx": "x-office-spreadsheet",
-  "xlt": "x-office-spreadsheet",
-  "xltm": "x-office-spreadsheet",
-  "xltx": "x-office-spreadsheet",
-  "xml": "text-code",
-  "yaml": "text-code",
-  "yml": "text-code",
-  "zip": "package-x-generic"
+  "xla": "file-excel-2",
+  "xlam": "file-excel-2",
+  "xls": "file-excel-2",
+  "xlsb": "file-excel-2",
+  "xlsm": "file-excel-2",
+  "xlsx": "file-excel-2",
+  "xlt": "file-excel-2",
+  "xltm": "file-excel-2",
+  "xltx": "file-excel-2",
+  "xml": "file-code",
+  "yaml": "file-code",
+  "yml": "file-code",
+  "zip": "file-zip"
 }
diff --git a/packages/web-app-files/src/helpers/statusIndicators.js b/packages/web-app-files/src/helpers/statusIndicators.js
index f46d4cdf678..a34d32059a2 100644
--- a/packages/web-app-files/src/helpers/statusIndicators.js
+++ b/packages/web-app-files/src/helpers/statusIndicators.js
@@ -96,6 +96,7 @@ export const getIndicators = (resource, sharesTree) => {
       label: $gettext('Show invited people'),
       visible: isUserShare(resource, sharesTree),
       icon: 'group',
+      fillType: 'fill',
       target: 'sharing-item',
       type: isDirectUserShare(resource) ? 'user-direct' : 'user-indirect',
       handler: indicatorHandler
@@ -105,7 +106,8 @@ export const getIndicators = (resource, sharesTree) => {
       accessibleDescription: shareLinkDescribedBy(resource, sharesTree),
       label: $gettext('Show links'),
       visible: isLinkShare(resource, sharesTree),
-      icon: 'link',
+      icon: 'links',
+      fillType: 'fill',
       target: 'links-item',
       type: isDirectLinkShare(resource) ? 'link-direct' : 'link-indirect',
       handler: indicatorHandler
diff --git a/packages/web-app-files/src/index.js b/packages/web-app-files/src/index.js
index 2296fbdbef1..6b61492a2de 100644
--- a/packages/web-app-files/src/index.js
+++ b/packages/web-app-files/src/index.js
@@ -37,6 +37,7 @@ const navItems = [
   {
     name: $gettext('All files'),
     iconMaterial: appInfo.icon,
+    fillType: 'fill',
     route: {
       path: `/${appInfo.id}/spaces/`
     }
@@ -44,6 +45,7 @@ const navItems = [
   {
     name: $gettext('Favorites'),
     iconMaterial: 'star',
+    fillType: 'fill',
     route: {
       path: `/${appInfo.id}/favorites`
     },
@@ -54,6 +56,7 @@ const navItems = [
   {
     name: $gettext('Shared with me'),
     iconMaterial: 'shared-with-me',
+    fillType: 'none',
     route: {
       path: `/${appInfo.id}/shares/with-me`
     }
@@ -61,6 +64,7 @@ const navItems = [
   {
     name: $gettext('Shared with others'),
     iconMaterial: 'shared-with-others',
+    fillType: 'none',
     route: {
       path: `/${appInfo.id}/shares/with-others`
     }
@@ -68,13 +72,15 @@ const navItems = [
   {
     name: $gettext('Shared via link'),
     iconMaterial: 'link',
+    fillType: 'none',
     route: {
       path: `/${appInfo.id}/shares/via-link`
     }
   },
   {
     name: $gettext('Deleted files'),
-    iconMaterial: 'delete',
+    iconMaterial: 'delete-bin-5',
+    fillType: 'fill',
     route: {
       path: `/${appInfo.id}/trash`
     },
diff --git a/packages/web-app-files/src/mixins.js b/packages/web-app-files/src/mixins.js
index ce1fde5fee5..422be4b7c4a 100644
--- a/packages/web-app-files/src/mixins.js
+++ b/packages/web-app-files/src/mixins.js
@@ -137,7 +137,7 @@ export default {
 
       const modal = {
         variation: isVersioningEnabled ? 'passive' : 'danger',
-        icon: 'cloud_upload',
+        icon: 'upload-cloud',
         title,
         message: isVersioningEnabled
           ? this.$gettext('Do you want to create a new version?')
diff --git a/packages/web-app-files/src/mixins/actions/copy.js b/packages/web-app-files/src/mixins/actions/copy.js
index 1bbd71fbb45..850dc2a4a34 100644
--- a/packages/web-app-files/src/mixins/actions/copy.js
+++ b/packages/web-app-files/src/mixins/actions/copy.js
@@ -11,7 +11,7 @@ export default {
       return [
         {
           name: 'copy',
-          icon: 'file_copy',
+          icon: 'file-copy-2',
           handler: this.$_copy_trigger,
           label: () =>
             this.$pgettext('Action in the files list row to initiate copying resources', 'Copy'),
diff --git a/packages/web-app-files/src/mixins/actions/declineShare.js b/packages/web-app-files/src/mixins/actions/declineShare.js
index 7a72f11ac36..3bc06dbe8ed 100644
--- a/packages/web-app-files/src/mixins/actions/declineShare.js
+++ b/packages/web-app-files/src/mixins/actions/declineShare.js
@@ -11,7 +11,7 @@ export default {
       return [
         {
           name: 'decline-share',
-          icon: 'not_interested',
+          icon: 'close',
           handler: this.$_declineShare_trigger,
           label: ({ resources }) =>
             this.$ngettext('Decline share', 'Decline shares', resources.length),
diff --git a/packages/web-app-files/src/mixins/actions/delete.js b/packages/web-app-files/src/mixins/actions/delete.js
index df3e8c44e42..adb96458ea9 100644
--- a/packages/web-app-files/src/mixins/actions/delete.js
+++ b/packages/web-app-files/src/mixins/actions/delete.js
@@ -14,7 +14,7 @@ export default {
       return [
         {
           name: 'delete',
-          icon: 'delete',
+          icon: 'delete-bin-5',
           label: () => this.$gettext('Delete'),
           handler: this.$_delete_trigger,
           isEnabled: ({ resources }) => {
@@ -39,7 +39,7 @@ export default {
         {
           // this menu item is ONLY for the trashbin (permanently delete a file/folder)
           name: 'delete-permanent',
-          icon: 'delete',
+          icon: 'delete-bin-5',
           label: () => this.$gettext('Delete'),
           handler: this.$_delete_trigger,
           isEnabled: ({ resources }) => {
diff --git a/packages/web-app-files/src/mixins/actions/downloadArchive.js b/packages/web-app-files/src/mixins/actions/downloadArchive.js
index 65ed6ada4ee..ecf03cd982b 100644
--- a/packages/web-app-files/src/mixins/actions/downloadArchive.js
+++ b/packages/web-app-files/src/mixins/actions/downloadArchive.js
@@ -14,7 +14,7 @@ export default {
       return [
         {
           name: 'download-archive',
-          icon: 'archive',
+          icon: 'folder-download',
           handler: this.$_downloadArchive_trigger,
           label: () => {
             return this.$gettext('Download')
diff --git a/packages/web-app-files/src/mixins/actions/downloadFile.js b/packages/web-app-files/src/mixins/actions/downloadFile.js
index 82caa487f48..e8aaba89d49 100644
--- a/packages/web-app-files/src/mixins/actions/downloadFile.js
+++ b/packages/web-app-files/src/mixins/actions/downloadFile.js
@@ -10,7 +10,7 @@ export default {
       return [
         {
           name: 'delete-file',
-          icon: 'file_download',
+          icon: 'file-download',
           handler: this.$_downloadFile_trigger,
           label: () => {
             return this.$gettext('Download')
diff --git a/packages/web-app-files/src/mixins/actions/emptyTrashBin.js b/packages/web-app-files/src/mixins/actions/emptyTrashBin.js
index a2ba20f1f56..bb72cde4d51 100644
--- a/packages/web-app-files/src/mixins/actions/emptyTrashBin.js
+++ b/packages/web-app-files/src/mixins/actions/emptyTrashBin.js
@@ -8,7 +8,7 @@ export default {
       return [
         {
           name: 'empty-trash-bin',
-          icon: 'delete',
+          icon: 'delete-bin-5',
           label: () => this.$gettext('Empty trash bin'),
           handler: this.$_emptyTrashBin_trigger,
           isEnabled: ({ resources }) => {
diff --git a/packages/web-app-files/src/mixins/actions/move.js b/packages/web-app-files/src/mixins/actions/move.js
index 752abffb034..41f9dea4dc3 100644
--- a/packages/web-app-files/src/mixins/actions/move.js
+++ b/packages/web-app-files/src/mixins/actions/move.js
@@ -12,7 +12,7 @@ export default {
       return [
         {
           name: 'move',
-          icon: 'folder-move',
+          icon: 'folder-shared',
           handler: this.$_move_trigger,
           label: () =>
             this.$pgettext('Action in the files list row to initiate moving resources', 'Move'),
diff --git a/packages/web-app-files/src/mixins/actions/rename.js b/packages/web-app-files/src/mixins/actions/rename.js
index eafa52e34ee..2468c6d789d 100644
--- a/packages/web-app-files/src/mixins/actions/rename.js
+++ b/packages/web-app-files/src/mixins/actions/rename.js
@@ -13,7 +13,7 @@ export default {
       return [
         {
           name: 'rename',
-          icon: 'edit',
+          icon: 'pencil',
           label: () => {
             return this.$gettext('Rename')
           },
diff --git a/packages/web-app-files/src/mixins/actions/restore.js b/packages/web-app-files/src/mixins/actions/restore.js
index 963533e2782..05ee1193ca3 100644
--- a/packages/web-app-files/src/mixins/actions/restore.js
+++ b/packages/web-app-files/src/mixins/actions/restore.js
@@ -8,7 +8,7 @@ export default {
       return [
         {
           name: 'restore',
-          icon: 'restore',
+          icon: 'arrow-go-back',
           label: () => this.$gettext('Restore'),
           handler: this.$_restore_trigger,
           isEnabled: ({ resources }) => {
diff --git a/packages/web-app-files/src/mixins/actions/showDetails.js b/packages/web-app-files/src/mixins/actions/showDetails.js
index 9ad80813adc..8e380582ed4 100644
--- a/packages/web-app-files/src/mixins/actions/showDetails.js
+++ b/packages/web-app-files/src/mixins/actions/showDetails.js
@@ -7,7 +7,7 @@ export default {
       return [
         {
           name: 'show-details',
-          icon: 'info_outline',
+          icon: 'information',
           label: () => this.$gettext('Details'),
           handler: this.$_showDetails_trigger,
           // we don't have details in the trashbin, yet.
diff --git a/packages/web-app-files/src/mixins/deleteResources.js b/packages/web-app-files/src/mixins/deleteResources.js
index 3a75cde5891..068c6b0ae2c 100644
--- a/packages/web-app-files/src/mixins/deleteResources.js
+++ b/packages/web-app-files/src/mixins/deleteResources.js
@@ -193,7 +193,7 @@ export default {
 
       const modal = {
         variation: 'danger',
-        icon: 'warning',
+        icon: 'alarm-warning',
         title: this.$_deleteResources_dialogTitle,
         message: this.$_deleteResources_dialogMessage,
         cancelText: this.$gettext('Cancel'),
diff --git a/packages/web-app-files/src/quickActions.js b/packages/web-app-files/src/quickActions.js
index 905513a7b45..7e00a67e7a7 100644
--- a/packages/web-app-files/src/quickActions.js
+++ b/packages/web-app-files/src/quickActions.js
@@ -55,14 +55,16 @@ export default {
   collaborators: {
     id: 'collaborators',
     label: ($gettext) => $gettext('Add people'),
-    icon: 'group-add',
+    icon: 'group',
+    iconFillType: 'fill',
     handler: openNewCollaboratorsPanel,
     displayed: canShare
   },
   publicLink: {
     id: 'public-link',
     label: ($gettext) => $gettext('Create and copy public link'),
-    icon: 'link-add',
+    icon: 'links',
+    iconFillType: 'fill',
     handler: createPublicLink,
     displayed: canShare
   }
diff --git a/packages/web-app-files/src/views/FilesDrop.vue b/packages/web-app-files/src/views/FilesDrop.vue
index 586840f72c9..fe6caddd16c 100644
--- a/packages/web-app-files/src/views/FilesDrop.vue
+++ b/packages/web-app-files/src/views/FilesDrop.vue
@@ -19,7 +19,7 @@
             @vdropzone-file-added="dropZoneFileAdded"
           >
             <div class="uk-flex uk-flex-middle uk-flex-center uk-placeholder">
-              <oc-icon name="file_upload" />
+              <oc-icon name="file-upload" />
               <translate>Drop files here to upload or click to select file</translate>
             </div>
           </vue-dropzone>
@@ -39,13 +39,13 @@
                 <oc-td width="shrink" class="oc-pr-rm uk-preserve-width">
                   <oc-icon
                     v-if="file.status === 'done'"
-                    name="ready"
+                    name="checkbox-circle"
                     size="small"
                     variation="success"
                   />
                   <oc-icon
                     v-if="file.status === 'error'"
-                    name="info"
+                    name="information"
                     size="small"
                     variation="danger"
                   />
diff --git a/packages/web-app-files/src/views/SharedWithMe.vue b/packages/web-app-files/src/views/SharedWithMe.vue
index 3e4b4d15494..7b06e46be29 100644
--- a/packages/web-app-files/src/views/SharedWithMe.vue
+++ b/packages/web-app-files/src/views/SharedWithMe.vue
@@ -43,7 +43,7 @@
                 class="file-row-share-decline oc-ml-s"
                 @click.stop="$_declineShare_trigger({ resources: [resource] })"
               >
-                <oc-icon size="small" name="not_interested" />
+                <oc-icon size="small" name="close" />
                 <translate>Decline</translate>
               </oc-button>
             </div>
@@ -65,7 +65,10 @@
                 @click="togglePendingShowMore"
               >
                 {{ pendingToggleMoreLabel }}
-                <oc-icon :name="'chevron_' + (showMorePending ? 'up' : 'down')" />
+                <oc-icon
+                  :name="'arrow-' + (showMorePending ? 'up' : 'down') + '-s'"
+                  fill-type="line"
+                />
               </oc-button>
             </div>
           </template>
@@ -135,7 +138,7 @@
               class="file-row-share-status-decline"
               @click.stop="$_declineShare_trigger({ resources: [resource] })"
             >
-              <oc-icon size="small" name="not_interested" />
+              <oc-icon size="small" name="close" />
               <translate>Decline</translate>
             </oc-button>
           </div>
diff --git a/packages/web-app-files/tests/__fixtures__/fileActions.js b/packages/web-app-files/tests/__fixtures__/fileActions.js
index 831f3b5ee17..cbc473d8a87 100644
--- a/packages/web-app-files/tests/__fixtures__/fileActions.js
+++ b/packages/web-app-files/tests/__fixtures__/fileActions.js
@@ -12,12 +12,12 @@ const meta = {
   'draw-io': {
     name: 'Draw.io',
     id: 'draw-io',
-    icon: 'grid_on'
+    icon: 'grid'
   },
   'markdown-editor': {
     name: 'MarkdownEditor',
     id: 'markdown-editor',
-    icon: 'text'
+    icon: 'file-text'
   }
 }
 
@@ -63,12 +63,12 @@ const sideBars = [
   {
     app: 'details-item',
     enabled: jest.fn(),
-    icon: 'info_outline'
+    icon: 'information'
   },
   {
     app: 'actions-item',
     enabled: jest.fn(),
-    icon: 'info_outline'
+    icon: 'information'
   }
 ]
 
@@ -87,7 +87,7 @@ exports.apps = {
 const fileActions = {
   download: {
     name: 'download-file',
-    icon: 'file_download',
+    icon: 'file-download',
     handler: jest.fn(),
     label: () => 'Download',
     componentType: 'oc-button',
@@ -96,7 +96,7 @@ const fileActions = {
   },
   copy: {
     name: 'copy',
-    icon: 'file_copy',
+    icon: 'file-copy',
     handler: jest.fn(),
     label: () => 'Copy',
     componentType: 'oc-button',
@@ -105,7 +105,7 @@ const fileActions = {
   },
   rename: {
     name: 'rename',
-    icon: 'edit',
+    icon: 'pencil',
     handler: jest.fn(),
     label: () => 'Rename',
     componentType: 'oc-button',
@@ -114,7 +114,7 @@ const fileActions = {
   },
   move: {
     name: 'move',
-    icon: 'folder-move',
+    icon: 'folder-shared',
     handler: jest.fn(),
     label: () => 'Move',
     componentType: 'oc-button',
@@ -123,7 +123,7 @@ const fileActions = {
   },
   delete: {
     name: 'delete',
-    icon: 'delete',
+    icon: 'delete-bin-5',
     handler: jest.fn(),
     label: () => 'Delete',
     componentType: 'oc-button',
diff --git a/packages/web-app-files/tests/unit/components/FilesList/ContextActions.spec.js b/packages/web-app-files/tests/unit/components/FilesList/ContextActions.spec.js
index a00945bc97e..439df8e8b06 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/ContextActions.spec.js
+++ b/packages/web-app-files/tests/unit/components/FilesList/ContextActions.spec.js
@@ -25,7 +25,7 @@ const mockMenuSections = [
     name: 'context',
     items: [
       {
-        icon: 'text',
+        icon: 'file-text',
         canBeDefault: true,
         handler: jest.fn(),
         label: () => 'Open in editor',
@@ -45,7 +45,7 @@ const mockMenuSections = [
         }
       }),
       {
-        icon: 'file_download',
+        icon: 'download',
         canBeDefault: true,
         handler: jest.fn(),
         label: () => 'Download',
@@ -54,7 +54,7 @@ const mockMenuSections = [
         class: 'oc-files-actions-download-file-trigger'
       },
       {
-        icon: 'link-add',
+        icon: 'links',
         handler: jest.fn(),
         label: () => 'Create link',
         componentType: 'oc-button',
@@ -62,7 +62,7 @@ const mockMenuSections = [
         class: 'oc-files-actions-create-public-link-trigger'
       },
       {
-        icon: 'group-add',
+        icon: 'group',
         handler: jest.fn(),
         label: () => 'Share',
         componentType: 'oc-button',
@@ -75,7 +75,7 @@ const mockMenuSections = [
     name: 'actions',
     items: [
       {
-        icon: 'edit',
+        icon: 'pencil',
         handler: jest.fn(),
         label: () => 'Edit',
         componentType: 'oc-button',
@@ -83,7 +83,7 @@ const mockMenuSections = [
         class: 'oc-files-actions-rename-trigger'
       },
       {
-        icon: 'folder-move',
+        icon: 'folder-shared',
         handler: jest.fn(),
         label: () => 'Move',
         componentType: 'oc-button',
@@ -91,7 +91,7 @@ const mockMenuSections = [
         class: 'oc-files-actions-move-trigger'
       },
       {
-        icon: 'file_copy',
+        icon: 'file-copy',
         handler: jest.fn(),
         label: () => 'Copy',
         componentType: 'oc-button',
@@ -99,7 +99,7 @@ const mockMenuSections = [
         class: 'oc-files-actions-copy-trigger'
       },
       {
-        icon: 'delete',
+        icon: 'delete-bin-5',
         handler: jest.fn(),
         label: () => 'Delete',
         componentType: 'oc-button',
@@ -120,7 +120,7 @@ const mockMenuSections = [
     name: 'sidebar',
     items: [
       {
-        icon: 'info_outline',
+        icon: 'information',
         handler: jest.fn(),
         label: () => 'Details',
         componentType: 'oc-button',
diff --git a/packages/web-app-files/tests/unit/components/FilesList/ResourceTable.spec.js b/packages/web-app-files/tests/unit/components/FilesList/ResourceTable.spec.js
index f5d61a870e8..1f57c9bc9d9 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/ResourceTable.spec.js
+++ b/packages/web-app-files/tests/unit/components/FilesList/ResourceTable.spec.js
@@ -1,5 +1,6 @@
 import merge from 'lodash-es/merge'
 import { mount, createLocalVue } from '@vue/test-utils'
+import VueCompositionAPI from '@vue/composition-api'
 import { DateTime } from 'luxon'
 import DesignSystem from 'owncloud-design-system'
 
@@ -79,7 +80,7 @@ const resourcesWithAllFields = [
     id: 'notes',
     name: 'notes.txt',
     path: '/Documents/notes.txt',
-    icon: 'text',
+    icon: 'file-text',
     indicators,
     type: 'file',
     size: 'big',
@@ -239,6 +240,7 @@ describe('ResourceTable', () => {
 function getMountedWrapper(options = {}) {
   const localVue = createLocalVue()
   localVue.use(DesignSystem)
+  localVue.use(VueCompositionAPI)
   localVue.prototype.$gettextInterpolate = jest.fn()
   localVue.prototype.$ngettext = jest.fn()
 
diff --git a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ContextActions.spec.js.snap b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ContextActions.spec.js.snap
index 3f839b0d506..dfb8ee04ef8 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ContextActions.spec.js.snap
+++ b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ContextActions.spec.js.snap
@@ -4,7 +4,7 @@ exports[`ContextActions menu items renders a list of actions for a file 1`] = `
 <div id="oc-files-context-menu">
   <oc-list-stub id="oc-files-context-actions-context" class="oc-files-context-actions oc-mt-s oc-files-context-actions-border oc-pb-s oc-mb-s">
     <li class="oc-files-context-action oc-py-xs oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-markdown-editor-trigger" data-testid="action-handler">
-        <oc-icon-stub name="text" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Open in editor</span>
+        <oc-icon-stub name="file-text" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Open in editor</span>
         <!---->
       </button></li>
     <li class="oc-files-context-action oc-py-xs oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-exampleName1-trigger" data-testid="action-handler">
@@ -20,43 +20,43 @@ exports[`ContextActions menu items renders a list of actions for a file 1`] = `
         <!---->
       </button></li>
     <li class="oc-files-context-action oc-py-xs oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-download-file-trigger" data-testid="action-handler">
-        <oc-icon-stub name="file_download" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Download</span>
+        <oc-icon-stub name="download" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Download</span>
         <!---->
       </button></li>
     <li class="oc-files-context-action oc-py-xs oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-create-public-link-trigger" data-testid="action-handler">
-        <oc-icon-stub name="link-add" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Create link</span>
+        <oc-icon-stub name="links" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Create link</span>
         <!---->
       </button></li>
     <li class="oc-files-context-action oc-py-xs oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-show-shares-trigger" data-testid="action-handler">
-        <oc-icon-stub name="group-add" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Share</span>
+        <oc-icon-stub name="group" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Share</span>
         <!---->
       </button></li>
   </oc-list-stub>
   <oc-list-stub id="oc-files-context-actions-actions" class="oc-files-context-actions oc-files-context-actions-border oc-pb-s oc-mb-s">
     <li class="oc-files-context-action oc-py-xs oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-rename-trigger" data-testid="action-handler">
-        <oc-icon-stub name="edit" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Edit</span>
+        <oc-icon-stub name="pencil" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Edit</span>
         <!---->
       </button></li>
     <li class="oc-files-context-action oc-py-xs oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-move-trigger" data-testid="action-handler">
-        <oc-icon-stub name="folder-move" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Move</span>
+        <oc-icon-stub name="folder-shared" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Move</span>
         <!---->
       </button></li>
     <li class="oc-files-context-action oc-py-xs oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-copy-trigger" data-testid="action-handler">
-        <oc-icon-stub name="file_copy" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Copy</span>
+        <oc-icon-stub name="file-copy" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Copy</span>
         <!---->
       </button></li>
     <li class="oc-files-context-action oc-py-xs oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-delete-trigger" data-testid="action-handler">
-        <oc-icon-stub name="delete" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Delete</span>
+        <oc-icon-stub name="delete-bin-5" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Delete</span>
         <!---->
       </button></li>
     <li class="oc-files-context-action oc-py-xs oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-show-actions-trigger" data-testid="action-handler">
-        <oc-icon-stub name="slideshow" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">All actions</span>
+        <oc-icon-stub name="slideshow" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">All actions</span>
         <!---->
       </button></li>
   </oc-list-stub>
   <oc-list-stub id="oc-files-context-actions-sidebar" class="oc-files-context-actions oc-mb-s">
     <li class="oc-files-context-action oc-py-xs oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-show-details-trigger" data-testid="action-handler">
-        <oc-icon-stub name="info_outline" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Details</span>
+        <oc-icon-stub name="information" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Details</span>
         <!---->
       </button></li>
   </oc-list-stub>
@@ -67,7 +67,7 @@ exports[`ContextActions menu items renders a list of actions for a folder 1`] =
 <div id="oc-files-context-menu">
   <oc-list-stub id="oc-files-context-actions-context" class="oc-files-context-actions oc-mt-s oc-files-context-actions-border oc-pb-s oc-mb-s">
     <li class="oc-files-context-action oc-py-xs oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-markdown-editor-trigger" data-testid="action-handler">
-        <oc-icon-stub name="text" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Open in editor</span>
+        <oc-icon-stub name="file-text" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Open in editor</span>
         <!---->
       </button></li>
     <li class="oc-files-context-action oc-py-xs oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-exampleName1-trigger" data-testid="action-handler">
@@ -83,43 +83,43 @@ exports[`ContextActions menu items renders a list of actions for a folder 1`] =
         <!---->
       </button></li>
     <li class="oc-files-context-action oc-py-xs oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-download-file-trigger" data-testid="action-handler">
-        <oc-icon-stub name="file_download" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Download</span>
+        <oc-icon-stub name="download" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Download</span>
         <!---->
       </button></li>
     <li class="oc-files-context-action oc-py-xs oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-create-public-link-trigger" data-testid="action-handler">
-        <oc-icon-stub name="link-add" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Create link</span>
+        <oc-icon-stub name="links" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Create link</span>
         <!---->
       </button></li>
     <li class="oc-files-context-action oc-py-xs oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-show-shares-trigger" data-testid="action-handler">
-        <oc-icon-stub name="group-add" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Share</span>
+        <oc-icon-stub name="group" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Share</span>
         <!---->
       </button></li>
   </oc-list-stub>
   <oc-list-stub id="oc-files-context-actions-actions" class="oc-files-context-actions oc-files-context-actions-border oc-pb-s oc-mb-s">
     <li class="oc-files-context-action oc-py-xs oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-rename-trigger" data-testid="action-handler">
-        <oc-icon-stub name="edit" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Edit</span>
+        <oc-icon-stub name="pencil" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Edit</span>
         <!---->
       </button></li>
     <li class="oc-files-context-action oc-py-xs oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-move-trigger" data-testid="action-handler">
-        <oc-icon-stub name="folder-move" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Move</span>
+        <oc-icon-stub name="folder-shared" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Move</span>
         <!---->
       </button></li>
     <li class="oc-files-context-action oc-py-xs oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-copy-trigger" data-testid="action-handler">
-        <oc-icon-stub name="file_copy" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Copy</span>
+        <oc-icon-stub name="file-copy" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Copy</span>
         <!---->
       </button></li>
     <li class="oc-files-context-action oc-py-xs oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-delete-trigger" data-testid="action-handler">
-        <oc-icon-stub name="delete" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Delete</span>
+        <oc-icon-stub name="delete-bin-5" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Delete</span>
         <!---->
       </button></li>
     <li class="oc-files-context-action oc-py-xs oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-show-actions-trigger" data-testid="action-handler">
-        <oc-icon-stub name="slideshow" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">All actions</span>
+        <oc-icon-stub name="slideshow" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">All actions</span>
         <!---->
       </button></li>
   </oc-list-stub>
   <oc-list-stub id="oc-files-context-actions-sidebar" class="oc-files-context-actions oc-mb-s">
     <li class="oc-files-context-action oc-py-xs oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-bold oc-files-actions-show-details-trigger" data-testid="action-handler">
-        <oc-icon-stub name="info_outline" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Details</span>
+        <oc-icon-stub name="information" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" data-testid="action-icon"></oc-icon-stub> <span data-testid="action-label" class="oc-files-context-action-label">Details</span>
         <!---->
       </button></li>
   </oc-list-stub>
diff --git a/packages/web-app-files/tests/unit/components/Search/__snapshots__/List.spec.js.snap b/packages/web-app-files/tests/unit/components/Search/__snapshots__/List.spec.js.snap
index 50b3b6b932c..c022ad09bda 100644
--- a/packages/web-app-files/tests/unit/components/Search/__snapshots__/List.spec.js.snap
+++ b/packages/web-app-files/tests/unit/components/Search/__snapshots__/List.spec.js.snap
@@ -3,10 +3,9 @@
 exports[`List component when no resource is found should show no-content-message component 1`] = `
 <div class="files-search-result">
   <div class="uk-height-1-1 uk-flex uk-flex-column uk-flex-center uk-flex-middle uk-text-center files-empty">
-    <div class="oc-icon oc-icon-xxl oc-icon-passive"><svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
-        <path xmlns="http://www.w3.org/2000/svg" fill="none" d="M0 0h24v24H0z"></path>
-        <path xmlns="http://www.w3.org/2000/svg" d="M12.414 5H21a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7.414l2 2z"></path>
-      </svg></div>
+    <div class="oc-icon oc-icon-xxl oc-icon-passive">
+      <!---->
+    </div>
     <div class="oc-text-muted uk-text-large">
       <p class="oc-text-muted"><span data-msgid="No search term entered" data-current-language="en_US">No search term entered</span></p>
     </div>
@@ -18,10 +17,9 @@ exports[`List component when no resource is found should show no-content-message
 exports[`List component when no search term is entered should show no-content-message component 1`] = `
 <div class="files-search-result">
   <div class="uk-height-1-1 uk-flex uk-flex-column uk-flex-center uk-flex-middle uk-text-center files-empty">
-    <div class="oc-icon oc-icon-xxl oc-icon-passive"><svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
-        <path xmlns="http://www.w3.org/2000/svg" fill="none" d="M0 0h24v24H0z"></path>
-        <path xmlns="http://www.w3.org/2000/svg" d="M12.414 5H21a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7.414l2 2z"></path>
-      </svg></div>
+    <div class="oc-icon oc-icon-xxl oc-icon-passive">
+      <!---->
+    </div>
     <div class="oc-text-muted uk-text-large">
       <p class="oc-text-muted"><span data-msgid="No search term entered" data-current-language="en_US">No search term entered</span></p>
     </div>
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Links/PublicLinks/LinkInfo.spec.js b/packages/web-app-files/tests/unit/components/SideBar/Links/PublicLinks/LinkInfo.spec.js
index 75a6c168f9b..c938adbeeb9 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Links/PublicLinks/LinkInfo.spec.js
+++ b/packages/web-app-files/tests/unit/components/SideBar/Links/PublicLinks/LinkInfo.spec.js
@@ -104,10 +104,10 @@ describe('LinkInfo', () => {
 
   describe('link role', () => {
     it.each([
-      { role: 'Viewer', icon: 'remove_red_eye' },
-      { role: 'Editor', icon: 'edit' },
-      { role: 'Contributor', icon: 'edit' },
-      { role: 'Uploader', icon: 'file_upload' },
+      { role: 'Viewer', icon: 'eye' },
+      { role: 'Editor', icon: 'pencil' },
+      { role: 'Contributor', icon: 'pencil' },
+      { role: 'Uploader', icon: 'file-add' },
       { role: '*', icon: 'key' }
     ])('should set different role tag icon for different role types', (dataSet) => {
       const wrapper = getShallowWrapper({
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/InviteCollaborator/__snapshots__/RecipientContainer.spec.js.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/InviteCollaborator/__snapshots__/RecipientContainer.spec.js.snap
index eb20826716e..4d05a228039 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/InviteCollaborator/__snapshots__/RecipientContainer.spec.js.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/InviteCollaborator/__snapshots__/RecipientContainer.spec.js.snap
@@ -3,15 +3,15 @@
 exports[`InviteCollaborator RecipientContainer displays an avatar image if capability is present 1`] = `
 <span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><span aria-label="Loading avatar" tabindex="-1" role="img" class="oc-spinner oc-spinner-s" data-testid="recipient-avatar-spinner"></span>
 <p data-testid="recipient-name" class="oc-recipient-name">Albert Einstein</p> <button aria-label="Deselect Albert Einstein" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw">
-  <ocicon-stub name="close" accessiblelabel="" type="span" size="small" variation="passive"></ocicon-stub>
+  <ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive"></ocicon-stub>
 </button>
 </span>
 `;
 
-exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 1`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><ocicon-stub name="person" accessiblelabel="User" type="span" size="small" variation="passive" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">Albert Einstein</p> <button aria-label="Deselect Albert Einstein" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" accessiblelabel="" type="span" size="small" variation="passive"></ocicon-stub></button></span>`;
+exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 1`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><ocicon-stub name="person" filltype="fill" accessiblelabel="User" type="span" size="small" variation="passive" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">Albert Einstein</p> <button aria-label="Deselect Albert Einstein" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive"></ocicon-stub></button></span>`;
 
-exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 2`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-physics-lovers"><ocicon-stub name="person" accessiblelabel="User" type="span" size="small" variation="passive" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">physics-lovers</p> <button aria-label="Deselect physics-lovers" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" accessiblelabel="" type="span" size="small" variation="passive"></ocicon-stub></button></span>`;
+exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 2`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-physics-lovers"><ocicon-stub name="person" filltype="fill" accessiblelabel="User" type="span" size="small" variation="passive" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">physics-lovers</p> <button aria-label="Deselect physics-lovers" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive"></ocicon-stub></button></span>`;
 
-exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 3`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-guest-user"><ocicon-stub name="person" accessiblelabel="User" type="span" size="small" variation="passive" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">guest-user</p> <button aria-label="Deselect guest-user" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" accessiblelabel="" type="span" size="small" variation="passive"></ocicon-stub></button></span>`;
+exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 3`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-guest-user"><ocicon-stub name="person" filltype="fill" accessiblelabel="User" type="span" size="small" variation="passive" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">guest-user</p> <button aria-label="Deselect guest-user" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive"></ocicon-stub></button></span>`;
 
-exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 4`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-remote-user"><ocicon-stub name="person" accessiblelabel="User" type="span" size="small" variation="passive" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">remote-user</p> <button aria-label="Deselect remote-user" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" accessiblelabel="" type="span" size="small" variation="passive"></ocicon-stub></button></span>`;
+exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 4`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-remote-user"><ocicon-stub name="person" filltype="fill" accessiblelabel="User" type="span" size="small" variation="passive" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">remote-user</p> <button aria-label="Deselect remote-user" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive"></ocicon-stub></button></span>`;
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.js.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.js.snap
index 71c74b32276..d41f5b6f09d 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.js.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.js.snap
@@ -22,7 +22,7 @@ exports[`FileShares if there are collaborators present renders sharedWithLabel a
   <div class="avatars-wrapper uk-flex uk-flex-middle uk-flex-between">
     <h4 class="oc-text-initial oc-text-bold oc-mb-rm">Shared with</h4>
     <oc-button-stub type="button" size="medium" arialabel="Collapse list of invited people" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" data-testid="collaborators-show-people">
-      <oc-icon-stub name="chevron_up" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
+      <oc-icon-stub name="arrow-up-s" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
     </oc-button-stub>
   </div>
   <transition-group-stub tag="ul" name="custom-classes-transition" id="files-collaborators-list" aria-label="Share receivers" class="uk-list uk-list-divider uk-overflow-hidden oc-m-rm">
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/RoleDropdown.spec.js.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/RoleDropdown.spec.js.snap
index f04ce95bfc1..d7a14500ff9 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/RoleDropdown.spec.js.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/RoleDropdown.spec.js.snap
@@ -2,14 +2,14 @@
 
 exports[`RoleDropdown for file shares when an existing role is present renders a button with existing role if given for resource type file 1`] = `
 <span class="uk-flex uk-flex-middle"><oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="center" gapsize="none" id="files-collaborators-role-button-new" class="files-recipient-role-select-btn"><span>Viewer</span>
-<oc-icon-stub name="expand_more" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
+<oc-icon-stub name="arrow-down-s" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
 </oc-button-stub>
 <oc-drop-stub dropid="oc-drop-17" toggle="#files-collaborators-role-button-new" position="bottom-start" mode="click" closeonclick="true" paddingsize="remove">
   <oc-list-stub arialabel="Select role for the invitation" aria-label="Select role for the invitation" class="files-recipient-role-drop-list">
     <li>
       <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="space-between" gapsize="medium" id="files-recipient-role-drop-btn-viewer" class="files-recipient-role-drop-btn oc-py-xs oc-px-s selected">
         <role-item-stub role="[object Object]" allowsharepermission="true"></role-item-stub>
-        <oc-icon-stub name="check" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
+        <oc-icon-stub name="check" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
       </oc-button-stub>
     </li>
     <li>
@@ -55,14 +55,14 @@ exports[`RoleDropdown for file shares when an existing role is present renders a
 
 exports[`RoleDropdown for file shares when an existing role is present renders a button with existing role if given for resource type folder 1`] = `
 <span class="uk-flex uk-flex-middle"><oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="center" gapsize="none" id="files-collaborators-role-button-new" class="files-recipient-role-select-btn"><span>Viewer</span>
-<oc-icon-stub name="expand_more" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
+<oc-icon-stub name="arrow-down-s" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
 </oc-button-stub>
 <oc-drop-stub dropid="oc-drop-15" toggle="#files-collaborators-role-button-new" position="bottom-start" mode="click" closeonclick="true" paddingsize="remove">
   <oc-list-stub arialabel="Select role for the invitation" aria-label="Select role for the invitation" class="files-recipient-role-drop-list">
     <li>
       <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="space-between" gapsize="medium" id="files-recipient-role-drop-btn-viewer" class="files-recipient-role-drop-btn oc-py-xs oc-px-s selected">
         <role-item-stub role="[object Object]" allowsharepermission="true"></role-item-stub>
-        <oc-icon-stub name="check" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
+        <oc-icon-stub name="check" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
       </oc-button-stub>
     </li>
     <li>
@@ -108,14 +108,14 @@ exports[`RoleDropdown for file shares when an existing role is present renders a
 
 exports[`RoleDropdown for file shares when no existing role is present renders a button with invite text if no existing role given for resource type file 1`] = `
 <span class="uk-flex uk-flex-middle"><oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="center" gapsize="none" id="files-collaborators-role-button-new" class="files-recipient-role-select-btn"><span>Invite as viewer</span>
-<oc-icon-stub name="expand_more" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
+<oc-icon-stub name="arrow-down-s" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
 </oc-button-stub>
 <oc-drop-stub dropid="oc-drop-5" toggle="#files-collaborators-role-button-new" position="bottom-start" mode="click" closeonclick="true" paddingsize="remove">
   <oc-list-stub arialabel="Select role for the invitation" aria-label="Select role for the invitation" class="files-recipient-role-drop-list">
     <li>
       <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="space-between" gapsize="medium" id="files-recipient-role-drop-btn-viewer" class="files-recipient-role-drop-btn oc-py-xs oc-px-s selected">
         <role-item-stub role="[object Object]" allowsharepermission="true"></role-item-stub>
-        <oc-icon-stub name="check" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
+        <oc-icon-stub name="check" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
       </oc-button-stub>
     </li>
     <li>
@@ -155,14 +155,14 @@ exports[`RoleDropdown for file shares when no existing role is present renders a
 
 exports[`RoleDropdown for file shares when no existing role is present renders a button with invite text if no existing role given for resource type folder 1`] = `
 <span class="uk-flex uk-flex-middle"><oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="center" gapsize="none" id="files-collaborators-role-button-new" class="files-recipient-role-select-btn"><span>Invite as viewer</span>
-<oc-icon-stub name="expand_more" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
+<oc-icon-stub name="arrow-down-s" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
 </oc-button-stub>
 <oc-drop-stub dropid="oc-drop-3" toggle="#files-collaborators-role-button-new" position="bottom-start" mode="click" closeonclick="true" paddingsize="remove">
   <oc-list-stub arialabel="Select role for the invitation" aria-label="Select role for the invitation" class="files-recipient-role-drop-list">
     <li>
       <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="space-between" gapsize="medium" id="files-recipient-role-drop-btn-viewer" class="files-recipient-role-drop-btn oc-py-xs oc-px-s selected">
         <role-item-stub role="[object Object]" allowsharepermission="true"></role-item-stub>
-        <oc-icon-stub name="check" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
+        <oc-icon-stub name="check" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
       </oc-button-stub>
     </li>
     <li>
diff --git a/packages/web-app-files/tests/unit/components/Upload/ProgressBar.spec.js b/packages/web-app-files/tests/unit/components/Upload/ProgressBar.spec.js
index 8885d78147a..fe4cf219062 100644
--- a/packages/web-app-files/tests/unit/components/Upload/ProgressBar.spec.js
+++ b/packages/web-app-files/tests/unit/components/Upload/ProgressBar.spec.js
@@ -84,10 +84,10 @@ describe('ProgressBar component', () => {
       store = createStore(items)
       wrapper = getShallowWrapper(store)
     })
-    it('should have "expand_more" as oc-icon name', () => {
+    it('should have "arrow-down-s" as oc-icon name', () => {
       const ocIcon = wrapper.find(selectors.ocIcon)
 
-      expect(ocIcon.props().name).toEqual('expand_more')
+      expect(ocIcon.props().name).toEqual('arrow-down-s')
     })
     it('should show the text "Show Details"', () => {
       const showDetails = wrapper.find(selectors.showDetails)
@@ -117,10 +117,10 @@ describe('ProgressBar component', () => {
       store = createStore(items)
       wrapper = getShallowWrapper(store, true)
     })
-    it('should change oc-icon name to "expand_less"', () => {
+    it('should change oc-icon name to "arrow-up-s"', () => {
       const ocIcon = wrapper.find(selectors.ocIcon)
 
-      expect(ocIcon.props().name).toEqual('expand_less')
+      expect(ocIcon.props().name).toEqual('arrow-up-s')
     })
     it('should show the text "Hide Details"', () => {
       const showDetails = wrapper.find(selectors.showDetails)
diff --git a/packages/web-app-files/tests/unit/components/Upload/__snapshots__/ProgressBar.spec.js.snap b/packages/web-app-files/tests/unit/components/Upload/__snapshots__/ProgressBar.spec.js.snap
index 791c382a0ca..89fe987c792 100644
--- a/packages/web-app-files/tests/unit/components/Upload/__snapshots__/ProgressBar.spec.js.snap
+++ b/packages/web-app-files/tests/unit/components/Upload/__snapshots__/ProgressBar.spec.js.snap
@@ -9,7 +9,7 @@ exports[`ProgressBar component when a single file is uploaded should show correc
     <oc-hidden-announcer-stub level="assertive" announcement=""></oc-hidden-announcer-stub>
   </div>
   <oc-grid-stub gutter="collapse" flex="true" aria-label="Click row to toggle upload progress details" class="oc-mt-s oc-mb-s oc-text-muted oc-cursor-pointer">
-    <oc-icon-stub name="expand_more" accessiblelabel="" type="span" size="medium" variation="passive" class="uk-width-auto"></oc-icon-stub>
+    <oc-icon-stub name="arrow-down-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" class="uk-width-auto"></oc-icon-stub>
     <div class="uk-width-expand uk-text-truncate"><span id="files-upload-progress-single" translate-comment="Upload progress when only uploading one file shows the name of the file." data-msgid="
         Uploading &quot;%{ fileName }&quot;
       " data-current-language="en_US">
@@ -34,7 +34,7 @@ exports[`ProgressBar component when multiple files are uploaded should show tota
     <oc-hidden-announcer-stub level="assertive" announcement=""></oc-hidden-announcer-stub>
   </div>
   <oc-grid-stub gutter="collapse" flex="true" aria-label="Click row to toggle upload progress details" class="oc-mt-s oc-mb-s oc-text-muted oc-cursor-pointer">
-    <oc-icon-stub name="expand_more" accessiblelabel="" type="span" size="medium" variation="passive" class="uk-width-auto"></oc-icon-stub>
+    <oc-icon-stub name="arrow-down-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" class="uk-width-auto"></oc-icon-stub>
     <div class="uk-width-expand uk-text-truncate"><span id="files-upload-progress-multi" translate-n="2" translate-plural="Uploading %{ count } items" translate-comment="Upload progress when uploading multiple files only shows the number of uploads." data-msgid="
         Uploading %{ count } item
       " data-current-language="en_US">Uploading 2 items</span></div>
diff --git a/packages/web-app-files/tests/unit/mixins.spec.js b/packages/web-app-files/tests/unit/mixins.spec.js
index 113263ac448..23a2593a48f 100644
--- a/packages/web-app-files/tests/unit/mixins.spec.js
+++ b/packages/web-app-files/tests/unit/mixins.spec.js
@@ -51,7 +51,7 @@ describe('mixins', () => {
       { type: false, extension: 'tar.bz2' },
       { type: '0', extension: 'tar.bz2' }
     ])('should return the icon for a known file extension, regardless of the type', (inputData) => {
-      expect(mixins.methods.fileTypeIcon(inputData)).toEqual('package-x-generic')
+      expect(mixins.methods.fileTypeIcon(inputData)).toEqual('file-zip')
     })
   })
 
diff --git a/packages/web-app-files/tests/unit/views/__snapshots__/FilesDrop.spec.js.snap b/packages/web-app-files/tests/unit/views/__snapshots__/FilesDrop.spec.js.snap
index bae198619e9..d9ff60cdf9f 100644
--- a/packages/web-app-files/tests/unit/views/__snapshots__/FilesDrop.spec.js.snap
+++ b/packages/web-app-files/tests/unit/views/__snapshots__/FilesDrop.spec.js.snap
@@ -9,7 +9,7 @@ exports[`FilesDrop should show page title and configuration theme general slogan
         <h2>admin shared this folder with you for uploading</h2>
         <vue-dropzone-stub id="oc-dropzone" options="[object Object]" destroydropzone="true" usecustomslot="true">
           <div class="uk-flex uk-flex-middle uk-flex-center uk-placeholder">
-            <oc-icon-stub name="file_upload" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
+            <oc-icon-stub name="file-upload" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
             <translate-stub tag="span">Drop files here to upload or click to select file</translate-stub>
           </div>
         </vue-dropzone-stub>
@@ -53,7 +53,7 @@ exports[`FilesDrop when "loading" is set to false should call "dropZoneFileAdded
         <h2>admin shared this folder with you for uploading</h2>
         <vue-dropzone-stub id="oc-dropzone" options="[object Object]" destroydropzone="true" usecustomslot="true">
           <div class="uk-flex uk-flex-middle uk-flex-center uk-placeholder">
-            <oc-icon-stub name="file_upload" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
+            <oc-icon-stub name="file-upload" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
             <translate-stub tag="span">Drop files here to upload or click to select file</translate-stub>
           </div>
         </vue-dropzone-stub>
@@ -68,7 +68,7 @@ exports[`FilesDrop when "loading" is set to false should call "dropZoneFileAdded
                 <oc-resource-size-stub size="300"></oc-resource-size-stub>
               </oc-td-stub>
               <oc-td-stub alignh="left" alignv="middle" width="shrink" class="oc-pr-rm uk-preserve-width">
-                <oc-icon-stub name="ready" accessiblelabel="" type="span" size="small" variation="success"></oc-icon-stub>
+                <oc-icon-stub name="checkbox-circle" filltype="fill" accessiblelabel="" type="span" size="small" variation="success"></oc-icon-stub>
                 <!---->
                 <!---->
               </oc-td-stub>
@@ -105,7 +105,7 @@ exports[`FilesDrop when "loading" is set to false should show error message if o
         <h2>admin shared this folder with you for uploading</h2>
         <vue-dropzone-stub id="oc-dropzone" options="[object Object]" destroydropzone="true" usecustomslot="true">
           <div class="uk-flex uk-flex-middle uk-flex-center uk-placeholder">
-            <oc-icon-stub name="file_upload" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
+            <oc-icon-stub name="file-upload" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
             <translate-stub tag="span">Drop files here to upload or click to select file</translate-stub>
           </div>
         </vue-dropzone-stub>
@@ -137,7 +137,7 @@ exports[`FilesDrop when "loading" is set to false should show files list of uplo
         <h2></h2>
         <vue-dropzone-stub id="oc-dropzone" options="[object Object]" destroydropzone="true" usecustomslot="true">
           <div class="uk-flex uk-flex-middle uk-flex-center uk-placeholder">
-            <oc-icon-stub name="file_upload" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
+            <oc-icon-stub name="file-upload" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
             <translate-stub tag="span">Drop files here to upload or click to select file</translate-stub>
           </div>
         </vue-dropzone-stub>
@@ -153,7 +153,7 @@ exports[`FilesDrop when "loading" is set to false should show files list of uplo
               </oc-td-stub>
               <oc-td-stub alignh="left" alignv="middle" width="shrink" class="oc-pr-rm uk-preserve-width">
                 <!---->
-                <oc-icon-stub name="info" accessiblelabel="" type="span" size="small" variation="danger"></oc-icon-stub>
+                <oc-icon-stub name="information" filltype="fill" accessiblelabel="" type="span" size="small" variation="danger"></oc-icon-stub>
                 <!---->
               </oc-td-stub>
             </oc-tr-stub>
@@ -163,7 +163,7 @@ exports[`FilesDrop when "loading" is set to false should show files list of uplo
                 <oc-resource-size-stub size="600"></oc-resource-size-stub>
               </oc-td-stub>
               <oc-td-stub alignh="left" alignv="middle" width="shrink" class="oc-pr-rm uk-preserve-width">
-                <oc-icon-stub name="ready" accessiblelabel="" type="span" size="small" variation="success"></oc-icon-stub>
+                <oc-icon-stub name="checkbox-circle" filltype="fill" accessiblelabel="" type="span" size="small" variation="success"></oc-icon-stub>
                 <!---->
                 <!---->
               </oc-td-stub>
@@ -216,7 +216,7 @@ exports[`FilesDrop when "loading" is set to false should show share information
         <h2>admin shared this folder with you for uploading</h2>
         <vue-dropzone-stub id="oc-dropzone" options="[object Object]" destroydropzone="true" usecustomslot="true">
           <div class="uk-flex uk-flex-middle uk-flex-center uk-placeholder">
-            <oc-icon-stub name="file_upload" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
+            <oc-icon-stub name="file-upload" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
             <translate-stub tag="span">Drop files here to upload or click to select file</translate-stub>
           </div>
         </vue-dropzone-stub>
diff --git a/packages/web-app-files/tests/unit/views/__snapshots__/SharedViaLink.spec.js.snap b/packages/web-app-files/tests/unit/views/__snapshots__/SharedViaLink.spec.js.snap
index 23e7f4cc5ef..7e76d4e1222 100644
--- a/packages/web-app-files/tests/unit/views/__snapshots__/SharedViaLink.spec.js.snap
+++ b/packages/web-app-files/tests/unit/views/__snapshots__/SharedViaLink.spec.js.snap
@@ -3,10 +3,9 @@
 exports[`SharedViaLink view when the view is not loading anymore when there are no files to be displayed should show no-content-message component 1`] = `
 <div>
   <div class="uk-height-1-1 uk-flex uk-flex-column uk-flex-center uk-flex-middle uk-text-center files-empty" id="files-shared-via-link-empty">
-    <div class="oc-icon oc-icon-xxl oc-icon-passive"><svg viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
-        <path xmlns="http://www.w3.org/2000/svg" d="M0 0h24v24H0z" fill="none"></path>
-        <path xmlns="http://www.w3.org/2000/svg" d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"></path>
-      </svg></div>
+    <div class="oc-icon oc-icon-xxl oc-icon-passive">
+      <!---->
+    </div>
     <div class="oc-text-muted uk-text-large"><span data-msgid="There are no resources with a public link at the moment" data-current-language="en_US">There are no resources with a public link at the moment</span></div>
     <div class="oc-text-muted"></div>
   </div>
diff --git a/packages/web-app-markdown-editor/src/index.js b/packages/web-app-markdown-editor/src/index.js
index 6a52248bcdd..192647144e6 100644
--- a/packages/web-app-markdown-editor/src/index.js
+++ b/packages/web-app-markdown-editor/src/index.js
@@ -26,7 +26,7 @@ const fileExtensionConfig = {
 const appInfo = {
   name: 'MarkdownEditor',
   id: 'markdown-editor',
-  icon: 'text',
+  icon: 'file-text',
   isFileEditor: true,
   extensions: [
     {
diff --git a/packages/web-app-media-viewer/src/App.vue b/packages/web-app-media-viewer/src/App.vue
index 824cee5dfa4..e2e056e1cc4 100644
--- a/packages/web-app-media-viewer/src/App.vue
+++ b/packages/web-app-media-viewer/src/App.vue
@@ -67,7 +67,7 @@
           :aria-label="$gettext('Show previous media file in folder')"
           @click="prev"
         >
-          <oc-icon size="large" name="chevron_left" />
+          <oc-icon size="large" name="arrow-drop-left" />
         </oc-button>
         <p v-if="!$_loader_folderLoading" class="oc-m-rm oc-light">
           <span aria-hidden="true" v-text="ariaHiddenFileCount" />
@@ -80,7 +80,7 @@
           :aria-label="$gettext('Show next media file in folder')"
           @click="next"
         >
-          <oc-icon size="large" name="chevron_right" />
+          <oc-icon size="large" name="arrow-drop-right" />
         </oc-button>
         <oc-button
           class="media-viewer-controls-download"
@@ -89,7 +89,7 @@
           :aria-label="$gettext('Download currently viewed file')"
           @click="downloadMedium"
         >
-          <oc-icon size="large" name="file_download" />
+          <oc-icon size="large" name="file-download" fill-type="line" />
         </oc-button>
         <oc-button
           class="media-viewer-controls-close"
diff --git a/packages/web-app-search/src/portals/SearchBar.vue b/packages/web-app-search/src/portals/SearchBar.vue
index 9cf4a72e555..4e08d8bfc26 100644
--- a/packages/web-app-search/src/portals/SearchBar.vue
+++ b/packages/web-app-search/src/portals/SearchBar.vue
@@ -23,7 +23,7 @@
           :class="{ selected: activeProvider ? provider.id === activeProvider.id : false }"
           @click="activateProvider(provider)"
         >
-          <oc-icon name="search" accessible-label="Search" />
+          <oc-icon name="search" fill-type="line" accessible-label="Search" />
           <span class="term">{{ term | truncate }}</span>
           <button v-if="provider.label" class="label">{{ provider.label }}</button>
         </li>
diff --git a/packages/web-integration-oc10/lib/Controller/ConfigController.php b/packages/web-integration-oc10/lib/Controller/ConfigController.php
index 11e42dc397b..eff9930a390 100644
--- a/packages/web-integration-oc10/lib/Controller/ConfigController.php
+++ b/packages/web-integration-oc10/lib/Controller/ConfigController.php
@@ -117,7 +117,7 @@ private function addOC10AppsToConfig(array $config): array {
             $apps[] = [
                 'title' => $titles,
                 'url' => $serverUrl . $navigationEntry['href'],
-                'icon' => 'extension',
+                'icon' => 'swap-box',
             ];
         }
 
diff --git a/packages/web-integration-oc10/lib/Controller/FilesController.php b/packages/web-integration-oc10/lib/Controller/FilesController.php
index bf35987ef3f..5c1019c0e5e 100644
--- a/packages/web-integration-oc10/lib/Controller/FilesController.php
+++ b/packages/web-integration-oc10/lib/Controller/FilesController.php
@@ -78,7 +78,7 @@ public function getFile(string $path): Response {
 		}
 
 		// check if path permitted
-		$permittedPaths = ["css", "img", "js", "themes", "index.html", "manifest.json", "oidc-callback.html", "oidc-silent-redirect.html"];
+		$permittedPaths = ["css", "img", "js", "themes", "icons", "index.html", "manifest.json", "oidc-callback.html", "oidc-silent-redirect.html"];
 		$found = false;
 		foreach ($permittedPaths as $p) {
 			if (\strpos($path, $p) === 0) {
diff --git a/packages/web-runtime/package.json b/packages/web-runtime/package.json
index 237a49aa079..589905cc610 100644
--- a/packages/web-runtime/package.json
+++ b/packages/web-runtime/package.json
@@ -5,7 +5,7 @@
   "license": "AGPL-3.0",
   "dependencies": {
     "@popperjs/core": "^2.4.0",
-    "@vue/composition-api": "^1.2.4",
+    "@vue/composition-api": "^1.4.3",
     "easygettext": "^2.16.1",
     "filesize": "^8.0.0",
     "focus-trap": "^6.4.0",
@@ -14,7 +14,7 @@
     "lodash-es": "^4.17.21",
     "luxon": "^2.0.0",
     "oidc-client": "1.11.5",
-    "owncloud-design-system": "12.0.0-alpha4",
+    "owncloud-design-system": "12.0.0-alpha7",
     "owncloud-sdk": "1.0.0-2296",
     "p-queue": "^6.1.1",
     "popper-max-size-modifier": "^0.2.0",
diff --git a/packages/web-runtime/src/components/ApplicationsMenu.vue b/packages/web-runtime/src/components/ApplicationsMenu.vue
index 31483a43253..dbc8dada990 100644
--- a/packages/web-runtime/src/components/ApplicationsMenu.vue
+++ b/packages/web-runtime/src/components/ApplicationsMenu.vue
@@ -9,7 +9,7 @@
       class="oc-topbar-menu-burger"
       :aria-label="applicationSwitcherLabel"
     >
-      <oc-icon name="apps" size="large" class="uk-flex" />
+      <oc-icon name="grid" size="large" class="uk-flex" />
     </oc-button>
     <oc-drop
       ref="menu"
diff --git a/packages/web-runtime/src/components/Notifications.vue b/packages/web-runtime/src/components/Notifications.vue
index 86c32d5834b..82e73449560 100644
--- a/packages/web-runtime/src/components/Notifications.vue
+++ b/packages/web-runtime/src/components/Notifications.vue
@@ -6,7 +6,12 @@
       appearance="raw"
       :aria-label="notificationsLabel"
     >
-      <oc-icon variation="inverse" class="oc-cursor-pointer uk-flex uk-flex-middle" name="bell" />
+      <oc-icon
+        variation="inverse"
+        class="oc-cursor-pointer uk-flex uk-flex-middle"
+        name="notification-3"
+        fill-type="line"
+      />
     </oc-button>
     <oc-drop
       id="oc-notification-drop"
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
index 5600a6e3d09..e2fcf66d9e1 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
@@ -11,7 +11,7 @@
       :aria-label="$gettext('Toggle sidebar')"
       @click="toggleSidebarButtonClick"
     >
-      <oc-icon size="large" :name="toggleSidebarButtonIcon" />
+      <oc-icon size="large" fill-type="line" :name="toggleSidebarButtonIcon" />
     </oc-button>
     <nav
       class="oc-sidebar-nav oc-my-l oc-px-xs"
@@ -24,6 +24,7 @@
           :target="link.route.path"
           :active="link.active"
           :icon="link.icon || link.iconMaterial"
+          :fill-type="link.fillType"
           :name="link.name"
           :collapsed="navigation.closed"
         />
@@ -58,7 +59,7 @@ export default {
     },
 
     toggleSidebarButtonIcon() {
-      return this.navigation.closed ? 'chevron_right' : 'chevron_left'
+      return this.navigation.closed ? 'arrow-drop-right' : 'arrow-drop-left'
     }
   },
   methods: {
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
index 0087ac75522..cf27806ad38 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
@@ -5,7 +5,7 @@
       :class="['oc-sidebar-nav-item-link', { active: active }]"
       :to="target"
     >
-      <oc-icon :name="icon" variation="inverse" aria-hidden="true" />
+      <oc-icon :name="icon" :fill-type="fillType" variation="inverse" aria-hidden="true" />
       <span class="oc-ml-m text" :class="{ 'text-invisible': collapsed }" v-text="name" />
     </router-link>
   </li>
@@ -31,6 +31,11 @@ export default {
       type: String,
       required: true
     },
+    fillType: {
+      type: String,
+      required: false,
+      default: 'fill'
+    },
     collapsed: {
       type: Boolean,
       required: false,
diff --git a/packages/web-runtime/src/components/UserMenu.vue b/packages/web-runtime/src/components/UserMenu.vue
index 09ef8f6a3f9..33ea320715b 100644
--- a/packages/web-runtime/src/components/UserMenu.vue
+++ b/packages/web-runtime/src/components/UserMenu.vue
@@ -36,7 +36,7 @@
             gap-size="xsmall"
             justify-content="left"
           >
-            <oc-icon name="portrait" />
+            <oc-icon name="profile" fill-type="line" />
             <translate>Profile</translate>
           </oc-button>
         </li>
@@ -73,7 +73,7 @@
             justify-content="left"
             @click="logout"
           >
-            <oc-icon name="sign-out" />
+            <oc-icon name="logout-box-r" fill-type="line" />
             <translate>Log out</translate>
           </oc-button>
         </li>
diff --git a/packages/web-runtime/tests/unit/components/Notification.spec.js b/packages/web-runtime/tests/unit/components/Notification.spec.js
index 64df989af1e..cfd88c27d32 100644
--- a/packages/web-runtime/tests/unit/components/Notification.spec.js
+++ b/packages/web-runtime/tests/unit/components/Notification.spec.js
@@ -95,7 +95,7 @@ describe('Notification component', () => {
 
       expect(bell.exists()).toBeTruthy()
       expect(bell.find(selectors.ocIconStub).exists()).toBeTruthy()
-      expect(bell.find(selectors.ocIconStub).attributes('name')).toBe('bell')
+      expect(bell.find(selectors.ocIconStub).attributes('name')).toBe('notification-3')
       expect(bell.attributes('aria-label')).toBe('Notifications')
     })
   })
diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap
index 7423dbc6753..df5565ab756 100644
--- a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap
@@ -2,15 +2,15 @@
 
 exports[`OcSidebarNav renders navItems into a list 1`] = `
 <div id="web-nav-sidebar" class="uk-visible@l"><button aria-label="Toggle sidebar" class="toggle-sidebar-button oc-py-s oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw toggle-sidebar-button-expanded oc-pr-s">
-    <oc-icon-stub name="chevron_left" accessiblelabel="" type="span" size="large" variation="passive"></oc-icon-stub>
+    <oc-icon-stub name="arrow-drop-left" filltype="line" accessiblelabel="" type="span" size="large" variation="passive"></oc-icon-stub>
   </button>
   <nav aria-label="Sidebar top navigation menu" class="oc-sidebar-nav oc-my-l oc-px-xs">
     <oc-list-stub>
-      <sidebar-nav-item-stub name="All files" active="true" target="/files/list/all" icon="folder"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shared with me" target="/files/list/shared-with-me" icon="shared-with-me"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shared with others" target="/files/list/shared-with-others" icon="shared-with-others"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shared via link" target="/files/list/shared-via-link" icon="link"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Deleted files" target="/files/list/trash-bin" icon="delete"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="All files" active="true" target="/files/list/all" icon="folder" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shared with me" target="/files/list/shared-with-me" icon="shared-with-me" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shared with others" target="/files/list/shared-with-others" icon="shared-with-others" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shared via link" target="/files/list/shared-via-link" icon="link" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Deleted files" target="/files/list/trash-bin" icon="delete" filltype="fill"></sidebar-nav-item-stub>
     </oc-list-stub>
   </nav> <span class="footer">Footer</span>
 </div>
@@ -18,15 +18,15 @@ exports[`OcSidebarNav renders navItems into a list 1`] = `
 
 exports[`OcSidebarNav toggles back into open state upon button click 1`] = `
 <div id="web-nav-sidebar" class="uk-visible@l"><button aria-label="Toggle sidebar" class="toggle-sidebar-button oc-py-s oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw toggle-sidebar-button-expanded oc-pr-s">
-    <oc-icon-stub name="chevron_left" accessiblelabel="" type="span" size="large" variation="passive"></oc-icon-stub>
+    <oc-icon-stub name="arrow-drop-left" filltype="line" accessiblelabel="" type="span" size="large" variation="passive"></oc-icon-stub>
   </button>
   <nav aria-label="Sidebar top navigation menu" class="oc-sidebar-nav oc-my-l oc-px-xs">
     <oc-list-stub>
-      <sidebar-nav-item-stub name="All files" active="true" target="/files/list/all" icon="folder"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shared with me" target="/files/list/shared-with-me" icon="shared-with-me"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shared with others" target="/files/list/shared-with-others" icon="shared-with-others"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shared via link" target="/files/list/shared-via-link" icon="link"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Deleted files" target="/files/list/trash-bin" icon="delete"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="All files" active="true" target="/files/list/all" icon="folder" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shared with me" target="/files/list/shared-with-me" icon="shared-with-me" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shared with others" target="/files/list/shared-with-others" icon="shared-with-others" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shared via link" target="/files/list/shared-via-link" icon="link" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Deleted files" target="/files/list/trash-bin" icon="delete" filltype="fill"></sidebar-nav-item-stub>
     </oc-list-stub>
   </nav> <span class="footer">Footer</span>
 </div>
@@ -34,15 +34,15 @@ exports[`OcSidebarNav toggles back into open state upon button click 1`] = `
 
 exports[`OcSidebarNav toggles into closed state upon button click 1`] = `
 <div id="web-nav-sidebar" class="uk-visible@l oc-app-navigation-collapsed"><button aria-label="Toggle sidebar" class="toggle-sidebar-button oc-py-s oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw toggle-sidebar-button-collapsed">
-    <oc-icon-stub name="chevron_right" accessiblelabel="" type="span" size="large" variation="passive"></oc-icon-stub>
+    <oc-icon-stub name="arrow-drop-right" filltype="line" accessiblelabel="" type="span" size="large" variation="passive"></oc-icon-stub>
   </button>
   <nav aria-label="Sidebar top navigation menu" class="oc-sidebar-nav oc-my-l oc-px-xs">
     <oc-list-stub>
-      <sidebar-nav-item-stub name="All files" active="true" target="/files/list/all" icon="folder" collapsed="true"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shared with me" target="/files/list/shared-with-me" icon="shared-with-me" collapsed="true"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shared with others" target="/files/list/shared-with-others" icon="shared-with-others" collapsed="true"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shared via link" target="/files/list/shared-via-link" icon="link" collapsed="true"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Deleted files" target="/files/list/trash-bin" icon="delete" collapsed="true"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="All files" active="true" target="/files/list/all" icon="folder" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shared with me" target="/files/list/shared-with-me" icon="shared-with-me" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shared with others" target="/files/list/shared-with-others" icon="shared-with-others" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shared via link" target="/files/list/shared-via-link" icon="link" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Deleted files" target="/files/list/trash-bin" icon="delete" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
     </oc-list-stub>
   </nav> <span class="footer">Footer</span>
 </div>
diff --git a/packages/web-runtime/tests/unit/components/__snapshots__/ApplicationsMenu.spec.js.snap b/packages/web-runtime/tests/unit/components/__snapshots__/ApplicationsMenu.spec.js.snap
index 4a3da9d7d13..8211b18320d 100644
--- a/packages/web-runtime/tests/unit/components/__snapshots__/ApplicationsMenu.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/__snapshots__/ApplicationsMenu.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`ApplicationsMenu component shoud set aria-label prop on switcher button 1`] = `
 <oc-button-stub type="button" size="medium" arialabel="Application Switcher" variation="inverse" appearance="raw" justifycontent="center" gapsize="medium" id="_appSwitcherButton" class="oc-topbar-menu-burger">
-  <oc-icon-stub name="apps" accessiblelabel="" type="span" size="large" variation="passive" class="uk-flex"></oc-icon-stub>
+  <oc-icon-stub name="grid" filltype="fill" accessiblelabel="" type="span" size="large" variation="passive" class="uk-flex"></oc-icon-stub>
 </oc-button-stub>
 `;
 
@@ -11,11 +11,11 @@ exports[`ApplicationsMenu component should show app menus 1`] = `
   <ul class="oc-p-xs">
     <li class="oc-pt-s oc-pb-s" style="list-style: none;">
       <router-link-stub to="/files" tag="a" ariacurrentvalue="page" event="click" style="display: inline-flex; vertical-align: top; gap: 10px;">
-        <oc-icon-stub name="folder" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub> <span>Files</span>
+        <oc-icon-stub name="folder" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub> <span>Files</span>
       </router-link-stub>
     </li>
     <li class="oc-pt-s oc-pb-s" style="list-style: none;"><a target="_blank" href="http://some.org" style="display: inline-flex; vertical-align: top; gap: 10px;">
-        <oc-icon-stub name="some-icon" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub> <span>External</span>
+        <oc-icon-stub name="some-icon" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub> <span>External</span>
       </a></li>
   </ul>
 </oc-drop-stub>
diff --git a/packages/web-runtime/tests/unit/components/__snapshots__/FeedbackLink.spec.js.snap b/packages/web-runtime/tests/unit/components/__snapshots__/FeedbackLink.spec.js.snap
index bf50430de7c..9805a11f184 100644
--- a/packages/web-runtime/tests/unit/components/__snapshots__/FeedbackLink.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/__snapshots__/FeedbackLink.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FeedbackLink component has no accessibility violations 1`] = `
-<div class="uk-flex"><a aria-label="ownCloud feedback survey" href="https://owncloud.com/web-design-feedback" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" target="_blank" aria-describedby="oc-feedback-link-description"><span class="oc-icon oc-icon-m oc-icon-inverse"><svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"> <path xmlns="http://www.w3.org/2000/svg" d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z"></path> </svg></span></a>
+<div class="uk-flex"><a aria-label="ownCloud feedback survey" href="https://owncloud.com/web-design-feedback" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" target="_blank" aria-describedby="oc-feedback-link-description"><span class="oc-icon oc-icon-m oc-icon-inverse"><!----></span></a>
   <p id="oc-feedback-link-description" class="oc-invisible-sr">Provide your feedback: We'd like to improve the web design and would be happy to hear your feedback. Thank you! Your ownCloud team.</p>
 </div>
 `;
diff --git a/rollup.config.js b/rollup.config.js
index b74ab7f17dd..4ac47b7db5a 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -81,7 +81,8 @@ const plugins = [
         src: `./config/${production ? 'config.dist.json' : 'config.json'}`,
         dest: 'dist'
       },
-      { src: 'node_modules/requirejs/require.js', dest: 'dist/js' }
+      { src: 'node_modules/requirejs/require.js', dest: 'dist/js' },
+      { src: 'node_modules/owncloud-design-system/dist/system/icons', dest: 'dist/' }
     ]
   }),
   html({
diff --git a/tests/acceptance/features/webUIFilesList/fileList.feature b/tests/acceptance/features/webUIFilesList/fileList.feature
index 9cd39b1d07a..24d8b0b6fdf 100644
--- a/tests/acceptance/features/webUIFilesList/fileList.feature
+++ b/tests/acceptance/features/webUIFilesList/fileList.feature
@@ -25,12 +25,6 @@ Feature: User can view files inside a folder
     Then there should be no resources listed on the webUI
 
 
-  @issue-3264
-  Scenario: Thumbnails are not loaded for known file types
-    When the user uploads file "new-data.zip" using the webUI
-    Then the file "new-data.zip" should have a file type icon displayed on the webUI
-
-
   Scenario: All files list displays public link quick action
     When the user browses to the files page
     Then quick action "public link" should be displayed on the webUI
diff --git a/tests/acceptance/features/webUISharingPublicBasic/publicLinkPublicActions.feature b/tests/acceptance/features/webUISharingPublicBasic/publicLinkPublicActions.feature
index 129ca59ef83..5eaa0d539aa 100644
--- a/tests/acceptance/features/webUISharingPublicBasic/publicLinkPublicActions.feature
+++ b/tests/acceptance/features/webUISharingPublicBasic/publicLinkPublicActions.feature
@@ -9,11 +9,11 @@ Feature: Access public link shares by public
     And user "Alice" has created folder "simple-folder"
 
 
-  Scenario: Thumbnails are not loaded for known file types in public link file list
-    Given user "Alice" has shared folder "simple-folder" with link with "read,create" permissions
-    When the public uses the webUI to access the last public link created by user "Alice"
-    And the user uploads file "new-data.zip" using the webUI
-    Then the file "new-data.zip" should have a file type icon displayed on the webUI
+
+
+
+
+
 
   Scenario: public should be able to access a public link with correct password
     Given user "Alice" has created file "simple-folder/lorem.txt"
diff --git a/tests/acceptance/pageObjects/FilesPageElement/filesList.js b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
index ac0674ac7ef..5b3f6e494e5 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/filesList.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
@@ -326,28 +326,6 @@ module.exports = {
       await this.waitForElementPresent({ selector: '@anyAfterLoading', abortOnFailure })
       return this
     },
-    getResourceThumbnail: async function (resourceName, elementType) {
-      let iconUrl = null
-      await this.waitForFileVisible(resourceName)
-      // try reading the src tag
-      const fileRowPreviewSelector =
-        this.getFileRowSelectorByFileName(resourceName, elementType) +
-        this.elements.filePreviewInFileRow.selector
-      await this.api.getAttribute('xpath', fileRowPreviewSelector, 'src', (result) => {
-        // somehow when element was not found the result.value is an empty array...
-        if (result.status !== -1 && typeof result.value === 'string') {
-          iconUrl = result.value
-        }
-      })
-      if (!iconUrl) {
-        const fileRowIconSelector =
-          this.getFileRowSelectorByFileName(resourceName, elementType) +
-          this.elements.fileIconInFileRow.selector
-        // check that at least the file type icon svg is displayed
-        await this.api.waitForElementVisible('xpath', fileRowIconSelector)
-      }
-      return iconUrl
-    },
     /**
      * Wait for a filerow with given filename to be visible
      *
@@ -730,13 +708,6 @@ module.exports = {
     contextMenuPanel: {
       selector: '#oc-files-context-menu'
     },
-    /**
-     * This element is concatenated as child of @see fileRowByResourcePath
-     */
-    fileIconInFileRow: {
-      selector: '//span[contains(@class, "oc-icon-passive")]//*[local-name() = "svg"]',
-      locateStrategy: 'xpath'
-    },
     /**
      * This element is concatenated as child of @see fileRowByResourcePath
      */
diff --git a/tests/acceptance/stepDefinitions/filesContext.js b/tests/acceptance/stepDefinitions/filesContext.js
index 644d82ed8f9..b6cbffaf9f8 100644
--- a/tests/acceptance/stepDefinitions/filesContext.js
+++ b/tests/acceptance/stepDefinitions/filesContext.js
@@ -1309,16 +1309,6 @@ When(
     await _setFilesTableSort(column, false)
   }
 )
-Then(
-  'the file {string} should have a file type icon displayed on the webUI',
-  async function (resource) {
-    const iconUrl = await client.page.FilesPageElement.filesList().getResourceThumbnail(
-      resource,
-      'file'
-    )
-    assert.strictEqual(null, iconUrl, 'No icon URL expected when file type icon is displayed')
-  }
-)
 
 Then('quick action {string} should be displayed on the webUI', function (action) {
   return client.page.FilesPageElement.filesRow().isQuickActionVisible(action)
diff --git a/tests/drone/config-oc10-integration-app-oauth.json b/tests/drone/config-oc10-integration-app-oauth.json
index 4d82f3be357..9e65366eb5c 100644
--- a/tests/drone/config-oc10-integration-app-oauth.json
+++ b/tests/drone/config-oc10-integration-app-oauth.json
@@ -23,11 +23,11 @@
         "fr": "Fichiers",
         "zh_CN": "文件"
       },
-      "icon": "switch_ui",
+      "icon": "swap-box",
       "url": "http://owncloud/index.php/apps/files"
     },
     {
-      "icon": "application",
+      "icon": "settings-4",
       "menu": "user",
       "target": "_self",
       "title": {
diff --git a/yarn.lock b/yarn.lock
index ace095705b4..231d257040f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1407,12 +1407,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@cspotcode/source-map-support@npm:0.6.1":
-  version: 0.6.1
-  resolution: "@cspotcode/source-map-support@npm:0.6.1"
+"@cspotcode/source-map-support@npm:0.7.0":
+  version: 0.7.0
+  resolution: "@cspotcode/source-map-support@npm:0.7.0"
   dependencies:
     "@cspotcode/source-map-consumer": 0.8.0
-  checksum: da9fb4f6404ebd210537bfa8b2821a747407bf422d2d3d46f29bf85c7c3a68a126de1a9ec41398d57ca116c3bef56d58c2fb4def0800630b1ec82533ad2447c2
+  checksum: 9faddda7757cd778b5fd6812137b2cc265810043680d6399acc20441668fafcdc874053be9dccd0d9110087287bfad27eb3bf342f72bceca9aa9059f5d0c4be8
   languageName: node
   linkType: hard
 
@@ -2118,20 +2118,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/jest-dom@npm:^5.15.0":
-  version: 5.15.0
-  resolution: "@testing-library/jest-dom@npm:5.15.0"
+"@testing-library/jest-dom@npm:^5.16.1":
+  version: 5.16.1
+  resolution: "@testing-library/jest-dom@npm:5.16.1"
   dependencies:
     "@babel/runtime": ^7.9.2
     "@types/testing-library__jest-dom": ^5.9.1
-    aria-query: ^4.2.2
+    aria-query: ^5.0.0
     chalk: ^3.0.0
     css: ^3.0.0
     css.escape: ^1.5.1
     dom-accessibility-api: ^0.5.6
     lodash: ^4.17.15
     redent: ^3.0.0
-  checksum: fb11af2462b28bdcbbddf199f58e7f9153358358e2ec47dba311f21d88014351cc31087560e9cbacbccc78063e455361efffb31be6242edd1dbd2e21bb3f4359
+  checksum: c5e3b5b021b50478137f96b85f8f6f86d2b25555d2501548982e093986f9c089c7b394449c30283ca3e28a50e845587403d9124ad1b516c55cf9af20a0fbbde4
   languageName: node
   linkType: hard
 
@@ -2741,14 +2741,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/composition-api@npm:^1.2.4":
-  version: 1.2.4
-  resolution: "@vue/composition-api@npm:1.2.4"
+"@vue/composition-api@npm:^1.4.3":
+  version: 1.4.3
+  resolution: "@vue/composition-api@npm:1.4.3"
   dependencies:
-    tslib: ^2.3.0
+    tslib: ^2.3.1
   peerDependencies:
     vue: ">= 2.5 < 3"
-  checksum: a38651fe05b135cbddccf17090aeed4ef1b12e2f8da613778cf788fd18bf92292888ffad422d91b634af11008e843ca815ab1048b3806af0511ac0a7a88e2c8b
+  checksum: 638d9be202543dd9d589fe7c75e4afbffa115d2843a31abd4fec41e942e667f042f599f692f483f30ac31dc5499e5a8cfbafe75a8827cdb55e461716fad97550
   languageName: node
   linkType: hard
 
@@ -6188,12 +6188,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-promise@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "eslint-plugin-promise@npm:5.1.0"
+"eslint-plugin-promise@npm:^5.2.0":
+  version: 5.2.0
+  resolution: "eslint-plugin-promise@npm:5.2.0"
   peerDependencies:
     eslint: ^7.0.0
-  checksum: e62947aaea6882951a1a9f5fe3e3c7925b8dcc222338f7979bd1495ba0f0dc701820116b108be1e801f6e5156eb9a928142f29c659fd21a5d65a4be495bb327d
+  checksum: 5d6b2d28408c5afde6386942862427af3d83c9a130eb2555bb54b26a1761914e2c7326aca1be26dd3fee6405e65a2ee9432a4526147e5962545060ea0ef64058
   languageName: node
   linkType: hard
 
@@ -8782,12 +8782,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-mock-axios@npm:^4.4.0":
-  version: 4.4.0
-  resolution: "jest-mock-axios@npm:4.4.0"
+"jest-mock-axios@npm:^4.5.0":
+  version: 4.5.0
+  resolution: "jest-mock-axios@npm:4.5.0"
   dependencies:
     synchronous-promise: ^2.0.15
-  checksum: a49c4ca51d9a33ca07dfc40d288fcdada0ab92a571b4d0188996c8351c6904cf885c1f665c8a641b31b85fac7dc6cc2c7058fefe816600230da9cdfe8341bcb5
+  checksum: 913da820bd5252c8832e26f3853e19f966cb46cd12368ffee8ceb3143188bad66a6d1af89f39affe0a4e7941ff4b7442889320782915e6f9470b1371872c8a93
   languageName: node
   linkType: hard
 
@@ -10878,11 +10878,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"owncloud-design-system@npm:12.0.0-alpha4":
-  version: 12.0.0-alpha4
-  resolution: "owncloud-design-system@npm:12.0.0-alpha4"
+"owncloud-design-system@npm:12.0.0-alpha7":
+  version: 12.0.0-alpha7
+  resolution: "owncloud-design-system@npm:12.0.0-alpha7"
   peerDependencies:
     "@popperjs/core": ^2.4.0
+    "@vue/composition-api": ^1.4.3
     filesize: ^8.0.0
     focus-trap: ^6.4.0
     focus-trap-vue: ^1.1.1
@@ -10897,7 +10898,7 @@ __metadata:
     vue-inline-svg: ^2.0.0
     vue-select: ^3.12.0
     webfontloader: ^1.6.28
-  checksum: 162a6f59b72aa2a2bbf033df0663cb43ab570948bba8ae42f8d3cf66e7a99dc4e591d9a32c7bebac86cb64994e14f5190a88a256aff78769523095f286a71601
+  checksum: f90feaa2f6123f34b23588b51226d6839d91a5d2a556441117301a142c33ba788c4a167d1c8a5f953f096359694e71902ac51b778fd76222eb3696a691aad48f
   languageName: node
   linkType: hard
 
@@ -13149,7 +13150,7 @@ __metadata:
     "@rollup/plugin-json": ^4.1.0
     "@rollup/plugin-typescript": ^8.2.5
     "@testing-library/dom": ^8.11.0
-    "@testing-library/jest-dom": ^5.15.0
+    "@testing-library/jest-dom": ^5.16.1
     "@testing-library/user-event": ^13.5.0
     "@testing-library/vue": ^5.8.2
     "@types/jest": ^26.0.23
@@ -13173,7 +13174,7 @@ __metadata:
     eslint-plugin-jest: ^24.1.3
     eslint-plugin-node: ^11.1.0
     eslint-plugin-prettier: ^4.0.0
-    eslint-plugin-promise: ^5.1.0
+    eslint-plugin-promise: ^5.2.0
     eslint-plugin-vue: ^7.13.0
     eslint-plugin-vuejs-accessibility: ^0.7.1
     focus-trap: ^6.4.0
@@ -13181,7 +13182,7 @@ __metadata:
     jest: ^26.6.3
     jest-axe: ^4.1.0
     jest-fetch-mock: ^3.0.3
-    jest-mock-axios: ^4.4.0
+    jest-mock-axios: ^4.5.0
     jest-serializer-vue: ^2.0.2
     jest-svg-transformer: ^1.0.0
     join-path: ^1.1.1
@@ -13213,7 +13214,7 @@ __metadata:
     rollup-plugin-vue: ^5.1.4
     sync-fetch: ^0.3.1
     ts-jest: ^26.5.6
-    ts-node: ^10.2.0
+    ts-node: ^10.4.0
     tslib: ^2.2.0
     typescript: ^4.3.2
     url-search-params-polyfill: ^8.0.0
@@ -14540,11 +14541,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ts-node@npm:^10.2.0":
-  version: 10.2.1
-  resolution: "ts-node@npm:10.2.1"
+"ts-node@npm:^10.4.0":
+  version: 10.4.0
+  resolution: "ts-node@npm:10.4.0"
   dependencies:
-    "@cspotcode/source-map-support": 0.6.1
+    "@cspotcode/source-map-support": 0.7.0
     "@tsconfig/node10": ^1.0.7
     "@tsconfig/node12": ^1.0.7
     "@tsconfig/node14": ^1.0.0
@@ -14572,7 +14573,7 @@ __metadata:
     ts-node-script: dist/bin-script.js
     ts-node-transpile-only: dist/bin-transpile.js
     ts-script: dist/bin-script-deprecated.js
-  checksum: f37d2827a583c51d012cdd3d9b96629fba7a5b5dfad2c26ca48c7c89f904118924689ca56f4b9b2136217194870a76f26aae06e3490ee613b0e960f02dc96bbe
+  checksum: 3933ac0a937d33c45e04a6750fcdd3e765eb2897d1da1307cd97ac52af093bcfb632ec0453a75000a65c8b5b7bdb32b1077050a186dcc556e62657cb592e6d49
   languageName: node
   linkType: hard
 
@@ -14607,7 +14608,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.3, tslib@npm:^2.2.0, tslib@npm:^2.3.0":
+"tslib@npm:^2.0.3, tslib@npm:^2.2.0, tslib@npm:^2.3.1":
   version: 2.3.1
   resolution: "tslib@npm:2.3.1"
   checksum: de17a98d4614481f7fcb5cd53ffc1aaf8654313be0291e1bfaee4b4bb31a20494b7d218ff2e15017883e8ea9626599b3b0e0229c18383ba9dce89da2adf15cb9
@@ -15343,7 +15344,7 @@ typescript@^4.3.2:
   dependencies:
     "@popperjs/core": ^2.4.0
     "@types/luxon": ^2.0.8
-    "@vue/composition-api": ^1.2.4
+    "@vue/composition-api": ^1.4.3
     easygettext: ^2.16.1
     filesize: ^8.0.0
     focus-trap: ^6.4.0
@@ -15352,7 +15353,7 @@ typescript@^4.3.2:
     lodash-es: ^4.17.21
     luxon: ^2.0.0
     oidc-client: 1.11.5
-    owncloud-design-system: 12.0.0-alpha4
+    owncloud-design-system: 12.0.0-alpha7
     owncloud-sdk: 1.0.0-2296
     p-queue: ^6.1.1
     popper-max-size-modifier: ^0.2.0