From 5c5b5ba0d7f03511fd714087d699b3e45c932932 Mon Sep 17 00:00:00 2001
From: Mark Sujew <mark.sujew@typefox.io>
Date: Tue, 31 Aug 2021 15:46:57 +0200
Subject: [PATCH] Replace icons with codicons

---
 .../sample-unclosable-view-contribution.ts    |  4 +-
 .../browser/view/sample-unclosable-view.tsx   |  4 +-
 .../src/browser/bulk-edit-commands.ts         |  5 +-
 .../callhierarchy-tree-widget.tsx             |  4 +-
 .../callhierarchy/src/browser/style/index.css |  4 -
 packages/core/src/browser/dialogs.ts          |  5 +-
 packages/core/src/browser/diff-uris.ts        |  3 +-
 packages/core/src/browser/label-provider.ts   |  5 +-
 .../src/browser/progress-status-bar-item.ts   |  2 +-
 .../quick-input/quick-command-service.ts      |  3 +-
 .../src/browser/shell/application-shell.ts    |  8 +-
 .../src/browser/shell/tab-bar-toolbar.tsx     |  7 +-
 .../src/browser/status-bar/status-bar.tsx     |  4 +-
 packages/core/src/browser/style/index.css     | 10 +++
 packages/core/src/browser/style/menus.css     | 18 ++++-
 packages/core/src/browser/style/sidepanel.css | 15 +++-
 .../core/src/browser/style/status-bar.css     |  7 +-
 packages/core/src/browser/style/tabs.css      | 61 ++++++++------
 packages/core/src/browser/style/tree.css      |  1 -
 .../core/src/browser/tree/tree-widget.tsx     |  6 +-
 .../src/browser/widgets/alert-message.tsx     |  9 ++-
 packages/core/src/browser/widgets/widget.ts   | 17 +++-
 .../console/debug-console-contribution.tsx    |  6 +-
 ...debug-frontend-application-contribution.ts | 81 +++++++++++++++----
 .../src/browser/debug-prefix-configuration.ts |  2 +-
 packages/debug/src/browser/style/index.css    | 34 ++++++--
 .../debug/src/browser/view/debug-action.tsx   |  4 +-
 .../view/debug-configuration-widget.tsx       |  6 +-
 .../src/browser/view/debug-session-widget.ts  |  4 +-
 .../src/browser/view/debug-toolbar-widget.tsx | 16 ++--
 .../debug/src/browser/view/debug-widget.ts    |  4 +-
 .../src/browser/file-dialog/file-dialog.ts    | 10 +--
 .../browser/location/location-renderer.tsx    |  3 +-
 .../src/browser/style/file-dialog.css         |  7 +-
 .../src/browser/style/file-icons.css          | 11 ++-
 .../src/browser/getting-started-widget.tsx    | 10 +--
 .../src/browser/diff/git-diff-contribution.ts | 11 +--
 .../browser/diff/git-diff-header-widget.tsx   |  4 +-
 .../git/src/browser/diff/git-diff-widget.tsx  |  4 +-
 packages/git/src/browser/git-contribution.ts  | 44 +++++-----
 .../git-commit-detail-header-widget.tsx       |  4 +-
 .../history/git-commit-detail-widget.tsx      |  4 +-
 packages/git/src/browser/style/diff.css       |  5 --
 packages/git/src/browser/style/index.css      |  5 --
 .../src/browser/keybindings-widget.tsx        |  8 +-
 .../browser/keymaps-frontend-contribution.ts  |  6 +-
 .../browser/problem/problem-contribution.ts   | 10 +--
 .../src/browser/problem/problem-widget.tsx    | 14 ++--
 packages/markers/src/browser/style/index.css  | 16 +---
 .../browser/notification-center-component.tsx |  5 +-
 .../src/browser/notification-component.tsx    |  9 ++-
 .../src/browser/notifications-commands.ts     |  5 +-
 .../src/browser/notifications-contribution.ts |  2 +-
 .../src/browser/style/notifications.css       | 39 ++-------
 .../src/browser/mini-browser-content.ts       |  4 +-
 .../src/browser/mini-browser-open-handler.ts  |  8 +-
 .../mini-browser/src/browser/mini-browser.ts  |  4 +-
 .../mini-browser/src/browser/style/index.css  |  5 --
 .../src/browser/navigator-contribution.ts     |  7 +-
 .../src/browser/navigator-frontend-module.ts  |  3 +-
 .../browser/navigator-layout-migrations.ts    | 12 +++
 .../src/browser/navigator-widget-factory.ts   |  3 +-
 .../navigator/src/browser/style/index.css     |  5 --
 .../src/browser/outline-view-contribution.ts  |  4 +-
 .../src/browser/outline-view-widget.tsx       |  5 +-
 .../outline-view/src/browser/styles/index.css |  4 -
 .../output/src/browser/output-commands.ts     |  7 +-
 packages/output/src/browser/output-widget.ts  |  4 +-
 .../src/browser/hosted-plugin-controller.ts   | 10 +--
 .../browser/dialogs/modal-notification.ts     | 12 +--
 .../src/main/browser/plugin-ext-widget.tsx    |  5 +-
 .../src/main/browser/plugin-shared-style.ts   |  2 +-
 .../src/main/browser/style/index.css          |  6 +-
 .../src/main/browser/style/plugin-sidebar.css |  2 +-
 .../main/browser/view/plugin-view-registry.ts |  4 +-
 .../preferences/src/browser/style/index.css   |  2 -
 .../src/browser/style/preference-array.css    |  8 +-
 .../util/preference-scope-command-manager.ts  |  4 +-
 .../components/preference-array-input.ts      |  8 +-
 .../views/preference-scope-tabbar-widget.tsx  |  4 +-
 .../views/preference-searchbar-widget.tsx     |  4 +-
 .../src/browser/views/preference-widget.tsx   |  4 +-
 .../src/browser/preview-contribution.ts       |  6 +-
 .../preview/src/browser/preview-widget.ts     |  4 +-
 .../src/browser/property-view-widget.tsx      |  4 +-
 .../resource-property-view-label-provider.ts  |  4 +-
 .../browser/history/scm-history-widget.tsx    | 27 +++----
 .../scm-extra/src/browser/style/history.css   | 16 ++--
 .../scm/src/browser/scm-amend-component.tsx   |  6 +-
 packages/scm/src/browser/scm-contribution.ts  |  9 ++-
 .../scm/src/browser/scm-frontend-module.ts    |  3 +-
 .../scm/src/browser/scm-layout-migrations.ts  | 12 +++
 packages/scm/src/browser/scm-tree-widget.tsx  |  4 +-
 packages/scm/src/browser/style/index.css      |  7 +-
 ...arch-in-workspace-frontend-contribution.ts | 12 +--
 ...search-in-workspace-result-tree-widget.tsx |  5 +-
 .../browser/search-in-workspace-widget.tsx    | 18 ++---
 .../src/browser/styles/index.css              | 56 ++++---------
 .../browser/search/terminal-search-widget.tsx | 14 ++--
 .../src/browser/style/terminal-search.css     | 41 +++-------
 .../browser/terminal-frontend-contribution.ts |  4 +-
 .../browser/terminal-quick-open-service.ts    |  3 +-
 .../src/browser/terminal-widget-impl.ts       |  4 +-
 .../src/browser/timeline-contribution.ts      |  5 +-
 .../tree/typehierarchy-tree-widget.tsx        |  3 +-
 .../vsx-registry/src/browser/style/index.css  |  9 +--
 .../src/browser/vsx-extension-commands.ts     |  3 +-
 .../src/browser/vsx-extension-editor.tsx      |  4 +-
 .../src/browser/vsx-extension.tsx             | 16 ++--
 .../browser/vsx-extensions-view-container.ts  |  4 +-
 .../src/browser/workspace-input-dialog.ts     |  4 +-
 111 files changed, 552 insertions(+), 500 deletions(-)

diff --git a/examples/api-samples/src/browser/view/sample-unclosable-view-contribution.ts b/examples/api-samples/src/browser/view/sample-unclosable-view-contribution.ts
index e5604eff16568..254981a1284b9 100644
--- a/examples/api-samples/src/browser/view/sample-unclosable-view-contribution.ts
+++ b/examples/api-samples/src/browser/view/sample-unclosable-view-contribution.ts
@@ -18,12 +18,12 @@ import { inject, injectable, interfaces } from '@theia/core/shared/inversify';
 import { AbstractViewContribution, bindViewContribution } from '@theia/core/lib/browser/shell/view-contribution';
 import { TabBarToolbarContribution, TabBarToolbarRegistry } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
 import { Command, CommandRegistry, MessageService } from '@theia/core/lib/common';
-import { Widget, WidgetFactory } from '@theia/core/lib/browser';
+import { codicon, Widget, WidgetFactory } from '@theia/core/lib/browser';
 import { SampleViewUnclosableView } from './sample-unclosable-view';
 
 export const SampleToolBarCommand: Command = {
     id: 'sample.toggle.toolbarCommand',
-    iconClass: 'theia-add-icon'
+    iconClass: codicon('add')
 };
 
 @injectable()
diff --git a/examples/api-samples/src/browser/view/sample-unclosable-view.tsx b/examples/api-samples/src/browser/view/sample-unclosable-view.tsx
index 1dceae779e703..297508559e564 100644
--- a/examples/api-samples/src/browser/view/sample-unclosable-view.tsx
+++ b/examples/api-samples/src/browser/view/sample-unclosable-view.tsx
@@ -14,7 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { ReactWidget } from '@theia/core/lib/browser';
+import { codicon, ReactWidget } from '@theia/core/lib/browser';
 import { injectable, postConstruct } from '@theia/core/shared/inversify';
 import * as React from '@theia/core/shared/react';
 
@@ -30,7 +30,7 @@ export class SampleViewUnclosableView extends ReactWidget {
     this.id = SampleViewUnclosableView.ID;
     this.title.caption = 'Sample Unclosable View';
     this.title.label = 'Sample Unclosable View';
-    this.title.iconClass = 'fa fa-window-maximize';
+    this.title.iconClass = codicon('window');
     this.title.closable = false;
     this.update();
   }
