diff --git a/.storybook/preview.js b/.storybook/preview.js
index 7f873bfb6f..6299800b1e 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -4,11 +4,10 @@ import Vuetify from 'vuetify';
 
 import 'vuetify/dist/vuetify.min.css';
 
-import { icons, theme } from 'shared/vuetify';
+import { theme } from 'shared/vuetify';
 
 Vue.use(Vuetify, {
-  theme: theme(),
-  icons: icons(),
+  theme: theme()
 });
 
 addDecorator(() => ({
diff --git a/contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue b/contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue
index c3cba7907a..aac03ac029 100644
--- a/contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue
+++ b/contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue
@@ -14,7 +14,7 @@
       data-test="copy"
       @click="copyToClipboard"
     >
-      <Icon
+      <KIcon
         icon="copy"
       />
     </VBtn>
diff --git a/contentcuration/contentcuration/frontend/administration/pages/AdministrationIndex.vue b/contentcuration/contentcuration/frontend/administration/pages/AdministrationIndex.vue
index e6589334da..9e60959a34 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/AdministrationIndex.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/AdministrationIndex.vue
@@ -126,14 +126,6 @@
         vertical-align: middle;
       }
 
-      .v-icon:not(.v-icon--is-component) {
-        font-size: 16pt !important;
-        /* stylelint-disable-next-line custom-property-pattern */
-        color: var(--v-darkGrey-darken1) !important;
-        opacity: 1 !important;
-        transform: none !important;
-      }
-
       .v-input--checkbox {
         display: inline-block;
         width: min-content;
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue
index 7a871a42a5..8e4505ef88 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue
@@ -46,7 +46,7 @@
       <template #activator="{ on }">
         <VBtn v-bind="$attrs" v-on="on">
           actions
-          <Icon
+          <KIcon
             icon="dropdown"
             class="ml-1"
           />
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelDetails.vue b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelDetails.vue
index d2b166bf8b..0a6d9b054d 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelDetails.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelDetails.vue
@@ -3,7 +3,7 @@
   <FullscreenModal v-model="dialog">
     <template #close>
       <VBtn flat exact style="font-size: 14pt; text-transform: none;" @click="dialog = false">
-        <Icon class="mr-2" :color="$themeTokens.textInverted" icon="back" />
+        <KIcon class="mr-2" :color="$themeTokens.textInverted" icon="back" />
 
         Channel list
       </VBtn>
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelItem.vue b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelItem.vue
index 1d95ccbc45..11c1c4c7af 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelItem.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelItem.vue
@@ -13,7 +13,7 @@
           <VTooltip v-if="channel.public && !channel.deleted" bottom z-index="200" lazy>
             <template #activator="{ on }">
               <span class="px-1 py-2" v-on="on">
-                <Icon
+                <KIcon
                   icon="unpublishedResource"
                 />
               </span>
@@ -38,7 +38,7 @@
             target="_blank"
             class="ma-0"
           >
-            <Icon
+            <KIcon
               icon="openNewTab"
             />
           </VBtn>
@@ -73,7 +73,7 @@
         :to="searchChannelEditorsLink"
         target="_blank"
       >
-        <Icon
+        <KIcon
           icon="openNewTab"
         />
       </VBtn>
@@ -109,7 +109,7 @@
         />
         <span v-else class="grey--text">Not set</span>
         <VBtn small icon flat>
-          <Icon
+          <KIcon
             icon="edit"
           />
         </VBtn>
@@ -145,7 +145,7 @@
         />
         <span v-else class="grey--text">Not set</span>
         <VBtn small icon flat>
-          <Icon
+          <KIcon
             icon="edit"
           />
         </VBtn>
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue
index cc0a438725..88dfae7195 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue
@@ -69,17 +69,19 @@
 
         <template v-if="header.class === 'first' && selected.length">
           <span>({{ selectedCount }})</span>
-          <IconButton
+          <KIconButton
             icon="download"
             class="ma-0"
-            text="Download CSV"
+            tooltip="Download CSV"
+            ariaLabel="Download CSV"
             data-test="csv"
             @click="downloadCSV"
           />
-          <IconButton
+          <KIconButton
             icon="pdf"
             class="ma-0"
-            text="Download PDF"
+            tooltip="Download PDF"
+            ariaLabel="Download PDF"
             data-test="pdf"
             @click="downloadPDF"
           />
@@ -106,7 +108,6 @@
   import { channelExportMixin } from 'shared/views/channel/mixins';
   import { routerMixin } from 'shared/mixins';
   import Checkbox from 'shared/views/form/Checkbox';
-  import IconButton from 'shared/views/IconButton';
   import LanguageDropdown from 'shared/views/LanguageDropdown';
 
   const channelFilters = {
@@ -127,7 +128,6 @@
       Checkbox,
       ChannelItem,
       LanguageDropdown,
-      IconButton,
     },
     mixins: [tableMixin, filterMixin, channelExportMixin, routerMixin],
     data() {
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue
index 3331542803..b308a2ef32 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue
@@ -40,7 +40,7 @@
       <template #activator="{ on }">
         <VBtn v-bind="$attrs" v-on="on">
           Actions
-          <Icon icon="dropdown" />
+          <KIcon icon="dropdown" />
         </VBtn>
       </template>
       <VList>
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/UserDetails.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/UserDetails.vue
index fbe0c4bf46..565d4b1046 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Users/UserDetails.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Users/UserDetails.vue
@@ -3,7 +3,7 @@
   <FullscreenModal v-if="user" v-model="dialog">
     <template #close>
       <VBtn flat exact style="font-size: 14pt; text-transform: none;" @click="dialog = false">
-        <Icon class="mr-2" icon="back" :color="$themeTokens.textInverted" />
+        <KIcon class="mr-2" icon="back" :color="$themeTokens.textInverted" />
         User list
       </VBtn>
     </template>
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/UserItem.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/UserItem.vue
index d5d03733aa..45259a9475 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Users/UserItem.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Users/UserItem.vue
@@ -10,14 +10,22 @@
           <Checkbox v-model="selected" />
         </VFlex>
         <VFlex shrink>
-          <VTooltip v-if="user.is_admin" bottom z-index="200" lazy>
-            <template #activator="{ on }">
-              <span class="px-1 py-2" v-on="on">
-                <VIconWrapper color="light-green accent-4">$vuetify.icons.indicator</VIconWrapper>
-              </span>
-            </template>
-            <span>Administrator</span>
-          </VTooltip>
+          <KIcon
+            v-if="user.is_admin"
+            ref="admin"
+            icon="dot"
+            aria-label="Administrator"
+            :color="$themePalette.green.v_800"
+            :style="{ marginRight: '4px', fontSize: '10px' }"
+          />
+          <KTooltip
+            reference="admin"
+            :refs="$refs"
+            placement="bottom"
+            appendToOverlay
+          >
+            Administrator
+          </KTooltip>
         </VFlex>
         <VFlex class="py-2 text-truncate" grow style="max-width: 200px;">
           <ActionLink
@@ -39,7 +47,7 @@
         <template #activator="{ on }">
           {{ formatFileSize(user.disk_space) }}
           <VBtn icon small v-on="on">
-            <Icon
+            <KIcon
               icon="edit"
             />
           </VBtn>
@@ -60,7 +68,7 @@
     <td>
       {{ user.edit_count }}
       <VBtn icon small :to="searchUserChannelsLink" target="_blank">
-        <Icon icon="openNewTab" />
+        <KIcon icon="openNewTab" />
       </VBtn>
     </td>
     <td>{{ user.view_count }}</td>
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue
index ade5ba7dc4..cc30d732c4 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue
@@ -3,12 +3,13 @@
   <div>
     <h1 class="font-weight-bold px-4 py-2 title">
       {{ `${$formatNumber(count)} ${count === 1 ? 'user' : 'users'}` }}
-      <IconButton
+      <KIconButton
         v-if="count"
         icon="email"
         class="ma-0"
         :color="$themeTokens.primary"
-        :text="`Email ${$formatNumber(count)} ${count === 1 ? 'user' : 'users'}`"
+        :tooltip="`Email ${$formatNumber(count)} ${count === 1 ? 'user' : 'users'}`"
+        :ariaLabel="`Email ${$formatNumber(count)} ${count === 1 ? 'user' : 'users'}`"
         @click="showMassEmailDialog = true"
       />
       <EmailUsersDialog
@@ -78,10 +79,11 @@
 
         <template v-if="header.class === 'first' && selected.length">
           <span>({{ selectedCount }})</span>
-          <IconButton
+          <KIconButton
             icon="email"
             class="ma-0"
-            text="Email"
+            tooltip="Email"
+            ariaLabel="Email"
             data-test="email"
             @click="showEmailDialog = true"
           />
@@ -108,7 +110,6 @@
   import EmailUsersDialog from './EmailUsersDialog';
   import UserItem from './UserItem';
   import { routerMixin } from 'shared/mixins';
-  import IconButton from 'shared/views/IconButton';
   import Checkbox from 'shared/views/form/Checkbox';
   import CountryField from 'shared/views/form/CountryField';
 
@@ -125,7 +126,6 @@
     name: 'UserTable',
     components: {
       Checkbox,
-      IconButton,
       EmailUsersDialog,
       UserItem,
       CountryField,
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.vue
index 340cca0152..733758c1b1 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.vue
@@ -59,13 +59,13 @@
                   mr-2
                 >
                   <template v-if="$vuetify.breakpoint.lgAndUp">
-                    <Icon icon="error" />
+                    <KIcon icon="error" />
                     <span class="font-weight-bold red--text">
                       {{ $tr('incompleteItemIndicatorLabel') }}
                     </span>
                   </template>
                   <template v-else>
-                    <Icon ref="incompleteError" icon="error" />
+                    <KIcon ref="incompleteError" icon="error" />
                     <KTooltip
                       reference="incompleteError"
                       placement="bottom"
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
index e9a791369f..e9e39dfafe 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
@@ -53,7 +53,7 @@
                 <VLayout align-start justify-space-between>
                   <MarkdownViewer :markdown="question" />
 
-                  <Icon
+                  <KIcon
                     :color="$themePalette.grey.v_800"
                     icon="edit"
                     class="mr-2"
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue
index e6ed9d2fa9..7beb4f5ccd 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue
@@ -79,7 +79,7 @@
               data-test="hintsToggle"
               @click="areHintsOpen = !areHintsOpen"
             >
-              <Icon icon="chevronRight" />
+              <KIcon icon="chevronRight" />
               <span>{{ hintsToggleLabel }}</span>
             </span>
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemToolbar.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemToolbar.vue
index 357ac2737f..c8b54ea964 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemToolbar.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemToolbar.vue
@@ -15,7 +15,7 @@
             v-on="on"
             @click="clickItem(action)"
           >
-            <Icon
+            <KIcon
               v-if="config[action] && config[action].icon"
               :icon="
                 config[action].icon
@@ -40,7 +40,7 @@
             icon
             v-on="on"
           >
-            <Icon
+            <KIcon
               icon="optionsVertical"
               :color="$themePalette.grey.v_800"
             />
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/Channel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/Channel.vue
index 4d57bbac8e..02edc50692 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/Channel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/Channel.vue
@@ -2,7 +2,7 @@
 
   <LazyListGroup
     v-model="open"
-    appendIcon="arrow_drop_down"
+    appendIcon="dropdown"
     class="channel-item"
     :style="{ 'border-left-color': channelColor }"
   >
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/ContentNode.vue b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/ContentNode.vue
index 2c8139a390..359233cec9 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/ContentNode.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/ContentNode.vue
@@ -62,7 +62,7 @@
                       <VListTileAction
                         class="action-col px-1 v-list__group__header__append-icon"
                       >
-                        <Icon icon="dropdown" />
+                        <KIcon :icon="open ? 'dropup' : 'dropdown'" :style="{ fontSize: '22px' }" />
                       </VListTileAction>
                       <VSpacer />
                     </template>
@@ -85,7 +85,7 @@
                             v-on="on"
                             @click.stop
                           >
-                            <Icon icon="optionsHorizontal" />
+                            <KIcon icon="optionsHorizontal" />
                           </VBtn>
                         </template>
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue
index 13659c5c7d..b5bcfa8db7 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue
@@ -50,7 +50,7 @@
                         class="back-to-clipboard"
                         @click.prevent="resetPreviewNode"
                       >
-                        <span class="link-icon"><Icon
+                        <span class="link-icon"><KIcon
                           icon="back"
                           :color="$themeTokens.primary"
                         />
@@ -61,10 +61,11 @@
                   </VSlideXReverseTransition>
                   <VSlideXTransition leave-absolute>
                     <div v-if="selectionState && !previewSourceNode">
-                      <IconButton
+                      <KIconButton
                         v-if="allowMove"
                         icon="move"
-                        :text="$tr('moveSelectedButton')"
+                        :tooltip="$tr('moveSelectedButton')"
+                        :ariaLabel="$tr('moveSelectedButton')"
                         @click="calculateMoveNodes()"
                       />
                       <MoveModal
@@ -75,25 +76,28 @@
                         :clipboardTopicResourceCount="topicAndResourceCount"
                         @target="moveNodes"
                       />
-                      <IconButton
+                      <KIconButton
                         icon="copy"
-                        :text="$tr('duplicateSelectedButton')"
+                        :tooltip="$tr('duplicateSelectedButton')"
+                        :ariaLabel="$tr('duplicateSelectedButton')"
                         :disabled="legacyNodesSelected"
                         @click="duplicateNodes()"
                       />
-                      <IconButton
+                      <KIconButton
                         icon="remove"
-                        :text="$tr('deleteSelectedButton')"
+                        :tooltip="$tr('deleteSelectedButton')"
+                        :ariaLabel="$tr('deleteSelectedButton')"
                         @click="removeNodes()"
                       />
                     </div>
                   </VSlideXTransition>
                 </VListTileContent>
                 <VListTileAction style="min-width: 24px">
-                  <IconButton
+                  <KIconButton
                     class="ma-0"
                     icon="close"
-                    :text="$tr('close')"
+                    :tooltip="$tr('close')"
+                    :ariaLabel="$tr('close')"
                     @click="handleClose"
                   />
                 </VListTileAction>
@@ -149,7 +153,6 @@
   import Channel from './Channel';
   import ResizableNavigationDrawer from 'shared/views/ResizableNavigationDrawer';
   import Checkbox from 'shared/views/form/Checkbox';
-  import IconButton from 'shared/views/IconButton';
   import ToolBar from 'shared/views/ToolBar';
   import LoadingText from 'shared/views/LoadingText';
   import { promiseChunk } from 'shared/utils/helpers';
@@ -165,7 +168,6 @@
       ResourcePanel,
       Channel,
       Checkbox,
-      IconButton,
       ToolBar,
       LoadingText,
       MoveModal,
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeChangedIcon.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeChangedIcon.vue
index 9d2446dba2..e3aadc2119 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeChangedIcon.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeChangedIcon.vue
@@ -2,9 +2,10 @@
 
   <span v-if="message" class="mx-2">
 
-    <Icon
+    <KIcon
       ref="contentNode"
       :icon="showFilled ? 'unpublishedResource' : 'unpublishedChange'"
+      class="icon"
     />
 
     <KTooltip
@@ -85,8 +86,7 @@
 </script>
 
 <style scoped>
-  .v-icon {
-    vertical-align: bottom;
+  .icon {
     cursor: default;
   }
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
index 9d24404885..aff8a25764 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
@@ -30,7 +30,7 @@
           <VListTileAction class="handle-col" :aria-hidden="!hover" @click.stop>
             <transition name="fade">
               <VBtn :disabled="copying" flat icon>
-                <Icon :color="$themePalette.grey.v_600" icon="dragVertical" />
+                <KIcon :color="$themePalette.grey.v_600" icon="dragVertical" />
               </VBtn>
             </transition>
           </VListTileAction>
@@ -47,22 +47,23 @@
         <template #actions-end>
           <VListTileAction class="action-icon px-1" @click.stop>
             <transition name="fade">
-              <IconButton
+              <KIconButton
                 icon="rename"
                 size="small"
-                :text="$tr('editTooltip')"
+                :tooltip="$tr('editTooltip')"
+                :ariaLabel="$tr('editTooltip')"
                 :disabled="copying"
-                @click.stop
-                @click="editTitleDescription()"
+                @click.stop="editTitleDescription()"
               />
             </transition>
           </VListTileAction>
           <VListTileAction :aria-hidden="!active" class="action-icon px-1">
             <Menu v-model="activated">
               <template #activator="{ on }">
-                <IconButton
+                <KIconButton
                   icon="optionsVertical"
-                  :text="$tr('optionsTooltip')"
+                  :tooltip="$tr('optionsTooltip')"
+                  :ariaLabel="$tr('optionsTooltip')"
                   size="small"
                   :disabled="copying"
                   v-on="on"
@@ -81,10 +82,11 @@
         </template>
 
         <template #copy-fail-remove-action>
-          <IconButton
+          <KIconButton
             v-if="hasCopyingErrored"
             icon="close"
-            :text="$tr('removeNode')"
+            :tooltip="$tr('removeNode')"
+            :ariaLabel="$tr('removeNode')"
             size="small"
             @click="removeFailedCopyNode"
           />
@@ -113,7 +115,6 @@
   import ContentNodeOptions from './ContentNodeOptions';
   import ContentNodeContextMenu from './ContentNodeContextMenu';
   import Checkbox from 'shared/views/form/Checkbox';
-  import IconButton from 'shared/views/IconButton';
   import DraggableItem from 'shared/views/draggable/DraggableItem';
   import { ContentNode } from 'shared/data/resources';
   import { DragEffect, DropEffect, EffectAllowed } from 'shared/mixins/draggable/constants';
@@ -129,7 +130,6 @@
       ContentNodeOptions,
       ContentNodeContextMenu,
       Checkbox,
-      IconButton,
     },
     props: {
       nodeId: {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
index f7fc43c8a9..a3646f53f0 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
@@ -59,7 +59,7 @@
                         </h3>
                       </VFlex>
                       <VFlex v-if="!isTopic && isCoach" class="px-1">
-                        <Icon
+                        <KIcon
                           icon="coachContent"
                           style="vertical-align: middle;"
                         />
@@ -96,26 +96,24 @@
                     </span>
                     <span v-if="isTopic && node.coach_count">
                       <!-- for each learning activity -->
-                      <VTooltip bottom lazy>
-                        <template #activator="{ on }">
-                          <div style="display: inline-block;" v-on="on">
-                            <Icon
-                              icon="coachContent"
-                              class="mx-1"
-                              style="vertical-align: sub;"
-                            />
-                            <span v-if="isTopic">
-                              {{ $formatNumber(node.coach_count) }}
-                            </span>
-                          </div>
-                        </template>
-                        <span>
-                          {{ isTopic ?
-                            $tr('hasCoachTooltip', { value: node.coach_count })
-                            : $tr('coachTooltip')
-                          }}
-                        </span>
-                      </VTooltip>
+                      <KIcon
+                        ref="coachContent"
+                        icon="coachContent"
+                        :style="{ marginLeft: '6px' }"
+                      />
+                      <span v-if="isTopic">
+                        {{ $formatNumber(node.coach_count) }}
+                      </span>
+                      <KTooltip
+                        reference="coachContent"
+                        :refs="$refs"
+                        placement="bottom"
+                      >
+                        {{ isTopic ?
+                          $tr('hasCoachTooltip', { value: node.coach_count })
+                          : $tr('coachTooltip')
+                        }}
+                      </KTooltip>
                     </span>
                   </VListTileSubTitle>
                   <span v-if="!isCompact">
@@ -450,10 +448,6 @@
         padding-top: 16px;
       }
     }
-
-    .updated .v-icon {
-      vertical-align: middle;
-    }
   }
 
   .thumbnail-col {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeValidator.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeValidator.vue
index 4788c92390..fe3eb8bdb9 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeValidator.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeValidator.vue
@@ -1,30 +1,49 @@
 <template>
 
-  <span v-if="noTitle && !hideTitleValidation" class="red--text title">
-    <VIconWrapper color="red">error</VIconWrapper>
-    <span class="mx-1">
+  <KLabeledIcon
+    v-if="noTitle && !hideTitleValidation"
+    icon="error"
+    class="icon"
+    :color="$themeTokens.error"
+    :style="{ fontSize: '20px' }"
+  >
+    <span :style="{ color: $themeTokens.error }">
       {{ $tr('missingTitle') }}
     </span>
+  </KLabeledIcon>
+  <span v-else-if="error">
+    <KIcon
+      ref="error"
+      icon="error"
+      class="icon"
+      :aria-label="error"
+      :style="{ fontSize: '20px', marginLeft: '16px' }"
+    />
+    <KTooltip
+      reference="error"
+      :refs="$refs"
+      placement="bottom"
+      appendToOverlay
+    >
+      {{ error }}
+    </KTooltip>
   </span>
-  <span v-else-if="error" class="mx-2">
-    <VTooltip bottom lazy>
-      <template #activator="{ on }">
-        <VIconWrapper :color="$themePalette.red.v_1100" v-on="on">
-          error
-        </VIconWrapper>
-      </template>
-      <span>{{ error }}</span>
-    </VTooltip>
-  </span>
-  <span v-else-if="warning" class="mx-2">
-    <VTooltip bottom lazy>
-      <template #activator="{ on }">
-        <VIconWrapper :color="$themePalette.yellow.v_1100" v-on="on">
-          warning
-        </VIconWrapper>
-      </template>
-      <span>{{ warning }}</span>
-    </VTooltip>
+  <span v-else-if="warning">
+    <KIcon
+      ref="warning"
+      icon="warningIncomplete"
+      :aria-label="warning"
+      class="icon"
+      :style="{ fontSize: '20px', marginLeft: '16px' }"
+    />
+    <KTooltip
+      reference="warning"
+      :refs="$refs"
+      placement="bottom"
+      appendToOverlay
+    >
+      {{ warning }}
+    </KTooltip>
   </span>
 
 </template>
@@ -73,8 +92,7 @@
 </script>
 
 <style scoped>
-  .v-icon {
-    vertical-align: bottom;
+  .icon {
     cursor: default;
   }
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/RelatedResourcesList/RelatedResourcesList.vue b/contentcuration/contentcuration/frontend/channelEdit/components/RelatedResourcesList/RelatedResourcesList.vue
index 8cd430681c..7cb08992f1 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/RelatedResourcesList/RelatedResourcesList.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/RelatedResourcesList/RelatedResourcesList.vue
@@ -41,7 +41,7 @@
                 v-on="on"
                 @click="onRemoveClick(item.id)"
               >
-                <Icon icon="clear" />
+                <KIcon icon="clear" />
               </VBtn>
             </template>
             <span>{{ removeBtnLabel }}</span>
@@ -59,7 +59,6 @@
 
   import ActionLink from 'shared/views/ActionLink';
   import ContentNodeIcon from 'shared/views/ContentNodeIcon';
-  import Icon from 'shared/views/Icon';
   import { titleMixin } from 'shared/mixins';
 
   export default {
@@ -67,7 +66,6 @@
     components: {
       ActionLink,
       ContentNodeIcon,
-      Icon,
     },
     mixins: [titleMixin],
     props: {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
index 3e4a6caecc..b2ae91a2ea 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
@@ -39,7 +39,7 @@
           class="ma-0"
           @click="$emit('close')"
         >
-          <Icon icon="clear" />
+          <KIcon icon="clear" />
         </VBtn>
       </VLayout>
     </VFlex>
@@ -79,7 +79,7 @@
           @change="tab = 'questions'"
         >
           {{ $tr('questions') }}
-          <Icon
+          <KIcon
             v-if="invalidQuestions"
             icon="error"
             class="mx-2"
@@ -92,7 +92,7 @@
           @change="tab = 'details'"
         >
           {{ $tr('details') }}
-          <Icon
+          <KIcon
             v-if="invalidDetails"
             icon="error"
             class="mx-2"
@@ -186,7 +186,7 @@
                 lazy
               >
                 <template #activator="{ on }">
-                  <Icon
+                  <KIcon
                     icon="error"
                     v-on="on"
                   />
@@ -205,7 +205,7 @@
               v-if="!assessmentItems.length"
               class="red--text"
             >
-              <Icon
+              <KIcon
                 icon="error"
               />
               <span class="mx-1">{{ $tr('noQuestionsError') }}</span>
@@ -239,7 +239,7 @@
               v-if="isExercise && noMasteryModel"
               class="red--text"
             >
-              <Icon
+              <KIcon
                 icon="error"
               />
               <span class="mx-1">{{ $tr('noMasteryModelError') }}</span>
@@ -426,7 +426,7 @@
                 v-if="noLicense"
                 class="red--text"
               >
-                <Icon
+                <KIcon
                   icon="error"
                 />
                 <span class="mx-1">{{ $tr('noLicenseError') }}</span>
@@ -438,7 +438,7 @@
                 v-if="noLicenseDescription"
                 class="red--text"
               >
-                <Icon
+                <KIcon
                   icon="error"
                 />
                 <span class="mx-1">{{ $tr('noLicenseDescriptionError') }}</span>
@@ -455,7 +455,7 @@
                 v-if="noCopyrightHolder"
                 class="red--text"
               >
-                <Icon
+                <KIcon
                   icon="error"
                 />
                 <span class="mx-1">{{ $tr('noCopyrightHolderError') }}</span>
@@ -481,7 +481,7 @@
                   v-if="!primaryFiles.length"
                   class="red--text"
                 >
-                  <Icon
+                  <KIcon
                     icon="error"
                   />
                   <span class="mx-1">{{ $tr('noFilesError') }}</span>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue b/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
index a90a5f878c..f72a3f6d0e 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
@@ -63,18 +63,24 @@
                         :style="{ transform: toggleTransform }"
                         @click.stop="toggle"
                       >
-                        <Icon icon="chevronRight" />
+                        <KIcon icon="chevronRight" />
                       </VBtn>
                     </VFlex>
                     <VFlex shrink class="px-1">
-                      <VTooltip :disabled="!hasTitle(node)" bottom open-delay="500" lazy>
-                        <template #activator="{ on }">
-                          <VIconWrapper v-on="on">
-                            {{ node.resource_count ? "folder" : "folder_open" }}
-                          </VIconWrapper>
-                        </template>
-                        <span>{{ getTitle(node) }}</span>
-                      </VTooltip>
+                      <KIcon
+                        ref="topic"
+                        :color="$themeTokens.annotation"
+                        :icon="node.resource_count ? 'topic' : 'emptyTopic'"
+                        :style="{ fontSize: '22px' }"
+                      />
+                      <KTooltip
+                        v-if="hasTitle(node)"
+                        reference="topic"
+                        :refs="$refs"
+                        placement="bottom"
+                      >
+                        {{ getTitle(node) }}
+                      </KTooltip>
                     </VFlex>
                     <VFlex
                       class="caption px-1 text-truncate"
@@ -128,9 +134,10 @@
                         data-test="editMenu"
                       >
                         <template #activator="{ on }">
-                          <IconButton
+                          <KIconButton
                             icon="optionsVertical"
-                            :text="$tr('optionsTooltip')"
+                            :tooltip="$tr('optionsTooltip')"
+                            :ariaLabel="$tr('optionsTooltip')"
                             v-on="on"
                             @click.stop
                           />
@@ -192,7 +199,6 @@
   import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
   import ContextMenuCloak from 'shared/views/ContextMenuCloak';
   import LoadingText from 'shared/views/LoadingText';
-  import IconButton from 'shared/views/IconButton';
   import DraggableCollection from 'shared/views/draggable/DraggableCollection';
   import DraggableItem from 'shared/views/draggable/DraggableItem';
   import DraggableHandle from 'shared/views/draggable/DraggableHandle';
@@ -212,7 +218,6 @@
       ContentNodeChangedIcon,
       ContentNodeValidator,
       LoadingText,
-      IconButton,
       ContentNodeCopyTaskProgress,
     },
     mixins: [titleMixin],
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditListItem.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditListItem.vue
index 54de65d7ef..a06184cd45 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditListItem.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditListItem.vue
@@ -29,24 +29,24 @@
     <VListTileAction class="mr-1 status-indicator">
       <div>
         <div v-if="!uploadingFiles.length">
-          <Icon v-if="!nodeIsValid" icon="error" class="error-icon" />
+          <KIcon v-if="!nodeIsValid" icon="error" class="error-icon" />
 
         </div>
-        <VTooltip v-else-if="erroredFiles.length" top lazy>
-          <template #activator="{ on }">
-            <VIconWrapper color="red" v-on="on">
-              error
-            </VIconWrapper>
-          </template>
-          <span>{{ errorMessage(erroredFiles[0].checksum) }}</span>
-        </VTooltip>
-        <VIconWrapper
+        <template v-else-if="erroredFiles.length">
+          <KIcon ref="erroredFiles" icon="error" />
+          <KTooltip
+            reference="erroredFiles"
+            placement="top"
+            :refs="$refs"
+          >
+            {{ errorMessage(erroredFiles[0].checksum) }}
+          </KTooltip>
+        </template>
+        <KIcon
           v-else-if="showUploadProgress && progress >= 1"
-          color="secondary"
-          data-test="done"
-        >
-          check_circle
-        </VIconWrapper>
+          icon="correct"
+          :color="$themePalette.yellow.v_1000"
+        />
         <VProgressCircular
           v-else-if="showUploadProgress"
           :size="20"
@@ -60,7 +60,7 @@
     </VListTileAction>
     <VListTileAction v-if="canRemove">
       <VBtn icon flat class="remove-item" @click.stop="removeNode">
-        <Icon icon="clear" />
+        <KIcon icon="clear" />
       </VBtn>
     </VListTileAction>
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue
index 00ea9f39e6..591afec53b 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue
@@ -30,7 +30,7 @@
               app
             >
               <VBtn data-test="close" icon dark @click="handleClose()">
-                <Icon icon="clear" :color="$themeTokens.textInverted" />
+                <KIcon icon="clear" :color="$themeTokens.textInverted" />
               </VBtn>
               <VToolbarTitle>{{ modalTitle }}</VToolbarTitle>
               <VSpacer />
@@ -82,7 +82,7 @@
             <VContent>
               <VLayout v-if="loadError" align-center justify-center fill-height class="py-5">
                 <VFlex class="text-xs-center">
-                  <Icon icon="error" />
+                  <KIcon icon="error" />
                   <p>{{ $tr('loadErrorText') }}</p>
                 </VFlex>
               </VLayout>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue
index a4dce1e337..3ed23ab6e0 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue
@@ -15,14 +15,21 @@
             <!-- Details tab -->
             <VTab ref="detailstab" :href="`#${tabs.DETAILS}`" @click="trackTab('Details')">
               {{ $tr(tabs.DETAILS) }}
-              <VTooltip v-if="!areDetailsValid || !areFilesValid" top lazy>
-                <template #activator="{ on }">
-                  <VIconWrapper color="red" dark small class="ml-2" v-on="on">
-                    error
-                  </VIconWrapper>
-                </template>
-                <span>{{ $tr('invalidFieldsToolTip') }}</span>
-              </VTooltip>
+              <template v-if="!areDetailsValid || !areFilesValid">
+                <KIcon
+                  ref="errorDetails"
+                  icon="error"
+                  :style="{ fontSize: '20px', marginLeft: '8px' }"
+                />
+                <KTooltip
+                  reference="errorDetails"
+                  :refs="$refs"
+                  placement="top"
+                  appendToOverlay
+                >
+                  {{ $tr('invalidFieldsToolTip') }}
+                </KTooltip>
+              </template>
             </VTab>
 
             <!-- Questions tab -->
@@ -33,14 +40,21 @@
               @click="trackTab('Questions')"
             >
               {{ $tr(tabs.QUESTIONS) }}
-              <VTooltip v-if="!areAssessmentItemsValid" top lazy>
-                <template #activator="{ on }">
-                  <VIconWrapper color="red" dark v-on="on">
-                    error
-                  </VIconWrapper>
-                </template>
-                <span>{{ $tr('invalidFieldsToolTip') }}</span>
-              </VTooltip>
+              <template v-if="!areAssessmentItemsValid">
+                <KIcon
+                  ref="errorQuestions"
+                  icon="error"
+                  :style="{ fontSize: '20px', marginLeft: '8px' }"
+                />
+                <KTooltip
+                  reference="errorQuestions"
+                  :refs="$refs"
+                  placement="top"
+                  appendToOverlay
+                >
+                  {{ $tr('invalidFieldsToolTip') }}
+                </KTooltip>
+              </template>
               <VChip v-else color="gray" dark>
                 {{ assessmentItemsCount }}
               </VChip>
@@ -356,11 +370,6 @@
   .v-tabs__div {
     min-width: 150px;
     font-weight: bold;
-
-    .v-icon {
-      margin-left: 5px;
-      font-size: 12pt;
-    }
   }
 
   .v-chip {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/move/MoveModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/move/MoveModal.vue
index a68c50d51b..2ccf76569e 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/move/MoveModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/move/MoveModal.vue
@@ -82,15 +82,15 @@
                     class="mx-1"
                     @click.stop="previewNodeId = node.id"
                   >
-                    <Icon icon="info" style="font-size:20px" :color="$themeTokens.primary" />
+                    <KIcon icon="info" style="font-size:20px" :color="$themeTokens.primary" />
                   </VBtn>
                   <VBtn
                     v-if="node.kind === 'topic'"
                     icon
-                    class="mx-1 rtl-flip"
+                    class="mx-1"
                     @click.stop="targetNodeId = node.id"
                   >
-                    <Icon icon="chevronRight" />
+                    <KIcon icon="chevronRight" />
                   </VBtn>
                 </div>
               </VListTileAction>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/publish/PublishModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/publish/PublishModal.vue
index a8d8f0c456..670398ad47 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/publish/PublishModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/publish/PublishModal.vue
@@ -15,7 +15,7 @@
       @cancel="close"
     >
       <p class="subheading">
-        <Icon icon="warningIncomplete" />
+        <KIcon icon="warningIncomplete" />
         <span class="mx-2">
           {{ $tr('incompleteCount', { count: node.error_count }) }}
         </span>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/DiffTable.vue b/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/DiffTable.vue
index b8c7565dcc..d80db8bf6a 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/DiffTable.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/DiffTable.vue
@@ -53,7 +53,7 @@
     </template>
   </VDataTable>
   <VLayout v-else justify-center column>
-    <Icon icon="error" class="mb-2" />
+    <KIcon icon="error" class="mb-2" />
 
     <!-- TODO: wrap string -->
     <div class="text-xs-center">
diff --git a/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.vue b/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.vue
index 5b58af9e62..bb42313884 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.vue
@@ -128,10 +128,11 @@
                   </template>
                   <template v-if="isTopic(child)" #actions-end>
                     <VListTileAction>
-                      <IconButton
+                      <KIconButton
                         :color="$themeTokens.primary"
                         icon="info"
-                        :text="$tr('viewDetails')"
+                        :tooltip="$tr('viewDetails')"
+                        :ariaLabel="$tr('viewDetails')"
                         data-test="btn-info"
                         size="small"
                         @click.stop.prevent="goToNodeDetail(child.id)"
@@ -258,7 +259,6 @@
   import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
   import BottomBar from 'shared/views/BottomBar';
   import Breadcrumbs from 'shared/views/Breadcrumbs';
-  import IconButton from 'shared/views/IconButton';
   import LoadingText from 'shared/views/LoadingText';
   import ResizableNavigationDrawer from 'shared/views/ResizableNavigationDrawer';
   import ToolBar from 'shared/views/ToolBar';
@@ -274,7 +274,6 @@
       ContentNodeListItem,
       Diff,
       DiffTable,
-      IconButton,
       LoadingText,
       ResizableNavigationDrawer,
       StudioTree,
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue b/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue
index b35dbb8aad..3e5412077c 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue
@@ -13,9 +13,10 @@
             </VFlex>
             <Menu v-if="item.displayNodeOptions" v-model="breadcrumbsMenu">
               <template #activator="{ on }">
-                <IconButton
+                <KIconButton
                   icon="dropdown"
-                  :text="$tr('optionsButton')"
+                  :tooltip="$tr('optionsButton')"
+                  :ariaLabel="$tr('optionsButton')"
                   v-on="on"
                 />
               </template>
@@ -32,9 +33,10 @@
         class="pa-1"
       >
         <template #activator="{ on }">
-          <IconButton
+          <KIconButton
             icon="list"
-            :text="$tr('viewModeTooltip')"
+            :tooltip="$tr('viewModeTooltip')"
+            :ariaLabel="$tr('viewModeTooltip')"
             v-on="on"
           />
         </template>
@@ -45,7 +47,7 @@
             @click="setViewMode(mode), trackViewMode(mode)"
           >
             <VListTileAction style="min-width: 32px;">
-              <Icon v-if="mode === viewMode" icon="check" />
+              <KIcon v-if="mode === viewMode" icon="check" />
             </VListTileAction>
             <VListTileTitle>{{ $tr(mode) }}</VListTileTitle>
           </VListTile>
@@ -111,10 +113,14 @@
       <VToolbarItems v-if="!loadingAncestors">
         <Menu v-if="canEdit">
           <template #activator="{ on }">
-            <VBtn color="primary" class="ml-2" style="height: 32px;" v-on="on">
-              {{ $tr('addButton') }}
-              <Icon icon="dropdown" :color="$themeTokens.textInverted" />
-            </VBtn>
+            <KButton
+              primary
+              :text="$tr('addButton')"
+              iconAfter="dropdown"
+              class="ml-2"
+              style="height: 32px;"
+              v-on="on"
+            />
           </template>
           <VList>
             <VListTile @click="newTopicNode">
@@ -183,18 +189,20 @@
         @scroll="scroll"
       >
         <template v-if="canEdit" #actions>
-          <IconButton
+          <KIconButton
             size="small"
             icon="edit"
-            :text="$tr('editButton')"
+            :tooltip="$tr('editButton')"
+            :ariaLabel="$tr('editButton')"
             @click="editNodes([detailNodeId])"
           />
           <Menu v-model="resourceDrawerMenu">
             <template #activator="{ on }">
-              <IconButton
+              <KIconButton
                 size="small"
                 icon="optionsVertical"
-                :text="$tr('optionsButton')"
+                :tooltip="$tr('optionsButton')"
+                :ariaLabel="$tr('optionsButton')"
                 v-on="on"
               />
             </template>
@@ -208,10 +216,11 @@
           </Menu>
         </template>
         <template v-else #actions>
-          <IconButton
+          <KIconButton
             size="small"
             icon="clipboard"
-            :text="$tr('copyToClipboardButton')"
+            :tooltip="$tr('copyToClipboardButton')"
+            :ariaLabel="$tr('copyToClipboardButton')"
             @click="copyToClipboard([detailNodeId])"
           />
         </template>
@@ -236,7 +245,6 @@
     QuickEditModals,
   } from '../constants';
   import NodePanel from './NodePanel';
-  import IconButton from 'shared/views/IconButton';
   import ToolBar from 'shared/views/ToolBar';
   import Breadcrumbs from 'shared/views/Breadcrumbs';
   import Checkbox from 'shared/views/form/Checkbox';
@@ -254,7 +262,6 @@
   export default {
     name: 'CurrentTopicView',
     components: {
-      IconButton,
       ToolBar,
       NodePanel,
       ResourceDrawer,
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/BrowsingCard.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/BrowsingCard.vue
index d5c1105995..96e7d14880 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/BrowsingCard.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/BrowsingCard.vue
@@ -31,7 +31,7 @@
               <VTooltip bottom lazy>
                 <template #activator="{ on }">
                   <div class="my-1" style="display: inline-block;" v-on="on">
-                    <Icon
+                    <KIcon
                       icon="coachContent"
                       style="vertical-align: text-top;"
                       class="mx-1"
@@ -72,14 +72,16 @@
         :href="openLocationUrl"
         :text="goToLocationLabel"
       />
-      <IconButton
-        :text="$tr('previewAction')"
+      <KIconButton
+        :tooltip="$tr('previewAction')"
+        :ariaLabel="$tr('previewAction')"
         icon="info"
         :color="$themeTokens.primary"
         @click.stop="$emit('preview')"
       />
-      <IconButton
-        :text="$tr('addToClipboardAction')"
+      <KIconButton
+        :tooltip="$tr('addToClipboardAction')"
+        :ariaLabel="$tr('addToClipboardAction')"
         icon="clipboard"
         @click.stop="$emit('copy_to_clipboard')"
       />
@@ -91,7 +93,6 @@
 
 <script>
 
-  import IconButton from 'shared/views/IconButton';
   import Thumbnail from 'shared/views/files/Thumbnail';
   import ToggleText from 'shared/views/ToggleText';
   import { constantsTranslationMixin, titleMixin } from 'shared/mixins';
@@ -102,7 +103,6 @@
     name: 'BrowsingCard',
     inject: ['RouteNames'],
     components: {
-      IconButton,
       Thumbnail,
       ToggleText,
     },
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ChannelInfoCard.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ChannelInfoCard.vue
index 4eceb4c85f..76b38ed1f9 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ChannelInfoCard.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ChannelInfoCard.vue
@@ -11,9 +11,12 @@
               :encoding="channel.thumbnail_encoding"
               style="width: 100%;"
             />
-            <VIconWrapper v-else size="80px" class="channel-icon">
-              apps
-            </VIconWrapper>
+            <KIcon
+              v-else
+              icon="channel"
+              :style="{ fontSize: '80px' }"
+              :color="$themeTokens.annotation"
+            />
           </VLayout>
         </VFlex>
 
@@ -93,10 +96,6 @@
     text-transform: none !important;
   }
 
-  .channel-icon {
-    font-size: 100px;
-  }
-
   .arrow-icon {
     margin-bottom: -3px;
   }
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ContentNodeChip.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ContentNodeChip.vue
deleted file mode 100644
index e0fefabf13..0000000000
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ContentNodeChip.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-
-  <VChip
-    v-if="icon"
-    :color="kind"
-    :textColor="textColor"
-    label
-    small
-    disabled
-  >
-    <VIconWrapper :color="textColor" class="mr-2">
-      {{ icon }}
-    </VIconWrapper>
-    <span>{{ translateConstant(kind) }}</span>
-  </VChip>
-
-</template>
-
-
-<script>
-
-  import { kindToIconMap } from 'shared/constants';
-  import { constantsTranslationMixin } from 'shared/mixins';
-
-  export default {
-    name: 'ContentNodeChip',
-    mixins: [constantsTranslationMixin],
-    props: {
-      kind: {
-        type: String,
-        required: true,
-      },
-    },
-    computed: {
-      icon() {
-        return kindToIconMap[this.kind];
-      },
-      textColor() {
-        if (this.kind === 'slideshow') {
-          return 'black';
-        } else {
-          return 'white';
-        }
-      },
-    },
-  };
-
-</script>
-
-
-<style lang="less" scoped></style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ImportFromChannelsModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ImportFromChannelsModal.vue
index e085b6fe7d..0a07975e78 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ImportFromChannelsModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ImportFromChannelsModal.vue
@@ -3,7 +3,7 @@
   <FullscreenModal v-model="dialog" :header="headerText">
     <template v-if="isReview" #close>
       <VBtn icon @click.stop="goBackToBrowse">
-        <Icon icon="back" :color="$themeTokens.textInverted" />
+        <KIcon icon="back" :color="$themeTokens.textInverted" />
       </VBtn>
     </template>
     <!-- Hack to make sure preview overlay appears inside import modal -->
@@ -31,10 +31,11 @@
       <template #actions>
         <VFadeTransition hide-on-leave>
           <VLayout v-show="previewIsSelected" align-center justify-end>
-            <VIconWrapper small>
-              check_circle
-            </VIconWrapper>
-            <span class="mx-1">{{ $tr('addedText') }}</span>
+            <KLabeledIcon
+              icon="correct"
+              :label="$tr('addedText')"
+              :color="$themeTokens.annotation"
+            />
             <VBtn color="primary" @click="deselectNode(previewNode)">
               {{ $tr('removeButton') }}
             </VBtn>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SavedSearchesModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SavedSearchesModal.vue
index c19f454320..ee1dcd3fb3 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SavedSearchesModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SavedSearchesModal.vue
@@ -34,19 +34,21 @@
             </VListTileContent>
 
             <VListTileAction>
-              <IconButton
+              <KIconButton
                 icon="edit"
-                color="grey"
-                :text="$tr('editAction')"
+                :color="$themeTokens.annotation"
+                :tooltip="$tr('editAction')"
+                :ariaLabel="$tr('editAction')"
                 @click="handleClickEdit(search.id)"
               />
             </VListTileAction>
 
             <VListTileAction>
-              <IconButton
+              <KIconButton
                 icon="clear"
-                color="grey"
-                :text="$tr('deleteAction')"
+                :color="$themeTokens.annotation"
+                :tooltip="$tr('deleteAction')"
+                :ariaLabel="$tr('deleteAction')"
                 @click="handleClickDelete(search.id)"
               />
             </VListTileAction>
@@ -88,7 +90,6 @@
   import { mapActions, mapGetters } from 'vuex';
   import EditSearchModal from './EditSearchModal';
   import MessageDialog from 'shared/views/MessageDialog';
-  import IconButton from 'shared/views/IconButton';
 
   export default {
     name: 'SavedSearchesModal',
@@ -96,7 +97,6 @@
     components: {
       EditSearchModal,
       MessageDialog,
-      IconButton,
     },
     props: {
       value: {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchFilters.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchFilters.vue
index 128e990ecb..60d935c260 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchFilters.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchFilters.vue
@@ -52,7 +52,7 @@
 
     <!-- Show coach content toggle -->
     <Checkbox v-model="coach" class="mb-4 mt-2">
-      <Icon icon="coachContent" />
+      <KIcon icon="coachContent" />
       <span class="mx-2 text-xs-left">{{ $tr('coachContentLabel') }}</span>
     </Checkbox>
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue
index 61fe498498..bf0fd7dd77 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue
@@ -24,7 +24,7 @@
                 hideDetails
               >
                 <template #prepend-inner>
-                  <Icon icon="search" />
+                  <KIcon icon="search" />
                 </template>
                 <template #append-outer>
                   <VBtn
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchResultsList.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchResultsList.vue
index b4a7d3d393..ebbb3a0c0f 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchResultsList.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchResultsList.vue
@@ -21,7 +21,7 @@
       <VFlex class="pl-4">
         <VContainer v-if="loadFailed">
           <p class="text-xs-center">
-            <Icon icon="error" />
+            <KIcon icon="error" />
           </p>
           <p class="text-xs-center">
             {{ $tr('failedToLoad') }}
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
index 3a22c6b3de..b2c3825799 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
@@ -36,7 +36,7 @@
         >
           <VBadge color="transparent">
             <template #badge>
-              <Icon
+              <KIcon
                 v-if="!currentChannel.language"
                 color="red"
                 icon="error"
@@ -129,7 +129,7 @@
               icon
               v-on="on"
             >
-              <Icon icon="optionsHorizontal" style="font-size: 25px;" />
+              <KIcon icon="optionsHorizontal" style="font-size: 25px;" />
             </VBtn>
           </template>
           <VList>
@@ -150,7 +150,7 @@
               >
                 <VListTileTitle>
                   {{ $tr('editChannel') }}
-                  <Icon
+                  <KIcon
                     v-if="!currentChannel.language"
                     class="mx-1"
                     color="red"
@@ -270,7 +270,7 @@
               fab
               class="clipboard-fab"
             >
-              <Icon icon="clipboard" style="font-size: 25px;" />
+              <KIcon icon="clipboard" style="font-size: 25px;" />
             </VBtn>
           </template>
         </DraggableRegion>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/index.vue b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/index.vue
index b1cd0a67f7..6c33b6aa9d 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/index.vue
@@ -9,7 +9,11 @@
         data-test="staging-tree-banner"
       >
         <VLayout align-center justify-start>
-          <VIconWrapper>build</VIconWrapper>
+          <KIcon
+            icon="systemUpdate"
+            :color="$themeTokens.annotation"
+            :style="{ fontSize: '20px' }"
+          />
           <span class="pl-1">
             <KRouterLink
               :to="stagingTreeLink"
@@ -64,22 +68,25 @@
               :flat="!listElevated"
               style="width: calc(100% - 1px);"
             >
-              <IconButton
+              <KIconButton
                 icon="collapseAll"
-                :text="$tr('collapseAllButton')"
+                :tooltip="$tr('collapseAllButton')"
+                :ariaLabel="$tr('collapseAllButton')"
                 @click="collapseAll"
               />
               <VSpacer />
-              <IconButton
+              <KIconButton
                 :disabled="!ancestors || !ancestors.length"
                 icon="myLocation"
-                :text="$tr('openCurrentLocationButton')"
+                :tooltip="$tr('openCurrentLocationButton')"
+                :ariaLabel="$tr('openCurrentLocationButton')"
                 @click="jumpToLocation"
               />
               <div v-if="hideHierarchyDrawer">
-                <IconButton
+                <KIconButton
                   icon="clear"
-                  :text="$tr('closeDrawer')"
+                  :tooltip="$tr('closeDrawer')"
+                  :ariaLabel="$tr('closeDrawer')"
                   @click="drawer.open = false"
                 />
               </div>
@@ -121,9 +128,10 @@
       >
         <template #action>
           <div v-if="hasTopics && !drawer.permanent" class="hierarchy-toggle">
-            <IconButton
+            <KIconButton
               icon="sidebar"
-              :text="$tr('showSidebar')"
+              :tooltip="$tr('showSidebar')"
+              :ariaLabel="$tr('showSidebar')"
               @click="drawer.open = true"
             />
           </div>
@@ -150,7 +158,6 @@
   import { RouteNames, DraggableRegions, DraggableUniverses } from '../../constants';
   import TreeViewBase from './TreeViewBase';
   import Banner from 'shared/views/Banner';
-  import IconButton from 'shared/views/IconButton';
   import PageNotFoundError from 'shared/views/errors/PageNotFoundError';
   import LoadingText from 'shared/views/LoadingText';
   import ResizableNavigationDrawer from 'shared/views/ResizableNavigationDrawer';
@@ -171,7 +178,6 @@
       TreeViewBase,
       StudioTree,
       Banner,
-      IconButton,
       PageNotFoundError,
       ResizableNavigationDrawer,
       CurrentTopicView,
@@ -432,14 +438,6 @@
     flex-direction: column;
   }
 
-  .hierarchy-toggle /deep/ .v-icon {
-    transform: scaleX(-1);
-
-    [dir='rtl'] & {
-      transform: none;
-    }
-  }
-
   .main-content {
     transition: padding-left 0s !important;
   }
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/ContentRenderer.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/ContentRenderer.vue
index 6ca814679d..a122e16fe0 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/ContentRenderer.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/ContentRenderer.vue
@@ -48,14 +48,19 @@
 
     <VCard v-else class="message-card" flat>
       <VLayout align-center justify-center fill-height data-test="not-supported">
-        <VTooltip bottom lazy>
-          <template #activator="{ on }">
-            <VIconWrapper color="grey lighten-2" large v-on="on">
-              visibility_off
-            </VIconWrapper>
-          </template>
-          <span>{{ $tr('previewNotSupported') }}</span>
-        </VTooltip>
+        <KTooltip
+          reference="previewUnavailableIcon"
+          placement="bottom"
+          :refs="$refs"
+        >
+          {{ $tr('previewNotSupported') }}
+        </KTooltip>
+        <KIcon
+          ref="previewUnavailableIcon"
+          icon="previewUnavailable"
+          :color="$themeTokens.annotation"
+          :style="{ fontSize: '40px' }"
+        />
       </VLayout>
     </VCard>
   </VLayout>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/EpubRenderer.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/EpubRenderer.vue
index 961edef489..53cd000568 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/EpubRenderer.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/EpubRenderer.vue
@@ -2,21 +2,19 @@
 
   <VLayout align-center fill-height row style="background-color: white;">
     <VFlex shrink class="px-2">
-      <IconButton
+      <KIconButton
         icon="chevronLeft"
-        text=""
+        tooltip=""
         size="small"
-        rtlFlip
         @click="rendition.prev()"
       />
     </VFlex>
     <div ref="epub" :style="{ height: '100%', width }"></div>
     <VFlex shrink class="px-2">
-      <IconButton
+      <KIconButton
         icon="chevronRight"
-        text=""
+        tooltip=""
         size="small"
-        rtlFlip
         @click="rendition.next()"
       />
     </VFlex>
@@ -27,13 +25,9 @@
 <script>
 
   import ePub from 'epubjs';
-  import IconButton from 'shared/views/IconButton';
 
   export default {
     name: 'EpubRenderer',
-    components: {
-      IconButton,
-    },
     props: {
       src: {
         type: String,
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUpload.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUpload.vue
index 2902d99f56..e68916efc3 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUpload.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUpload.vue
@@ -8,7 +8,7 @@
     >
       <VCardText>
         <VLayout align-center justify-center fill-height>
-          <Icon icon="error" />
+          <KIcon icon="error" />
           &nbsp; {{ $tr('fileError') }}
         </VLayout>
       </VCardText>
@@ -21,14 +21,18 @@
         <div class="preview-wrapper">
           <VCard v-if="!primaryFileCount" flat class="mb-2 message-card">
             <VLayout align-center justify-center fill-height>
-              <VTooltip bottom lazy>
-                <template #activator="{ on }">
-                  <VIconWrapper color="red" v-on="on">
-                    error
-                  </VIconWrapper>
-                </template>
-                <span>{{ $tr('noFileText') }}</span>
-              </VTooltip>
+              <KIcon
+                ref="noFileError"
+                icon="error"
+                :style="{ fontSize: '20px' }"
+              />
+              <KTooltip
+                reference="noFileError"
+                placement="bottom"
+                :refs="$refs"
+              >
+                {{ $tr('noFileText') }}
+              </KTooltip>
             </VLayout>
           </VCard>
           <FilePreview
@@ -191,10 +195,6 @@
     border-color: var(--v-greyBorder-base) !important;
     border-style: solid;
     border-width: 1px;
-
-    .v-icon {
-      cursor: default;
-    }
   }
 
   .v-input--radio-group {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadItem.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadItem.vue
index c83f68cd4f..4992140e8b 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadItem.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadItem.vue
@@ -54,10 +54,11 @@
           <VSpacer />
           <VListTileAction v-if="fileDisplay">
             <div v-if="allowFileRemove" class="remove-icon">
-              <IconButton
+              <KIconButton
                 icon="clear"
-                color="grey"
-                :text="$tr('removeFileButton')"
+                :color="$themeTokens.annotation"
+                :tooltip="$tr('removeFileButton')"
+                :ariaLabel="$tr('removeFileButton')"
                 data-test="remove"
                 @click="$emit('remove', file)"
               />
@@ -75,7 +76,6 @@
   import { mapGetters } from 'vuex';
   import FileStatusText from 'shared/views/files/FileStatusText';
   import Uploader from 'shared/views/files/Uploader';
-  import IconButton from 'shared/views/IconButton';
   import { constantsTranslationMixin, fileSizeMixin, fileStatusMixin } from 'shared/mixins';
   import FileDropzone from 'shared/views/files/FileDropzone';
 
@@ -85,7 +85,6 @@
       Uploader,
       FileDropzone,
       FileStatusText,
-      IconButton,
     },
     mixins: [constantsTranslationMixin, fileSizeMixin, fileStatusMixin],
     props: {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/__tests__/contentNodeThumbnail.spec.js b/contentcuration/contentcuration/frontend/channelEdit/views/files/__tests__/contentNodeThumbnail.spec.js
index 7f1cbc8b77..794a35c50a 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/__tests__/contentNodeThumbnail.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/__tests__/contentNodeThumbnail.spec.js
@@ -1,7 +1,6 @@
 import { mount } from '@vue/test-utils';
 import ContentNodeThumbnail from '../thumbnails/ContentNodeThumbnail';
 import { factory } from '../../../store';
-import IconButton from 'shared/views/IconButton';
 
 const testThumbnail = {
   id: 'test-image',
@@ -187,10 +186,7 @@ describe('thumbnail', () => {
   describe('remove workflow', () => {
     it('clicking remove button should emit an input event with a null value', () => {
       wrapper.setProps({ value: testThumbnail });
-      wrapper
-        .find('[data-test="remove"]')
-        .find(IconButton)
-        .vm.$emit('click');
+      wrapper.find('[data-test="remove"]').vm.$emit('click');
       expect(wrapper.emitted('input')[0][0]).toBe(null);
     });
   });
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SubtitlesList.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SubtitlesList.vue
index c83c8c7f75..4247a3d579 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SubtitlesList.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SubtitlesList.vue
@@ -69,7 +69,8 @@
 
 <style lang="less" scoped>
 
-  .subheading /deep/ .v-icon {
+  // align help icon
+  .subheading /deep/ svg {
     margin-left: 4px;
     vertical-align: text-top;
   }
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SupplementaryItem.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SupplementaryItem.vue
index 1cf53fcc5b..746ac4e2e6 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SupplementaryItem.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SupplementaryItem.vue
@@ -46,7 +46,7 @@
         </VListTileContent>
         <VListTileAction v-if="!readonly">
           <VBtn icon flat data-test="remove" @click.stop="$emit('remove', file.id)">
-            <Icon icon="clear" />
+            <KIcon class="clear-icon" icon="clear" />
           </VBtn>
         </VListTileAction>
       </VListTile>
@@ -136,9 +136,9 @@
 
 <style lang="less" scoped>
 
-  .v-icon {
+  .clear-icon {
+    padding-bottom: 4px;
     font-size: 14pt;
-    vertical-align: middle;
   }
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SupplementaryList.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SupplementaryList.vue
index 9d21591e2d..d826e45fd0 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SupplementaryList.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SupplementaryList.vue
@@ -49,7 +49,7 @@
           <VSpacer />
           <VListTileAction v-if="addingFile">
             <VBtn icon @click="reset">
-              <Icon icon="clear" />
+              <KIcon icon="clear" />
             </VBtn>
           </VListTileAction>
         </VListTile>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ContentNodeThumbnail.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ContentNodeThumbnail.vue
index 2d073b294b..a4c972b7c1 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ContentNodeThumbnail.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ContentNodeThumbnail.vue
@@ -89,7 +89,7 @@
               data-test="default-image"
               @click="openFileDialog"
             >
-              <Icon icon="image" style="font-size: 25px;" />
+              <KIcon icon="image" style="font-size: 25px;" />
             </ThumbnailCard>
           </FileDropzone>
         </div>
@@ -108,10 +108,11 @@
             @error="cancelPendingFile"
           >
             <template #default="{ generate }">
-              <IconButton
+              <KIconButton
                 :disabled="!primaryFilePath"
                 icon="generateThumbnail"
-                :text="$tr('generate')"
+                :tooltip="$tr('generate')"
+                :ariaLabel="$tr('generate')"
                 class="ma-0"
                 @click="generate"
               />
@@ -120,19 +121,21 @@
 
           <!-- Cropping options -->
           <span v-if="cropping">
-            <IconButton
+            <KIconButton
               icon="plus"
               data-test="zoomin"
-              :text="$tr('zoomIn')"
+              :tooltip="$tr('zoomIn')"
+              :ariaLabel="$tr('zoomIn')"
               class="ma-0"
               @click="Cropper && Cropper.zoomIn()"
               @mousedown="cropZoomIn"
               @mouseup="cropZoomStop"
             />
-            <IconButton
+            <KIconButton
               icon="minus"
               data-test="zoomout"
-              :text="$tr('zoomOut')"
+              :tooltip="$tr('zoomOut')"
+              :ariaLabel="$tr('zoomOut')"
               class="ma-0"
               @click="Cropper && Cropper.zoomOut()"
               @mousedown="cropZoomOut"
@@ -142,16 +145,18 @@
 
           <!-- Default options -->
           <template v-else-if="!loading">
-            <IconButton
+            <KIconButton
               icon="image"
-              :text="$tr('upload')"
+              :tooltip="$tr('upload')"
+              :ariaLabel="$tr('upload')"
               class="ma-0"
               @click="openFileDialog"
             />
-            <IconButton
+            <KIconButton
               v-if="!hasError && value"
               icon="crop"
-              :text="$tr('crop')"
+              :tooltip="$tr('crop')"
+              :ariaLabel="$tr('crop')"
               class="ma-0"
               @click="startCropping(false)"
             />
@@ -168,11 +173,12 @@
               />
               <ActionLink :text="$tr('save')" data-test="save" @click="save" />
             </span>
-            <IconButton
+            <KIconButton
               v-else-if="value"
               icon="clear"
               data-test="remove"
-              :text="$tr('remove')"
+              :tooltip="$tr('remove')"
+              :ariaLabel="$tr('remove')"
               @click="$emit('input', null)"
             />
           </div>
@@ -194,7 +200,6 @@
   import FileDropzone from 'shared/views/files/FileDropzone';
   import FileStatus from 'shared/views/files/FileStatus';
   import FileStatusText from 'shared/views/files/FileStatusText';
-  import IconButton from 'shared/views/IconButton';
   import Thumbnail from 'shared/views/files/Thumbnail';
   import { ASPECT_RATIO, THUMBNAIL_WIDTH } from 'shared/constants';
 
@@ -206,7 +211,6 @@
       FileStatus,
       FileStatusText,
       ThumbnailGenerator,
-      IconButton,
       Thumbnail,
       ThumbnailCard,
     },
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/progress/ContentNodeCopyTaskProgress.vue b/contentcuration/contentcuration/frontend/channelEdit/views/progress/ContentNodeCopyTaskProgress.vue
index fd5d615fe8..4e831f0a03 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/progress/ContentNodeCopyTaskProgress.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/progress/ContentNodeCopyTaskProgress.vue
@@ -7,24 +7,25 @@
       :color="progressBarColor"
       v-bind="$attrs"
     />
-    <VTooltip
-      v-else-if="hasCopyingErrored && showTooltip"
-      bottom
-      lazy
-    >
-      <template #activator="{ on }">
-        <VIconWrapper color="red" v-on="on">
-          error
-        </VIconWrapper>
-      </template>
-      <span>{{ $tr('copyErrorTopic') }}</span>
-    </VTooltip>
-    <VIconWrapper
+    <template v-else-if="hasCopyingErrored && showTooltip">
+      <KIcon
+        ref="copyError"
+        icon="error"
+        :style="{ fontSize: '20px' }"
+      />
+      <KTooltip
+        reference="copyError"
+        placement="bottom"
+        :refs="$refs"
+      >
+        {{ $tr('copyErrorTopic') }}
+      </KTooltip>
+    </template>
+    <KIcon
       v-else-if="hasCopyingErrored && !showTooltip"
-      color="red"
-    >
-      error
-    </VIconWrapper>
+      icon="error"
+      :style="{ fontSize: '20px' }"
+    />
   </div>
 
 </template>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/progress/ProgressModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/progress/ProgressModal.vue
index 3eca59aaaa..261705acdf 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/progress/ProgressModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/progress/ProgressModal.vue
@@ -12,7 +12,7 @@
       v-else-if="syncError"
       class="red--text"
     >
-      <Icon
+      <KIcon
         icon="error"
       />
       {{ $tr('syncError') }}
@@ -21,7 +21,7 @@
       v-else-if="currentPublishTaskError"
       class="red--text"
     >
-      <Icon
+      <KIcon
         icon="error"
       />
       {{ $tr('defaultErrorText') }}
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
index 7661f9a8cf..aaae86df5f 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
@@ -22,7 +22,7 @@
         <VToolbar v-if="$vuetify.breakpoint.xsOnly" color="transparent" flat dense>
           <VSpacer />
           <VBtn icon flat style="text-align: right;" @click="drawer = false">
-            <Icon icon="clear" />
+            <KIcon icon="clear" />
           </VBtn>
         </VToolbar>
 
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
index 57a52467a8..6c35e324ca 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
@@ -75,7 +75,7 @@
                 <template #activator="{ on }">
                   <VBtn color="primary" class="ma-0 mx-2" v-on="on">
                     {{ $tr('downloadButton') }}
-                    <Icon
+                    <KIcon
                       class="ml-1"
                       icon="dropup"
                       :color="$themeTokens.textInverted"
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelInvitation.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelInvitation.vue
index e5dd5e4e36..d901c29610 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelInvitation.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelInvitation.vue
@@ -16,7 +16,7 @@
                 v-on="on"
                 @click="accept"
               >
-                <Icon icon="done" />
+                <KIcon icon="done" />
               </VBtn>
             </template>
             <span>{{ $tr('accept') }}</span>
@@ -31,7 +31,7 @@
                 v-on="on"
                 @click="dialog = true"
               >
-                <Icon color="red" icon="clear" />
+                <KIcon color="red" icon="clear" />
               </VBtn>
             </template>
             <span>{{ $tr('decline') }}</span>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
index ba98f77283..f43aa0256a 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
@@ -79,7 +79,7 @@
               })
             }}
           </KTooltip>
-          <Icon
+          <KIcon
             v-if="allowEdit && hasUnpublishedChanges"
             ref="lastUpdatedTime"
             icon="unpublishedResource"
@@ -125,7 +125,7 @@
                   v-on="on"
                   @click.stop.prevent
                 >
-                  <Icon
+                  <KIcon
                     icon="optionsVertical"
                   />
                 </VBtn>
@@ -165,7 +165,7 @@
                   @click.stop
                 >
                   <VListTileAvatar>
-                    <Icon icon="openNewTab" />
+                    <KIcon icon="openNewTab" />
                   </VListTileAvatar>
                   <VListTileTitle>{{ $tr('goToWebsite') }}</VListTileTitle>
                 </VListTile>
@@ -175,7 +175,7 @@
                   target="_blank"
                 >
                   <VListTileAvatar>
-                    <Icon icon="openNewTab" />
+                    <KIcon icon="openNewTab" />
                   </VListTileAvatar>
                   <VListTileTitle>{{ $tr('viewContent') }}</VListTileTitle>
                 </VListTile>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue
index 8ff3679eee..2821bcfb11 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue
@@ -17,7 +17,7 @@
         <template #activator="{ on }">
           <VBtn flat block v-on="on">
             {{ $tr('options') }}
-            <Icon
+            <KIcon
               icon="dropdown"
             />
           </VBtn>
@@ -25,7 +25,7 @@
         <VList>
           <VListTile data-test="edit" :to="channelSetDetailsLink">
             <VListTileAction>
-              <Icon
+              <KIcon
                 icon="edit"
               />
             </VListTileAction>
@@ -33,7 +33,7 @@
           </VListTile>
           <VListTile @click.prevent="deleteDialog = true">
             <VListTileAction>
-              <Icon
+              <KIcon
                 icon="trash"
               />
             </VListTileAction>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
index c5607ff011..5d91a1f3e7 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
@@ -9,8 +9,8 @@
       <span class="notranslate">{{ title }}</span>
     </template>
     <template v-if="step === 2" #close>
-      <VBtn icon class="rtl-flip" @click="step--">
-        <Icon
+      <VBtn icon @click="step--">
+        <KIcon
           icon="back"
           :color="$themeTokens.textInverted"
         />
diff --git a/contentcuration/contentcuration/frontend/shared/app.js b/contentcuration/contentcuration/frontend/shared/app.js
index d650a1d061..4823894bdb 100644
--- a/contentcuration/contentcuration/frontend/shared/app.js
+++ b/contentcuration/contentcuration/frontend/shared/app.js
@@ -47,7 +47,6 @@ import Vuetify, {
   VFooter,
   VForm,
   VHover,
-  VIcon,
   VImg,
   VInput,
   VLayout,
@@ -113,7 +112,7 @@ import KThemePlugin from 'kolibri-design-system/lib/KThemePlugin';
 import trackInputModality from 'kolibri-design-system/lib/styles/trackInputModality';
 
 import AnalyticsPlugin from './analytics/plugin';
-import { theme, icons } from 'shared/vuetify';
+import { theme } from 'shared/vuetify';
 
 import { i18nSetup } from 'shared/i18n';
 
@@ -122,7 +121,6 @@ import 'shared/styles/main.less';
 import Base from 'shared/Base.vue';
 import urls from 'shared/urls';
 import ActionLink from 'shared/views/ActionLink';
-import Icon from 'shared/views/Icon';
 import Menu from 'shared/views/Menu';
 import Divider from 'shared/views/Divider';
 import { initializeDB, resetDB } from 'shared/data';
@@ -197,7 +195,6 @@ Vue.use(Vuetify, {
     VFooter,
     VForm,
     VHover,
-    VIcon,
     VImg,
     VInput,
     VLayout,
@@ -251,7 +248,6 @@ Vue.use(Vuetify, {
     customProperties: true,
   },
   theme: theme(),
-  icons: icons(),
 });
 
 // Register kolibri-design-system plugin
@@ -264,7 +260,6 @@ Vue.use(AnalyticsPlugin, { dataLayer: window.dataLayer });
 Vue.component('ActionLink', ActionLink);
 Vue.component('Menu', Menu);
 Vue.component('Divider', Divider);
-Vue.component('Icon', Icon);
 
 function initiateServiceWorker() {
   // Second conditional must be removed if you are doing dev work on the service
diff --git a/contentcuration/contentcuration/frontend/shared/constants.js b/contentcuration/contentcuration/frontend/shared/constants.js
index f305949394..57d3bffa8e 100644
--- a/contentcuration/contentcuration/frontend/shared/constants.js
+++ b/contentcuration/contentcuration/frontend/shared/constants.js
@@ -54,20 +54,6 @@ export const NEW_OBJECT = Symbol('New object');
 // validation should be delayed
 export const DELAYED_VALIDATION = Symbol('Delayed validation');
 
-export const kindToIconMap = {
-  audio: 'headset',
-  channel: 'apps',
-  document: 'description',
-  exercise: 'star',
-  h5p: 'widgets',
-  html5: 'widgets',
-  image: 'image',
-  slideshow: 'photo_library',
-  topic: 'folder',
-  video: 'theaters',
-  zim: 'widgets',
-};
-
 export const SharingPermissions = {
   EDIT: 'edit',
   VIEW_ONLY: 'view',
diff --git a/contentcuration/contentcuration/frontend/shared/layouts/ImmersiveModalLayout.vue b/contentcuration/contentcuration/frontend/shared/layouts/ImmersiveModalLayout.vue
index 3146181606..5e12ecb971 100644
--- a/contentcuration/contentcuration/frontend/shared/layouts/ImmersiveModalLayout.vue
+++ b/contentcuration/contentcuration/frontend/shared/layouts/ImmersiveModalLayout.vue
@@ -3,14 +3,20 @@
   <VApp>
     <VToolbar app dark color="appBarDark">
       <VBtn v-if="backButton" flat :to="previousPage" exact>
-        <VIconWrapper class="rtl-flip">
-          arrow_back
-        </VIconWrapper>
+        <KIcon
+          icon="back"
+          :color="$themeTokens.textInverted"
+          :style="{ fontSize: '22px', marginBottom: '4px' }"
+        />
         <span class="back-text">{{ appBarText }}</span>
       </VBtn>
       <template v-else>
         <VBtn icon dark :to="previousPage" exact>
-          <VIconWrapper>close</VIconWrapper>
+          <KIcon
+            icon="close"
+            :color="$themeTokens.textInverted"
+            :style="{ fontSize: '22px', marginBottom: '4px' }"
+          />
         </VBtn>
         <VToolbarTitle>
           {{ appBarText }}
diff --git a/contentcuration/contentcuration/frontend/shared/utils/icons.js b/contentcuration/contentcuration/frontend/shared/utils/icons.js
new file mode 100644
index 0000000000..5fbe2f3ff4
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/utils/icons.js
@@ -0,0 +1,30 @@
+import camelCase from 'lodash/camelCase';
+import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
+
+const EMPTY = '_empty';
+const CONTENT_KIND_ICONS = {
+  [ContentKindsNames.TOPIC]: 'topic',
+  [ContentKindsNames.TOPIC + EMPTY]: 'emptyTopic',
+  [ContentKindsNames.VIDEO]: 'video',
+  [ContentKindsNames.AUDIO]: 'audio',
+  [ContentKindsNames.SLIDESHOW]: 'slideshow',
+  [ContentKindsNames.EXERCISE]: 'exercise',
+  [ContentKindsNames.DOCUMENT]: 'document',
+  [ContentKindsNames.HTML5]: 'html5',
+  [ContentKindsNames.ZIM]: 'html5',
+};
+
+export function getContentKindIcon(kind, isEmpty = false) {
+  const icon = (isEmpty ? [kind + EMPTY] : []).concat([kind]).find(k => k in CONTENT_KIND_ICONS);
+  return icon ? CONTENT_KIND_ICONS[icon] : 'error';
+}
+
+export function getLearningActivityIcon(activity) {
+  if (activity.toLowerCase() === 'explore') {
+    return 'interactShaded';
+  } else if (activity === 'multiple') {
+    return 'allActivities';
+  } else {
+    return `${camelCase(activity) + 'Solid'}`;
+  }
+}
diff --git a/contentcuration/contentcuration/frontend/shared/views/ActionLink.vue b/contentcuration/contentcuration/frontend/shared/views/ActionLink.vue
index 08ff42877f..d634768e59 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ActionLink.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ActionLink.vue
@@ -18,11 +18,11 @@
       >
         {{ text }}
       </span>
-      <Icon
+      <KIcon
         v-if="target === '_blank'"
         icon="openNewTab"
         :color="$themeTokens.primary"
-        class="mx-1 rtl-flip"
+        class="mx-1"
       />
 
     </slot>
@@ -72,8 +72,4 @@
     min-width: 0;
   }
 
-  .v-icon {
-    vertical-align: baseline;
-  }
-
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/AppBar.vue b/contentcuration/contentcuration/frontend/shared/views/AppBar.vue
index aa1f61432f..84f5d64cdc 100644
--- a/contentcuration/contentcuration/frontend/shared/views/AppBar.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/AppBar.vue
@@ -104,10 +104,10 @@
           <Menu>
             <template #activator="{ on }">
               <VBtn flat style="text-transform: none;" v-on="on">
-                <Icon
+                <KIcon
                   icon="person"
                 />
-                <Icon
+                <KIcon
                   icon="dropdown"
                 />
               </VBtn>
@@ -115,7 +115,7 @@
             <VList>
               <VListTile :href="'/accounts/'">
                 <VListTileAction>
-                  <Icon
+                  <KIcon
                     icon="login"
                   />
                 </VListTileAction>
@@ -123,7 +123,7 @@
               </VListTile>
               <VListTile @click="showLanguageModal = true">
                 <VListTileAction>
-                  <Icon
+                  <KIcon
                     icon="language"
                   />
                 </VListTileAction>
diff --git a/contentcuration/contentcuration/frontend/shared/views/Breadcrumbs.vue b/contentcuration/contentcuration/frontend/shared/views/Breadcrumbs.vue
index 0257d6561a..a1fd1959c6 100644
--- a/contentcuration/contentcuration/frontend/shared/views/Breadcrumbs.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/Breadcrumbs.vue
@@ -7,14 +7,14 @@
     style="max-height: 100%; width: 100%;"
   >
     <template #divider>
-      <Icon icon="chevronRight" style="font-size: 20px;" />
+      <KIcon icon="chevronRight" style="font-size: 20px;" />
     </template>
     <!-- Overflow menu -->
     <VBreadcrumbsItem v-if="breadcrumbStartingIndex > 0" tag="div">
       <Menu bottom>
         <template #activator="{ on }">
           <VBtn icon flat class="ma-0" v-on="on">
-            <Icon icon="optionsHorizontal" />
+            <KIcon icon="optionsHorizontal" />
           </VBtn>
         </template>
         <VCard style="max-width: 300px;">
diff --git a/contentcuration/contentcuration/frontend/shared/views/ContentNodeIcon.vue b/contentcuration/contentcuration/frontend/shared/views/ContentNodeIcon.vue
index e21eb251c1..c70426638e 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ContentNodeIcon.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ContentNodeIcon.vue
@@ -12,16 +12,12 @@
       :style="{ width: fillWidth ? '100%' : 'unset' }"
       capture-as-image
     >
-      <VIconWrapper small :color="fontColor" v-bind="$attrs">
-        {{ icon }}
-      </VIconWrapper>
+      <KIcon :icon="icon" :color="fontColor" data-test="icon" />
       <span v-if="includeText" class="ml-2">{{ text }}</span>
     </VChip>
     <span v-else capture-as-image>
-      <VIconWrapper :color="fontColor" v-bind="$attrs">
-        {{ icon }}
-      </VIconWrapper>
-      <span v-if="includeText">{{ text }}</span>
+      <KIcon :icon="icon" :color="fontColor" data-test="icon" />
+      <span v-if="includeText" class="ml-2">{{ text }}</span>
     </span>
   </span>
 
@@ -30,7 +26,7 @@
 <script>
 
   import ContentKinds from 'shared/leUtils/ContentKinds';
-  import { getContentKindIcon } from 'shared/vuetify/icons';
+  import { getContentKindIcon } from 'shared/utils/icons';
 
   export default {
     name: 'ContentNodeIcon',
@@ -65,7 +61,7 @@
     },
     computed: {
       fontColor() {
-        return this.showColor ? 'white' : 'grey darken-1';
+        return this.showColor ? this.$themeTokens.textInverted : this.$themeTokens.annotation;
       },
       icon() {
         return getContentKindIcon(this.kind, this.isEmpty);
diff --git a/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue b/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue
index 0248338ce4..fbdd853747 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue
@@ -45,7 +45,7 @@
 
   import camelCase from 'lodash/camelCase';
   import { LearningActivities } from '../constants';
-  import { getLearningActivityIcon } from 'shared/vuetify/icons';
+  import { getLearningActivityIcon } from 'shared/utils/icons';
   import { metadataTranslationMixin } from 'shared/mixins';
 
   export default {
diff --git a/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue b/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue
index dd1fc81be9..45e4acf565 100644
--- a/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue
@@ -22,7 +22,7 @@
         <VToolbarItems>
           <slot name="close">
             <VBtn flat icon exact data-test="close" @click="$emit('input', false)">
-              <Icon icon="clear" :color="$themeTokens.textInverted" />
+              <KIcon icon="clear" :color="$themeTokens.textInverted" />
             </VBtn>
           </slot>
         </VToolbarItems>
diff --git a/contentcuration/contentcuration/frontend/shared/views/HelpTooltip.vue b/contentcuration/contentcuration/frontend/shared/views/HelpTooltip.vue
index f0710b7714..28c182138b 100644
--- a/contentcuration/contentcuration/frontend/shared/views/HelpTooltip.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/HelpTooltip.vue
@@ -1,7 +1,7 @@
 <template>
 
-  <div>
-    <Icon
+  <span>
+    <KIcon
       ref="tooltip"
       :color="$themeTokens.primary"
       style="font-size:20px;"
@@ -16,7 +16,7 @@
     >
       {{ text }}
     </KTooltip>
-  </div>
+  </span>
 
 </template>
 
@@ -38,11 +38,3 @@
   };
 
 </script>
-
-<style lang="less" scoped>
-
-  /deep/.k-tooltip {
-    width: 100%;
-  }
-
-</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/Icon.vue b/contentcuration/contentcuration/frontend/shared/views/Icon.vue
deleted file mode 100644
index 55c2825ca2..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/Icon.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-
-  <KIcon
-    v-bind="$attrs"
-    :icon="icon"
-    :color="color"
-    v-on="$listeners"
-  />
-
-</template>
-
-<script>
-
-  export default {
-    name: 'Icon',
-    props: {
-      icon: {
-        type: String,
-        required: true,
-      },
-      color: {
-        type: String,
-        required: false,
-        default: null,
-      },
-    },
-  };
-
-</script>
diff --git a/contentcuration/contentcuration/frontend/shared/views/IconButton.vue b/contentcuration/contentcuration/frontend/shared/views/IconButton.vue
deleted file mode 100644
index 21f8032fe5..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/IconButton.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-
-  <KIconButton
-    v-bind="$attrs"
-    :tooltip="text"
-    :icon="icon"
-    ariaLabel="text"
-    :color="color"
-    :size="size"
-    :class="{ 'rtl-flip': rtlFlip }"
-    v-on="$listeners"
-  />
-
-</template>
-
-<script>
-
-  import { themeTokens } from 'kolibri-design-system/lib/styles/theme.js';
-
-  export default {
-    name: 'IconButton',
-    props: {
-      text: {
-        type: String,
-        required: true,
-      },
-      icon: {
-        type: String,
-        required: true,
-      },
-      size: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      color: {
-        type: String,
-        required: false,
-        default: themeTokens.text,
-      },
-      rtlFlip: {
-        type: Boolean,
-        default: false,
-      },
-    },
-  };
-
-</script>
diff --git a/contentcuration/contentcuration/frontend/shared/views/InfoModal.vue b/contentcuration/contentcuration/frontend/shared/views/InfoModal.vue
index e283a104af..0f4d661607 100644
--- a/contentcuration/contentcuration/frontend/shared/views/InfoModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/InfoModal.vue
@@ -1,9 +1,10 @@
 <template>
 
   <div :style="{ display: 'inline' }">
-    <Icon
+    <KIconButton
       icon="help"
       :color="$themeTokens.primary"
+      size="small"
       data-test="info-icon"
       @click="displayDialog = !displayDialog"
     />
diff --git a/contentcuration/contentcuration/frontend/shared/views/LazyListGroup.vue b/contentcuration/contentcuration/frontend/shared/views/LazyListGroup.vue
index 35cbead717..8c8073f1ee 100644
--- a/contentcuration/contentcuration/frontend/shared/views/LazyListGroup.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/LazyListGroup.vue
@@ -6,13 +6,13 @@
       @click="open = !open"
     >
       <div v-if="prependIcon" class="icon-container">
-        <VIconWrapper>{{ prependIcon }}</VIconWrapper>
+        <KIcon :icon="prependIcon" :style="{ fontSize: '22px' }" />
       </div>
       <div class="header-content" :class="{ 'has-icon': appendIcon || prependIcon }">
         <slot name="header"></slot>
       </div>
       <div v-if="appendIcon" class="icon-container">
-        <VIconWrapper>{{ appendIcon }}</VIconWrapper>
+        <KIcon :icon="appendIcon" :style="{ fontSize: '22px' }" />
       </div>
     </header>
     <VExpandTransition>
@@ -113,7 +113,7 @@
     // stylelint-enable
   }
 
-  .list-group.open > .list-group-header .v-icon {
+  .list-group.open > .list-group-header svg {
     transform: rotate(-180deg);
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/MarkdownImageField.vue b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/MarkdownImageField.vue
index 096531cbe8..06d28609a3 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/MarkdownImageField.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/MarkdownImageField.vue
@@ -20,7 +20,7 @@
           v-on="on"
           @click.stop
         >
-          <Icon icon="optionsHorizontal" />
+          <KIcon icon="optionsHorizontal" />
         </VBtn>
       </template>
       <VList>
diff --git a/contentcuration/contentcuration/frontend/shared/views/OfflineText.vue b/contentcuration/contentcuration/frontend/shared/views/OfflineText.vue
index 9f54c20f1d..e18ad0f227 100644
--- a/contentcuration/contentcuration/frontend/shared/views/OfflineText.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/OfflineText.vue
@@ -4,7 +4,7 @@
     <VTooltip v-if="indicator" bottom z-index="300" lazy>
       <template #activator="{ on }">
         <div class="px-4" v-on="on">
-          <Icon class="mx-2" icon="disconnected" />
+          <KIcon class="mx-2" icon="disconnected" />
           <span class="font-weight-bold">
             {{ $tr('offlineIndicatorText') }}
           </span>
@@ -23,11 +23,11 @@
       :style="`margin-top: ${offset}px;`"
       v-bind="$attrs"
     >
-      <Icon class="mx-3" icon="disconnected" />
+      <KIcon class="mx-3" icon="disconnected" />
       <span>{{ offlineText || $tr('offlineText') }}</span>
     </ToolBar>
     <div v-else>
-      <Icon class="mx-3" icon="disconnected" />
+      <KIcon class="mx-3" icon="disconnected" />
       <span>{{ offlineText || $tr('offlineText') }}</span>
     </div>
   </VFadeTransition>
diff --git a/contentcuration/contentcuration/frontend/shared/views/ToggleText.vue b/contentcuration/contentcuration/frontend/shared/views/ToggleText.vue
index aef5a6cbb3..d75d888145 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ToggleText.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ToggleText.vue
@@ -10,7 +10,8 @@
       </VSlideYTransition>
       <a v-if="overflowText" class="caption toggler" @click.stop.prevent="toggle">
         <span>{{ togglerText }}</span>
-        <Icon
+        <KIcon
+          class="icon"
           :icon="expanded ? 'chevronUp' : 'chevronDown' "
         />
       </a>
@@ -109,8 +110,8 @@
       text-decoration: underline;
     }
 
-    .v-icon {
-      vertical-align: bottom;
+    .icon {
+      vertical-align: middle;
     }
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/VisibilityDropdown.vue b/contentcuration/contentcuration/frontend/shared/views/VisibilityDropdown.vue
index 5486c444f9..6b157c3e00 100644
--- a/contentcuration/contentcuration/frontend/shared/views/VisibilityDropdown.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/VisibilityDropdown.vue
@@ -24,7 +24,7 @@
             <template #header="{ item }">
               <span>
                 {{ item.text }}
-                <Icon v-if="roleIcon(item.value)" :icon="roleIcon(item.value)" />
+                <KIcon v-if="roleIcon(item.value)" :icon="roleIcon(item.value)" class="icon" />
               </span>
             </template>
             <template #description="{ item }">
@@ -33,11 +33,11 @@
           </InfoModal>
         </template>
         <template #selection="{ item }">
-          <Icon v-if="roleIcon(item.value)" :icon="roleIcon(item.value)" class="pr-2" />
+          <KIcon v-if="roleIcon(item.value)" :icon="roleIcon(item.value)" class="icon pr-2" />
           {{ item.text }}
         </template>
         <template #item="{ item }">
-          <Icon v-if="roleIcon(item.value)" :icon="roleIcon(item.value)" class="pr-2" />
+          <KIcon v-if="roleIcon(item.value)" :icon="roleIcon(item.value)" class="icon pr-2" />
           {{ item.text }}
         </template>
       </VSelect>
@@ -126,10 +126,9 @@
 
 <style lang="less" scoped>
 
-  .v-icon {
-    margin-left: 5px;
-    font-size: 12pt;
-    vertical-align: text-top;
+  .icon {
+    padding-bottom: 4px;
+    font-size: 20px;
   }
 
   .role-visibility-container {
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/contentNodeIcon.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/contentNodeIcon.spec.js
index 0c18f65fd4..8ffa7a30ac 100644
--- a/contentcuration/contentcuration/frontend/shared/views/__tests__/contentNodeIcon.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/contentNodeIcon.spec.js
@@ -18,16 +18,16 @@ function makeWrapper(kind) {
 
 describe('ContentNodeIcon', () => {
   const testIcons = [
-    { value: 'topic', icon: 'folder' },
-    { value: 'video', icon: 'ondemand_video' },
-    { value: 'audio', icon: 'music_note' },
-    { value: 'exercise', icon: 'assignment' },
-    { value: 'document', icon: 'class' },
-    { value: 'html5', icon: 'widgets' },
-    { value: 'zim', icon: 'widgets' },
+    { value: 'topic', icon: 'topic' },
+    { value: 'video', icon: 'video' },
+    { value: 'audio', icon: 'audio' },
+    { value: 'exercise', icon: 'exercise' },
+    { value: 'document', icon: 'document' },
+    { value: 'html5', icon: 'html5' },
+    { value: 'zim', icon: 'html5' },
   ];
-  it.each(testIcons)('should display the correct icon $value', kind => {
+  it.each(testIcons)('should pass the correct icon value to KIcon', kind => {
     const wrapper = makeWrapper(kind.value);
-    expect(wrapper.find('.v-icon').text()).toContain(kind.icon);
+    expect(wrapper.find('[data-test="icon"]').props().icon).toBe(kind.icon);
   });
 });
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/contentNodeLearningActivityIcon.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/contentNodeLearningActivityIcon.spec.js
index f48e207a1e..de07c22cfd 100644
--- a/contentcuration/contentcuration/frontend/shared/views/__tests__/contentNodeLearningActivityIcon.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/contentNodeLearningActivityIcon.spec.js
@@ -9,7 +9,6 @@ document.body.setAttribute('data-app', true); // Vuetify prints a warning withou
 
 describe('ContentNodeLearningActivityIcon', () => {
   let wrapper;
-  // expect(wrapper.find('.v-icon').text()).toContain(kind.icon);
   describe('labeled icons', () => {
     wrapper = mount(ContentNodeLearningActivityIcon, {
       propsData: {
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/icon.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/icon.spec.js
deleted file mode 100644
index 223f6fea2e..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/__tests__/icon.spec.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { mount } from '@vue/test-utils';
-import VIconWrapper from '../VIconWrapper.vue';
-
-function makeWrapper(options) {
-  return mount(VIconWrapper, options);
-}
-
-describe('appIcon', () => {
-  it('should have the `notranslate` CSS class', () => {
-    const wrapper = makeWrapper({});
-    const icon = wrapper.find({ name: 'v-icon' });
-    expect(icon.classes('notranslate')).toEqual(true);
-  });
-
-  it('should set the icon properly from the slot', () => {
-    const wrapper = makeWrapper({
-      context: {
-        children: ['circle'],
-      },
-    });
-    const icon = wrapper.find({ name: 'v-icon' });
-    expect(icon.text()).toEqual('circle');
-  });
-
-  it('should set the icon properly from the prop', () => {
-    const wrapper = makeWrapper({
-      context: {
-        props: {
-          iconName: 'circle',
-        },
-      },
-    });
-    const icon = wrapper.find({ name: 'v-icon' });
-    expect(icon.text()).toEqual('circle');
-  });
-});
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue
index e336bb5340..c54fc43e94 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue
@@ -17,7 +17,7 @@
             <VBtn color="primary" dark :block="$vuetify.breakpoint.xsOnly" v-on="on">
               {{ $tr('downloadButton') }}
               &nbsp;
-              <Icon icon="dropdown" :color="$themeTokens.textInverted" />
+              <KIcon icon="dropdown" :color="$themeTokens.textInverted" />
             </VBtn>
           </template>
           <VList>
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelSharingTable.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelSharingTable.vue
index b9c8d72b23..6e6fd7db16 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelSharingTable.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelSharingTable.vue
@@ -32,7 +32,7 @@
               <template #activator="{ on }">
                 <VBtn flat v-on="on">
                   {{ $tr('optionsDropdown') }}
-                  <Icon class="ml-1" icon="dropdown" />
+                  <KIcon class="ml-1" icon="dropdown" />
                 </VBtn>
               </template>
               <VList>
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelThumbnail.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelThumbnail.vue
index 4a9a59f395..a90a0f9bd7 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelThumbnail.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelThumbnail.vue
@@ -73,28 +73,31 @@
               />
             </span>
             <VSpacer />
-            <IconButton
+            <KIconButton
               icon="clear"
               data-test="remove"
-              :text="$tr('cancel')"
+              :tooltip="$tr('cancel')"
+              :ariaLabel="$tr('cancel')"
               @click="cancelPendingFile"
             />
           </template>
 
           <!-- Cropping options -->
           <template v-else-if="cropping">
-            <IconButton
+            <KIconButton
               icon="plus"
               data-test="zoomin"
-              :text="$tr('zoomIn')"
+              :tooltip="$tr('zoomIn')"
+              :ariaLabel="$tr('zoomIn')"
               @click="Cropper && Cropper.zoomIn()"
               @mousedown="cropZoomIn"
               @mouseup="cropZoomStop"
             />
-            <IconButton
+            <KIconButton
               icon="minus"
               data-test="zoomout"
-              :text="$tr('zoomOut')"
+              :tooltip="$tr('zoomOut')"
+              :ariaLabel="$tr('zoomOut')"
               @click="Cropper && Cropper.zoomOut()"
               @mousedown="cropZoomOut"
               @mouseup="cropZoomStop"
@@ -111,23 +114,26 @@
 
           <!-- Default options -->
           <template v-else>
-            <IconButton
+            <KIconButton
               icon="image"
-              :text="$tr('upload')"
+              :tooltip="$tr('upload')"
+              :ariaLabel="$tr('upload')"
               @click="openFileDialog"
             />
-            <IconButton
+            <KIconButton
               v-if="hasThumbnail"
               icon="crop"
-              :text="$tr('crop')"
+              :tooltip="$tr('crop')"
+              :ariaLabel="$tr('crop')"
               @click="cropping = true"
             />
             <VSpacer />
-            <IconButton
+            <KIconButton
               v-if="hasThumbnail"
               icon="clear"
               data-test="remove"
-              :text="$tr('remove')"
+              :tooltip="$tr('remove')"
+              :ariaLabel="$tr('remove')"
               @click="remove"
             />
           </template>
@@ -141,7 +147,6 @@
 <script>
 
   import { mapGetters } from 'vuex';
-  import IconButton from '../IconButton';
   import Uploader from 'shared/views/files/Uploader';
   import FileStatus from 'shared/views/files/FileStatus';
   import FileStatusText from 'shared/views/files/FileStatusText';
@@ -161,7 +166,6 @@
       FileDropzone,
       FileStatus,
       FileStatusText,
-      IconButton,
       Thumbnail,
       Uploader,
     },
diff --git a/contentcuration/contentcuration/frontend/shared/views/details/Details.vue b/contentcuration/contentcuration/frontend/shared/views/details/Details.vue
index a94b960214..daaeea2915 100644
--- a/contentcuration/contentcuration/frontend/shared/views/details/Details.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/details/Details.vue
@@ -272,7 +272,7 @@
               class="notranslate primary--text"
             >
               <span>{{ channel.name }}</span>
-              <Icon class="mx-1 rtl-flip" icon="openNewTab" />
+              <KIcon class="mx-1" icon="openNewTab" />
             </a>
           </VLayout>
         </template>
@@ -548,10 +548,6 @@
 
   .printing /deep/ * {
     font-family: 'Noto Sans', helvetica !important;
-
-    &.material-icons {
-      font-family: 'Material Icons' !important;
-    }
   }
 
   .v-toolbar__title {
diff --git a/contentcuration/contentcuration/frontend/shared/views/files/FileStatus.vue b/contentcuration/contentcuration/frontend/shared/views/files/FileStatus.vue
index f277c54d2e..564579ddfa 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/FileStatus.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/FileStatus.vue
@@ -1,22 +1,26 @@
 <template>
 
   <div>
-    <VTooltip v-if="hasErrors" top lazy>
-      <template #activator="{ on }">
-        <VIconWrapper color="red" :large="large" v-on="on">
-          error
-        </VIconWrapper>
-      </template>
-      <span>{{ statusMessage(id) }}</span>
-    </VTooltip>
-    <VIconWrapper
+    <template v-if="hasErrors">
+      <KIcon
+        ref="error"
+        icon="error"
+        :style="{ fontSize: large ? '32px' : '20px' }"
+      />
+      <KTooltip
+        reference="error"
+        placement="top"
+        :refs="$refs"
+      >
+        {{ statusMessage(id) }}
+      </KTooltip>
+    </template>
+    <KIcon
       v-else-if="progress >= 1"
-      :large="large"
-      color="greenSuccess"
+      icon="correct"
       data-test="done"
-    >
-      check_circle
-    </VIconWrapper>
+      :style="{ fontSize: large ? '32px' : '20px' }"
+    />
     <VProgressCircular
       v-else
       :size="large ? 60 : 20"
@@ -61,11 +65,3 @@
   };
 
 </script>
-
-<style lang="less" scoped>
-
-  .v-icon {
-    cursor: default;
-  }
-
-</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/files/FileStorage.vue b/contentcuration/contentcuration/frontend/shared/views/files/FileStorage.vue
index 61e1e8c37e..cf3e22ed31 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/FileStorage.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/FileStorage.vue
@@ -23,7 +23,7 @@
       </span>
     </span>
     <span v-else-if="showWarning">
-      <Icon icon="warningIncomplete" />
+      <KIcon icon="warningIncomplete" class="warning-icon" />
       <span v-if="showProgress">{{ $tr('storageLow') }}</span>
       <span v-else>
         {{ $tr('storageLowWithSize', {
@@ -104,7 +104,7 @@
 
 <style lang="less" scoped>
 
-  .v-icon {
+  .warning-icon {
     margin-right: 5px;
     vertical-align: sub !important;
   }
diff --git a/contentcuration/contentcuration/frontend/shared/views/VIconWrapper.vue b/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail/VIconWrapper.vue
similarity index 93%
rename from contentcuration/contentcuration/frontend/shared/views/VIconWrapper.vue
rename to contentcuration/contentcuration/frontend/shared/views/files/Thumbnail/VIconWrapper.vue
index adcffb8ef3..4f2b0bc15c 100644
--- a/contentcuration/contentcuration/frontend/shared/views/VIconWrapper.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail/VIconWrapper.vue
@@ -6,6 +6,7 @@
 
   const NO_TRANSLATE = 'notranslate';
 
+  // Deprecated, do not use for new icons. Use KIcon or KIconButton instead.
   // Follows example of https://github.com/vuetifyjs/vuetify/blob/v1.5.22/packages/vuetify/src/components/VIcon/VIcon.ts#L142
   export default {
     name: 'VIconWrapper',
diff --git a/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail/icons.js b/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail/icons.js
new file mode 100644
index 0000000000..005011e57b
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail/icons.js
@@ -0,0 +1,21 @@
+import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
+
+const EMPTY = '_empty';
+export const CONTENT_KIND_ICONS_VUETIFY = {
+  [ContentKindsNames.TOPIC]: 'folder',
+  [ContentKindsNames.TOPIC + EMPTY]: 'folder_open',
+  [ContentKindsNames.VIDEO]: 'ondemand_video',
+  [ContentKindsNames.AUDIO]: 'music_note',
+  [ContentKindsNames.SLIDESHOW]: 'image',
+  [ContentKindsNames.EXERCISE]: 'assignment',
+  [ContentKindsNames.DOCUMENT]: 'class',
+  [ContentKindsNames.HTML5]: 'widgets',
+  [ContentKindsNames.ZIM]: 'widgets',
+};
+
+export function getContentKindIconDeprecated(kind, isEmpty = false) {
+  const icon = (isEmpty ? [kind + EMPTY] : [])
+    .concat([kind])
+    .find(k => k in CONTENT_KIND_ICONS_VUETIFY);
+  return icon ? CONTENT_KIND_ICONS_VUETIFY[icon] : 'error_outline';
+}
diff --git a/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue b/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail/index.vue
similarity index 96%
rename from contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
rename to contentcuration/contentcuration/frontend/shared/views/files/Thumbnail/index.vue
index 007ebb73d1..4c9cba1951 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail/index.vue
@@ -80,11 +80,15 @@
 
 <script>
 
+  import { getContentKindIconDeprecated } from './icons';
+  import VIconWrapper from './VIconWrapper';
   import { constantsTranslationMixin, printingMixin } from 'shared/mixins';
-  import { getContentKindIcon } from 'shared/vuetify/icons';
 
   export default {
     name: 'Thumbnail',
+    components: {
+      VIconWrapper,
+    },
     mixins: [constantsTranslationMixin, printingMixin],
     props: {
       src: {
@@ -141,7 +145,7 @@
         return this.kind ? 'cover' : 'contain';
       },
       icon() {
-        return getContentKindIcon(this.kind, this.isEmpty);
+        return getContentKindIconDeprecated(this.kind, this.isEmpty);
       },
       thumbnailSrc() {
         return this.encoding && this.encoding.base64 ? this.encoding.base64 : this.src;
diff --git a/contentcuration/contentcuration/frontend/shared/views/icons/CollapseAllIcon.vue b/contentcuration/contentcuration/frontend/shared/views/icons/CollapseAllIcon.vue
deleted file mode 100644
index a71afd07c9..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/icons/CollapseAllIcon.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-
-<template>
-
-  <svg viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg">
-    <!-- eslint-disable -->
-    <path d="M10.2415 3.6495H3.57479V10.3162H2.24146V3.6495C2.24146 3.29587 2.38193 2.95673 2.63198 2.70669C2.88203 2.45664 3.22117 2.31616 3.57479 2.31616H10.2415V3.6495ZM12.9081 4.98283H6.24146C5.88783 4.98283 5.54869 5.1233 5.29865 5.37335C5.0486 5.6234 4.90812 5.96254 4.90812 6.31616V12.9828H6.24146V6.31616H12.9081V4.98283ZM15.5748 8.98283V14.3162C15.5748 14.6698 15.4343 15.0089 15.1843 15.259C14.9342 15.509 14.5951 15.6495 14.2415 15.6495H8.90812C8.5545 15.6495 8.21536 15.509 7.96531 15.259C7.71526 15.0089 7.57479 14.6698 7.57479 14.3162V8.98283C7.57479 8.62921 7.71526 8.29007 7.96531 8.04002C8.21536 7.78997 8.5545 7.6495 8.90812 7.6495H14.2415C14.5951 7.6495 14.9342 7.78997 15.1843 8.04002C15.4343 8.29007 15.5748 8.62921 15.5748 8.98283ZM14.2415 10.9828H8.90812V12.3162H14.2415V10.9828Z" />
-  </svg>
-
-</template>
-<script>
-
-  export default {
-    name: 'CollapseAllIcon',
-  };
-
-</script>
-<style scoped>
-	svg {
-		fill: currentColor
-	}
-</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/icons/IndicatorIcon.vue b/contentcuration/contentcuration/frontend/shared/views/icons/IndicatorIcon.vue
deleted file mode 100644
index 6897e160d4..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/icons/IndicatorIcon.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-
-<template>
-
-  <svg viewBox="0 0 16 16">
-    <circle cx="8" cy="10" r="3" />
-  </svg>
-
-</template>
-<script>
-
-  export default {
-    name: 'IndicatorIcon',
-  };
-
-</script>
-<style scoped>
-	svg {
-		fill: currentColor
-	}
-</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/icons/LightBulbIcon.vue b/contentcuration/contentcuration/frontend/shared/views/icons/LightBulbIcon.vue
deleted file mode 100644
index 167a150882..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/icons/LightBulbIcon.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    version="1.1"
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-  >
-    <!-- eslint-disable -->
-    <path d="m8 0a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8zm0 3.2734a3.308 3.308 0 0 1 3.3086 3.3086c0 1.1247-0.56263 2.1128-1.418 2.7129v1.0684a0.47257 0.47257 0 0 1-0.47266 0.47266h-2.8359a0.47257 0.47257 0 0 1-0.47266-0.47266v-1.0684c-0.85535-0.60016-1.418-1.5882-1.418-2.7129a3.308 3.308 0 0 1 3.3086-3.3086zm0 0.94531a2.3628 2.3628 0 0 0-2.3633 2.3633c0 0.96876 0.58153 1.8002 1.418 2.1641v1.1445h1.8906v-1.1445c0.83645-0.36388 1.418-1.1953 1.418-2.1641a2.3628 2.3628 0 0 0-2.3633-2.3633zm-1.418 7.5625h2.8359v0.47266a0.47257 0.47257 0 0 1-0.47266 0.47266h-1.8906a0.47257 0.47257 0 0 1-0.47266-0.47266z" />
-  </svg>
-
-</template>
-<script>
-
-  export default {
-    name: 'LightBulbIcon',
-  };
-
-</script>
-<style scoped>
-	svg {
-		fill: currentColor
-	}
-</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/icons/ViewOnlyIcon.vue b/contentcuration/contentcuration/frontend/shared/views/icons/ViewOnlyIcon.vue
deleted file mode 100644
index 3bf9a6f65c..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/icons/ViewOnlyIcon.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    version="1.1"
-    viewBox="0 0 24 24"
-  >
-    <!-- eslint-disable -->
-    <path d="M3,10C2.76,10 2.55,10.09 2.41,10.25C2.27,10.4 2.21,10.62 2.24,10.86L2.74,13.85C2.82,14.5 3.4,15 4,15H7C7.64,15 8.36,14.44 8.5,13.82L9.56,10.63C9.6,10.5 9.57,10.31 9.5,10.19C9.39,10.07 9.22,10 9,10H3M7,17H4C2.38,17 0.96,15.74 0.76,14.14L0.26,11.15C0.15,10.3 0.39,9.5 0.91,8.92C1.43,8.34 2.19,8 3,8H9C9.83,8 10.58,8.35 11.06,8.96C11.17,9.11 11.27,9.27 11.35,9.45C11.78,9.36 12.22,9.36 12.64,9.45C12.72,9.27 12.82,9.11 12.94,8.96C13.41,8.35 14.16,8 15,8H21C21.81,8 22.57,8.34 23.09,8.92C23.6,9.5 23.84,10.3 23.74,11.11L23.23,14.18C23.04,15.74 21.61,17 20,17H17C15.44,17 13.92,15.81 13.54,14.3L12.64,11.59C12.26,11.31 11.73,11.31 11.35,11.59L10.43,14.37C10.07,15.82 8.56,17 7,17M15,10C14.78,10 14.61,10.07 14.5,10.19C14.42,10.31 14.4,10.5 14.45,10.7L15.46,13.75C15.64,14.44 16.36,15 17,15H20C20.59,15 21.18,14.5 21.25,13.89L21.76,10.82C21.79,10.62 21.73,10.4 21.59,10.25C21.45,10.09 21.24,10 21,10H15Z" />
-  </svg>
-
-</template>
-<script>
-
-  export default {
-    name: 'ViewOnlyIcon',
-  };
-
-</script>
-<style scoped>
-	svg {
-		fill: currentColor
-	}
-</style>
diff --git a/contentcuration/contentcuration/frontend/shared/vuetify/icons.js b/contentcuration/contentcuration/frontend/shared/vuetify/icons.js
deleted file mode 100644
index 612d37b394..0000000000
--- a/contentcuration/contentcuration/frontend/shared/vuetify/icons.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import Vue from 'vue';
-import vuetifyIcons from 'vuetify/lib/components/Vuetify/mixins/icons';
-import camelCase from 'lodash/camelCase';
-import CollapseAllIcon from '../views/icons/CollapseAllIcon';
-import IndicatorIcon from '../views/icons/IndicatorIcon';
-import LightBulbIcon from '../views/icons/LightBulbIcon';
-import ViewOnlyIcon from '../views/icons/ViewOnlyIcon';
-import VIconWrapper from 'shared/views/VIconWrapper';
-import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
-
-Vue.component(VIconWrapper.name, VIconWrapper);
-
-const EMPTY = '_empty';
-export const CONTENT_KIND_ICONS = {
-  [ContentKindsNames.TOPIC]: 'folder',
-  [ContentKindsNames.TOPIC + EMPTY]: 'folder_open',
-  [ContentKindsNames.VIDEO]: 'ondemand_video',
-  [ContentKindsNames.AUDIO]: 'music_note',
-  [ContentKindsNames.SLIDESHOW]: 'image',
-  [ContentKindsNames.EXERCISE]: 'assignment',
-  [ContentKindsNames.DOCUMENT]: 'class',
-  [ContentKindsNames.HTML5]: 'widgets',
-  [ContentKindsNames.ZIM]: 'widgets',
-};
-
-export function getContentKindIcon(kind, isEmpty = false) {
-  const icon = (isEmpty ? [kind + EMPTY] : []).concat([kind]).find(k => k in CONTENT_KIND_ICONS);
-  return icon ? CONTENT_KIND_ICONS[icon] : 'error_outline';
-}
-
-export function getLearningActivityIcon(activity) {
-  if (activity.toLowerCase() === 'explore') {
-    return 'interactShaded';
-  } else if (activity === 'multiple') {
-    return 'allActivities';
-  } else {
-    return `${camelCase(activity) + 'Solid'}`;
-  }
-}
-
-// Can use $vuetify.icons.iconName in <Icon> tags
-const customIcons = {
-  collapse_all: {
-    component: CollapseAllIcon,
-    props: {
-      iconName: 'collapse_all',
-    },
-  },
-  light_bulb: {
-    component: LightBulbIcon,
-    props: {
-      iconsName: 'light_bulb',
-    },
-  },
-  view_only: {
-    component: ViewOnlyIcon,
-    props: {
-      iconName: 'view_only',
-    },
-  },
-  indicator: {
-    component: IndicatorIcon,
-    props: {
-      iconName: 'indicator',
-    },
-  },
-};
-
-export default function icons(additional = {}) {
-  // Grab icon name mapping from Vuetify. `md` is default icon font set
-  const iconMap = vuetifyIcons('md', additional);
-
-  // Update icons to use our custom `Icon` component which adds a layer between implementation
-  // within Vuetify and our code, and the underlying `VIcon` component
-  const vuetifyUpdatedIcons = Object.entries(iconMap)
-    .map(([name, mdName]) => {
-      return {
-        [name]: {
-          component: VIconWrapper.name,
-          props: {
-            iconName: mdName,
-          },
-        },
-      };
-    })
-    .reduce((icons, icon) => Object.assign(icons, icon), {});
-  return {
-    ...vuetifyUpdatedIcons,
-    ...customIcons,
-  };
-}
diff --git a/contentcuration/contentcuration/frontend/shared/vuetify/index.js b/contentcuration/contentcuration/frontend/shared/vuetify/index.js
index be9fdf5cae..0fe2617482 100644
--- a/contentcuration/contentcuration/frontend/shared/vuetify/index.js
+++ b/contentcuration/contentcuration/frontend/shared/vuetify/index.js
@@ -1,4 +1,3 @@
-import icons from './icons';
 import theme from './theme';
 
-export { icons, theme };
+export { theme };
diff --git a/jest_config/setup.js b/jest_config/setup.js
index 0a570c57d7..6c066e4da8 100644
--- a/jest_config/setup.js
+++ b/jest_config/setup.js
@@ -22,7 +22,6 @@ window.CountQueuingStrategy = global.CountQueuingStrategy = CountQueuingStrategy
 import AnalyticsPlugin from 'shared/analytics/plugin';
 import { setupSchema } from 'shared/data';
 import * as resources from 'shared/data/resources';
-import icons from 'shared/vuetify/icons';
 import ActionLink from 'shared/views/ActionLink';
 import { i18nSetup } from 'shared/i18n';
 import { resetJestGlobal } from 'shared/utils/testing'
@@ -47,9 +46,7 @@ window.storageBaseUrl = '/content/storage/';
 
 Vue.use(VueRouter);
 Vue.use(Vuex);
-Vue.use(Vuetify, {
-  icons: icons(),
-});
+Vue.use(Vuetify);
 // Register kolibri-design-system plugin
 Vue.use(KThemePlugin);
 
diff --git a/package.json b/package.json
index 3ad6502867..47befa5764 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,7 @@
     "jspdf": "https://github.com/parallax/jsPDF.git#b7a1d8239c596292ce86dafa77f05987bcfa2e6e",
     "jszip": "^3.10.1",
     "kolibri-constants": "^0.2.0",
-    "kolibri-design-system": "^4.2.0",
+    "kolibri-design-system": "https://github.com/MisRob/kolibri-design-system#b0fc5a3b8b1ab09c1357450daf3117c7813ab6ae",
     "lodash": "^4.17.21",
     "material-icons": "0.3.1",
     "mutex-js": "^1.1.5",
diff --git a/yarn.lock b/yarn.lock
index bf51f4402a..9dfca4c770 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4647,7 +4647,7 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
-color-convert@^1.9.0:
+color-convert@^1.9.0, color-convert@^1.9.3:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -4666,16 +4666,32 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
 
-color-name@~1.1.4:
+color-name@^1.0.0, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+color-string@^1.6.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
+  integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
+  dependencies:
+    color-name "^1.0.0"
+    simple-swizzle "^0.2.2"
+
 color-support@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
   integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
 
+color@3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164"
+  integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==
+  dependencies:
+    color-convert "^1.9.3"
+    color-string "^1.6.0"
+
 colord@^2.9.1, colord@^2.9.2:
   version "2.9.2"
   resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.2.tgz#25e2bacbbaa65991422c07ea209e2089428effb1"
@@ -7751,6 +7767,11 @@ is-arrayish@^0.2.1:
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
 
+is-arrayish@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
+  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
+
 is-bigint@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
@@ -9374,14 +9395,14 @@ kolibri-constants@^0.2.0:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.2.5.tgz#2b9df4c477119d0ade2d66bf8aef8a4172f0418f"
   integrity sha512-ZoFZ83xgteZhFZtYjiOmITcZeSF+X42i12TOo87zmcdA78jj0dZbPYB+ttO855UxoKY8h4HHeDVZIUkE5TGa5g==
 
-kolibri-design-system@^4.2.0:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-4.3.1.tgz#09bb207e7507fc3c27f119054151485ffde67dd5"
-  integrity sha512-umMrqXorU3UzXQZ1ZAmUjYWB02phXcX0qmWwS+FAOPbOjUEjmB6pZ/lN5TjjeE3onZfasf+pjwb3xJx3F4Nn/A==
+"kolibri-design-system@https://github.com/MisRob/kolibri-design-system#b0fc5a3b8b1ab09c1357450daf3117c7813ab6ae":
+  version "5.0.0-rc3"
+  resolved "https://github.com/MisRob/kolibri-design-system#b0fc5a3b8b1ab09c1357450daf3117c7813ab6ae"
   dependencies:
     "@vue/composition-api" "1.7.2"
     aphrodite "https://github.com/learningequality/aphrodite/"
     autosize "3.0.21"
+    color "3.2.1"
     css-element-queries "1.2.0"
     date-fns "1.30.1"
     frame-throttle "3.0.0"
@@ -9391,6 +9412,7 @@ kolibri-design-system@^4.2.0:
     purecss "2.2.0"
     tippy.js "4.2.1"
     vue-intl "3.1.0"
+    vue2-teleport "1.1.4"
     xstate "4.38.3"
 
 kolibri-tools@0.16.0-dev.3:
@@ -12318,6 +12340,13 @@ signal-exit@^4.0.1:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.0.1.tgz#96a61033896120ec9335d96851d902cc98f0ba2a"
   integrity sha512-uUWsN4aOxJAS8KOuf3QMyFtgm1pkb6I+KRZbRF/ghdf5T7sM+B1lLLzPDxswUjkmHyxQAVzEgG35E3NzDM9GVw==
 
+simple-swizzle@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+  integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==
+  dependencies:
+    is-arrayish "^0.3.1"
+
 sisteransi@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
@@ -13997,6 +14026,11 @@ vue-template-es2015-compiler@^1.6.0, vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue2-teleport@1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/vue2-teleport/-/vue2-teleport-1.1.4.tgz#30c84b1005bf9c208b1c05f4b6147300c54ee846"
+  integrity sha512-mGTszyQP6k3sSSk7MBq+PZdVojHYLwg5772hl3UVpu5uaLBqWIZ5eNP6/TjkDrf1XUTTxybvpXC6inpjwO+i/Q==
+
 vue@^2.6.12:
   version "2.6.14"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"