diff --git a/packages/bulk-edit/src/browser/bulk-edit-commands.ts b/packages/bulk-edit/src/browser/bulk-edit-commands.ts
index 221bc28bc3599..2aef3d70a5ab0 100644
--- a/packages/bulk-edit/src/browser/bulk-edit-commands.ts
+++ b/packages/bulk-edit/src/browser/bulk-edit-commands.ts
@@ -14,6 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
+import { codicon } from '@theia/core/lib/browser';
 import { Command } from '@theia/core/lib/common';
 
 export namespace BulkEditCommands {
@@ -23,11 +24,11 @@ export namespace BulkEditCommands {
 
     export const APPLY: Command = {
         id: 'bulk-edit:apply',
-        iconClass: 'codicon codicon-check'
+        iconClass: codicon('check')
     };
 
     export const DISCARD: Command = {
         id: 'bulk-edit:discard',
-        iconClass: 'clear-all'
+        iconClass: codicon('clear-all')
     };
 }
diff --git a/packages/callhierarchy/src/browser/callhierarchy-tree/callhierarchy-tree-widget.tsx b/packages/callhierarchy/src/browser/callhierarchy-tree/callhierarchy-tree-widget.tsx
index fe6859461ff6c..a82eec04df975 100644
--- a/packages/callhierarchy/src/browser/callhierarchy-tree/callhierarchy-tree-widget.tsx
+++ b/packages/callhierarchy/src/browser/callhierarchy-tree/callhierarchy-tree-widget.tsx
@@ -17,7 +17,7 @@
 import { injectable, inject } from '@theia/core/shared/inversify';
 import {
     ContextMenuRenderer, TreeWidget, NodeProps, TreeProps, TreeNode,
-    TreeModel, DockPanel
+    TreeModel, DockPanel, codicon
 } from '@theia/core/lib/browser';
 import { LabelProvider } from '@theia/core/lib/browser/label-provider';
 import { DefinitionNode, CallerNode } from './callhierarchy-tree';
@@ -47,7 +47,7 @@ export class CallHierarchyTreeWidget extends TreeWidget {
         this.id = CALLHIERARCHY_ID;
         this.title.label = 'Call Hierarchy';
         this.title.caption = 'Call Hierarchy';
-        this.title.iconClass = 'fa call-hierarchy-tab-icon';
+        this.title.iconClass = codicon('references');
         this.title.closable = true;
         this.addClass(HIERARCHY_TREE_CLASS);
         this.toDispose.push(this.model.onSelectionChanged(selection => {
diff --git a/packages/callhierarchy/src/browser/style/index.css b/packages/callhierarchy/src/browser/style/index.css
index 1e1aef45291a3..08208535c598b 100644
--- a/packages/callhierarchy/src/browser/style/index.css
+++ b/packages/callhierarchy/src/browser/style/index.css
@@ -51,10 +51,6 @@
     color: var(--theia-descriptionForeground);
 }
 
-.call-hierarchy-tab-icon::before {
-    content: "\f0ab"
-}
-
 .theia-CallHierarchyTree .definitionNode-content {
     white-space: nowrap;
     overflow: hidden;
diff --git a/packages/core/src/browser/dialogs.ts b/packages/core/src/browser/dialogs.ts
index 5ba2aec617139..548f893bd9842 100644
--- a/packages/core/src/browser/dialogs.ts
+++ b/packages/core/src/browser/dialogs.ts
@@ -17,7 +17,7 @@
 import { injectable, inject } from 'inversify';
 import { Disposable, MaybePromise, CancellationTokenSource } from '../common';
 import { Key } from './keyboard/keys';
-import { Widget, BaseWidget, Message, addKeyListener } from './widgets';
+import { Widget, BaseWidget, Message, addKeyListener, codiconArray } from './widgets';
 import { FrontendApplicationContribution } from './frontend-application';
 
 @injectable()
@@ -168,8 +168,7 @@ export abstract class AbstractDialog<T> extends BaseWidget {
         titleContentNode.appendChild(this.titleNode);
 
         this.closeCrossNode = document.createElement('i');
-        this.closeCrossNode.classList.add('fa');
-        this.closeCrossNode.classList.add('fa-times');
+        this.closeCrossNode.classList.add(...codiconArray('close'));
         this.closeCrossNode.classList.add('closeButton');
         titleContentNode.appendChild(this.closeCrossNode);
 
diff --git a/packages/core/src/browser/diff-uris.ts b/packages/core/src/browser/diff-uris.ts
index d159d7e99744c..beba59504edc2 100644
--- a/packages/core/src/browser/diff-uris.ts
+++ b/packages/core/src/browser/diff-uris.ts
@@ -17,6 +17,7 @@
 import { injectable, inject } from 'inversify';
 import URI from '../common/uri';
 import { LabelProviderContribution, LabelProvider, DidChangeLabelEvent } from './label-provider';
+import { codicon } from './widgets';
 
 export namespace DiffUris {
 
@@ -101,7 +102,7 @@ export class DiffUriLabelProviderContribution implements LabelProviderContributi
     }
 
     getIcon(uri: URI): string {
-        return 'fa fa-columns';
+        return codicon('split-horizontal');
     }
 
     affects(diffUri: URI, event: DidChangeLabelEvent): boolean {
diff --git a/packages/core/src/browser/label-provider.ts b/packages/core/src/browser/label-provider.ts
index b8e979d709e0e..cc4aef51b5eef 100644
--- a/packages/core/src/browser/label-provider.ts
+++ b/packages/core/src/browser/label-provider.ts
@@ -23,15 +23,16 @@ import { Event, Emitter, Disposable, Path } from '../common';
 import { FrontendApplicationContribution } from './frontend-application';
 import { EnvVariablesServer } from '../common/env-variables/env-variables-protocol';
 import { ResourceLabelFormatter, ResourceLabelFormatting } from '../common/label-protocol';
+import { codicon } from './widgets';
 
 /**
  * @internal don't export it, use `LabelProvider.folderIcon` instead.
  */
-const DEFAULT_FOLDER_ICON = 'fa fa-folder';
+const DEFAULT_FOLDER_ICON = `${codicon('folder')} default-folder-icon`;
 /**
  * @internal don't export it, use `LabelProvider.fileIcon` instead.
  */
-const DEFAULT_FILE_ICON = 'fa fa-file';
+const DEFAULT_FILE_ICON = `${codicon('file')} default-file-icon`;
 
 /**
  * Internal folder icon class for the default (File Icons) theme.
diff --git a/packages/core/src/browser/progress-status-bar-item.ts b/packages/core/src/browser/progress-status-bar-item.ts
index fe4c9c8b5474e..eb6cab3d317df 100644
--- a/packages/core/src/browser/progress-status-bar-item.ts
+++ b/packages/core/src/browser/progress-status-bar-item.ts
@@ -73,7 +73,7 @@ export class ProgressStatusBarItem implements ProgressClient {
             this.statusBar.removeElement(this.id);
             return;
         }
-        const text = `$(refresh~spin) ${message}`;
+        const text = `$(codicon-sync~spin) ${message}`;
         this.statusBar.setElement(this.id, {
             text,
             alignment: StatusBarAlignment.LEFT,
diff --git a/packages/core/src/browser/quick-input/quick-command-service.ts b/packages/core/src/browser/quick-input/quick-command-service.ts
index 2eb1961dfb715..de08e4e7d3ca7 100644
--- a/packages/core/src/browser/quick-input/quick-command-service.ts
+++ b/packages/core/src/browser/quick-input/quick-command-service.ts
@@ -22,6 +22,7 @@ import { CorePreferences } from '../core-preferences';
 import { QuickAccessContribution, QuickAccessProvider, QuickAccessRegistry } from './quick-access';
 import { filterItems, QuickPickItem, QuickPicks } from './quick-input-service';
 import { KeySequence } from '../keys';
+import { codiconArray } from '../widgets';
 
 export const quickCommand: Command = {
     id: 'workbench.action.showCommands'
@@ -139,7 +140,7 @@ export class QuickCommandService implements QuickAccessContribution, QuickAccess
     private getItemIconClasses(command: Command): string[] | undefined {
         const toggledHandler = this.commandRegistry.getToggledHandler(command.id);
         if (toggledHandler) {
-            return ['fa fa-check'];
+            return codiconArray('check');
         }
         return undefined;
     }
diff --git a/packages/core/src/browser/shell/application-shell.ts b/packages/core/src/browser/shell/application-shell.ts
index ff0026676d375..f11c36d491c06 100644
--- a/packages/core/src/browser/shell/application-shell.ts
+++ b/packages/core/src/browser/shell/application-shell.ts
@@ -57,12 +57,14 @@ export type ApplicationShellLayoutVersion =
     /** view containers are introduced, backward compatible to 2.0 */
     3.0 |
     /** git history view is replaced by a more generic scm history view, backward compatible to 3.0 */
-    4.0;
+    4.0 |
+    /** Replace custom/font-awesome icons with codicons */
+    5.0;
 
 /**
  * When a version is increased, make sure to introduce a migration (ApplicationShellLayoutMigration) to this version.
  */
-export const applicationShellLayoutVersion: ApplicationShellLayoutVersion = 4.0;
+export const applicationShellLayoutVersion: ApplicationShellLayoutVersion = 5.0;
 
 export const ApplicationShellOptions = Symbol('ApplicationShellOptions');
 export const DockPanelRendererFactory = Symbol('DockPanelRendererFactory');
@@ -1371,7 +1373,7 @@ export class ApplicationShell extends Widget {
             this.statusBar.removeElement(BOTTOM_PANEL_TOGGLE_ID);
         } else {
             const element: StatusBarEntry = {
-                text: '$(window-maximize)',
+                text: '$(codicon-window)',
                 alignment: StatusBarAlignment.RIGHT,
                 tooltip: 'Toggle Bottom Panel',
                 command: 'core.toggle.bottom.panel',
diff --git a/packages/core/src/browser/shell/tab-bar-toolbar.tsx b/packages/core/src/browser/shell/tab-bar-toolbar.tsx
index 0f0310ca9cd10..8ec3f8bced7e7 100644
--- a/packages/core/src/browser/shell/tab-bar-toolbar.tsx
+++ b/packages/core/src/browser/shell/tab-bar-toolbar.tsx
@@ -17,7 +17,7 @@
 import debounce = require('lodash.debounce');
 import * as React from 'react';
 import { inject, injectable, named } from 'inversify';
-import { Widget, ReactWidget } from '../widgets';
+import { Widget, ReactWidget, codicon, ACTION_ITEM } from '../widgets';
 import { LabelParser, LabelIcon } from '../label-parser';
 import { ContributionProvider } from '../../common/contribution-provider';
 import { FrontendApplicationContribution } from '../frontend-application';
@@ -369,8 +369,9 @@ export class TabBarToolbar extends ReactWidget {
             }
         }
         const command = this.commands.getCommand(item.command);
-        const iconClass = (typeof item.icon === 'function' && item.icon()) || item.icon || (command && command.iconClass);
+        let iconClass = (typeof item.icon === 'function' && item.icon()) || item.icon as string || (command && command.iconClass);
         if (iconClass) {
+            iconClass += ` ${ACTION_ITEM}`;
             classNames.push(iconClass);
         }
         const tooltip = item.tooltip || (command && command.label);
@@ -402,7 +403,7 @@ export class TabBarToolbar extends ReactWidget {
 
     protected renderMore(): React.ReactNode {
         return !!this.more.size && <div key='__more__' className={TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM + ' enabled'}>
-            <div id='__more__' className='fa fa-ellipsis-h' onClick={this.showMoreContextMenu} title='More Actions...' />
+            <div id='__more__' className={codicon('ellipsis', true)} onClick={this.showMoreContextMenu} title='More Actions...' />
         </div>;
     }
 
diff --git a/packages/core/src/browser/status-bar/status-bar.tsx b/packages/core/src/browser/status-bar/status-bar.tsx
index 6ae76f5069930..1965d0b29da57 100644
--- a/packages/core/src/browser/status-bar/status-bar.tsx
+++ b/packages/core/src/browser/status-bar/status-bar.tsx
@@ -195,8 +195,10 @@ export class StatusBarImpl extends ReactWidget implements StatusBar {
                 const octicon = getIconByName(val.name);
                 if (octicon) {
                     children.push(<span key={key} className={val.animation ? 'fa-' + val.animation : 'fa'}><Octicon icon={octicon} height={12.5} width={12.5} /></span>);
+                } else if (val.name.startsWith('codicon-')) {
+                    children.push(<span key={key} className={`codicon ${val.name}${val.animation ? ' fa-' + val.animation : ''}`}></span>);
                 } else {
-                    children.push(<span key={key} className={`fa fa-${val.name} ${val.animation ? 'fa-' + val.animation : ''}`}></span>);
+                    children.push(<span key={key} className={`fa fa-${val.name}${val.animation ? ' fa-' + val.animation : ''}`}></span>);
                 }
             } else {
                 children.push(<span key={key}>{val}</span>);
diff --git a/packages/core/src/browser/style/index.css b/packages/core/src/browser/style/index.css
index 005d39a3bb2de..1a9fbe36f299f 100644
--- a/packages/core/src/browser/style/index.css
+++ b/packages/core/src/browser/style/index.css
@@ -163,6 +163,16 @@ blockquote {
     outline: none;
 }
 
+.action-item {
+  padding: 2px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.action-item:hover {
+    background-color: rgba(50%, 50%, 50%, 0.2);
+}
+
 button.theia-button, .theia-button {
     border: none;
     color: var(--theia-button-foreground);
diff --git a/packages/core/src/browser/style/menus.css b/packages/core/src/browser/style/menus.css
index 40956ccdf4835..438ab0641702d 100644
--- a/packages/core/src/browser/style/menus.css
+++ b/packages/core/src/browser/style/menus.css
@@ -180,16 +180,26 @@
 
 .p-Menu-itemIcon::before,
 .p-Menu-itemSubmenuIcon::before {
-  font-family: FontAwesome;
+  font: normal normal normal 16px/1 codicon;
+  display: inline-block;
+  text-decoration: none;
+  text-rendering: auto;
+  text-align: center;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  transform: translateY(20%);
 }
 
 
 .p-Menu-item.p-mod-toggled > .p-Menu-itemIcon::before {
-  content: '\f00c';
+  content: '\eab2';
+  transform: scale(0.8) translateY(20%);
 }
 
 
 .p-Menu-item[data-type='submenu'] > .p-Menu-itemSubmenuIcon::before {
-  content: '\f0da';
-
+  content: '\eab6';
 }
diff --git a/packages/core/src/browser/style/sidepanel.css b/packages/core/src/browser/style/sidepanel.css
index 9bf6061c0d406..7d5fb0ed891e1 100644
--- a/packages/core/src/browser/style/sidepanel.css
+++ b/packages/core/src/browser/style/sidepanel.css
@@ -19,13 +19,13 @@
 |----------------------------------------------------------------------------*/
 
 :root {
-  --theia-private-sidebar-tab-width: 50px;
+  --theia-private-sidebar-tab-width: 48px;
   --theia-private-sidebar-tab-height: 32px;
   --theia-private-sidebar-tab-padding-top-and-bottom: 11px;
   --theia-private-sidebar-tab-padding-left-and-right: 10px;
   --theia-private-sidebar-scrollbar-rail-width: 7px;
   --theia-private-sidebar-scrollbar-width: 5px;
-  --theia-private-sidebar-icon-size: 28px;
+  --theia-private-sidebar-icon-size: 24px;
 }
 
 
@@ -42,6 +42,10 @@
   max-width: var(--theia-private-sidebar-tab-width);
 }
 
+.p-TabBar-content {
+  gap: 4px 0px;
+}
+
 .p-TabBar.theia-app-sides .p-TabBar-content {
   z-index: 1;
 }
@@ -109,10 +113,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 23px;
+  font-size: var(--theia-private-sidebar-icon-size);
   text-align: center;
   color: inherit;
-  background-color: var(--theia-activityBar-inactiveForeground);
 
   /* svg */
   width: var(--theia-private-sidebar-tab-width);
@@ -139,6 +142,10 @@
 .p-TabBar.theia-app-sides .p-TabBar-tabIcon:hover,
 .p-TabBar.theia-app-sides .p-mod-current .p-TabBar-tabIcon {
   color: var(--theia-activityBar-foreground);
+}
+
+.p-TabBar.theia-app-sides .p-TabBar-tabIcon.theia-plugin-view-container:hover,
+.p-TabBar.theia-app-sides .p-mod-current .p-TabBar-tabIcon.theia-plugin-view-container {
   background-color: var(--theia-activityBar-foreground);
 }
 
diff --git a/packages/core/src/browser/style/status-bar.css b/packages/core/src/browser/style/status-bar.css
index 1ce03d17d26f2..4f1ba06a55275 100644
--- a/packages/core/src/browser/style/status-bar.css
+++ b/packages/core/src/browser/style/status-bar.css
@@ -15,7 +15,7 @@
  ********************************************************************************/
 
 :root {
-    --theia-statusBar-height: 19px;
+    --theia-statusBar-height: 22px;
 }
 
 #theia-statusBar {
@@ -59,6 +59,11 @@ body.theia-no-open-workspace #theia-statusBar {
     margin-left: calc(var(--theia-ui-padding)/2);
 }
 
+#theia-statusBar .area .element .codicon {
+    /* Scaling down codicons from 16 to 14 pixels */
+    font-size: 14px;
+}
+
 #theia-statusBar .area .element > *:last-child {
     margin-right: calc(var(--theia-ui-padding)/2);
 }
diff --git a/packages/core/src/browser/style/tabs.css b/packages/core/src/browser/style/tabs.css
index e369c48720421..b93adff2aec46 100644
--- a/packages/core/src/browser/style/tabs.css
+++ b/packages/core/src/browser/style/tabs.css
@@ -190,19 +190,11 @@ body.theia-editor-highlightModifiedTabs
     min-height: 14px;
     background-size: 13px;
     background-position-y: 3px;
-    background: var(--theia-icon-foreground);
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-size: auto 13px;
     mask-repeat: no-repeat;
     mask-size: auto 13px;
-    padding-right: calc(var(--theia-ui-padding)/2);
-}
-
-.p-TabBar[data-orientation='horizontal'] .p-TabBar-tabIcon.file-icon,
-.p-TabBar-tab.p-mod-drag-image .p-TabBar-tabIcon.file-icon {
-    background: none;
-    padding-bottom: 0px;
-    min-height: 20px;
+    padding-right: 8px;
 }
 
 .p-TabBar[data-orientation='horizontal'] .p-TabBar-tabIcon.fa,
@@ -213,32 +205,48 @@ body.theia-editor-highlightModifiedTabs
 }
 
 .p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon {
-  padding-left: 10px;
+  padding: 2px;
+  margin-top: 2px;
+  margin-left: 4px;
   height: var(--theia-icon-size);
   width: var(--theia-icon-size);
-  background-size: 13px;
-  background-position: center;
-  background-repeat: no-repeat;
+  font: normal normal normal 16px/1 codicon;
+  display: inline-block;
+  text-decoration: none;
+  text-rendering: auto;
+  text-align: center;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+
+.p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon:hover {
+  border-radius: 5px;
+  background-color: rgba(50%, 50%, 50%, 0.2);
 }
 
 .p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable {
-  padding-right: 2px;
+  padding-right: 4px;
 }
 
+.p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-current > .theia-tab-icon-label > .p-TabBar-tabIcon {
+  margin-top: -2px;
+}
 
-.p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable:hover > .p-TabBar-tabCloseIcon,
 .p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-current > .p-TabBar-tabCloseIcon {
-  background-image: var(--theia-icon-close);
+  margin-top: 0px;
 }
 
-.p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable.theia-mod-dirty > .p-TabBar-tabCloseIcon {
-  background-size: 10px;
-  background-image: var(--theia-icon-circle);
+.p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable:not(.theia-mod-dirty):hover > .p-TabBar-tabCloseIcon:before,
+.p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable:not(.theia-mod-dirty).p-TabBar-tab.p-mod-current > .p-TabBar-tabCloseIcon:before,
+.p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable.theia-mod-dirty > .p-TabBar-tabCloseIcon:hover:before { 
+  content: "\ea76" 
 }
 
-.p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable.theia-mod-dirty > .p-TabBar-tabCloseIcon:hover {
-  background-size: 13px;
-  background-image: var(--theia-icon-close);
+.p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable.theia-mod-dirty > .p-TabBar-tabCloseIcon:before { 
+  content: "\ea71" 
 }
 
 .p-TabBar-tabIcon.no-icon {
@@ -343,8 +351,8 @@ body.theia-editor-highlightModifiedTabs
 .p-TabBar-toolbar .item {
   display: flex;
   align-items: center;
-  margin-left: 8px; /* `padding` + `margin-right` from the container toolbar */
-  opacity: var(--theia-mod-disabled-opacity);;
+  margin-left: 4px; /* `padding` + `margin-right` from the container toolbar */
+  opacity: var(--theia-mod-disabled-opacity);
   cursor: default;
 }
 
@@ -353,8 +361,9 @@ body.theia-editor-highlightModifiedTabs
     cursor: pointer;
 }
 
-.p-TabBar-toolbar .item.enabled.active {
-    transform: scale(var(--theia-toolbar-active-transform-scale));
+.p-TabBar-toolbar :not(.item.enabled) .action-item {
+  background: transparent;
+  cursor: default;
 }
 
 .p-TabBar-toolbar .item.toggled {
diff --git a/packages/core/src/browser/style/tree.css b/packages/core/src/browser/style/tree.css
index 619e1cbeb77d8..8ecf2c48807d9 100644
--- a/packages/core/src/browser/style/tree.css
+++ b/packages/core/src/browser/style/tree.css
@@ -73,7 +73,6 @@
 }
 
 .theia-ExpansionToggle.theia-mod-busy {
-    background: var(--theia-icon-loading) center center no-repeat;
     animation: theia-spin 1.25s linear infinite;
 }
 
diff --git a/packages/core/src/browser/tree/tree-widget.tsx b/packages/core/src/browser/tree/tree-widget.tsx
index bc5850f03f840..694e689c18404 100644
--- a/packages/core/src/browser/tree/tree-widget.tsx
+++ b/packages/core/src/browser/tree/tree-widget.tsx
@@ -20,7 +20,9 @@ import { Disposable, MenuPath, SelectionService } from '../../common';
 import { Key, KeyCode, KeyModifier } from '../keyboard/keys';
 import { ContextMenuRenderer } from '../context-menu-renderer';
 import { StatefulWidget } from '../shell';
-import { EXPANSION_TOGGLE_CLASS, SELECTED_CLASS, COLLAPSED_CLASS, FOCUS_CLASS, BUSY_CLASS, CODICON_TREE_ITEM_CLASSES, Widget, UnsafeWidgetUtilities } from '../widgets';
+import {
+    EXPANSION_TOGGLE_CLASS, SELECTED_CLASS, COLLAPSED_CLASS, FOCUS_CLASS, BUSY_CLASS, CODICON_TREE_ITEM_CLASSES, CODICON_LOADING_CLASSES, Widget, UnsafeWidgetUtilities
+} from '../widgets';
 import { TreeNode, CompositeTreeNode } from './tree';
 import { TreeModel } from './tree-model';
 import { ExpandableTreeNode } from './tree-expansion';
@@ -564,7 +566,7 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
             classes.push(COLLAPSED_CLASS);
         }
         if (node.busy) {
-            classes.push(BUSY_CLASS);
+            classes.push(BUSY_CLASS, ...CODICON_LOADING_CLASSES);
         } else {
             classes.push(...CODICON_TREE_ITEM_CLASSES);
         }
diff --git a/packages/core/src/browser/widgets/alert-message.tsx b/packages/core/src/browser/widgets/alert-message.tsx
index 466ede64398f1..aa126ffe193a0 100644
--- a/packages/core/src/browser/widgets/alert-message.tsx
+++ b/packages/core/src/browser/widgets/alert-message.tsx
@@ -15,6 +15,7 @@
  ********************************************************************************/
 
 import React = require('react');
+import { codicon } from './widget';
 
 export type MessageType = keyof AlertMessageIcon;
 
@@ -26,10 +27,10 @@ interface AlertMessageIcon {
 }
 
 const AlertMessageIcon = {
-    INFO: 'fa fa-info-circle',
-    SUCCESS: 'fa fa-check-circle',
-    WARNING: 'fa fa-exclamation-circle',
-    ERROR: 'fa fa-times-circle'
+    INFO: codicon('info'),
+    SUCCESS: codicon('pass'),
+    WARNING: codicon('warning'),
+    ERROR: codicon('error')
 };
 
 export interface AlertMessageProps {
diff --git a/packages/core/src/browser/widgets/widget.ts b/packages/core/src/browser/widgets/widget.ts
index c95e48647aaad..60ecbbd20e6cc 100644
--- a/packages/core/src/browser/widgets/widget.ts
+++ b/packages/core/src/browser/widgets/widget.ts
@@ -30,11 +30,26 @@ decorate(unmanaged(), Widget, 0);
 export * from '@phosphor/widgets';
 export * from '@phosphor/messaging';
 
+export const ACTION_ITEM = 'action-item';
+
+export function codiconArray(name: string, actionItem = false): string[] {
+    const array = ['codicon', `codicon-${name}`];
+    if (actionItem) {
+        array.push(ACTION_ITEM);
+    }
+    return array;
+}
+
+export function codicon(name: string, actionItem = false): string {
+    return `codicon codicon-${name}${actionItem ? ` ${ACTION_ITEM}` : ''}`;
+}
+
 export const DISABLED_CLASS = 'theia-mod-disabled';
 export const EXPANSION_TOGGLE_CLASS = 'theia-ExpansionToggle';
-export const CODICON_TREE_ITEM_CLASSES = ['codicon', 'codicon-chevron-down'];
+export const CODICON_TREE_ITEM_CLASSES = codiconArray('chevron-down');
 export const COLLAPSED_CLASS = 'theia-mod-collapsed';
 export const BUSY_CLASS = 'theia-mod-busy';
+export const CODICON_LOADING_CLASSES = codiconArray('loading');
 export const SELECTED_CLASS = 'theia-mod-selected';
 export const FOCUS_CLASS = 'theia-mod-focus';
 export const DEFAULT_SCROLL_OPTIONS: PerfectScrollbar.Options = {
diff --git a/packages/debug/src/browser/console/debug-console-contribution.tsx b/packages/debug/src/browser/console/debug-console-contribution.tsx
index cb23de330c0a5..94cd66815a993 100644
--- a/packages/debug/src/browser/console/debug-console-contribution.tsx
+++ b/packages/debug/src/browser/console/debug-console-contribution.tsx
@@ -16,7 +16,7 @@
 
 import { ConsoleSessionManager } from '@theia/console/lib/browser/console-session-manager';
 import { ConsoleOptions, ConsoleWidget } from '@theia/console/lib/browser/console-widget';
-import { AbstractViewContribution, bindViewContribution, Widget, WidgetFactory } from '@theia/core/lib/browser';
+import { AbstractViewContribution, bindViewContribution, codicon, Widget, WidgetFactory } from '@theia/core/lib/browser';
 import { ContextKey, ContextKeyService } from '@theia/core/lib/browser/context-key-service';
 import { TabBarToolbarContribution, TabBarToolbarRegistry } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
 import { Command, CommandRegistry } from '@theia/core/lib/common/command';
@@ -37,7 +37,7 @@ export namespace DebugConsoleCommands {
         id: 'debug.console.clear',
         category: DEBUG_CONSOLE_CATEGORY,
         label: 'Clear Console',
-        iconClass: 'clear-all'
+        iconClass: codicon('clear-all')
     };
 }
 
@@ -133,7 +133,7 @@ export class DebugConsoleContribution extends AbstractViewContribution<ConsoleWi
         id: 'debug-console',
         title: {
             label: 'Debug Console',
-            iconClass: 'theia-debug-console-icon'
+            iconClass: codicon('debug-console')
         },
         input: {
             uri: DebugConsoleSession.uri,
diff --git a/packages/debug/src/browser/debug-frontend-application-contribution.ts b/packages/debug/src/browser/debug-frontend-application-contribution.ts
index aca638cf0cd6a..071d258f4978b 100644
--- a/packages/debug/src/browser/debug-frontend-application-contribution.ts
+++ b/packages/debug/src/browser/debug-frontend-application-contribution.ts
@@ -14,7 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { AbstractViewContribution, ApplicationShell, KeybindingRegistry, Widget, CompositeTreeNode, LabelProvider } from '@theia/core/lib/browser';
+import { AbstractViewContribution, ApplicationShell, KeybindingRegistry, Widget, CompositeTreeNode, LabelProvider, codicon } from '@theia/core/lib/browser';
 import { injectable, inject } from '@theia/core/shared/inversify';
 import { ThemeService } from '@theia/core/lib/browser/theming';
 import { MenuModelRegistry, CommandRegistry, MAIN_MENU_BAR, Command, Emitter, Mutable } from '@theia/core/lib/common';
@@ -71,7 +71,7 @@ export namespace DebugCommands {
         id: 'workbench.action.debug.start',
         category: DEBUG_CATEGORY,
         label: 'Start Debugging',
-        iconClass: 'fa fa-play'
+        iconClass: codicon('debug-alt')
     };
     export const START_NO_DEBUG: Command = {
         id: 'workbench.action.debug.run',
@@ -81,7 +81,7 @@ export namespace DebugCommands {
         id: 'workbench.action.debug.stop',
         category: DEBUG_CATEGORY,
         label: 'Stop Debugging',
-        iconClass: 'fa fa-stop'
+        iconClass: codicon('debug-stop')
     };
     export const RESTART: Command = {
         id: 'workbench.action.debug.restart',
@@ -102,43 +102,43 @@ export namespace DebugCommands {
         id: 'workbench.action.debug.stepOver',
         category: DEBUG_CATEGORY,
         label: 'Step Over',
-        iconClass: 'fa fa-arrow-right'
+        iconClass: codicon('debug-step-over')
     };
     export const STEP_INTO: Command = {
         id: 'workbench.action.debug.stepInto',
         category: DEBUG_CATEGORY,
         label: 'Step Into',
-        iconClass: 'fa fa-arrow-down'
+        iconClass: codicon('debug-step-into')
     };
     export const STEP_OUT: Command = {
         id: 'workbench.action.debug.stepOut',
         category: DEBUG_CATEGORY,
         label: 'Step Out',
-        iconClass: 'fa fa-arrow-up'
+        iconClass: codicon('debug-step-out')
     };
     export const CONTINUE: Command = {
         id: 'workbench.action.debug.continue',
         category: DEBUG_CATEGORY,
         label: 'Continue',
-        iconClass: 'fa fa-play-circle'
+        iconClass: codicon('debug-continue')
     };
     export const PAUSE: Command = {
         id: 'workbench.action.debug.pause',
         category: DEBUG_CATEGORY,
         label: 'Pause',
-        iconClass: 'fa fa-pause'
+        iconClass: codicon('debug-pause')
     };
     export const CONTINUE_ALL: Command = {
         id: 'debug.thread.continue.all',
         category: DEBUG_CATEGORY,
         label: 'Continue All',
-        iconClass: 'fa fa-play-circle'
+        iconClass: codicon('debug-continue')
     };
     export const PAUSE_ALL: Command = {
         id: 'debug.thread.pause.all',
         category: DEBUG_CATEGORY,
         label: 'Pause All',
-        iconClass: 'fa fa-pause'
+        iconClass: codicon('debug-pause')
     };
 
     export const TOGGLE_BREAKPOINT: Command = {
@@ -1069,7 +1069,7 @@ export class DebugFrontendApplicationContribution extends AbstractViewContributi
         const toggleBreakpointsEnabled: Mutable<TabBarToolbarItem> = {
             id: DebugCommands.TOGGLE_BREAKPOINTS_ENABLED.id,
             command: DebugCommands.TOGGLE_BREAKPOINTS_ENABLED.id,
-            icon: 'fa breakpoints-activate',
+            icon: codicon('activate-breakpoints'),
             onDidChange: onDidChangeToggleBreakpointsEnabled.event,
             priority: 1
         };
@@ -1083,7 +1083,7 @@ export class DebugFrontendApplicationContribution extends AbstractViewContributi
         toolbar.registerItem({
             id: DebugCommands.ADD_FUNCTION_BREAKPOINT.id,
             command: DebugCommands.ADD_FUNCTION_BREAKPOINT.id,
-            icon: 'theia-add-icon',
+            icon: codicon('add'),
             tooltip: 'Add Function Breakpoint'
         });
         updateToggleBreakpointsEnabled();
@@ -1092,27 +1092,27 @@ export class DebugFrontendApplicationContribution extends AbstractViewContributi
         toolbar.registerItem({
             id: DebugCommands.REMOVE_ALL_BREAKPOINTS.id,
             command: DebugCommands.REMOVE_ALL_BREAKPOINTS.id,
-            icon: 'theia-remove-all-icon',
+            icon: codicon('close-all'),
             priority: 2
         });
 
         toolbar.registerItem({
             id: DebugCommands.ADD_WATCH_EXPRESSION.id,
             command: DebugCommands.ADD_WATCH_EXPRESSION.id,
-            icon: 'theia-add-icon',
+            icon: codicon('add'),
             tooltip: 'Add Expression'
         });
         toolbar.registerItem({
             id: DebugCommands.COLLAPSE_ALL_WATCH_EXPRESSIONS.id,
             command: DebugCommands.COLLAPSE_ALL_WATCH_EXPRESSIONS.id,
-            icon: 'theia-collapse-all-icon',
+            icon: codicon('collapse-all'),
             tooltip: 'Collapse All',
             priority: 1
         });
         toolbar.registerItem({
             id: DebugCommands.REMOVE_ALL_WATCH_EXPRESSIONS.id,
             command: DebugCommands.REMOVE_ALL_WATCH_EXPRESSIONS.id,
-            icon: 'theia-remove-all-icon',
+            icon: codicon('close-all'),
             tooltip: 'Remove All Expressions',
             priority: 2
         });
@@ -1274,6 +1274,55 @@ export class DebugFrontendApplicationContribution extends AbstractViewContributi
                     hc: '#89D185'
                 }, description: 'Debug toolbar icon for start debugging.'
             },
+            {
+                id: 'debugIcon.pauseForeground', defaults: {
+                    dark: '#75BEFF',
+                    light: '#007ACC',
+                    hc: '#75BEFF'
+                }, description: 'Debug toolbar icon for pause.'
+            },
+            {
+                id: 'debugIcon.stopForeground', defaults: {
+                    dark: '#F48771',
+                    light: '#A1260D',
+                    hc: '#F48771'
+                }, description: 'Debug toolbar icon for stop.'
+            },
+            {
+                id: 'debugIcon.restartForeground', defaults: {
+                    dark: '#89D185',
+                    light: '#388A34',
+                    hc: '#89D185'
+                }, description: 'Debug toolbar icon for restart.'
+            },
+            {
+                id: 'debugIcon.stepOverForeground', defaults: {
+                    dark: '#75BEFF',
+                    light: '#007ACC',
+                    hc: '#75BEFF'
+                }, description: 'Debug toolbar icon for step over.'
+            },
+            {
+                id: 'debugIcon.stepIntoForeground', defaults: {
+                    dark: '#75BEFF',
+                    light: '#007ACC',
+                    hc: '#75BEFF'
+                }, description: 'Debug toolbar icon for step into.'
+            },
+            {
+                id: 'debugIcon.stepOutForeground', defaults: {
+                    dark: '#75BEFF',
+                    light: '#007ACC',
+                    hc: '#75BEFF'
+                }, description: 'Debug toolbar icon for step out.'
+            },
+            {
+                id: 'debugIcon.continueForeground', defaults: {
+                    dark: '#75BEFF',
+                    light: '#007ACC',
+                    hc: '#75BEFF'
+                }, description: 'Debug toolbar icon for continue.'
+            },
             // Status bar colors should be aligned with debugging colors from https://code.visualstudio.com/api/references/theme-color#status-bar-colors
             {
                 id: 'statusBar.debuggingBackground', defaults: {
diff --git a/packages/debug/src/browser/debug-prefix-configuration.ts b/packages/debug/src/browser/debug-prefix-configuration.ts
index 45b05299c4e2a..3d2a21dd336b1 100644
--- a/packages/debug/src/browser/debug-prefix-configuration.ts
+++ b/packages/debug/src/browser/debug-prefix-configuration.ts
@@ -152,7 +152,7 @@ export class DebugPrefixConfiguration implements CommandContribution, CommandHan
         const text: string = this.debugConfigurationManager.current
             ? this.debugConfigurationManager.current.configuration.name
             : '';
-        const icon = '$(play)';
+        const icon = '$(codicon-debug-alt-small)';
         this.statusBar.setElement(this.statusBarId, {
             alignment: StatusBarAlignment.LEFT,
             text: text.length ? `${icon} ${text}` : icon,
diff --git a/packages/debug/src/browser/style/index.css b/packages/debug/src/browser/style/index.css
index cebc320ae1a60..7aa237b512654 100644
--- a/packages/debug/src/browser/style/index.css
+++ b/packages/debug/src/browser/style/index.css
@@ -159,14 +159,36 @@
     opacity: 1;
 }
 
-.debug-tab-icon {
-    -webkit-mask: url('debug-dark.svg');
-    mask: url('debug-dark.svg');
+.debug-toolbar .debug-action.codicon.codicon-debug-start {
+    color: var(--theia-debugIcon-startForeground);
 }
 
-.theia-debug-console-icon {
-    -webkit-mask: url('repl.svg');
-    mask: url('repl.svg');
+.debug-toolbar .debug-action.codicon.codicon-debug-pause {
+    color: var(--theia-debugIcon-pauseForeground);
+}
+
+.debug-toolbar .debug-action.codicon.codicon-debug-stop {
+    color: var(--theia-debugIcon-stopForeground);
+}
+
+.debug-toolbar .debug-action.codicon.codicon-debug-restart {
+    color: var(--theia-debugIcon-restartForeground);
+}
+
+.debug-toolbar .debug-action.codicon.codicon-debug-step-over {
+    color: var(--theia-debugIcon-stepOverForeground);
+}
+
+.debug-toolbar .debug-action.codicon.codicon-debug-step-into {
+    color: var(--theia-debugIcon-stepIntoForeground);
+}
+
+.debug-toolbar .debug-action.codicon.codicon-debug-step-out {
+    color: var(--theia-debugIcon-stepOutForeground);
+}
+
+.debug-toolbar .debug-action.codicon.codicon-debug-continue {
+    color: var(--theia-debugIcon-continueForeground);
 }
 
 /** Console */
diff --git a/packages/debug/src/browser/view/debug-action.tsx b/packages/debug/src/browser/view/debug-action.tsx
index 17dc3da26f525..151cea2a67030 100644
--- a/packages/debug/src/browser/view/debug-action.tsx
+++ b/packages/debug/src/browser/view/debug-action.tsx
@@ -15,13 +15,13 @@
  ********************************************************************************/
 
 import * as React from '@theia/core/shared/react';
-import { DISABLED_CLASS } from '@theia/core/lib/browser';
+import { codiconArray, DISABLED_CLASS } from '@theia/core/lib/browser';
 
 export class DebugAction extends React.Component<DebugAction.Props> {
 
     render(): React.ReactNode {
         const { enabled, label, iconClass } = this.props;
-        const classNames = ['debug-action', 'theia-debug-' + iconClass];
+        const classNames = ['debug-action', ...codiconArray(iconClass, true)];
         if (enabled === false) {
             classNames.push(DISABLED_CLASS);
         }
diff --git a/packages/debug/src/browser/view/debug-configuration-widget.tsx b/packages/debug/src/browser/view/debug-configuration-widget.tsx
index 159e94d5145fc..5bf3cd7312b44 100644
--- a/packages/debug/src/browser/view/debug-configuration-widget.tsx
+++ b/packages/debug/src/browser/view/debug-configuration-widget.tsx
@@ -79,14 +79,14 @@ export class DebugConfigurationWidget extends ReactWidget {
     render(): React.ReactNode {
         const { options } = this;
         return <React.Fragment>
-            <DebugAction run={this.start} label='Start Debugging' iconClass='start' ref={this.setStepRef} />
+            <DebugAction run={this.start} label='Start Debugging' iconClass='debug-start' ref={this.setStepRef} />
             <select className='theia-select debug-configuration' value={this.currentValue} onChange={this.setCurrentConfiguration}>
                 {options.length ? options : <option value='__NO_CONF__'>No Configurations</option>}
                 <option disabled>{'Add Configuration...'.replace(/./g, '-')}</option>
                 <option value='__ADD_CONF__'>Add Configuration...</option>
             </select>
-            <DebugAction run={this.openConfiguration} label='Open launch.json' iconClass='configure' />
-            <DebugAction run={this.openConsole} label='Debug Console' iconClass='repl' />
+            <DebugAction run={this.openConfiguration} label='Open launch.json' iconClass='settings-gear' />
+            <DebugAction run={this.openConsole} label='Debug Console' iconClass='terminal' />
         </React.Fragment>;
     }
     protected get currentValue(): string {
diff --git a/packages/debug/src/browser/view/debug-session-widget.ts b/packages/debug/src/browser/view/debug-session-widget.ts
index d2ebd97af2edd..46fe25a9fe2c7 100644
--- a/packages/debug/src/browser/view/debug-session-widget.ts
+++ b/packages/debug/src/browser/view/debug-session-widget.ts
@@ -16,7 +16,7 @@
 
 import { inject, injectable, postConstruct, interfaces, Container } from '@theia/core/shared/inversify';
 import {
-    Message, ApplicationShell, Widget, BaseWidget, PanelLayout, StatefulWidget, ViewContainer
+    Message, ApplicationShell, Widget, BaseWidget, PanelLayout, StatefulWidget, ViewContainer, codicon
 } from '@theia/core/lib/browser';
 import { DebugThreadsWidget } from './debug-threads-widget';
 import { DebugStackFramesWidget } from './debug-stack-frames-widget';
@@ -82,7 +82,7 @@ export class DebugSessionWidget extends BaseWidget implements StatefulWidget, Ap
         this.title.label = this.model.label;
         this.title.caption = this.model.label;
         this.title.closable = true;
-        this.title.iconClass = 'debug-tab-icon';
+        this.title.iconClass = codicon('debug-alt');
         this.addClass('theia-session-container');
 
         this.viewContainer = this.viewContainerFactory({
diff --git a/packages/debug/src/browser/view/debug-toolbar-widget.tsx b/packages/debug/src/browser/view/debug-toolbar-widget.tsx
index c8e66d4bb5442..7f3f00adf4ad3 100644
--- a/packages/debug/src/browser/view/debug-toolbar-widget.tsx
+++ b/packages/debug/src/browser/view/debug-toolbar-widget.tsx
@@ -58,26 +58,26 @@ export class DebugToolBar extends ReactWidget {
         const { state } = this.model;
         return <React.Fragment>
             {this.renderContinue()}
-            <DebugAction enabled={state === DebugState.Stopped} run={this.stepOver} label='Step Over' iconClass='step-over' ref={this.setStepRef} />
-            <DebugAction enabled={state === DebugState.Stopped} run={this.stepIn} label='Step Into' iconClass='step-into' />
-            <DebugAction enabled={state === DebugState.Stopped} run={this.stepOut} label='Step Out' iconClass='step-out' />
-            <DebugAction enabled={state !== DebugState.Inactive} run={this.restart} label='Restart' iconClass='restart' />
+            <DebugAction enabled={state === DebugState.Stopped} run={this.stepOver} label='Step Over' iconClass='debug-step-over' ref={this.setStepRef} />
+            <DebugAction enabled={state === DebugState.Stopped} run={this.stepIn} label='Step Into' iconClass='debug-step-into' />
+            <DebugAction enabled={state === DebugState.Stopped} run={this.stepOut} label='Step Out' iconClass='debug-step-out' />
+            <DebugAction enabled={state !== DebugState.Inactive} run={this.restart} label='Restart' iconClass='debug-restart' />
             {this.renderStart()}
         </React.Fragment>;
     }
     protected renderStart(): React.ReactNode {
         const { state } = this.model;
         if (state === DebugState.Inactive && this.model.sessionCount === 1) {
-            return <DebugAction run={this.start} label='Start' iconClass='start' />;
+            return <DebugAction run={this.start} label='Start' iconClass='debug-start' />;
         }
-        return <DebugAction enabled={state !== DebugState.Inactive} run={this.stop} label='Stop' iconClass='stop' />;
+        return <DebugAction enabled={state !== DebugState.Inactive} run={this.stop} label='Stop' iconClass='debug-stop' />;
     }
     protected renderContinue(): React.ReactNode {
         const { state } = this.model;
         if (state === DebugState.Stopped) {
-            return <DebugAction run={this.continue} label='Continue' iconClass='continue' />;
+            return <DebugAction run={this.continue} label='Continue' iconClass='debug-continue' />;
         }
-        return <DebugAction enabled={state === DebugState.Running} run={this.pause} label='Pause' iconClass='pause' />;
+        return <DebugAction enabled={state === DebugState.Running} run={this.pause} label='Pause' iconClass='debug-pause' />;
     }
 
     protected start = () => this.model.start();
diff --git a/packages/debug/src/browser/view/debug-widget.ts b/packages/debug/src/browser/view/debug-widget.ts
index 78f6efb82a56e..14df83c2d30ea 100644
--- a/packages/debug/src/browser/view/debug-widget.ts
+++ b/packages/debug/src/browser/view/debug-widget.ts
@@ -16,7 +16,7 @@
 
 import { injectable, postConstruct, inject, interfaces, Container } from '@theia/core/shared/inversify';
 import {
-    BaseWidget, PanelLayout, Message, ApplicationShell, Widget, StatefulWidget, ViewContainer
+    BaseWidget, PanelLayout, Message, ApplicationShell, Widget, StatefulWidget, ViewContainer, codicon
 } from '@theia/core/lib/browser';
 import { DebugSessionWidget } from './debug-session-widget';
 import { DebugConfigurationWidget } from './debug-configuration-widget';
@@ -61,7 +61,7 @@ export class DebugWidget extends BaseWidget implements StatefulWidget, Applicati
         this.title.label = DebugWidget.LABEL;
         this.title.caption = DebugWidget.LABEL;
         this.title.closable = true;
-        this.title.iconClass = 'debug-tab-icon';
+        this.title.iconClass = codicon('debug-alt');
         this.addClass('theia-debug-container');
         this.toDispose.pushAll([
             this.toolbar,
diff --git a/packages/filesystem/src/browser/file-dialog/file-dialog.ts b/packages/filesystem/src/browser/file-dialog/file-dialog.ts
index 8c485be510baa..e6e4f7e80057f 100644
--- a/packages/filesystem/src/browser/file-dialog/file-dialog.ts
+++ b/packages/filesystem/src/browser/file-dialog/file-dialog.ts
@@ -17,7 +17,7 @@
 import { injectable, inject, postConstruct } from '@theia/core/shared/inversify';
 import { Message } from '@theia/core/shared/@phosphor/messaging';
 import { Disposable, MaybeArray } from '@theia/core/lib/common';
-import { Key, LabelProvider } from '@theia/core/lib/browser';
+import { codiconArray, Key, LabelProvider } from '@theia/core/lib/browser';
 import { AbstractDialog, DialogProps, setEnabled, createIconButton, Widget } from '@theia/core/lib/browser';
 import { FileStatNode } from '../file-tree';
 import { LocationListRenderer, LocationListRendererFactory } from '../location';
@@ -146,16 +146,16 @@ export abstract class FileDialog<T> extends AbstractDialog<T> {
         navigationPanel.classList.add(NAVIGATION_PANEL_CLASS);
         this.contentNode.appendChild(navigationPanel);
 
-        navigationPanel.appendChild(this.back = createIconButton('fa', 'fa-chevron-left'));
+        navigationPanel.appendChild(this.back = createIconButton(...codiconArray('chevron-left')));
         this.back.classList.add(NAVIGATION_BACK_CLASS);
         this.back.title = 'Navigate Back';
-        navigationPanel.appendChild(this.forward = createIconButton('fa', 'fa-chevron-right'));
+        navigationPanel.appendChild(this.forward = createIconButton(...codiconArray('chevron-right')));
         this.forward.classList.add(NAVIGATION_FORWARD_CLASS);
         this.forward.title = 'Navigate Forward';
-        navigationPanel.appendChild(this.home = createIconButton('fa', 'fa-home'));
+        navigationPanel.appendChild(this.home = createIconButton(...codiconArray('home')));
         this.home.classList.add(NAVIGATION_HOME_CLASS);
         this.home.title = 'Go To Initial Location';
-        navigationPanel.appendChild(this.up = createIconButton('fa', 'fa-level-up'));
+        navigationPanel.appendChild(this.up = createIconButton(...codiconArray('arrow-up')));
         this.up.classList.add(NAVIGATION_UP_CLASS);
         this.up.title = 'Navigate Up One Directory';
 
diff --git a/packages/filesystem/src/browser/location/location-renderer.tsx b/packages/filesystem/src/browser/location/location-renderer.tsx
index e96994feca37d..e15f08ca88c52 100644
--- a/packages/filesystem/src/browser/location/location-renderer.tsx
+++ b/packages/filesystem/src/browser/location/location-renderer.tsx
@@ -25,6 +25,7 @@ import { FileDialogModel } from '../file-dialog/file-dialog-model';
 import { EnvVariablesServer } from '@theia/core/lib/common/env-variables';
 import { ReactRenderer } from '@theia/core/lib/browser/widgets/react-renderer';
 import { Path } from '@theia/core/lib/common';
+import { codicon } from '@theia/core/lib/browser';
 
 interface AutoSuggestDataEvent {
     parent: string;
@@ -179,7 +180,7 @@ export class LocationListRenderer extends ReactRenderer {
                     ? LocationListRenderer.Tooltips.TOGGLE_SELECT_INPUT
                     : LocationListRenderer.Tooltips.TOGGLE_TEXT_INPUT}
             >
-                <i className={this.doShowTextInput ? 'fa fa-folder-open' : 'fa fa-edit'} />
+                <i className={codicon(this.doShowTextInput ? 'folder-opened' : 'edit')} />
             </span>
         );
     }
diff --git a/packages/filesystem/src/browser/style/file-dialog.css b/packages/filesystem/src/browser/style/file-dialog.css
index d63a0d3fe5832..7f8685726cae7 100644
--- a/packages/filesystem/src/browser/style/file-dialog.css
+++ b/packages/filesystem/src/browser/style/file-dialog.css
@@ -64,11 +64,10 @@
 /*
  * Navigation panel items
  */
- 
-.dialogContent .theia-NavigationPanel span
- {
+
+.dialogContent .theia-NavigationPanel span {
     position: absolute;
-    top: 0px;
+    top: 2px;
     line-height: var(--theia-private-navigation-panel-line-height);
     cursor: pointer;
     width: var(--theia-private-navigation-panel-icon-size);
diff --git a/packages/filesystem/src/browser/style/file-icons.css b/packages/filesystem/src/browser/style/file-icons.css
index 496900be36afb..c6196096d0c47 100644
--- a/packages/filesystem/src/browser/style/file-icons.css
+++ b/packages/filesystem/src/browser/style/file-icons.css
@@ -27,14 +27,23 @@
     font-size: calc(var(--theia-content-font-size) * 0.8);
 }
 
+.p-TabBar-tabIcon.theia-file-icons-js.file-icon {
+    padding-left: 1px !important;
+    padding-right: 3px !important;
+}
+
 .theia-file-icons-js.file-icon {
     min-width: var(--theia-icon-size);
-    height: var(--theia-icon-size);
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
+:not(.p-TabBar-tabIcon).default-folder-icon,
+:not(.p-TabBar-tabIcon).default-file-icon {
+    transform: translateX(-2px);
+}
+
 .fa-file:before,
 .fa-folder:before,
 .theia-file-icons-js:before {
diff --git a/packages/getting-started/src/browser/getting-started-widget.tsx b/packages/getting-started/src/browser/getting-started-widget.tsx
index 1e6f20e4cc113..57c85ba111d99 100644
--- a/packages/getting-started/src/browser/getting-started-widget.tsx
+++ b/packages/getting-started/src/browser/getting-started-widget.tsx
@@ -21,7 +21,7 @@ import { ReactWidget } from '@theia/core/lib/browser/widgets/react-widget';
 import { CommandRegistry, isOSX, environment, Path } from '@theia/core/lib/common';
 import { WorkspaceCommands, WorkspaceService } from '@theia/workspace/lib/browser';
 import { KeymapsCommands } from '@theia/keymaps/lib/browser';
-import { CommonCommands, LabelProvider, Key, KeyCode } from '@theia/core/lib/browser';
+import { CommonCommands, LabelProvider, Key, KeyCode, codicon } from '@theia/core/lib/browser';
 import { ApplicationInfo, ApplicationServer } from '@theia/core/lib/common/application-protocol';
 import { FrontendApplicationConfigProvider } from '@theia/core/lib/browser/frontend-application-config-provider';
 import { EnvVariablesServer } from '@theia/core/lib/common/env-variables';
@@ -202,7 +202,7 @@ export class GettingStartedWidget extends ReactWidget {
         );
 
         return <div className='gs-section'>
-            <h3 className='gs-section-header'><i className='fa fa-folder-open'></i>Open</h3>
+            <h3 className='gs-section-header'><i className={codicon('folder-opened')}></i>Open</h3>
             {open}
             {openFile}
             {openFolder}
@@ -242,7 +242,7 @@ export class GettingStartedWidget extends ReactWidget {
         </div>;
         return <div className='gs-section'>
             <h3 className='gs-section-header'>
-                <i className='fa fa-clock-o'></i>Recent Workspaces
+                <i className={codicon('history')}></i>Recent Workspaces
             </h3>
             {items.length > 0 ? content : <p className='gs-no-recent'>No Recent Workspaces</p>}
             {more}
@@ -256,7 +256,7 @@ export class GettingStartedWidget extends ReactWidget {
     protected renderSettings(): React.ReactNode {
         return <div className='gs-section'>
             <h3 className='gs-section-header'>
-                <i className='fa fa-cog'></i>
+                <i className={codicon('settings-gear')}></i>
                 Settings
             </h3>
             <div className='gs-action-container'>
@@ -286,7 +286,7 @@ export class GettingStartedWidget extends ReactWidget {
     protected renderHelp(): React.ReactNode {
         return <div className='gs-section'>
             <h3 className='gs-section-header'>
-                <i className='fa fa-question-circle'></i>
+                <i className={codicon('question')}></i>
                 Help
             </h3>
             <div className='gs-action-container'>
diff --git a/packages/git/src/browser/diff/git-diff-contribution.ts b/packages/git/src/browser/diff/git-diff-contribution.ts
index 6a066be805be6..8e56ba7fbb385 100644
--- a/packages/git/src/browser/diff/git-diff-contribution.ts
+++ b/packages/git/src/browser/diff/git-diff-contribution.ts
@@ -15,7 +15,7 @@
  ********************************************************************************/
 
 import { CommandRegistry, Command, MenuModelRegistry, SelectionService, MessageService } from '@theia/core/lib/common';
-import { FrontendApplication, AbstractViewContribution } from '@theia/core/lib/browser';
+import { FrontendApplication, AbstractViewContribution, codicon } from '@theia/core/lib/browser';
 import { WidgetManager } from '@theia/core/lib/browser/widget-manager';
 import { EditorManager } from '@theia/editor/lib/browser';
 import { injectable, inject } from '@theia/core/shared/inversify';
@@ -46,25 +46,25 @@ export namespace GitDiffCommands {
     export const TREE_VIEW_MODE = {
         id: 'git.viewmode.tree',
         tooltip: 'Toggle to Tree View',
-        iconClass: 'codicon codicon-list-tree',
+        iconClass: codicon('list-tree'),
         label: 'Toggle to Tree View',
     };
     export const LIST_VIEW_MODE = {
         id: 'git.viewmode.list',
         tooltip: 'Toggle to List View',
-        iconClass: 'codicon codicon-list-flat',
+        iconClass: codicon('list-flat'),
         label: 'Toggle to List View',
     };
     export const PREVIOUS_CHANGE = {
         id: 'git.navigate-changes.previous',
         tooltip: 'Toggle to List View',
-        iconClass: 'fa fa-arrow-left',
+        iconClass: codicon('arrow-left'),
         label: 'Previous Change',
     };
     export const NEXT_CHANGE = {
         id: 'git.navigate-changes.next',
         tooltip: 'Toggle to List View',
-        iconClass: 'fa fa-arrow-right',
+        iconClass: codicon('arrow-right'),
         label: 'Next Change',
     };
 }
@@ -196,6 +196,7 @@ export class GitDiffContribution extends AbstractViewContribution<GitDiffWidget>
                 tooltip: command.label,
                 onDidChange: viewModeEmitter.event
             };
+
             this.commandRegistry.registerCommand({ id, iconClass: command && command.iconClass }, {
                 execute: widget => {
                     const widgetWithChanges = extractDiffWidget(widget) || extractCommitDetailWidget(widget);
diff --git a/packages/git/src/browser/diff/git-diff-header-widget.tsx b/packages/git/src/browser/diff/git-diff-header-widget.tsx
index 285f153cfc81f..67e5652841d28 100644
--- a/packages/git/src/browser/diff/git-diff-header-widget.tsx
+++ b/packages/git/src/browser/diff/git-diff-header-widget.tsx
@@ -19,7 +19,7 @@ import URI from '@theia/core/lib/common/uri';
 import { ScmService } from '@theia/scm/lib/browser/scm-service';
 import { LabelProvider } from '@theia/core/lib/browser/label-provider';
 import { ScmFileChangeLabelProvider } from '@theia/scm-extra/lib/browser/scm-file-change-label-provider';
-import { ReactWidget, StatefulWidget, KeybindingRegistry } from '@theia/core/lib/browser';
+import { ReactWidget, StatefulWidget, KeybindingRegistry, codicon } from '@theia/core/lib/browser';
 import { Git } from '../../common';
 import * as React from '@theia/core/shared/react';
 
@@ -42,7 +42,7 @@ export class GitDiffHeaderWidget extends ReactWidget implements StatefulWidget {
         super();
         this.id = 'git-diff-header';
         this.title.closable = true;
-        this.title.iconClass = 'icon-git-commit tab-git-icon';
+        this.title.iconClass = codicon('git-commit');
     }
 
     async setContent(options: Git.Options.Diff): Promise<void> {
diff --git a/packages/git/src/browser/diff/git-diff-widget.tsx b/packages/git/src/browser/diff/git-diff-widget.tsx
index 1a5a4f57ca0b5..f03a728c51bc7 100644
--- a/packages/git/src/browser/diff/git-diff-widget.tsx
+++ b/packages/git/src/browser/diff/git-diff-widget.tsx
@@ -16,7 +16,7 @@
 
 import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
 import {
-    BaseWidget, Widget, StatefulWidget, Panel, PanelLayout, Message, MessageLoop
+    BaseWidget, Widget, StatefulWidget, Panel, PanelLayout, Message, MessageLoop, codicon
 } from '@theia/core/lib/browser';
 import { EditorManager, DiffNavigatorProvider } from '@theia/editor/lib/browser';
 import { GitDiffTreeModel } from './git-diff-tree-model';
@@ -53,7 +53,7 @@ export class GitDiffWidget extends BaseWidget implements StatefulWidget {
         this.title.label = this.GIT_DIFF_TITLE;
         this.title.caption = this.GIT_DIFF_TITLE;
         this.title.closable = true;
-        this.title.iconClass = 'theia-git-diff-icon';
+        this.title.iconClass = codicon('git-compare');
 
         this.addClass('theia-scm');
         this.addClass('theia-git');
diff --git a/packages/git/src/browser/git-contribution.ts b/packages/git/src/browser/git-contribution.ts
index 8b97d0dcda6a1..0abcdab1c833c 100644
--- a/packages/git/src/browser/git-contribution.ts
+++ b/packages/git/src/browser/git-contribution.ts
@@ -25,7 +25,7 @@ import {
     MenuModelRegistry,
     Mutable
 } from '@theia/core';
-import { DiffUris, Widget } from '@theia/core/lib/browser';
+import { codicon, DiffUris, Widget } from '@theia/core/lib/browser';
 import {
     TabBarToolbarContribution,
     TabBarToolbarItem,
@@ -94,14 +94,14 @@ export namespace GIT_COMMANDS {
     export const COMMIT = {
         id: 'git.commit.all',
         tooltip: 'Commit all the staged changes',
-        iconClass: 'fa fa-check',
         label: 'Commit',
+        iconClass: codicon('check')
     };
     export const COMMIT_ADD_SIGN_OFF = {
         id: 'git-commit-add-sign-off',
         label: 'Add Signed-off-by',
-        iconClass: 'fa fa-pencil-square-o',
-        category: 'Git'
+        category: 'Git',
+        iconClass: codicon('edit')
     };
     export const COMMIT_AMEND = {
         id: 'git.commit.amend'
@@ -113,19 +113,19 @@ export namespace GIT_COMMANDS {
         id: 'git.open.file',
         category: 'Git',
         label: 'Open File',
-        iconClass: 'theia-open-file-icon'
+        iconClass: codicon('go-to-file')
     };
     export const OPEN_CHANGED_FILE: Command = {
         id: 'git.open.changed.file',
         category: 'Git',
         label: 'Open File',
-        iconClass: 'open-file'
+        iconClass: codicon('go-to-file')
     };
     export const OPEN_CHANGES: Command = {
         id: 'git.open.changes',
         category: 'Git',
         label: 'Open Changes',
-        iconClass: 'theia-open-change-icon'
+        iconClass: codicon('git-compare')
     };
     export const SYNC = {
         id: 'git.sync',
@@ -139,37 +139,37 @@ export namespace GIT_COMMANDS {
         id: 'git.stage',
         category: 'Git',
         label: 'Stage Changes',
-        iconClass: 'fa fa-plus'
+        iconClass: codicon('add')
     };
     export const STAGE_ALL = {
         id: 'git.stage.all',
         category: 'Git',
         label: 'Stage All Changes',
-        iconClass: 'fa fa-plus',
+        iconClass: codicon('add')
     };
     export const UNSTAGE = {
         id: 'git.unstage',
-        iconClass: 'fa fa-minus',
         category: 'Git',
-        label: 'Unstage Changes'
+        label: 'Unstage Changes',
+        iconClass: codicon('dash')
     };
     export const UNSTAGE_ALL = {
         id: 'git.unstage.all',
-        iconClass: 'fa fa-minus',
         category: 'Git',
         label: 'Unstage All',
+        iconClass: codicon('dash')
     };
     export const DISCARD = {
         id: 'git.discard',
-        iconClass: 'fa fa-undo',
+        iconClass: codicon('discard'),
         category: 'Git',
         label: 'Discard Changes'
     };
     export const DISCARD_ALL = {
         id: 'git.discard.all',
-        iconClass: 'fa fa-undo',
         category: 'Git',
         label: 'Discard All Changes',
+        iconClass: codicon('discard')
     };
     export const STASH = {
         id: 'git.stash',
@@ -204,14 +204,14 @@ export namespace GIT_COMMANDS {
     export const REFRESH = {
         id: 'git-refresh',
         label: 'Refresh',
-        iconClass: 'fa fa-refresh',
-        category: 'Git'
+        category: 'Git',
+        iconClass: codicon('refresh')
     };
     export const INIT_REPOSITORY = {
         id: 'git-init',
         label: 'Initialize Repository',
-        iconClass: 'fa fa-plus',
-        category: 'Git'
+        category: 'Git',
+        iconClass: codicon('add')
     };
 }
 export namespace GIT_MENUS {
@@ -790,7 +790,7 @@ export class GitContribution implements CommandContribution, MenuContribution, T
             + (scmProvider.mergeChanges.length > 0 ? '!' : '');
         return {
             command: GIT_COMMANDS.CHECKOUT.id,
-            title: `$(code-fork) ${branch}${changes}`,
+            title: `$(codicon-source-control) ${branch}${changes}`,
             tooltip: `${branch}${changes}`
         };
     }
@@ -801,20 +801,20 @@ export class GitContribution implements CommandContribution, MenuContribution, T
         }
         if (this.syncService.isSyncing()) {
             return {
-                title: '$(refresh~spin)',
+                title: '$(codicon-sync~spin)',
                 tooltip: 'Synchronizing Changes...'
             };
         }
         const { upstreamBranch, aheadBehind } = status;
         if (upstreamBranch) {
             return {
-                title: '$(refresh)' + (aheadBehind && (aheadBehind.ahead + aheadBehind.behind) > 0 ? ` ${aheadBehind.behind}↓ ${aheadBehind.ahead}↑` : ''),
+                title: '$(codicon-sync)' + (aheadBehind && (aheadBehind.ahead + aheadBehind.behind) > 0 ? ` ${aheadBehind.behind}↓ ${aheadBehind.ahead}↑` : ''),
                 command: GIT_COMMANDS.SYNC.id,
                 tooltip: 'Synchronize Changes'
             };
         }
         return {
-            title: '$(cloud-upload)',
+            title: '$(codicon-cloud-upload)',
             command: GIT_COMMANDS.PUBLISH.id,
             tooltip: 'Publish Changes'
         };
diff --git a/packages/git/src/browser/history/git-commit-detail-header-widget.tsx b/packages/git/src/browser/history/git-commit-detail-header-widget.tsx
index 963a2840257d6..20cb5b8bf8e6e 100644
--- a/packages/git/src/browser/history/git-commit-detail-header-widget.tsx
+++ b/packages/git/src/browser/history/git-commit-detail-header-widget.tsx
@@ -17,7 +17,7 @@
 import { injectable, inject, postConstruct } from '@theia/core/shared/inversify';
 import { ScmAvatarService } from '@theia/scm/lib/browser/scm-avatar-service';
 import { GitCommitDetailWidgetOptions } from './git-commit-detail-widget-options';
-import { ReactWidget, KeybindingRegistry } from '@theia/core/lib/browser';
+import { ReactWidget, KeybindingRegistry, codicon } from '@theia/core/lib/browser';
 import { Git } from '../../common';
 import * as React from '@theia/core/shared/react';
 
@@ -44,7 +44,7 @@ export class GitCommitDetailHeaderWidget extends ReactWidget {
             }
         };
         this.title.closable = true;
-        this.title.iconClass = 'icon-git-commit tab-git-icon';
+        this.title.iconClass = codicon('git-commit');
     }
 
     @postConstruct()
diff --git a/packages/git/src/browser/history/git-commit-detail-widget.tsx b/packages/git/src/browser/history/git-commit-detail-widget.tsx
index a624ca79ba796..b3edfa2e92e68 100644
--- a/packages/git/src/browser/history/git-commit-detail-widget.tsx
+++ b/packages/git/src/browser/history/git-commit-detail-widget.tsx
@@ -19,7 +19,7 @@
 import { Message } from '@theia/core/shared/@phosphor/messaging';
 import { injectable, inject, postConstruct } from '@theia/core/shared/inversify';
 import {
-    BaseWidget, Widget, StatefulWidget, Panel, PanelLayout, MessageLoop
+    BaseWidget, Widget, StatefulWidget, Panel, PanelLayout, MessageLoop, codicon
 } from '@theia/core/lib/browser';
 import { GitCommitDetailWidgetOptions } from './git-commit-detail-widget-options';
 import { GitCommitDetailHeaderWidget } from './git-commit-detail-header-widget';
@@ -53,7 +53,7 @@ export class GitCommitDetailWidget extends BaseWidget implements StatefulWidget
         this.id = 'commit' + options.commitSha;
         this.title.label = options.commitSha.substr(0, 8);
         this.title.closable = true;
-        this.title.iconClass = 'icon-git-commit tab-git-icon';
+        this.title.iconClass = codicon('git-commit');
 
         this.addClass('theia-scm');
         this.addClass('theia-git');
diff --git a/packages/git/src/browser/style/diff.css b/packages/git/src/browser/style/diff.css
index ec87f96ac9c1a..62a6061a31a7c 100644
--- a/packages/git/src/browser/style/diff.css
+++ b/packages/git/src/browser/style/diff.css
@@ -14,11 +14,6 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-.theia-git-diff-icon {
-    -webkit-mask: url('git-diff.svg');
-    mask: url('git-diff.svg');
-}
-
 .theia-git.git-diff-container {
     display: flex;
     flex-direction: column;
diff --git a/packages/git/src/browser/style/index.css b/packages/git/src/browser/style/index.css
index 4a334410c487a..66ee7c2e0a493 100644
--- a/packages/git/src/browser/style/index.css
+++ b/packages/git/src/browser/style/index.css
@@ -54,8 +54,3 @@
 .theia-scm .scmItem .git-status.copied {
     color: var(--theia-gitDecoration-modifiedResourceForeground);
 }
-
-.tab-git-icon {
-    width: 20px!important;
-    height: 20px;
-}
diff --git a/packages/keymaps/src/browser/keybindings-widget.tsx b/packages/keymaps/src/browser/keybindings-widget.tsx
index 39dad2b343b1c..30b9b2d8ceab8 100644
--- a/packages/keymaps/src/browser/keybindings-widget.tsx
+++ b/packages/keymaps/src/browser/keybindings-widget.tsx
@@ -22,7 +22,7 @@ import { Emitter, Event } from '@theia/core/lib/common/event';
 import { CommandRegistry, Command } from '@theia/core/lib/common/command';
 import { ReactWidget } from '@theia/core/lib/browser/widgets/react-widget';
 import {
-    KeybindingRegistry, SingleTextInputDialog, KeySequence, ConfirmDialog, Message, KeybindingScope, SingleTextInputDialogProps, Key, ScopedKeybinding
+    KeybindingRegistry, SingleTextInputDialog, KeySequence, ConfirmDialog, Message, KeybindingScope, SingleTextInputDialogProps, Key, ScopedKeybinding, codicon
 } from '@theia/core/lib/browser';
 import { KeymapsService } from './keymaps-service';
 import { AlertMessage } from '@theia/core/lib/browser/widgets/alert-message';
@@ -116,7 +116,7 @@ export class KeybindingWidget extends ReactWidget {
         this.id = KeybindingWidget.ID;
         this.title.label = KeybindingWidget.LABEL;
         this.title.caption = KeybindingWidget.LABEL;
-        this.title.iconClass = 'fa fa-bars';
+        this.title.iconClass = codicon('three-bars');
         this.title.closable = true;
         this.update();
 
@@ -386,7 +386,7 @@ export class KeybindingWidget extends ReactWidget {
         return <a title='Edit Keybinding' href='#' onClick={e => {
             e.preventDefault();
             this.editKeybinding(item);
-        }}><i className='fa fa-pencil kb-action-item'></i></a>;
+        }}><i className={`${codicon('edit')} kb-action-item`}></i></a>;
     }
 
     /**
@@ -399,7 +399,7 @@ export class KeybindingWidget extends ReactWidget {
             ? <a title='Reset Keybinding' href='#' onClick={e => {
                 e.preventDefault();
                 this.resetKeybinding(item);
-            }}><i className='fa fa-undo kb-action-item'></i></a> : '';
+            }}><i className={`${codicon('discard')} kb-action-item`}></i></a> : '';
     }
 
     /**
diff --git a/packages/keymaps/src/browser/keymaps-frontend-contribution.ts b/packages/keymaps/src/browser/keymaps-frontend-contribution.ts
index 612c1840f3a71..de155501120da 100644
--- a/packages/keymaps/src/browser/keymaps-frontend-contribution.ts
+++ b/packages/keymaps/src/browser/keymaps-frontend-contribution.ts
@@ -22,7 +22,7 @@ import {
     MenuContribution,
     MenuModelRegistry
 } from '@theia/core/lib/common';
-import { Widget } from '@theia/core/lib/browser';
+import { codicon, Widget } from '@theia/core/lib/browser';
 import { CommonMenus } from '@theia/core/lib/browser/common-frontend-contribution';
 import { KeymapsService } from './keymaps-service';
 import { KeybindingRegistry } from '@theia/core/lib/browser/keybinding';
@@ -43,11 +43,11 @@ export namespace KeymapsCommands {
     };
     export const OPEN_KEYMAPS_JSON_TOOLBAR: Command = {
         id: 'keymaps:openJson.toolbar',
-        iconClass: 'theia-open-json-icon'
+        iconClass: codicon('json')
     };
     export const CLEAR_KEYBINDINGS_SEARCH: Command = {
         id: 'keymaps.clearSearch',
-        iconClass: 'clear-all'
+        iconClass: codicon('clear-all')
     };
 }
 
diff --git a/packages/markers/src/browser/problem/problem-contribution.ts b/packages/markers/src/browser/problem/problem-contribution.ts
index e880ff4c2c0d3..b57aebe638e4f 100644
--- a/packages/markers/src/browser/problem/problem-contribution.ts
+++ b/packages/markers/src/browser/problem/problem-contribution.ts
@@ -16,7 +16,7 @@
 
 import debounce = require('@theia/core/shared/lodash.debounce');
 import { injectable, inject } from '@theia/core/shared/inversify';
-import { FrontendApplication, FrontendApplicationContribution, CompositeTreeNode, SelectableTreeNode, Widget } from '@theia/core/lib/browser';
+import { FrontendApplication, FrontendApplicationContribution, CompositeTreeNode, SelectableTreeNode, Widget, codicon } from '@theia/core/lib/browser';
 import { StatusBar, StatusBarAlignment } from '@theia/core/lib/browser/status-bar/status-bar';
 import { AbstractViewContribution } from '@theia/core/lib/browser/shell/view-contribution';
 import { PROBLEM_KIND, ProblemMarker } from '../../common/problem-marker';
@@ -41,7 +41,7 @@ export namespace ProblemsCommands {
     };
     export const COLLAPSE_ALL_TOOLBAR: Command = {
         id: 'problems.collapse.all.toolbar',
-        iconClass: 'theia-collapse-all-icon'
+        iconClass: codicon('collapse-all')
     };
     export const COPY: Command = {
         id: 'problems.copy'
@@ -53,7 +53,7 @@ export namespace ProblemsCommands {
         id: 'problems.clear.all',
         category: 'Problems',
         label: 'Clear All',
-        iconClass: 'clear-all'
+        iconClass: codicon('clear-all')
     };
 }
 
@@ -89,8 +89,8 @@ export class ProblemContribution extends AbstractViewContribution<ProblemWidget>
     protected setStatusBarElement(problemStat: ProblemStat): void {
         this.statusBar.setElement('problem-marker-status', {
             text: problemStat.infos <= 0
-                ? `$(times-circle) ${problemStat.errors} $(exclamation-triangle) ${problemStat.warnings}`
-                : `$(times-circle) ${problemStat.errors} $(exclamation-triangle) ${problemStat.warnings} $(info-circle) ${problemStat.infos}`,
+                ? `$(codicon-error) ${problemStat.errors} $(codicon-warning) ${problemStat.warnings}`
+                : `$(codicon-error) ${problemStat.errors} $(codicon-warning) ${problemStat.warnings} $(codicon-info) ${problemStat.infos}`,
             alignment: StatusBarAlignment.LEFT,
             priority: 10,
             command: this.toggleCommand ? this.toggleCommand.id : undefined,
diff --git a/packages/markers/src/browser/problem/problem-widget.tsx b/packages/markers/src/browser/problem/problem-widget.tsx
index 9d05ee9de5ad7..f7c79196888b4 100644
--- a/packages/markers/src/browser/problem/problem-widget.tsx
+++ b/packages/markers/src/browser/problem/problem-widget.tsx
@@ -21,7 +21,7 @@ import { ProblemTreeModel } from './problem-tree-model';
 import { MarkerInfoNode, MarkerNode, MarkerRootNode } from '../marker-tree';
 import {
     TreeWidget, TreeProps, ContextMenuRenderer, TreeNode, NodeProps, TreeModel,
-    ApplicationShell, Navigatable, ExpandableTreeNode, SelectableTreeNode, TREE_NODE_INFO_CLASS
+    ApplicationShell, Navigatable, ExpandableTreeNode, SelectableTreeNode, TREE_NODE_INFO_CLASS, codicon
 } from '@theia/core/lib/browser';
 import { DiagnosticSeverity } from '@theia/core/shared/vscode-languageserver-types';
 import * as React from '@theia/core/shared/react';
@@ -52,7 +52,7 @@ export class ProblemWidget extends TreeWidget {
         this.id = PROBLEMS_WIDGET_ID;
         this.title.label = 'Problems';
         this.title.caption = 'Problems';
-        this.title.iconClass = 'fa problem-tab-icon';
+        this.title.iconClass = codicon('warning');
         this.title.closable = true;
         this.addClass('theia-marker-container');
 
@@ -196,10 +196,10 @@ export class ProblemWidget extends TreeWidget {
 
     protected getSeverityClass(severity: DiagnosticSeverity): string {
         switch (severity) {
-            case 1: return 'fa fa-times-circle error';
-            case 2: return 'fa fa-exclamation-circle warning';
-            case 3: return 'fa fa-info-circle information';
-            default: return 'fa fa-hand-o-up hint';
+            case 1: return `${codicon('error')} error`;
+            case 2: return `${codicon('warning')} warning`;
+            case 3: return `${codicon('info')} information`;
+            default: return `${codicon('thumbsup')} hint`;
         }
     }
 
@@ -224,7 +224,7 @@ export class ProblemWidget extends TreeWidget {
 export class ProblemMarkerRemoveButton extends React.Component<{ model: ProblemTreeModel, node: TreeNode }> {
 
     render(): React.ReactNode {
-        return <span className='remove-node' onClick={this.remove}></span>;
+        return <span className={codicon('close')} onClick={this.remove}></span>;
     }
 
     protected readonly remove = (e: React.MouseEvent<HTMLElement>) => this.doRemove(e);
diff --git a/packages/markers/src/browser/style/index.css b/packages/markers/src/browser/style/index.css
index a3c2a276e687f..fc8b048b27fa8 100644
--- a/packages/markers/src/browser/style/index.css
+++ b/packages/markers/src/browser/style/index.css
@@ -28,13 +28,9 @@
     align-items: center;
 }
 
-.theia-marker-container .markerNode,
-.theia-marker-container .markerFileNode {
-    width: calc(100% - 32px);
-}
-
 .theia-marker-container .markerNode div,
 .theia-marker-container .markerFileNode div {
+    display: flex;
     margin-right: 5px;
 }
 
@@ -83,10 +79,6 @@
     text-overflow: ellipsis;
 }
 
-.problem-tab-icon::before {
-    content: "\f06a"
-}
-
 .theia-marker-container .row-button-container {
     display: none;
 }
@@ -98,9 +90,3 @@
     align-items: center;
     align-self: center;
 }
-
-.theia-marker-container .row-button-container .remove-node {
-    background-image: var(--theia-icon-close);
-    width: 15px;
-    height: 15px;
-}
diff --git a/packages/messages/src/browser/notification-center-component.tsx b/packages/messages/src/browser/notification-center-component.tsx
index 7c775a54f5ab5..9c0e021694a9d 100644
--- a/packages/messages/src/browser/notification-center-component.tsx
+++ b/packages/messages/src/browser/notification-center-component.tsx
@@ -18,6 +18,7 @@ import * as React from '@theia/core/shared/react';
 import { DisposableCollection } from '@theia/core';
 import { NotificationManager, NotificationUpdateEvent } from './notifications-manager';
 import { NotificationComponent } from './notification-component';
+import { codicon } from '@theia/core/lib/browser';
 
 const PerfectScrollbar = require('react-perfect-scrollbar');
 
@@ -62,8 +63,8 @@ export class NotificationCenterComponent extends React.Component<NotificationCen
                     <div className='theia-notification-center-header-title'>{title}</div>
                     <div className='theia-notification-center-header-actions'>
                         <ul className='theia-notification-actions'>
-                            <li className='collapse' title='Hide Notification Center' onClick={this.onHide} />
-                            <li className='clear-all' title='Clear All' onClick={this.onClearAll} />
+                            <li className={codicon('clear-all', true)} title='Clear All' onClick={this.onClearAll} />
+                            <li className={codicon('chevron-down', true)} title='Hide Notification Center' onClick={this.onHide} />
                         </ul>
                     </div>
                 </div>
diff --git a/packages/messages/src/browser/notification-component.tsx b/packages/messages/src/browser/notification-component.tsx
index cf1031451c958..a709c8298d3cd 100644
--- a/packages/messages/src/browser/notification-component.tsx
+++ b/packages/messages/src/browser/notification-component.tsx
@@ -17,6 +17,7 @@
 import * as React from '@theia/core/shared/react';
 import * as DOMPurify from '@theia/core/shared/dompurify';
 import { NotificationManager, Notification } from './notifications-manager';
+import { codicon } from '@theia/core/lib/browser';
 
 export interface NotificationComponentProps {
     readonly manager: NotificationManager;
@@ -73,7 +74,7 @@ export class NotificationComponent extends React.Component<NotificationComponent
         return (<div key={messageId} className='theia-notification-list-item'>
             <div className={`theia-notification-list-item-content ${collapsed ? 'collapsed' : ''}`}>
                 <div className='theia-notification-list-item-content-main'>
-                    <div className={`theia-notification-icon theia-notification-icon-${type}`} />
+                    <div className={`theia-notification-icon ${codicon(type)} ${type}`} />
                     <div className='theia-notification-message'>
                         <span
                             dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(message) }} // eslint-disable-line react/no-danger
@@ -82,10 +83,10 @@ export class NotificationComponent extends React.Component<NotificationComponent
                     </div>
                     <ul className='theia-notification-actions'>
                         {expandable && (
-                            <li className={collapsed ? 'expand' : 'collapse'} title={collapsed ? 'Expand' : 'Collapse'}
+                            <li className={codicon('chevron-down') + collapsed ? ' expand' : ' collapse'} title={collapsed ? 'Expand' : 'Collapse'}
                                 data-message-id={messageId} onClick={this.onToggleExpansion} />
                         )}
-                        {!isProgress && (<li className='clear' title='Clear' data-message-id={messageId} onClick={this.onClear} />)}
+                        {!isProgress && (<li className={codicon('close', true)} title='Clear' data-message-id={messageId} onClick={this.onClear} />)}
                     </ul>
                 </div>
                 {(source || !!actions.length) && (
@@ -105,7 +106,7 @@ export class NotificationComponent extends React.Component<NotificationComponent
                     </div>
                 )}
             </div>
-            { isProgress && (
+            {isProgress && (
                 <div className='theia-notification-item-progress'>
                     <div className='theia-notification-item-progressbar' style={{ width: `${progress}%` }} />
                 </div>
diff --git a/packages/messages/src/browser/notifications-commands.ts b/packages/messages/src/browser/notifications-commands.ts
index 90e6969bd30c9..b061967b7875a 100644
--- a/packages/messages/src/browser/notifications-commands.ts
+++ b/packages/messages/src/browser/notifications-commands.ts
@@ -15,6 +15,7 @@
  ********************************************************************************/
 
 import { Command } from '@theia/core';
+import { codicon } from '@theia/core/lib/browser';
 
 export namespace NotificationsCommands {
 
@@ -23,7 +24,7 @@ export namespace NotificationsCommands {
     export const TOGGLE: Command = {
         id: 'notifications.commands.toggle',
         category: NOTIFICATIONS_CATEGORY,
-        iconClass: 'fa fa-th-list',
+        iconClass: codicon('list-unordered'),
         label: 'Toggle Notifications'
     };
 
@@ -34,7 +35,7 @@ export namespace NotificationsCommands {
     export const CLEAR_ALL: Command = {
         id: 'notifications.commands.clearAll',
         category: NOTIFICATIONS_CATEGORY,
-        iconClass: 'fa fa-times-circle',
+        iconClass: codicon('clear-all'),
         label: 'Clear All Notifications'
     };
 }
diff --git a/packages/messages/src/browser/notifications-contribution.ts b/packages/messages/src/browser/notifications-contribution.ts
index 7a9fe1da165d8..b72d0b589feea 100644
--- a/packages/messages/src/browser/notifications-contribution.ts
+++ b/packages/messages/src/browser/notifications-contribution.ts
@@ -58,7 +58,7 @@ export class NotificationsContribution implements FrontendApplicationContributio
         });
     }
     protected getStatusBarItemText(count: number): string {
-        return `$(bell) ${count ? ` ${count}` : ''}`;
+        return `$(${count ? 'codicon-bell-dot' : 'codicon-bell'}) ${count ? ` ${count}` : ''}`;
     }
     protected getStatusBarItemTooltip(count: number): string {
         if (this.manager.centerVisible) {
diff --git a/packages/messages/src/browser/style/notifications.css b/packages/messages/src/browser/style/notifications.css
index e111c28b4ccbb..5672bc040f4ad 100644
--- a/packages/messages/src/browser/style/notifications.css
+++ b/packages/messages/src/browser/style/notifications.css
@@ -152,27 +152,20 @@
     outline-color: var(--theia-focusBorder);
 }
 
-.theia-notification-icon {
-    font-family: FontAwesome;
-    display: inline-block;
+.theia-notification-icon:before {
+    font-size: 24px;
     padding-right: 4px;
-    vertical-align: middle;
-    width: 24px;
-    height: 24px;
 }
 
-.theia-notification-icon-info:before {
-    content: "\f05a";
+.theia-notification-icon.info:before {
     color: var(--theia-notificationsInfoIcon-foreground);
 }
 
-.theia-notification-icon-warning:before {
-    content: "\f071";
+.theia-notification-icon.warning:before {
     color: var(--theia-notificationsWarningIcon-foreground);
 }
 
-.theia-notification-icon-error:before {
-    content: "\f057";
+.theia-notification-icon.error:before {
     color: var(--theia-notificationsErrorIcon-foreground);
 }
 
@@ -190,25 +183,10 @@
     height: 16px;
     width: 16px;
     cursor: pointer;
-    margin-left: 8px;
-}
-
-.theia-notification-actions > .clear-all {
-    background: var(--theia-icon-close-all) no-repeat center center;
-}
-.theia-notification-actions > .clear-all:active {
-    transform: scale(1.1);
-}
-
-.theia-notification-actions > .clear {
-    background: var(--theia-icon-close) no-repeat center center;
-}
-.theia-notification-actions > .clear:active {
-    transform: scale(1.2);
+    margin-left: 4px;
 }
 
 .theia-notification-actions > .expand {
-    background: var(--theia-icon-collapse) no-repeat center center;
     transform: rotate(0deg) scale(1.5);
 }
 .theia-notification-actions > .expand:active {
@@ -216,11 +194,10 @@
 }
 
 .theia-notification-actions > .collapse {
-    background: var(--theia-icon-collapse) no-repeat center center;
-    transform: rotate(90deg) scale(1.5);
+    transform: rotate(-90deg) scale(1.5);
 }
 .theia-notification-actions > .collapse:active {
-    transform: rotate(90deg) scale(1.8);
+    transform: rotate(-90deg) scale(1.8);
 }
 
 .theia-notification-list-item-content-bottom {
diff --git a/packages/mini-browser/src/browser/mini-browser-content.ts b/packages/mini-browser/src/browser/mini-browser-content.ts
index 706805e458e89..14f778b30ff78 100644
--- a/packages/mini-browser/src/browser/mini-browser-content.ts
+++ b/packages/mini-browser/src/browser/mini-browser-content.ts
@@ -24,7 +24,7 @@ import { KeybindingRegistry } from '@theia/core/lib/browser/keybinding';
 import { WindowService } from '@theia/core/lib/browser/window/window-service';
 import { parseCssTime, Key, KeyCode } from '@theia/core/lib/browser';
 import { DisposableCollection, Disposable } from '@theia/core/lib/common/disposable';
-import { BaseWidget, addEventListener } from '@theia/core/lib/browser/widgets/widget';
+import { BaseWidget, addEventListener, codiconArray } from '@theia/core/lib/browser/widgets/widget';
 import { LocationMapperService } from './location-mapper-service';
 import { ApplicationShellMouseTracker } from '@theia/core/lib/browser/shell/application-shell-mouse-tracker';
 
@@ -339,7 +339,7 @@ export class MiniBrowserContent extends BaseWidget {
         errorBar.style.display = 'none';
 
         const icon = document.createElement('span');
-        icon.classList.add('fa', 'problem-tab-icon');
+        icon.classList.add(...codiconArray('info'));
         errorBar.appendChild(icon);
 
         const message = document.createElement('span');
diff --git a/packages/mini-browser/src/browser/mini-browser-open-handler.ts b/packages/mini-browser/src/browser/mini-browser-open-handler.ts
index 2ad0fd612e792..97e2b880c7f99 100644
--- a/packages/mini-browser/src/browser/mini-browser-open-handler.ts
+++ b/packages/mini-browser/src/browser/mini-browser-open-handler.ts
@@ -18,7 +18,7 @@ import { Widget } from '@theia/core/shared/@phosphor/widgets';
 import { injectable, inject, optional } from '@theia/core/shared/inversify';
 import URI from '@theia/core/lib/common/uri';
 import { MaybePromise } from '@theia/core/lib/common/types';
-import { QuickInputService } from '@theia/core/lib/browser';
+import { codicon, QuickInputService } from '@theia/core/lib/browser';
 import { ApplicationShell } from '@theia/core/lib/browser/shell';
 import { Command, CommandContribution, CommandRegistry } from '@theia/core/lib/common/command';
 import { MenuContribution, MenuModelRegistry } from '@theia/core/lib/common/menu';
@@ -36,11 +36,11 @@ export namespace MiniBrowserCommands {
     export const PREVIEW: Command = {
         id: 'mini-browser.preview',
         label: 'Open Preview',
-        iconClass: 'theia-open-preview-icon'
+        iconClass: codicon('open-preview')
     };
     export const OPEN_SOURCE: Command = {
         id: 'mini-browser.open.source',
-        iconClass: 'theia-open-file-icon'
+        iconClass: codicon('go-to-file')
     };
     export const OPEN_URL: Command = {
         id: 'mini-browser.openUrl',
@@ -286,7 +286,7 @@ export class MiniBrowserOpenHandler extends NavigatableWidgetOpenHandler<MiniBro
                 area: 'right'
             },
             resetBackground,
-            iconClass: 'theia-mini-browser-icon'
+            iconClass: codicon('preview')
         };
     }
 
diff --git a/packages/mini-browser/src/browser/mini-browser.ts b/packages/mini-browser/src/browser/mini-browser.ts
index 47ed8c4dec778..5b9538d65d137 100644
--- a/packages/mini-browser/src/browser/mini-browser.ts
+++ b/packages/mini-browser/src/browser/mini-browser.ts
@@ -19,7 +19,7 @@ import { Message } from '@theia/core/shared/@phosphor/messaging';
 import URI from '@theia/core/lib/common/uri';
 import { NavigatableWidget, StatefulWidget } from '@theia/core/lib/browser';
 import { DisposableCollection } from '@theia/core/lib/common/disposable';
-import { BaseWidget, PanelLayout } from '@theia/core/lib/browser/widgets/widget';
+import { BaseWidget, codicon, PanelLayout } from '@theia/core/lib/browser/widgets/widget';
 import { MiniBrowserProps, MiniBrowserContentFactory } from './mini-browser-content';
 
 export { MiniBrowserProps };
@@ -33,7 +33,7 @@ export class MiniBrowserOptions {
 export class MiniBrowser extends BaseWidget implements NavigatableWidget, StatefulWidget {
 
     static ID = 'mini-browser';
-    static ICON = 'fa fa-globe';
+    static ICON = codicon('globe');
 
     @inject(MiniBrowserOptions)
     protected readonly options: MiniBrowserOptions;
diff --git a/packages/mini-browser/src/browser/style/index.css b/packages/mini-browser/src/browser/style/index.css
index d42f508cfee51..2b38b9d7b8041 100644
--- a/packages/mini-browser/src/browser/style/index.css
+++ b/packages/mini-browser/src/browser/style/index.css
@@ -24,11 +24,6 @@
     height: 100%;
 }
 
-.theia-mini-browser-icon {
-    mask: url('mini-browser.svg');
-    -webkit-mask: url('mini-browser.svg');
-}
-
 .theia-mini-browser-toolbar {
     margin-top: 8px;
     display: flex;
diff --git a/packages/navigator/src/browser/navigator-contribution.ts b/packages/navigator/src/browser/navigator-contribution.ts
index 19c5708674d1c..c61a2014bbd9e 100644
--- a/packages/navigator/src/browser/navigator-contribution.ts
+++ b/packages/navigator/src/browser/navigator-contribution.ts
@@ -32,7 +32,8 @@ import {
     NavigatableWidget,
     ApplicationShell,
     TabBar,
-    Title
+    Title,
+    codicon
 } from '@theia/core/lib/browser';
 import { FileDownloadCommands } from '@theia/filesystem/lib/browser/download/file-download-command-contribution';
 import {
@@ -95,13 +96,13 @@ export namespace FileNavigatorCommands {
         id: 'navigator.refresh',
         category: 'File',
         label: 'Refresh in Explorer',
-        iconClass: 'refresh'
+        iconClass: codicon('refresh')
     };
     export const COLLAPSE_ALL: Command = {
         id: 'navigator.collapse.all',
         category: 'File',
         label: 'Collapse Folders in Explorer',
-        iconClass: 'theia-collapse-all-icon'
+        iconClass: codicon('collapse-all')
     };
     export const ADD_ROOT_FOLDER: Command = {
         id: 'navigator.addRootFolder'
diff --git a/packages/navigator/src/browser/navigator-frontend-module.ts b/packages/navigator/src/browser/navigator-frontend-module.ts
index 442dbce1c2bc2..9d833ada290bc 100644
--- a/packages/navigator/src/browser/navigator-frontend-module.ts
+++ b/packages/navigator/src/browser/navigator-frontend-module.ts
@@ -33,7 +33,7 @@ import { FileNavigatorFilter } from './navigator-filter';
 import { NavigatorContextKeyService } from './navigator-context-key-service';
 import { TabBarToolbarContribution } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
 import { NavigatorDiff } from './navigator-diff';
-import { NavigatorLayoutVersion3Migration } from './navigator-layout-migrations';
+import { NavigatorLayoutVersion3Migration, NavigatorLayoutVersion5Migration } from './navigator-layout-migrations';
 import { NavigatorTabBarDecorator } from './navigator-tab-bar-decorator';
 import { TabBarDecorator } from '@theia/core/lib/browser/shell/tab-bar-decorator';
 import { NavigatorWidgetFactory } from './navigator-widget-factory';
@@ -72,6 +72,7 @@ export default new ContainerModule(bind => {
     bind(NavigatorWidgetFactory).toSelf().inSingletonScope();
     bind(WidgetFactory).toService(NavigatorWidgetFactory);
     bind(ApplicationShellLayoutMigration).to(NavigatorLayoutVersion3Migration).inSingletonScope();
+    bind(ApplicationShellLayoutMigration).to(NavigatorLayoutVersion5Migration).inSingletonScope();
 
     bind(NavigatorDiff).toSelf().inSingletonScope();
     bind(NavigatorTabBarDecorator).toSelf().inSingletonScope();
diff --git a/packages/navigator/src/browser/navigator-layout-migrations.ts b/packages/navigator/src/browser/navigator-layout-migrations.ts
index 37f6d68bf4b8b..de93bf09fe4cf 100644
--- a/packages/navigator/src/browser/navigator-layout-migrations.ts
+++ b/packages/navigator/src/browser/navigator-layout-migrations.ts
@@ -51,3 +51,15 @@ export class NavigatorLayoutVersion3Migration implements ApplicationShellLayoutM
         return undefined;
     }
 }
+
+@injectable()
+export class NavigatorLayoutVersion5Migration implements ApplicationShellLayoutMigration {
+    readonly layoutVersion = 5.0;
+    onWillInflateWidget(desc: WidgetDescription): WidgetDescription | undefined {
+        if (desc.constructionOptions.factoryId === EXPLORER_VIEW_CONTAINER_ID && typeof desc.innerWidgetState === 'string') {
+            desc.innerWidgetState = desc.innerWidgetState.replace(/navigator-tab-icon/g, EXPLORER_VIEW_CONTAINER_TITLE_OPTIONS.iconClass!);
+            return desc;
+        }
+        return undefined;
+    }
+}
diff --git a/packages/navigator/src/browser/navigator-widget-factory.ts b/packages/navigator/src/browser/navigator-widget-factory.ts
index c43ac24dcd329..f1f4ba3e181c9 100644
--- a/packages/navigator/src/browser/navigator-widget-factory.ts
+++ b/packages/navigator/src/browser/navigator-widget-factory.ts
@@ -16,6 +16,7 @@
 
 import { inject, injectable } from '@theia/core/shared/inversify';
 import {
+    codicon,
     ViewContainer,
     ViewContainerTitleOptions,
     WidgetFactory,
@@ -27,7 +28,7 @@ import { OpenEditorsWidget } from './open-editors-widget/navigator-open-editors-
 export const EXPLORER_VIEW_CONTAINER_ID = 'explorer-view-container';
 export const EXPLORER_VIEW_CONTAINER_TITLE_OPTIONS: ViewContainerTitleOptions = {
     label: 'Explorer',
-    iconClass: 'navigator-tab-icon',
+    iconClass: codicon('files'),
     closeable: true
 };
 
diff --git a/packages/navigator/src/browser/style/index.css b/packages/navigator/src/browser/style/index.css
index 01e8a9302aa0c..6d6538c889ed2 100644
--- a/packages/navigator/src/browser/style/index.css
+++ b/packages/navigator/src/browser/style/index.css
@@ -41,8 +41,3 @@
     width: calc(100% - var(--theia-ui-padding)*4);
     margin-left: 0;
 }
-
-.navigator-tab-icon {
-    -webkit-mask: url('files.svg');
-    mask: url('files.svg');
-}
diff --git a/packages/outline-view/src/browser/outline-view-contribution.ts b/packages/outline-view/src/browser/outline-view-contribution.ts
index 07850eaa18a92..db1dd6f6c3bee 100644
--- a/packages/outline-view/src/browser/outline-view-contribution.ts
+++ b/packages/outline-view/src/browser/outline-view-contribution.ts
@@ -19,7 +19,7 @@ import { AbstractViewContribution } from '@theia/core/lib/browser/shell/view-con
 import { FrontendApplicationContribution, FrontendApplication } from '@theia/core/lib/browser/frontend-application';
 import { Command, CommandRegistry } from '@theia/core/lib/common/command';
 import { TabBarToolbarContribution, TabBarToolbarRegistry } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
-import { Widget } from '@theia/core/lib/browser/widgets';
+import { codicon, Widget } from '@theia/core/lib/browser/widgets';
 import { OutlineViewWidget } from './outline-view-widget';
 import { CompositeTreeNode } from '@theia/core/lib/browser/tree';
 import { OS } from '@theia/core/lib/common/os';
@@ -36,7 +36,7 @@ export namespace OutlineViewCommands {
      */
     export const COLLAPSE_ALL: Command = {
         id: 'outlineView.collapse.all',
-        iconClass: 'collapse-all'
+        iconClass: codicon('collapse-all')
     };
 }
 
diff --git a/packages/outline-view/src/browser/outline-view-widget.tsx b/packages/outline-view/src/browser/outline-view-widget.tsx
index 40d4791c02248..c835449a11e3e 100644
--- a/packages/outline-view/src/browser/outline-view-widget.tsx
+++ b/packages/outline-view/src/browser/outline-view-widget.tsx
@@ -23,7 +23,8 @@ import {
     TreeProps,
     ContextMenuRenderer,
     TreeModel,
-    ExpandableTreeNode
+    ExpandableTreeNode,
+    codicon
 } from '@theia/core/lib/browser';
 import { OutlineViewTreeModel } from './outline-view-tree-model';
 import { Message } from '@theia/core/shared/@phosphor/messaging';
@@ -85,7 +86,7 @@ export class OutlineViewWidget extends TreeWidget {
         this.title.label = 'Outline';
         this.title.caption = 'Outline';
         this.title.closable = true;
-        this.title.iconClass = 'fa outline-view-tab-icon';
+        this.title.iconClass = codicon('symbol-class');
         this.addClass('theia-outline-view');
     }
 
diff --git a/packages/outline-view/src/browser/styles/index.css b/packages/outline-view/src/browser/styles/index.css
index 7bcb61c88b8ca..9a0acc403a121 100644
--- a/packages/outline-view/src/browser/styles/index.css
+++ b/packages/outline-view/src/browser/styles/index.css
@@ -14,10 +14,6 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-.outline-view-tab-icon::before {
-    content: "\f03a"
-}
-
 .no-outline {
     color: var(--theia-foreground);
     text-align: left;
diff --git a/packages/output/src/browser/output-commands.ts b/packages/output/src/browser/output-commands.ts
index c5f23958a7c21..80f99b599c47d 100644
--- a/packages/output/src/browser/output-commands.ts
+++ b/packages/output/src/browser/output-commands.ts
@@ -14,6 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
+import { codicon } from '@theia/core/lib/browser';
 import { Command } from '@theia/core/lib/common';
 
 export namespace OutputCommands {
@@ -52,19 +53,19 @@ export namespace OutputCommands {
     export const CLEAR__WIDGET: Command = {
         id: 'output:widget:clear',
         category: OUTPUT_CATEGORY,
-        iconClass: 'clear-all'
+        iconClass: codicon('clear-all')
     };
 
     export const LOCK__WIDGET: Command = {
         id: 'output:widget:lock',
         category: OUTPUT_CATEGORY,
-        iconClass: 'fa fa-unlock'
+        iconClass: codicon('unlock')
     };
 
     export const UNLOCK__WIDGET: Command = {
         id: 'output:widget:unlock',
         category: OUTPUT_CATEGORY,
-        iconClass: 'fa fa-lock'
+        iconClass: codicon('lock')
     };
 
     export const CLEAR__QUICK_PICK: Command = {
diff --git a/packages/output/src/browser/output-widget.ts b/packages/output/src/browser/output-widget.ts
index 0c2318ccef03e..7e301bccff81c 100644
--- a/packages/output/src/browser/output-widget.ts
+++ b/packages/output/src/browser/output-widget.ts
@@ -23,7 +23,7 @@ import { MonacoEditor } from '@theia/monaco/lib/browser/monaco-editor';
 import { SelectionService } from '@theia/core/lib/common/selection-service';
 import { MonacoEditorProvider } from '@theia/monaco/lib/browser/monaco-editor-provider';
 import { Disposable, DisposableCollection } from '@theia/core/lib/common/disposable';
-import { Message, BaseWidget, DockPanel, Widget, MessageLoop, StatefulWidget } from '@theia/core/lib/browser';
+import { Message, BaseWidget, DockPanel, Widget, MessageLoop, StatefulWidget, codicon } from '@theia/core/lib/browser';
 import { OutputUri } from '../common/output-uri';
 import { OutputChannelManager, OutputChannel } from '../common/output-channel';
 import { Emitter, Event, deepClone } from '@theia/core';
@@ -52,7 +52,7 @@ export class OutputWidget extends BaseWidget implements StatefulWidget {
         this.id = OutputWidget.ID;
         this.title.label = 'Output';
         this.title.caption = 'Output';
-        this.title.iconClass = 'fa fa-flag';
+        this.title.iconClass = codicon('output');
         this.title.closable = true;
         this.addClass('theia-output');
         this.node.tabIndex = 0;
diff --git a/packages/plugin-dev/src/browser/hosted-plugin-controller.ts b/packages/plugin-dev/src/browser/hosted-plugin-controller.ts
index f13d238f99c49..8bd178bbad482 100644
--- a/packages/plugin-dev/src/browser/hosted-plugin-controller.ts
+++ b/packages/plugin-dev/src/browser/hosted-plugin-controller.ts
@@ -16,7 +16,7 @@
 
 import { injectable, inject } from '@theia/core/shared/inversify';
 import { StatusBar } from '@theia/core/lib/browser/status-bar/status-bar';
-import { StatusBarAlignment, StatusBarEntry, FrontendApplicationContribution, PreferenceServiceImpl, PreferenceChange } from '@theia/core/lib/browser';
+import { StatusBarAlignment, StatusBarEntry, FrontendApplicationContribution, PreferenceServiceImpl, PreferenceChange, codicon } from '@theia/core/lib/browser';
 import { MessageService } from '@theia/core/lib/common';
 import { CommandRegistry } from '@theia/core/shared/@phosphor/commands';
 import { Menu } from '@theia/core/shared/@phosphor/widgets';
@@ -304,7 +304,7 @@ export class HostedPluginController implements FrontendApplicationContribution {
     protected addCommandsForRunningPlugin(commands: CommandRegistry, menu: Menu): void {
         commands.addCommand(HostedPluginCommands.STOP.id, {
             label: 'Stop Instance',
-            icon: 'fa fa-stop',
+            icon: codicon('debug-stop'),
             execute: () => setTimeout(() => this.hostedPluginManagerClient.stop(), 100)
         });
 
@@ -315,7 +315,7 @@ export class HostedPluginController implements FrontendApplicationContribution {
 
         commands.addCommand(HostedPluginCommands.RESTART.id, {
             label: 'Restart Instance',
-            icon: 'fa fa-repeat',
+            icon: codicon('debug-restart'),
             execute: () => setTimeout(() => this.hostedPluginManagerClient.restart(), 100)
         });
 
@@ -331,7 +331,7 @@ export class HostedPluginController implements FrontendApplicationContribution {
     protected addCommandsForStoppedPlugin(commands: CommandRegistry, menu: Menu): void {
         commands.addCommand(HostedPluginCommands.START.id, {
             label: 'Start Instance',
-            icon: 'fa fa-play',
+            icon: codicon('play'),
             execute: () => setTimeout(() => this.hostedPluginManagerClient.start(), 100)
         });
 
@@ -342,7 +342,7 @@ export class HostedPluginController implements FrontendApplicationContribution {
 
         commands.addCommand(HostedPluginCommands.DEBUG.id, {
             label: 'Debug Instance',
-            icon: 'fa fa-bug',
+            icon: codicon('debug'),
             execute: () => setTimeout(() => this.hostedPluginManagerClient.debug(), 100)
         });
 
diff --git a/packages/plugin-ext/src/main/browser/dialogs/modal-notification.ts b/packages/plugin-ext/src/main/browser/dialogs/modal-notification.ts
index 5c4a83e07bd04..207c8a62577dc 100644
--- a/packages/plugin-ext/src/main/browser/dialogs/modal-notification.ts
+++ b/packages/plugin-ext/src/main/browser/dialogs/modal-notification.ts
@@ -15,7 +15,7 @@
  ********************************************************************************/
 import { injectable } from '@theia/core/shared/inversify';
 import { Message } from '@theia/core/shared/@phosphor/messaging';
-import { Key } from '@theia/core/lib/browser';
+import { codiconArray, Key } from '@theia/core/lib/browser';
 import { AbstractDialog } from '@theia/core/lib/browser/dialogs';
 import '../../../../src/main/browser/dialogs/style/modal-notification.css';
 import { MainMessageItem } from '../../../common/plugin-api-rpc';
@@ -60,7 +60,7 @@ export class ModalNotification extends AbstractDialog<string | undefined> {
         const iconContainer = messageNode.appendChild(document.createElement('div'));
         iconContainer.classList.add(ICON);
         const iconElement = iconContainer.appendChild(document.createElement('i'));
-        iconElement.classList.add('fa', this.toIconClass(messageType), 'fa-fw', messageType.toString());
+        iconElement.classList.add(...this.toIconClass(messageType), messageType.toString());
 
         const textContainer = messageNode.appendChild(document.createElement('div'));
         textContainer.classList.add(TEXT);
@@ -86,13 +86,13 @@ export class ModalNotification extends AbstractDialog<string | undefined> {
         return messageNode;
     }
 
-    protected toIconClass(icon: MessageType): string {
+    protected toIconClass(icon: MessageType): string[] {
         if (icon === MessageType.Error) {
-            return 'fa-times-circle';
+            return codiconArray('error');
         }
         if (icon === MessageType.Warning) {
-            return 'fa-warning';
+            return codiconArray('warning');
         }
-        return 'fa-info-circle';
+        return codiconArray('info');
     }
 }
diff --git a/packages/plugin-ext/src/main/browser/plugin-ext-widget.tsx b/packages/plugin-ext/src/main/browser/plugin-ext-widget.tsx
index 0d480b93c4b96..38dde4f5acd4c 100644
--- a/packages/plugin-ext/src/main/browser/plugin-ext-widget.tsx
+++ b/packages/plugin-ext/src/main/browser/plugin-ext-widget.tsx
@@ -23,6 +23,7 @@ import { AlertMessage } from '@theia/core/lib/browser/widgets/alert-message';
 import { HostedPluginSupport, PluginProgressLocation } from '../../hosted/browser/hosted-plugin';
 import { ProgressBarFactory } from '@theia/core/lib/browser/progress-bar-factory';
 import { DisposableCollection } from '@theia/core/lib/common/disposable';
+import { codicon } from '@theia/core/lib/browser';
 
 @injectable()
 export class PluginWidget extends ReactWidget {
@@ -38,7 +39,7 @@ export class PluginWidget extends ReactWidget {
         this.id = 'plugins';
         this.title.label = 'Plugins';
         this.title.caption = 'Plugins';
-        this.title.iconClass = 'fa plugins-tab-icon';
+        this.title.iconClass = codicon('diff-added');
         this.title.closable = true;
         this.node.tabIndex = 0;
         this.addClass('theia-plugins');
@@ -86,7 +87,7 @@ export class PluginWidget extends ReactWidget {
         return <div key={plugin.model.name} className={this.createPluginClassName(plugin)}>
             <div className='column flexcontainer pluginInformationContainer'>
                 <div className='row flexcontainer'>
-                    <div className='fa fa-puzzle-piece fa-2x fa-fw'></div>
+                    <div className={codicon('list-selection')}></div>
                     <div title={plugin.model.name} className='pluginName noWrapInfo'>{plugin.model.name}</div>
                 </div>
                 <div className='row flexcontainer'>
diff --git a/packages/plugin-ext/src/main/browser/plugin-shared-style.ts b/packages/plugin-ext/src/main/browser/plugin-shared-style.ts
index 1c1120c04b491..9436dd4701e67 100644
--- a/packages/plugin-ext/src/main/browser/plugin-shared-style.ts
+++ b/packages/plugin-ext/src/main/browser/plugin-shared-style.ts
@@ -111,7 +111,7 @@ export class PluginSharedStyle {
                 background-position: 2px;
                 width: ${size}px;
                 height: ${size}px;
-                background: no-repeat url("${theme.type === 'light' ? lightIconUrl : darkIconUrl}");
+                background: center no-repeat url("${theme.type === 'light' ? lightIconUrl : darkIconUrl}");
                 background-size: ${size}px;
             `));
         return {
diff --git a/packages/plugin-ext/src/main/browser/style/index.css b/packages/plugin-ext/src/main/browser/style/index.css
index d637f6803477b..b4d90bbde778f 100644
--- a/packages/plugin-ext/src/main/browser/style/index.css
+++ b/packages/plugin-ext/src/main/browser/style/index.css
@@ -37,11 +37,7 @@
 .theia-plugin-view-container {
     -webkit-mask: url('');
     mask: url('');
-}
-
-.theia-plugin-test-tab-icon {
-    -webkit-mask: url('test.svg');
-    mask: url('test.svg');
+    background-color: var(--theia-activityBar-inactiveForeground);
 }
 
 .theia-plugin-file-icon,
diff --git a/packages/plugin-ext/src/main/browser/style/plugin-sidebar.css b/packages/plugin-ext/src/main/browser/style/plugin-sidebar.css
index c38ced2974acf..88f117ac87542 100644
--- a/packages/plugin-ext/src/main/browser/style/plugin-sidebar.css
+++ b/packages/plugin-ext/src/main/browser/style/plugin-sidebar.css
@@ -30,7 +30,6 @@
 .theia-plugins .pluginHeaderContainer {
     padding: 5px 15px;
     font-size: var(--theia-ui-font-size0);
-    border-bottom: 1px solid;
 }
 
 .theia-side-panel .theia-plugins .pluginHeaderContainer {
@@ -48,6 +47,7 @@
 .theia-plugins .pluginName {
     flex: 1;
     margin-right: 5px;
+    margin-left: 4px;
     font-size: var(--theia-ui-font-size1);
     font-weight: 400;
 }
diff --git a/packages/plugin-ext/src/main/browser/view/plugin-view-registry.ts b/packages/plugin-ext/src/main/browser/view/plugin-view-registry.ts
index e8b9222b5e115..1e05b1f9b38b6 100644
--- a/packages/plugin-ext/src/main/browser/view/plugin-view-registry.ts
+++ b/packages/plugin-ext/src/main/browser/view/plugin-view-registry.ts
@@ -18,7 +18,7 @@ import { injectable, inject, postConstruct, optional } from '@theia/core/shared/
 import {
     ApplicationShell, ViewContainer as ViewContainerWidget, WidgetManager,
     ViewContainerIdentifier, ViewContainerTitleOptions, Widget, FrontendApplicationContribution,
-    StatefulWidget, CommonMenus, BaseWidget, TreeViewWelcomeWidget
+    StatefulWidget, CommonMenus, BaseWidget, TreeViewWelcomeWidget, codicon
 } from '@theia/core/lib/browser';
 import { ViewContainer, View, ViewWelcome } from '../../../common';
 import { PluginSharedStyle } from '../plugin-shared-style';
@@ -146,7 +146,7 @@ export class PluginViewRegistry implements FrontendApplicationContribution {
         });
         this.doRegisterViewContainer('test', 'left', {
             label: 'Test',
-            iconClass: 'theia-plugin-test-tab-icon',
+            iconClass: codicon('beaker'),
             closeable: true
         });
         this.contextKeyService.onDidChange(e => {
diff --git a/packages/preferences/src/browser/style/index.css b/packages/preferences/src/browser/style/index.css
index cf6e7523dfa80..f57c7692083e4 100644
--- a/packages/preferences/src/browser/style/index.css
+++ b/packages/preferences/src/browser/style/index.css
@@ -112,8 +112,6 @@
 }
 
 .preferences-folder-dropdown-icon {
-    background: var(--theia-icon-chevron-right) center center no-repeat;
-    transform: rotate(90deg);
     width: 15px;
     height: 15px;
     position: absolute;
diff --git a/packages/preferences/src/browser/style/preference-array.css b/packages/preferences/src/browser/style/preference-array.css
index b275001641c31..52c8b30e8d658 100644
--- a/packages/preferences/src/browser/style/preference-array.css
+++ b/packages/preferences/src/browser/style/preference-array.css
@@ -77,19 +77,13 @@
   cursor          : pointer;
 }
 
-.theia-settings-container .preference-array .add-btn {
+.theia-settings-container .preference-array .codicon.codicon-add {
   margin-left : calc((var(--theia-icon-size) + 4px) * -1);
   margin-right: 4px;
   width       : var(--theia-icon-size);
   height      : var(--theia-icon-size);
 }
 
-.theia-settings-container .preference-array-clear-item {
-  background: var(--theia-icon-close) no-repeat;
-  width     : var(--theia-icon-size);
-  height    : var(--theia-icon-size);
-}
-
 .theia-settings-container .preference-array-input {
   padding-right: calc(var(--theia-icon-size) + var(--theia-ui-padding));
   width        : 100%;
diff --git a/packages/preferences/src/browser/util/preference-scope-command-manager.ts b/packages/preferences/src/browser/util/preference-scope-command-manager.ts
index e96b27e623951..a6df7b3ce75e9 100644
--- a/packages/preferences/src/browser/util/preference-scope-command-manager.ts
+++ b/packages/preferences/src/browser/util/preference-scope-command-manager.ts
@@ -15,7 +15,7 @@
  ********************************************************************************/
 
 import { injectable, inject } from '@theia/core/shared/inversify';
-import { PreferenceScope, LabelProvider } from '@theia/core/lib/browser';
+import { PreferenceScope, LabelProvider, codicon } from '@theia/core/lib/browser';
 import { FileStat } from '@theia/filesystem/lib/common/files';
 import { CommandRegistry, MenuModelRegistry, Command } from '@theia/core/lib/common';
 import { Preference, PreferenceMenus } from './preference-types';
@@ -49,7 +49,7 @@ export class PreferenceScopeCommandManager {
         folderWorkspaces.forEach(folderWorkspace => {
             const folderLabel = this.labelProvider.getName(folderWorkspace.resource);
 
-            const iconClass = currentFolderURI === folderWorkspace.resource.toString() ? 'fa fa-check' : '';
+            const iconClass = currentFolderURI === folderWorkspace.resource.toString() ? codicon('pass') : '';
             const newFolderAsCommand = {
                 id: `preferenceScopeCommand:${folderWorkspace.resource.toString()}`,
                 label: folderLabel,
diff --git a/packages/preferences/src/browser/views/components/preference-array-input.ts b/packages/preferences/src/browser/views/components/preference-array-input.ts
index 4c8a8ca562bf0..a471adc549beb 100644
--- a/packages/preferences/src/browser/views/components/preference-array-input.ts
+++ b/packages/preferences/src/browser/views/components/preference-array-input.ts
@@ -14,6 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
+import { codiconArray } from '@theia/core/lib/browser';
 import { injectable } from '@theia/core/shared/inversify';
 import { PreferenceLeafNodeRenderer } from './preference-node-renderer';
 
@@ -60,7 +61,7 @@ export class PreferenceArrayInputRenderer extends PreferenceLeafNodeRenderer<str
         iconWrapper.tabIndex = 0;
         existingValue.appendChild(iconWrapper);
         const icon = document.createElement('i');
-        icon.classList.add('preference-array-clear-item');
+        icon.classList.add(...codiconArray('close'));
         iconWrapper.appendChild(icon);
         return existingValue;
     }
@@ -79,16 +80,13 @@ export class PreferenceArrayInputRenderer extends PreferenceLeafNodeRenderer<str
         input.setAttribute('aria-label', 'Preference String Input');
         const iconWrapper = document.createElement('span');
         inputWrapper.appendChild(iconWrapper);
-        iconWrapper.classList.add('preference-array-element-btn', 'add-btn');
+        iconWrapper.classList.add('preference-array-element-btn', ...codiconArray('add'));
         iconWrapper.setAttribute('role', 'button');
         const handler = this.addItem.bind(this);
         iconWrapper.onclick = handler;
         iconWrapper.onkeydown = handler;
         iconWrapper.tabIndex = 0;
         iconWrapper.setAttribute('aria-label', 'Submit Preference Input');
-        const icon = document.createElement('i');
-        icon.classList.add('fa', 'fa-plus');
-        iconWrapper.appendChild(icon);
         return inputWrapper;
     }
 
diff --git a/packages/preferences/src/browser/views/preference-scope-tabbar-widget.tsx b/packages/preferences/src/browser/views/preference-scope-tabbar-widget.tsx
index c8c4bf315f59b..8e1c9fda4078b 100644
--- a/packages/preferences/src/browser/views/preference-scope-tabbar-widget.tsx
+++ b/packages/preferences/src/browser/views/preference-scope-tabbar-widget.tsx
@@ -16,7 +16,7 @@
 
 import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
 import { TabBar, Widget, Title } from '@theia/core/shared/@phosphor/widgets';
-import { PreferenceScope, Message, ContextMenuRenderer, LabelProvider, StatefulWidget } from '@theia/core/lib/browser';
+import { PreferenceScope, Message, ContextMenuRenderer, LabelProvider, StatefulWidget, codicon } from '@theia/core/lib/browser';
 import { WorkspaceService } from '@theia/workspace/lib/browser/workspace-service';
 import URI from '@theia/core/lib/common/uri';
 import { FileStat } from '@theia/filesystem/lib/common/files';
@@ -35,7 +35,7 @@ const PREFERENCE_TAB_CLASSNAME = 'preferences-scope-tab';
 const GENERAL_FOLDER_TAB_CLASSNAME = 'preference-folder';
 const LABELED_FOLDER_TAB_CLASSNAME = 'preferences-folder-tab';
 const FOLDER_DROPDOWN_CLASSNAME = 'preferences-folder-dropdown';
-const FOLDER_DROPDOWN_ICON_CLASSNAME = 'preferences-folder-dropdown-icon';
+const FOLDER_DROPDOWN_ICON_CLASSNAME = 'preferences-folder-dropdown-icon ' + codicon('chevron-down');
 const TABBAR_UNDERLINE_CLASSNAME = 'tabbar-underline';
 const SINGLE_FOLDER_TAB_CLASSNAME = `${PREFERENCE_TAB_CLASSNAME} ${GENERAL_FOLDER_TAB_CLASSNAME} ${LABELED_FOLDER_TAB_CLASSNAME}`;
 const UNSELECTED_FOLDER_DROPDOWN_CLASSNAME = `${PREFERENCE_TAB_CLASSNAME} ${GENERAL_FOLDER_TAB_CLASSNAME} ${FOLDER_DROPDOWN_CLASSNAME}`;
diff --git a/packages/preferences/src/browser/views/preference-searchbar-widget.tsx b/packages/preferences/src/browser/views/preference-searchbar-widget.tsx
index 2042ea78a580a..36e0f57cfcab3 100644
--- a/packages/preferences/src/browser/views/preference-searchbar-widget.tsx
+++ b/packages/preferences/src/browser/views/preference-searchbar-widget.tsx
@@ -14,7 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { ReactWidget, StatefulWidget } from '@theia/core/lib/browser';
+import { codicon, ReactWidget, StatefulWidget } from '@theia/core/lib/browser';
 import { injectable, postConstruct } from '@theia/core/shared/inversify';
 import * as React from '@theia/core/shared/react';
 import debounce = require('@theia/core/shared/lodash.debounce');
@@ -100,7 +100,7 @@ export class PreferencesSearchbarWidget extends ReactWidget implements StatefulW
      */
     protected renderClearAllOption(): React.ReactNode {
         return <span
-            className={`clear-all option ${(this.searchTermExists() ? 'enabled' : '')}`}
+            className={`${codicon('clear-all')} option ${(this.searchTermExists() ? 'enabled' : '')}`}
             title="Clear Search Results"
             onClick={this.clearSearchResults}
         />;
diff --git a/packages/preferences/src/browser/views/preference-widget.tsx b/packages/preferences/src/browser/views/preference-widget.tsx
index da3c8496b6835..8aa904d39364f 100644
--- a/packages/preferences/src/browser/views/preference-widget.tsx
+++ b/packages/preferences/src/browser/views/preference-widget.tsx
@@ -15,7 +15,7 @@
  ********************************************************************************/
 
 import { postConstruct, injectable, inject } from '@theia/core/shared/inversify';
-import { Panel, Widget, Message, StatefulWidget, PreferenceScope } from '@theia/core/lib/browser';
+import { Panel, Widget, Message, StatefulWidget, PreferenceScope, codicon } from '@theia/core/lib/browser';
 import { PreferencesEditorState, PreferencesEditorWidget } from './preference-editor-widget';
 import { PreferencesTreeWidget } from './preference-tree-widget';
 import { PreferencesSearchbarState, PreferencesSearchbarWidget } from './preference-searchbar-widget';
@@ -79,7 +79,7 @@ export class PreferencesWidget extends Panel implements StatefulWidget {
         this.title.label = PreferencesWidget.LABEL;
         this.title.closable = true;
         this.addClass('theia-settings-container');
-        this.title.iconClass = 'fa fa-sliders';
+        this.title.iconClass = codicon('settings');
 
         this.searchbarWidget.addClass('preferences-searchbar-widget');
         this.addWidget(this.searchbarWidget);
diff --git a/packages/preview/src/browser/preview-contribution.ts b/packages/preview/src/browser/preview-contribution.ts
index 47a31ae5e7ebe..12a2334f36693 100644
--- a/packages/preview/src/browser/preview-contribution.ts
+++ b/packages/preview/src/browser/preview-contribution.ts
@@ -16,7 +16,7 @@
 
 import { injectable, inject } from '@theia/core/shared/inversify';
 import { Widget } from '@theia/core/shared/@phosphor/widgets';
-import { FrontendApplicationContribution, WidgetOpenerOptions, NavigatableWidgetOpenHandler } from '@theia/core/lib/browser';
+import { FrontendApplicationContribution, WidgetOpenerOptions, NavigatableWidgetOpenHandler, codicon } from '@theia/core/lib/browser';
 import { EditorManager, TextEditor, EditorWidget, EditorContextMenu } from '@theia/editor/lib/browser';
 import { DisposableCollection, CommandContribution, CommandRegistry, Command, MenuContribution, MenuModelRegistry, Disposable } from '@theia/core/lib/common';
 import { TabBarToolbarContribution, TabBarToolbarRegistry } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
@@ -37,11 +37,11 @@ export namespace PreviewCommands {
     export const OPEN: Command = {
         id: 'preview:open',
         label: 'Open Preview',
-        iconClass: 'theia-open-preview-icon'
+        iconClass: codicon('open-preview')
     };
     export const OPEN_SOURCE: Command = {
         id: 'preview.open.source',
-        iconClass: 'theia-open-file-icon'
+        iconClass: codicon('go-to-file')
     };
 }
 
diff --git a/packages/preview/src/browser/preview-widget.ts b/packages/preview/src/browser/preview-widget.ts
index 05a90cc5eff0f..0edc8156a1735 100644
--- a/packages/preview/src/browser/preview-widget.ts
+++ b/packages/preview/src/browser/preview-widget.ts
@@ -18,7 +18,7 @@ import throttle = require('@theia/core/shared/lodash.throttle');
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { Resource, MaybePromise } from '@theia/core';
 import { Navigatable } from '@theia/core/lib/browser/navigatable';
-import { BaseWidget, Message, addEventListener } from '@theia/core/lib/browser';
+import { BaseWidget, Message, addEventListener, codicon } from '@theia/core/lib/browser';
 import URI from '@theia/core/lib/common/uri';
 import { Event, Emitter } from '@theia/core/lib/common';
 import { PreviewHandler, PreviewHandlerProvider } from './preview-handler';
@@ -30,7 +30,7 @@ import { Range, Location } from '@theia/core/shared/vscode-languageserver-types'
 
 export const PREVIEW_WIDGET_CLASS = 'theia-preview-widget';
 
-const DEFAULT_ICON = 'fa fa-eye';
+const DEFAULT_ICON = codicon('eye');
 
 let widgetCounter: number = 0;
 
diff --git a/packages/property-view/src/browser/property-view-widget.tsx b/packages/property-view/src/browser/property-view-widget.tsx
index 1bd9527212648..4530965cdf6b0 100644
--- a/packages/property-view/src/browser/property-view-widget.tsx
+++ b/packages/property-view/src/browser/property-view-widget.tsx
@@ -16,7 +16,7 @@
 
 import { Message } from '@theia/core/shared/@phosphor/messaging';
 import { Disposable, SelectionService } from '@theia/core';
-import { BaseWidget, MessageLoop, Widget } from '@theia/core/lib/browser/widgets/widget';
+import { BaseWidget, codicon, MessageLoop, Widget } from '@theia/core/lib/browser/widgets/widget';
 import { DisposableCollection } from '@theia/core/lib/common/disposable';
 import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
 import { PropertyViewContentWidget } from './property-view-content-widget';
@@ -40,7 +40,7 @@ export class PropertyViewWidget extends BaseWidget {
         this.id = PropertyViewWidget.ID;
         this.title.label = PropertyViewWidget.LABEL;
         this.title.caption = PropertyViewWidget.LABEL;
-        this.title.iconClass = 'fa fa-table';
+        this.title.iconClass = codicon('table');
         this.title.closable = true;
 
         this.addClass('theia-property-view-widget');
diff --git a/packages/property-view/src/browser/resource-property-view/resource-property-view-label-provider.ts b/packages/property-view/src/browser/resource-property-view/resource-property-view-label-provider.ts
index 60d247cdfb392..6781f6c41defc 100644
--- a/packages/property-view/src/browser/resource-property-view/resource-property-view-label-provider.ts
+++ b/packages/property-view/src/browser/resource-property-view/resource-property-view-label-provider.ts
@@ -14,11 +14,11 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { LabelProvider, LabelProviderContribution, TreeNode } from '@theia/core/lib/browser';
+import { codicon, LabelProvider, LabelProviderContribution, TreeNode } from '@theia/core/lib/browser';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { ResourcePropertiesCategoryNode, ResourcePropertiesItemNode } from './resource-property-view-tree-items';
 
-export const DEFAULT_INFO_ICON = 'fa fa-info-circle';
+export const DEFAULT_INFO_ICON = codicon('info');
 
 @injectable()
 export class ResourcePropertiesLabelProvider implements LabelProviderContribution {
diff --git a/packages/scm-extra/src/browser/history/scm-history-widget.tsx b/packages/scm-extra/src/browser/history/scm-history-widget.tsx
index f6f6afd983537..a4be9790797d1 100644
--- a/packages/scm-extra/src/browser/history/scm-history-widget.tsx
+++ b/packages/scm-extra/src/browser/history/scm-history-widget.tsx
@@ -16,7 +16,7 @@
 
 import { injectable, inject, postConstruct } from '@theia/core/shared/inversify';
 import { Event as TheiaEvent, DisposableCollection } from '@theia/core';
-import { OpenerService, open, StatefulWidget, SELECTED_CLASS, WidgetManager, ApplicationShell } from '@theia/core/lib/browser';
+import { OpenerService, open, StatefulWidget, SELECTED_CLASS, WidgetManager, ApplicationShell, codicon } from '@theia/core/lib/browser';
 import { CancellationTokenSource } from '@theia/core/lib/common/cancellation';
 import { Message } from '@theia/core/shared/@phosphor/messaging';
 import { AutoSizer, List, ListRowRenderer, ListRowProps, InfiniteLoader, IndexRange, ScrollParams, CellMeasurerCache, CellMeasurer } from '@theia/core/shared/react-virtualized';
@@ -101,7 +101,7 @@ export class ScmHistoryWidget extends ScmNavigableListWidget<ScmHistoryListNode>
         this.scrollContainer = 'scm-history-list-container';
         this.title.label = SCM_HISTORY_LABEL;
         this.title.caption = SCM_HISTORY_LABEL;
-        this.title.iconClass = 'fa scm-history-tab-icon';
+        this.title.iconClass = codicon('history');
         this.title.closable = true;
         this.addClass('theia-scm');
         this.addClass('theia-scm-history');
@@ -346,7 +346,7 @@ export class ScmHistoryWidget extends ScmNavigableListWidget<ScmHistoryListNode>
 
             case 'loading':
                 content = <div className='spinnerContainer'>
-                    <span className='fa fa-spinner fa-pulse fa-3x fa-fw'></span>
+                    <span className={`${codicon('loading')} theia-animation-spin large-spinner`}></span>
                 </div>;
                 break;
         }
@@ -418,9 +418,9 @@ export class ScmHistoryWidget extends ScmNavigableListWidget<ScmHistoryListNode>
 
     protected readonly renderCommit = (commit: ScmCommitNode) => this.doRenderCommit(commit);
     protected doRenderCommit(commit: ScmCommitNode): React.ReactNode {
-        let expansionToggleIcon = 'caret-right';
+        let expansionToggleIcon = codicon('chevron-right');
         if (commit && commit.expanded) {
-            expansionToggleIcon = 'caret-down';
+            expansionToggleIcon = codicon('chevron-down');
         }
         return <div
             className={`containerHead${commit.selected ? ' ' + SELECTED_CLASS : ''}`}
@@ -454,16 +454,13 @@ export class ScmHistoryWidget extends ScmNavigableListWidget<ScmHistoryListNode>
                         {commit.commitDetails.authorDateRelative + ' by ' + commit.commitDetails.authorName}
                     </div>
                 </div>
-                <div className='fa fa-eye detailButton' onClick={() => this.openDetailWidget(commit)}></div>
-                {
-                    !this.singleFileMode ? <div className='expansionToggle noselect'>
-                        <div className='toggle'>
-                            <div className='number'>{commit.commitDetails.fileChanges.length.toString()}</div>
-                            <div className={'icon fa fa-' + expansionToggleIcon}></div>
-                        </div>
+                <div className={`${codicon('eye')} detailButton`} onClick={() => this.openDetailWidget(commit)}></div>
+                {!this.singleFileMode && <div className='expansionToggle noselect'>
+                    <div className='toggle'>
+                        <div className='number'>{commit.commitDetails.fileChanges.length.toString()}</div>
+                        <div className={'icon ' + expansionToggleIcon}></div>
                     </div>
-                        : ''
-                }
+                </div>}
             </div>
         </div >;
     }
@@ -645,7 +642,7 @@ export class ScmHistoryList extends React.Component<ScmHistoryList.Props> {
             }
         } else {
             return <div key={key} style={style} className={`commitListElement${index === 0 ? ' first' : ''}`} >
-                <span className='fa fa-spinner fa-pulse fa-fw'></span>
+                <span className={`${codicon('loading')} theia-animation-spin`}></span>
             </div>;
         }
     };
diff --git a/packages/scm-extra/src/browser/style/history.css b/packages/scm-extra/src/browser/style/history.css
index 3fe49289c2548..f6e9495cb8c16 100644
--- a/packages/scm-extra/src/browser/style/history.css
+++ b/packages/scm-extra/src/browser/style/history.css
@@ -73,28 +73,28 @@
     padding: 0 8px 0 2px;
 }
 
-.theia-scm-history .commitListElement .containerHead .headContent .image-container{
+.theia-scm-history .commitListElement .containerHead .headContent .image-container {
     margin-right: 5px;
 }
 
-.theia-scm-history .commitListElement .containerHead .headContent .image-container img{
+.theia-scm-history .commitListElement .containerHead .headContent .image-container img {
     width: 27px;
 }
 
-.theia-scm-history .commitListElement .containerHead .headContent .headLabelContainer{
+.theia-scm-history .commitListElement .containerHead .headContent .headLabelContainer {
     min-width: calc(100% - 93px);
 }
 
-.theia-scm-history .commitListElement .containerHead .headContent .headLabelContainer.singleFileMode{
+.theia-scm-history .commitListElement .containerHead .headContent .headLabelContainer.singleFileMode {
     width: 100%;
 }
 
-.theia-scm-history .commitListElement .containerHead .headContent .expansionToggle{
+.theia-scm-history .commitListElement .containerHead .headContent .expansionToggle {
     display: flex;
     align-items: center;
 }
 
-.theia-scm-history .commitListElement .containerHead .headContent .detailButton{
+.theia-scm-history .commitListElement .containerHead .headContent .detailButton {
     display: flex;
     align-items: center;
     visibility: hidden;
@@ -122,6 +122,6 @@
     font-size: smaller;
 }
 
-.scm-history-tab-icon::before {
-    content: "\f1da"
+.theia-scm-history .large-spinner {
+    font-size: 48px;
 }
diff --git a/packages/scm/src/browser/scm-amend-component.tsx b/packages/scm/src/browser/scm-amend-component.tsx
index 304864490a8a4..3d59e7b48a540 100644
--- a/packages/scm/src/browser/scm-amend-component.tsx
+++ b/packages/scm/src/browser/scm-amend-component.tsx
@@ -18,7 +18,7 @@ import '../../src/browser/style/scm-amend-component.css';
 
 import * as React from '@theia/core/shared/react';
 import { ScmAvatarService } from './scm-avatar-service';
-import { StorageService } from '@theia/core/lib/browser';
+import { codicon, StorageService } from '@theia/core/lib/browser';
 import { Disposable, DisposableCollection } from '@theia/core';
 
 import { ScmRepository } from './scm-repository';
@@ -355,10 +355,10 @@ export class ScmAmendComponent extends React.Component<ScmAmendComponentProps, S
         return <div className='theia-scm-inline-actions-container'>
             <div className='theia-scm-inline-actions'>
                 <div className='theia-scm-inline-action'>
-                    <a className='fa fa-minus' title='Unamend All Commits' onClick={this.unamendAll} />
+                    <a className={codicon('dash')} title='Unamend All Commits' onClick={this.unamendAll} />
                 </div>
                 <div className='theia-scm-inline-action' >
-                    <a className='fa fa-times' title='Clear Amending Commits' onClick={this.clearAmending} />
+                    <a className={codicon('close')} title='Clear Amending Commits' onClick={this.clearAmending} />
                 </div>
             </div>
         </div>;
diff --git a/packages/scm/src/browser/scm-contribution.ts b/packages/scm/src/browser/scm-contribution.ts
index 0b11040a16211..f2ceb6eb56a0a 100644
--- a/packages/scm/src/browser/scm-contribution.ts
+++ b/packages/scm/src/browser/scm-contribution.ts
@@ -23,6 +23,7 @@ import {
     StatusBarEntry,
     KeybindingRegistry,
     ViewContainerTitleOptions,
+    codicon,
 } from '@theia/core/lib/browser';
 import { TabBarToolbarContribution, TabBarToolbarRegistry, TabBarToolbarItem } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
 import { CommandRegistry, Command, Disposable, DisposableCollection, CommandService } from '@theia/core/lib/common';
@@ -40,7 +41,7 @@ export const SCM_WIDGET_FACTORY_ID = ScmWidget.ID;
 export const SCM_VIEW_CONTAINER_ID = 'scm-view-container';
 export const SCM_VIEW_CONTAINER_TITLE_OPTIONS: ViewContainerTitleOptions = {
     label: 'Source Control',
-    iconClass: 'scm-tab-icon',
+    iconClass: codicon('source-control'),
     closeable: true
 };
 
@@ -56,20 +57,20 @@ export namespace SCM_COMMANDS {
     export const TREE_VIEW_MODE = {
         id: 'scm.viewmode.tree',
         tooltip: 'Toggle to Tree View',
-        iconClass: 'codicon codicon-list-tree',
+        iconClass: codicon('list-tree'),
         label: 'Toggle to Tree View',
     };
     export const LIST_VIEW_MODE = {
         id: 'scm.viewmode.list',
         tooltip: 'Toggle to List View',
-        iconClass: 'codicon codicon-list-flat',
+        iconClass: codicon('list-flat'),
         label: 'Toggle to List View',
     };
     export const COLLAPSE_ALL = {
         id: 'scm.collapseAll',
         category: 'SCM',
         tooltip: 'Collapse All',
-        iconClass: 'codicon codicon-collapse-all',
+        iconClass: codicon('collapse-all'),
         label: 'Collapse All',
     };
 }
diff --git a/packages/scm/src/browser/scm-frontend-module.ts b/packages/scm/src/browser/scm-frontend-module.ts
index fceed3cd60ff6..3a645f52c89f0 100644
--- a/packages/scm/src/browser/scm-frontend-module.ts
+++ b/packages/scm/src/browser/scm-frontend-module.ts
@@ -39,7 +39,7 @@ import { ScmNavigatorDecorator } from './decorations/scm-navigator-decorator';
 import { ScmDecorationsService } from './decorations/scm-decorations-service';
 import { ScmAvatarService } from './scm-avatar-service';
 import { ScmContextKeyService } from './scm-context-key-service';
-import { ScmLayoutVersion3Migration } from './scm-layout-migrations';
+import { ScmLayoutVersion3Migration, ScmLayoutVersion5Migration } from './scm-layout-migrations';
 import { ScmTreeLabelProvider } from './scm-tree-label-provider';
 import { TabBarToolbarContribution } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
 import { ColorContribution } from '@theia/core/lib/browser/color-application-contribution';
@@ -102,6 +102,7 @@ export default new ContainerModule(bind => {
         }
     })).inSingletonScope();
     bind(ApplicationShellLayoutMigration).to(ScmLayoutVersion3Migration).inSingletonScope();
+    bind(ApplicationShellLayoutMigration).to(ScmLayoutVersion5Migration).inSingletonScope();
 
     bind(ScmQuickOpenService).toSelf().inSingletonScope();
     bindViewContribution(bind, ScmContribution);
diff --git a/packages/scm/src/browser/scm-layout-migrations.ts b/packages/scm/src/browser/scm-layout-migrations.ts
index d9c2f58c94758..d5e9f7e54bb49 100644
--- a/packages/scm/src/browser/scm-layout-migrations.ts
+++ b/packages/scm/src/browser/scm-layout-migrations.ts
@@ -50,3 +50,15 @@ export class ScmLayoutVersion3Migration implements ApplicationShellLayoutMigrati
         return undefined;
     }
 }
+
+@injectable()
+export class ScmLayoutVersion5Migration implements ApplicationShellLayoutMigration {
+    readonly layoutVersion = 5.0;
+    onWillInflateWidget(desc: WidgetDescription): WidgetDescription | undefined {
+        if (desc.constructionOptions.factoryId === SCM_VIEW_CONTAINER_ID && typeof desc.innerWidgetState === 'string') {
+            desc.innerWidgetState = desc.innerWidgetState.replace(/scm-tab-icon/g, SCM_VIEW_CONTAINER_TITLE_OPTIONS.iconClass!);
+            return desc;
+        }
+        return undefined;
+    }
+}
diff --git a/packages/scm/src/browser/scm-tree-widget.tsx b/packages/scm/src/browser/scm-tree-widget.tsx
index 0c0a684536125..fe8c700899bcf 100644
--- a/packages/scm/src/browser/scm-tree-widget.tsx
+++ b/packages/scm/src/browser/scm-tree-widget.tsx
@@ -26,7 +26,7 @@ import { ScmTreeModel } from './scm-tree-model';
 import { MenuModelRegistry, ActionMenuNode, CompositeMenuNode, MenuPath } from '@theia/core/lib/common/menu';
 import { ScmResource } from './scm-provider';
 import { CommandRegistry } from '@theia/core/lib/common/command';
-import { ContextMenuRenderer, LabelProvider, CorePreferences, DiffUris } from '@theia/core/lib/browser';
+import { ContextMenuRenderer, LabelProvider, CorePreferences, DiffUris, ACTION_ITEM } from '@theia/core/lib/browser';
 import { ScmContextKeyService } from './scm-context-key-service';
 import { EditorWidget } from '@theia/editor/lib/browser';
 import { EditorManager, DiffNavigatorProvider } from '@theia/editor/lib/browser';
@@ -776,7 +776,7 @@ export class ScmInlineAction extends React.Component<ScmInlineAction.Props> {
             return false;
         }
         return <div className='theia-scm-inline-action'>
-            <a className={node.icon} title={node.label} onClick={this.execute} />
+            <a className={`${node.icon} ${ACTION_ITEM}`} title={node.label} onClick={this.execute} />
         </div>;
     }
 
diff --git a/packages/scm/src/browser/style/index.css b/packages/scm/src/browser/style/index.css
index 64b318f4ae5fe..747e9db463309 100644
--- a/packages/scm/src/browser/style/index.css
+++ b/packages/scm/src/browser/style/index.css
@@ -239,17 +239,13 @@
 
 .scm-theia-header {
     display: flex;
+    align-items: center;
 }
 
 .scm-theia-header:hover {
     cursor: pointer;
 }
 
-.scm-tab-icon {
-    -webkit-mask: url('scm.svg');
-    mask: url('scm.svg');
-}
-
 .theia-scm-inline-actions-container {
     display: flex;
     justify-content: flex-end;
@@ -267,7 +263,6 @@
 }
 
 .theia-scm-inline-action {
-    padding: 0px 3px;
     font-size: var(--theia-ui-font-size1);
     margin: 0 2px;
     cursor: pointer;
diff --git a/packages/search-in-workspace/src/browser/search-in-workspace-frontend-contribution.ts b/packages/search-in-workspace/src/browser/search-in-workspace-frontend-contribution.ts
index 8e63aee1e6c9c..172cf518f0f1a 100644
--- a/packages/search-in-workspace/src/browser/search-in-workspace-frontend-contribution.ts
+++ b/packages/search-in-workspace/src/browser/search-in-workspace-frontend-contribution.ts
@@ -18,7 +18,7 @@ import { AbstractViewContribution, KeybindingRegistry, LabelProvider, CommonMenu
 import { SearchInWorkspaceWidget } from './search-in-workspace-widget';
 import { injectable, inject, postConstruct } from '@theia/core/shared/inversify';
 import { CommandRegistry, MenuModelRegistry, SelectionService, Command } from '@theia/core';
-import { Widget } from '@theia/core/lib/browser/widgets';
+import { codicon, Widget } from '@theia/core/lib/browser/widgets';
 import { NavigatorContextMenu } from '@theia/navigator/lib/browser/navigator-contribution';
 import { UriCommandHandler, UriAwareCommandHandler } from '@theia/core/lib/common/uri-command-handler';
 import URI from '@theia/core/lib/common/uri';
@@ -49,31 +49,31 @@ export namespace SearchInWorkspaceCommands {
         id: 'search-in-workspace.refresh',
         category: SEARCH_CATEGORY,
         label: 'Refresh',
-        iconClass: 'codicon codicon-refresh'
+        iconClass: codicon('refresh')
     };
     export const CANCEL_SEARCH: Command = {
         id: 'search-in-workspace.cancel',
         category: SEARCH_CATEGORY,
         label: 'Cancel Search',
-        iconClass: 'codicon codicon-search-stop'
+        iconClass: codicon('search-stop')
     };
     export const COLLAPSE_ALL: Command = {
         id: 'search-in-workspace.collapse-all',
         category: SEARCH_CATEGORY,
         label: 'Collapse All',
-        iconClass: 'codicon codicon-collapse-all'
+        iconClass: codicon('collapse-all')
     };
     export const EXPAND_ALL: Command = {
         id: 'search-in-workspace.expand-all',
         category: SEARCH_CATEGORY,
         label: 'Expand All',
-        iconClass: 'codicon codicon-expand-all'
+        iconClass: codicon('expand-all')
     };
     export const CLEAR_ALL: Command = {
         id: 'search-in-workspace.clear-all',
         category: SEARCH_CATEGORY,
         label: 'Clear Search Results',
-        iconClass: 'codicon codicon-clear-all'
+        iconClass: codicon('clear-all')
     };
 }
 
diff --git a/packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.tsx b/packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.tsx
index 55f7287e669cb..841fcc65ad2af 100644
--- a/packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.tsx
+++ b/packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.tsx
@@ -29,7 +29,8 @@ import {
     TreeExpansionService,
     ApplicationShell,
     DiffUris,
-    TREE_NODE_INFO_CLASS
+    TREE_NODE_INFO_CLASS,
+    codicon
 } from '@theia/core/lib/browser';
 import { CancellationTokenSource, Emitter, Event } from '@theia/core';
 import {
@@ -854,7 +855,7 @@ export class SearchInWorkspaceResultTreeWidget extends TreeWidget {
     }
 
     protected renderRemoveButton(node: TreeNode): React.ReactNode {
-        return <span className='remove-node' onClick={e => this.remove(node, e)} title='Dismiss'></span>;
+        return <span className={codicon('close')} onClick={e => this.remove(node, e)} title='Dismiss'></span>;
     }
 
     protected removeNode(node: TreeNode): void {
diff --git a/packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx b/packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx
index 8161b43ec9c99..d31b17056e1f7 100644
--- a/packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx
+++ b/packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx
@@ -14,7 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { Widget, Message, BaseWidget, Key, StatefulWidget, MessageLoop, KeyCode } from '@theia/core/lib/browser';
+import { Widget, Message, BaseWidget, Key, StatefulWidget, MessageLoop, KeyCode, codicon } from '@theia/core/lib/browser';
 import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
 import { SearchInWorkspaceResultTreeWidget } from './search-in-workspace-result-tree-widget';
 import { SearchInWorkspaceOptions } from '../common/search-in-workspace-interface';
@@ -104,7 +104,7 @@ export class SearchInWorkspaceWidget extends BaseWidget implements StatefulWidge
         this.id = SearchInWorkspaceWidget.ID;
         this.title.label = SearchInWorkspaceWidget.LABEL;
         this.title.caption = SearchInWorkspaceWidget.LABEL;
-        this.title.iconClass = 'search-in-workspace-tab-icon';
+        this.title.iconClass = codicon('search');
         this.title.closable = true;
         this.contentNode = document.createElement('div');
         this.contentNode.classList.add('t-siw-search-container');
@@ -114,22 +114,22 @@ export class SearchInWorkspaceWidget extends BaseWidget implements StatefulWidge
         this.node.appendChild(this.contentNode);
 
         this.matchCaseState = {
-            className: 'match-case',
+            className: codicon('case-sensitive'),
             enabled: false,
             title: 'Match Case'
         };
         this.wholeWordState = {
-            className: 'whole-word',
+            className: codicon('whole-word'),
             enabled: false,
             title: 'Match Whole Word'
         };
         this.regExpState = {
-            className: 'use-regexp',
+            className: codicon('regex'),
             enabled: false,
             title: 'Use Regular Expression'
         };
         this.includeIgnoredState = {
-            className: 'include-ignored fa fa-eye',
+            className: codicon('eye'),
             enabled: false,
             title: 'Include Ignored Files'
         };
@@ -354,7 +354,7 @@ export class SearchInWorkspaceWidget extends BaseWidget implements StatefulWidge
     }
 
     protected renderReplaceFieldToggle(): React.ReactNode {
-        const toggle = <span className={`fa fa-caret-${this.showReplaceField ? 'down' : 'right'}`}></span>;
+        const toggle = <span className={codicon(this.showReplaceField ? 'chevron-down' : 'chevron-right')}></span>;
         return <div
             title='Toggle Replace'
             className='replace-toggle'
@@ -532,7 +532,7 @@ export class SearchInWorkspaceWidget extends BaseWidget implements StatefulWidge
         return <div className='replace-all-button-container'>
             <span
                 title='Replace All'
-                className={`replace-all-button${enabled ? ' ' : ' disabled'}`}
+                className={`${codicon('replace-all', true)} ${enabled ? ' ' : ' disabled'}`}
                 onClick={() => {
                     if (enabled) {
                         this.resultTreeWidget.replace(undefined);
@@ -588,7 +588,7 @@ export class SearchInWorkspaceWidget extends BaseWidget implements StatefulWidge
         return <div className='button-container'>
             <span
                 title='Toggle Search Details'
-                className='fa fa-ellipsis-h btn'
+                className={codicon('ellipsis')}
                 onClick={() => {
                     this.showSearchDetails = !this.showSearchDetails;
                     this.update();
diff --git a/packages/search-in-workspace/src/browser/styles/index.css b/packages/search-in-workspace/src/browser/styles/index.css
index c350f7926bee5..84a07e6dbeb57 100644
--- a/packages/search-in-workspace/src/browser/styles/index.css
+++ b/packages/search-in-workspace/src/browser/styles/index.css
@@ -89,18 +89,6 @@
     opacity: 1;
 }
 
-.t-siw-search-container .searchHeader .search-field .option.match-case {
-    background-image: var(--theia-icon-case-sensitive);
-}
-
-.t-siw-search-container .searchHeader .search-field .option.whole-word {
-    background-image: var(--theia-icon-whole-word);
-}
-
-.t-siw-search-container .searchHeader .search-field .option.use-regexp {
-    background-image: var(--theia-icon-regex);
-}
-
 .t-siw-search-container .searchHeader .search-field .option-buttons {
     height: 23px;
     display: flex;
@@ -176,17 +164,13 @@
     right:0;
 }
 
-.t-siw-search-container .searchHeader .search-details .button-container .btn{
-    cursor: pointer;
-}
-
 .t-siw-search-container .searchHeader .glob-field-container.hidden {
     display: none;
 }
 
 .t-siw-search-container .searchHeader .glob-field-container .glob-field {
     margin-bottom: 8px;
-    margin-left: 14px;
+    margin-left: 18px;
     display: flex;
     flex-direction: column;
 }
@@ -287,10 +271,6 @@
     display: none;
 }
 
-.result-node-buttons .remove-node {
-    background-image: var(--theia-icon-close);
-}
-
 .result-node-buttons > span {
     width: 15px;
     height: 15px;
@@ -308,20 +288,24 @@
 .replace-toggle {
     display: flex;
     align-items:  center;
-    width: 15px;
-    min-width: 15px;
+    width: 16px;
+    min-width: 16px;
     justify-content: center;
-    margin-right: 1px;
+    margin-right: 2px;
     box-sizing: border-box;
 }
 
 .theia-side-panel .replace-toggle {
-    width: 13px;
-    min-width: 13px;
+    width: 16px;
+    min-width: 16px;
+}
+
+.theia-side-panel .replace-toggle .codicon {
+    padding: 0px;
 }
 
 .replace-toggle:hover {
-    background: rgba(0, 0, 0, 0.1);
+    background: rgba(50%, 50%, 50%, 0.2);
 }
 
 .search-and-replace-fields {
@@ -346,14 +330,6 @@
     justify-content:  center;
 }
 
-.replace-all-button {
-    width:  100%;
-    height: 100%;
-    display: inline-block;
-    background: var(--theia-icon-replace-all) no-repeat center;
-    cursor: pointer;
-}
-
 .result-node-buttons .replace-result {
     background-image: var(--theia-icon-replace);
 }
@@ -361,16 +337,12 @@
     background-image: var(--theia-icon-replace-all);
 }
 
-.replace-all-button.disabled {
-    opacity: var(--theia-mod-disabled-opacity);;
+.replace-all-button-container .action-item.disabled {
+    opacity: var(--theia-mod-disabled-opacity);
+    background: transparent;
     cursor: default;
 }
 
-.search-in-workspace-tab-icon {
-    -webkit-mask: url('search.svg');
-    mask: url('search.svg');
-}
-
 .highlighted-count-container {
     background-color: var(--theia-list-activeSelectionBackground);
     color: var(--theia-list-activeSelectionForeground);
diff --git a/packages/terminal/src/browser/search/terminal-search-widget.tsx b/packages/terminal/src/browser/search/terminal-search-widget.tsx
index a553861c8fe95..0461e11142ed3 100644
--- a/packages/terminal/src/browser/search/terminal-search-widget.tsx
+++ b/packages/terminal/src/browser/search/terminal-search-widget.tsx
@@ -20,7 +20,7 @@ import * as React from '@theia/core/shared/react';
 import '../../../src/browser/style/terminal-search.css';
 import { Terminal } from 'xterm';
 import { SearchAddon, ISearchOptions } from 'xterm-addon-search';
-import { Key } from '@theia/core/lib/browser';
+import { codicon, Key } from '@theia/core/lib/browser';
 
 export const TERMINAL_SEARCH_WIDGET_FACTORY_ID = 'terminal-search';
 export const TerminalSearchWidgetFactory = Symbol('TerminalSearchWidgetFactory');
@@ -61,13 +61,13 @@ export class TerminalSearchWidget extends ReactWidget {
                     onFocus={this.onSearchInputFocus}
                     onBlur={this.onSearchInputBlur}
                 />
-                <div title='Match case' tabIndex={0} className='search-elem match-case' onClick={this.handleCaseSensitiveOptionClicked}></div>
-                <div title='Match whole word' tabIndex={0} className='search-elem whole-word' onClick={this.handleWholeWordOptionClicked}></div>
-                <div title='Use regular expression' tabIndex={0} className='search-elem use-regexp' onClick={this.handleRegexOptionClicked}></div>
+                <div title='Match case' tabIndex={0} className={'search-elem ' + codicon('case-sensitive')} onClick={this.handleCaseSensitiveOptionClicked}></div>
+                <div title='Match whole word' tabIndex={0} className={'search-elem ' + codicon('whole-word')} onClick={this.handleWholeWordOptionClicked}></div>
+                <div title='Use regular expression' tabIndex={0} className={'search-elem ' + codicon('regex')} onClick={this.handleRegexOptionClicked}></div>
             </div>
-            <button title='Previous match' className='search-elem arrow-up' onClick={this.handlePreviousButtonClicked}></button>
-            <button title='Next match' className='search-elem arrow-down' onClick={this.handleNextButtonClicked}></button>
-            <button title='Close' className='search-elem close' onClick={this.handleHide}></button>
+            <button title='Previous match' className={'search-elem ' + codicon('arrow-up')} onClick={this.handlePreviousButtonClicked}></button>
+            <button title='Next match' className={'search-elem ' + codicon('arrow-down')} onClick={this.handleNextButtonClicked}></button>
+            <button title='Close' className={'search-elem ' + codicon('close')} onClick={this.handleHide}></button>
         </div>;
     }
 
diff --git a/packages/terminal/src/browser/style/terminal-search.css b/packages/terminal/src/browser/style/terminal-search.css
index feff3ebc14e5f..a5868a5f57f4a 100644
--- a/packages/terminal/src/browser/style/terminal-search.css
+++ b/packages/terminal/src/browser/style/terminal-search.css
@@ -47,15 +47,20 @@
     outline: none;
 }
 
-.theia-search-terminal-widget-parent .search-elem {
-    border: var(--theia-border-width) solid transparent;
-    background-position: center;
-    background-repeat: no-repeat;
-    height: 18px;
+.theia-search-terminal-widget-parent .theia-search-elem-box .search-elem.codicon {
+    height: 16px;
     width: 18px;
-    margin: 1px;
+}
+
+.theia-search-terminal-widget-parent .search-elem.codicon {
+    border: var(--theia-border-width) solid transparent;
+    height: 20px;
+    width: 20px;
     opacity: 0.7;
     outline: none;
+    color: var(--theia-input-foreground);
+    padding: 0px;
+    margin-left: 3px;
 }
 
 .theia-search-terminal-widget-parent .search-elem:hover {
@@ -71,18 +76,6 @@
     background-color: var(--theia-inputOption-activeBackground);
 }
 
-.theia-search-terminal-widget-parent .theia-search-elem-box .whole-word {
-    background-image: var(--theia-icon-whole-word);
-}
-
-.theia-search-terminal-widget-parent .theia-search-elem-box .match-case {
-    background-image: var(--theia-icon-case-sensitive);
-}
-
-.theia-search-terminal-widget-parent .theia-search-elem-box .use-regexp {
-    background-image: var(--theia-icon-regex);
-}
-
 .theia-search-terminal-widget-parent .theia-search-terminal-widget {
     margin: 2px;
     display: flex;
@@ -98,15 +91,3 @@
 .theia-search-terminal-widget-parent .theia-search-terminal-widget button:focus {
     border: var(--theia-border-width) var(--theia-focusBorder) solid;
 }
-
-.theia-search-terminal-widget-parent .theia-search-terminal-widget .search-elem.close {
-    background-image: var(--theia-icon-close);
-}
-
-.theia-search-terminal-widget-parent .theia-search-terminal-widget .search-elem.arrow-up {
-    background-image: var(--theia-icon-arrow-up);
-}
-
-.theia-search-terminal-widget-parent .theia-search-terminal-widget .search-elem.arrow-down {
-    background-image: var(--theia-icon-arrow-down);
-}
diff --git a/packages/terminal/src/browser/terminal-frontend-contribution.ts b/packages/terminal/src/browser/terminal-frontend-contribution.ts
index 725efb4d841c4..9cbd56ce87a4b 100644
--- a/packages/terminal/src/browser/terminal-frontend-contribution.ts
+++ b/packages/terminal/src/browser/terminal-frontend-contribution.ts
@@ -29,7 +29,7 @@ import {
 } from '@theia/core/lib/common';
 import {
     ApplicationShell, KeybindingContribution, KeyCode, Key,
-    KeybindingRegistry, Widget, LabelProvider, WidgetOpenerOptions, StorageService, QuickInputService
+    KeybindingRegistry, Widget, LabelProvider, WidgetOpenerOptions, StorageService, QuickInputService, codicon
 } from '@theia/core/lib/browser';
 import { TabBarToolbarContribution, TabBarToolbarRegistry } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
 import { WidgetManager } from '@theia/core/lib/browser';
@@ -414,7 +414,7 @@ export class TerminalFrontendContribution implements TerminalService, CommandCon
         toolbar.registerItem({
             id: TerminalCommands.SPLIT.id,
             command: TerminalCommands.SPLIT.id,
-            text: '$(columns)',
+            icon: codicon('split-horizontal'),
             tooltip: TerminalCommands.SPLIT.label
         });
     }
diff --git a/packages/terminal/src/browser/terminal-quick-open-service.ts b/packages/terminal/src/browser/terminal-quick-open-service.ts
index b16d494f0fdba..431f888b22e12 100644
--- a/packages/terminal/src/browser/terminal-quick-open-service.ts
+++ b/packages/terminal/src/browser/terminal-quick-open-service.ts
@@ -16,6 +16,7 @@
 
 import { inject, injectable, optional } from '@theia/core/shared/inversify';
 import {
+    codiconArray,
     QuickAccessContribution,
     QuickAccessProvider,
     QuickAccessRegistry,
@@ -60,7 +61,7 @@ export class TerminalQuickOpenService implements QuickAccessProvider {
         // Append a quick open item to create a new terminal.
         items.push({
             label: 'Open New Terminal',
-            iconClasses: ['fa fa-plus'],
+            iconClasses: codiconArray('add'),
             execute: () => this.doCreateNewTerminal()
         });
 
diff --git a/packages/terminal/src/browser/terminal-widget-impl.ts b/packages/terminal/src/browser/terminal-widget-impl.ts
index 89b051be547ba..9fe8a2ba332df 100644
--- a/packages/terminal/src/browser/terminal-widget-impl.ts
+++ b/packages/terminal/src/browser/terminal-widget-impl.ts
@@ -18,7 +18,7 @@ import { Terminal, RendererType } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
 import { inject, injectable, named, postConstruct } from '@theia/core/shared/inversify';
 import { ContributionProvider, Disposable, Event, Emitter, ILogger, DisposableCollection } from '@theia/core';
-import { Widget, Message, WebSocketConnectionProvider, StatefulWidget, isFirefox, MessageLoop, KeyCode } from '@theia/core/lib/browser';
+import { Widget, Message, WebSocketConnectionProvider, StatefulWidget, isFirefox, MessageLoop, KeyCode, codicon } from '@theia/core/lib/browser';
 import { isOSX } from '@theia/core/lib/common';
 import { WorkspaceService } from '@theia/workspace/lib/browser';
 import { ShellTerminalServerProxy, IShellTerminalPreferences } from '../common/shell-terminal-protocol';
@@ -95,7 +95,7 @@ export class TerminalWidgetImpl extends TerminalWidget implements StatefulWidget
     @postConstruct()
     protected init(): void {
         this.setTitle(this.options.title || this.TERMINAL);
-        this.title.iconClass = 'fa fa-terminal';
+        this.title.iconClass = codicon('terminal');
 
         if (this.options.kind) {
             this.terminalKind = this.options.kind;
diff --git a/packages/timeline/src/browser/timeline-contribution.ts b/packages/timeline/src/browser/timeline-contribution.ts
index 21f1d7ba73548..5145d08684c67 100644
--- a/packages/timeline/src/browser/timeline-contribution.ts
+++ b/packages/timeline/src/browser/timeline-contribution.ts
@@ -20,7 +20,8 @@ import {
     WidgetManager,
     Widget,
     ApplicationShell,
-    Navigatable
+    Navigatable,
+    codicon
 } from '@theia/core/lib/browser';
 import { EXPLORER_VIEW_CONTAINER_ID } from '@theia/navigator/lib/browser';
 import { TimelineWidget } from './timeline-widget';
@@ -50,7 +51,7 @@ export class TimelineContribution implements CommandContribution, TabBarToolbarC
         id: 'timeline-refresh-toolbar-item',
         command: 'timeline-refresh',
         tooltip: 'Refresh',
-        icon: 'fa fa-refresh'
+        icon: codicon('refresh')
     };
     registerToolbarItems(registry: TabBarToolbarRegistry): void {
         registry.registerItem(this.toolbarItem);
diff --git a/packages/typehierarchy/src/browser/tree/typehierarchy-tree-widget.tsx b/packages/typehierarchy/src/browser/tree/typehierarchy-tree-widget.tsx
index 73f1784b0d5b8..10deb35b76688 100644
--- a/packages/typehierarchy/src/browser/tree/typehierarchy-tree-widget.tsx
+++ b/packages/typehierarchy/src/browser/tree/typehierarchy-tree-widget.tsx
@@ -25,6 +25,7 @@ import { ContextMenuRenderer } from '@theia/core/lib/browser/context-menu-render
 import { TreeWidget, TreeProps } from '@theia/core/lib/browser/tree/tree-widget';
 import { TypeHierarchyTreeModel } from './typehierarchy-tree-model';
 import { TypeHierarchyTree } from './typehierarchy-tree';
+import { codicon } from '@theia/core/lib/browser';
 
 @injectable()
 export class TypeHierarchyTreeWidget extends TreeWidget {
@@ -44,7 +45,7 @@ export class TypeHierarchyTreeWidget extends TreeWidget {
         this.title.caption = TypeHierarchyTreeWidget.WIDGET_LABEL;
         this.addClass(TypeHierarchyTreeWidget.Styles.TYPE_HIERARCHY_TREE_CLASS);
         this.title.closable = true;
-        this.title.iconClass = 'fa fa-sitemap';
+        this.title.iconClass = codicon('type-hierarchy');
         this.toDispose.push(this.model.onSelectionChanged(selection => {
             const node = selection[0];
             if (node) {
diff --git a/packages/vsx-registry/src/browser/style/index.css b/packages/vsx-registry/src/browser/style/index.css
index 172ce01508e4b..ed1c895e63e0e 100644
--- a/packages/vsx-registry/src/browser/style/index.css
+++ b/packages/vsx-registry/src/browser/style/index.css
@@ -19,11 +19,6 @@
   --theia-vsx-extension-editor-icon-size: calc(var(--theia-vsx-extension-icon-size)*3);
 }
 
-.theia-vsx-extensions-icon {
-    -webkit-mask: url('extensions.svg');
-    mask: url('extensions.svg');
-}
-
 .theia-vsx-extensions {
     height: 100%;
 }
@@ -92,6 +87,10 @@
     font-size: 80%;
 }
 
+.theia-vsx-extension-content .title .stat .codicon {
+    font-size: 110%;
+}
+
 .theia-vsx-extension-content .title .stat .average-rating > i {
     color: #ff8e00;
 }
diff --git a/packages/vsx-registry/src/browser/vsx-extension-commands.ts b/packages/vsx-registry/src/browser/vsx-extension-commands.ts
index bc0ddb04c487f..50459aced711d 100644
--- a/packages/vsx-registry/src/browser/vsx-extension-commands.ts
+++ b/packages/vsx-registry/src/browser/vsx-extension-commands.ts
@@ -14,6 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
+import { codicon } from '@theia/core/lib/browser';
 import { Command } from '@theia/core/lib/common';
 
 export namespace VSXExtensionsCommands {
@@ -24,7 +25,7 @@ export namespace VSXExtensionsCommands {
         id: 'vsxExtensions.clearAll',
         category: EXTENSIONS_CATEGORY,
         label: 'Clear Search Results',
-        iconClass: 'clear-all'
+        iconClass: codicon('clear-all')
     };
     export const INSTALL_FROM_VSIX: Command & { dialogLabel: string } = {
         id: 'vsxExtensions.installFromVSIX',
diff --git a/packages/vsx-registry/src/browser/vsx-extension-editor.tsx b/packages/vsx-registry/src/browser/vsx-extension-editor.tsx
index fb903fe077a65..85c785547119f 100644
--- a/packages/vsx-registry/src/browser/vsx-extension-editor.tsx
+++ b/packages/vsx-registry/src/browser/vsx-extension-editor.tsx
@@ -16,7 +16,7 @@
 
 import * as React from '@theia/core/shared/react';
 import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
-import { ReactWidget, Message, Widget } from '@theia/core/lib/browser';
+import { ReactWidget, Message, Widget, codicon } from '@theia/core/lib/browser';
 import { VSXExtension, VSXExtensionEditorComponent } from './vsx-extension';
 import { VSXExtensionsModel } from './vsx-extensions-model';
 import { Deferred } from '@theia/core/lib/common/promise-util';
@@ -40,7 +40,7 @@ export class VSXExtensionEditor extends ReactWidget {
         this.id = VSXExtensionEditor.ID + ':' + this.extension.id;
         this.title.closable = true;
         this.updateTitle();
-        this.title.iconClass = 'fa fa-puzzle-piece';
+        this.title.iconClass = codicon('list-selection');
         this.node.tabIndex = -1;
         this.update();
         this.toDispose.push(this.model.onDidChange(() => this.update()));
diff --git a/packages/vsx-registry/src/browser/vsx-extension.tsx b/packages/vsx-registry/src/browser/vsx-extension.tsx
index 51fc0f7259ccc..d5f1113a06d6b 100644
--- a/packages/vsx-registry/src/browser/vsx-extension.tsx
+++ b/packages/vsx-registry/src/browser/vsx-extension.tsx
@@ -28,7 +28,7 @@ import { Endpoint } from '@theia/core/lib/browser/endpoint';
 import { VSXEnvironment } from '../common/vsx-environment';
 import { VSXExtensionsSearchModel } from './vsx-extensions-search-model';
 import { MenuPath } from '@theia/core/lib/common';
-import { ContextMenuRenderer } from '@theia/core/lib/browser';
+import { codicon, ContextMenuRenderer } from '@theia/core/lib/browser';
 import { VSXExtensionNamespaceAccess, VSXUser } from '@theia/ovsx-client/lib/ovsx-types';
 
 export const EXTENSIONS_CONTEXT_MENU: MenuPath = ['extensions_context_menu'];
@@ -390,8 +390,8 @@ export class VSXExtensionComponent extends AbstractVSXExtensionComponent {
                         <span className='name'>{displayName}</span> <span className='version'>{version}</span>
                     </div>
                     <div className='stat'>
-                        {!!downloadCount && <span className='download-count'><i className='fa fa-download' />{downloadCompactFormatter.format(downloadCount)}</span>}
-                        {!!averageRating && <span className='average-rating'><i className='fa fa-star' />{averageRating.toFixed(1)}</span>}
+                        {!!downloadCount && <span className='download-count'><i className={codicon('cloud-download')} />{downloadCompactFormatter.format(downloadCount)}</span>}
+                        {!!averageRating && <span className='average-rating'><i className={codicon('star-full')} />{averageRating.toFixed(1)}</span>}
                     </div>
                 </div>
                 <div className='noWrapInfo theia-vsx-extension-description'>{description}</div>
@@ -440,7 +440,7 @@ export class VSXExtensionEditorComponent extends AbstractVSXExtensionComponent {
                             {publisher}
                         </span>
                         {!!downloadCount && <span className='download-count' onClick={this.openExtension}>
-                            <i className="fa fa-download" />{downloadFormatter.format(downloadCount)}</span>}
+                            <i className={codicon('cloud-download')} />{downloadFormatter.format(downloadCount)}</span>}
                         {averageRating !== undefined && <span className='average-rating' onClick={this.openAverageRating}>{this.renderStars()}</span>}
                         {repository && <span className='repository' onClick={this.openRepository}>Repository</span>}
                         {license && <span className='license' onClick={this.openLicense}>{license}</span>}
@@ -481,17 +481,17 @@ export class VSXExtensionEditorComponent extends AbstractVSXExtensionComponent {
             icon = 'shield';
             tooltip = `Only verified owners can publish to "${publisher}" namespace.` + tooltip;
         }
-        return <i className={`fa fa-${icon} namespace-access`} title={tooltip} onClick={this.openPublishedBy} />;
+        return <i className={`${codicon(icon)} namespace-access`} title={tooltip} onClick={this.openPublishedBy} />;
     }
 
     protected renderStars(): React.ReactNode {
         const rating = this.props.extension.averageRating || 0;
 
         const renderStarAt = (position: number) => position <= rating ?
-            <i className='fa fa-star' /> :
+            <i className={codicon('star-full')} /> :
             position > rating && position - rating < 1 ?
-                <i className='fa fa-star-half-o' /> :
-                <i className='fa fa-star-o' />;
+                <i className={codicon('star-half')} /> :
+                <i className={codicon('star-empty')} />;
         return <React.Fragment>
             {renderStarAt(1)}{renderStarAt(2)}{renderStarAt(3)}{renderStarAt(4)}{renderStarAt(5)}
         </React.Fragment>;
diff --git a/packages/vsx-registry/src/browser/vsx-extensions-view-container.ts b/packages/vsx-registry/src/browser/vsx-extensions-view-container.ts
index 92e1f5710fc90..bab463fd8313d 100644
--- a/packages/vsx-registry/src/browser/vsx-extensions-view-container.ts
+++ b/packages/vsx-registry/src/browser/vsx-extensions-view-container.ts
@@ -15,7 +15,7 @@
  *******************************************************************************‚*/
 
 import { injectable, inject, postConstruct } from '@theia/core/shared/inversify';
-import { ViewContainer, PanelLayout, ViewContainerPart, Message } from '@theia/core/lib/browser';
+import { ViewContainer, PanelLayout, ViewContainerPart, Message, codicon } from '@theia/core/lib/browser';
 import { VSXExtensionsSearchBar } from './vsx-extensions-search-bar';
 import { VSXExtensionsModel } from './vsx-extensions-model';
 import { VSXSearchMode } from './vsx-extensions-search-model';
@@ -43,7 +43,7 @@ export class VSXExtensionsViewContainer extends ViewContainer {
 
         this.setTitleOptions({
             label: VSXExtensionsViewContainer.LABEL,
-            iconClass: 'theia-vsx-extensions-icon',
+            iconClass: codicon('extensions'),
             closeable: true
         });
     }
diff --git a/packages/workspace/src/browser/workspace-input-dialog.ts b/packages/workspace/src/browser/workspace-input-dialog.ts
index 345981bfc85f9..a789c9104236e 100644
--- a/packages/workspace/src/browser/workspace-input-dialog.ts
+++ b/packages/workspace/src/browser/workspace-input-dialog.ts
@@ -16,7 +16,7 @@
 
 import { inject, injectable } from '@theia/core/shared/inversify';
 import URI from '@theia/core/lib/common/uri';
-import { SingleTextInputDialog, SingleTextInputDialogProps, LabelProvider } from '@theia/core/lib/browser';
+import { SingleTextInputDialog, SingleTextInputDialogProps, LabelProvider, codiconArray } from '@theia/core/lib/browser';
 
 @injectable()
 export class WorkspaceInputDialogProps extends SingleTextInputDialogProps {
@@ -47,7 +47,7 @@ export class WorkspaceInputDialog extends SingleTextInputDialog {
         const element = document.createElement('div');
         // Create the `folder` icon.
         const icon = document.createElement('i');
-        icon.classList.add('fa', 'fa-folder');
+        icon.classList.add(...codiconArray('folder'));
         icon.style.marginRight = '0.5em';
         element.appendChild(icon);
         element.appendChild(document.createTextNode(label));