From 0c66605ff3957624bc9b8536ea273f576463380f Mon Sep 17 00:00:00 2001
From: Stas Vilchik <stas.vilchik@sonarsource.com>
Date: Wed, 1 Nov 2017 20:13:17 +0100
Subject: [PATCH] SONAR-10023 Clear actions must be consistent

---
 .../nav/component/ComponentNavBranch.tsx      |   2 +-
 .../ComponentNavBranch-test.tsx.snap          |   2 +-
 .../__tests__/SettingsEditionsNotif-test.tsx  |   2 +-
 .../src/main/js/app/styles/init/forms.css     |  15 +-
 .../src/main/js/app/styles/init/icons.css     |  24 --
 server/sonar-web/src/main/js/app/theme.js     |   4 +
 .../js/apps/account/notifications/Projects.js |   2 +-
 .../apps/background-tasks/components/Stats.js |  18 +-
 .../background-tasks/components/Workers.tsx   |  29 ++-
 .../__snapshots__/Workers-test.tsx.snap       | 176 +++++++-------
 .../components/MeasureHeader.js               |   2 +-
 .../__snapshots__/MeasureHeader-test.js.snap  |   4 +-
 .../overview/main/BugsAndVulnerabilities.js   |   4 +-
 .../src/main/js/apps/overview/main/enhance.js |   5 +-
 .../components/HistoryButtonLink.tsx          |   2 +-
 .../components/MeasuresButtonLink.tsx         |   2 +-
 .../HistoryButtonLink-test.tsx.snap           |   2 +-
 .../MeasuresButtonLink-test.tsx.snap          |   2 +-
 .../apps/projectActivity/components/Event.js  |  17 +-
 .../components/GraphsLegendItem.tsx           |  20 +-
 .../components/ProjectActivityAnalysis.js     |   4 +-
 .../GraphsLegendItem-test.tsx.snap            |  34 ++-
 .../components/projectActivity.css            |  15 +-
 .../components/LongBranchesPattern.tsx        |  13 +-
 .../__tests__/LongBranchesPattern-test.tsx    |   4 +-
 .../LongBranchesPattern-test.tsx.snap         |   9 +-
 .../components/ProjectsSortingSelect.tsx      |  19 +-
 .../__tests__/ProjectsSortingSelect-test.tsx  |   3 +-
 .../ProjectsSortingSelect-test.tsx.snap       |  30 +--
 .../js/apps/projectsManagement/Header.tsx     |  21 +-
 .../__snapshots__/Header-test.tsx.snap        |  25 +-
 .../__tests__/ThresholdInput-test.js          |   7 +-
 .../details/ProfilePermissionsGroup.tsx       |  16 +-
 .../details/ProfilePermissionsUser.tsx        |  16 +-
 .../ProfilePermissionsGroup-test.tsx          |   4 +-
 .../__tests__/ProfilePermissionsUser-test.tsx |   4 +-
 .../ProfilePermissionsGroup-test.tsx.snap     |   9 +-
 .../ProfilePermissionsUser-test.tsx.snap      |   9 +-
 .../components/inputs/MultiValueInput.js      |  16 +-
 .../components/inputs/PropertySetInput.js     |  18 +-
 .../js/apps/system/components/PageActions.tsx |  23 +-
 .../__snapshots__/PageActions-test.tsx.snap   |  54 +++--
 .../components/info-items/SysInfoItem.tsx     |   4 +-
 .../info-items/__tests__/SysInfoItem-test.tsx |   4 +-
 .../__snapshots__/SysInfoItem-test.tsx.snap   |   4 +-
 .../onboarding/NewOrganizationForm.js         |  13 +-
 .../tutorials/onboarding/NewProjectForm.js    |  13 +-
 .../tutorials/onboarding/ProjectKeyStep.js    | 156 -------------
 .../js/apps/tutorials/onboarding/TokenStep.js |   9 +-
 .../__tests__/NewOrganizationForm-test.js     |   5 +-
 .../__tests__/NewProjectForm-test.js          |   5 +-
 .../__tests__/ProjectKeyStep-test.js          |  63 -----
 .../onboarding/__tests__/TokenStep-test.js    |   5 +-
 .../NewOrganizationForm-test.js.snap          |  90 ++++----
 .../__snapshots__/NewProjectForm-test.js.snap |  90 ++++----
 .../__snapshots__/ProjectKeyStep-test.js.snap | 215 ------------------
 .../__snapshots__/TokenStep-test.js.snap      |  70 +++---
 .../users/components/UsersAppContainer.js     |   2 +
 .../js/apps/users/templates/users-form.hbs    |  16 +-
 .../components/controls/ActionsDropdown.tsx   |   4 +-
 .../main/js/components/controls/DateInput.tsx |  17 +-
 .../main/js/components/controls/Select.tsx    |  17 +-
 .../js/components/controls/react-select.css   |   4 +-
 .../icons-components/AlertErrorIcon.tsx       |  18 +-
 .../icons-components/AlertWarnIcon.tsx        |  19 +-
 .../icons-components/BranchIcon.tsx           |   6 +-
 .../icons-components/BubblesIcon.tsx          |  18 +-
 .../components/icons-components/BugIcon.tsx   |  19 +-
 ...ChartLegendIcon.js => ChartLegendIcon.tsx} |  25 +-
 .../components/icons-components/CheckIcon.tsx |  18 +-
 .../{CloseIcon.tsx => ClearIcon.tsx}          |  22 +-
 .../icons-components/CodeSmellIcon.tsx        |  17 +-
 .../icons-components/DeleteIcon.tsx           |  17 +-
 .../components/icons-components/EditIcon.tsx  |  20 +-
 .../components/icons-components/GroupIcon.tsx |  21 +-
 .../components/icons-components/HelpIcon.tsx  |  20 +-
 .../icons-components/HistoryIcon.tsx          |  18 +-
 .../components/icons-components/LinkIcon.tsx  |  26 +--
 .../{ListIcon.js => ListIcon.tsx}             |  21 +-
 .../icons-components/LongLivingBranchIcon.tsx |  24 +-
 .../icons-components/OpenCloseIcon.tsx        |  29 ++-
 ...ganizationIcon.js => OrganizationIcon.tsx} |  21 +-
 .../icons-components/PendingIcon.tsx          |  25 +-
 ...ojectEventIcon.js => ProjectEventIcon.tsx} |  21 +-
 .../icons-components/PullRequestIcon.tsx      |  20 +-
 .../icons-components/SettingsIcon.tsx         |  24 +-
 .../ShortLivingBranchIcon.tsx                 |  24 +-
 .../{SortAscIcon.js => SortAscIcon.tsx}       |  21 +-
 .../{SortDescIcon.js => SortDescIcon.tsx}     |  21 +-
 .../{TreeIcon.js => TreeIcon.tsx}             |  19 +-
 .../{TreemapIcon.js => TreemapIcon.tsx}       |  20 +-
 .../icons-components/VulnerabilityIcon.tsx    |  23 +-
 .../icons-components/__mocks__/ClearIcon.tsx  |  22 ++
 .../js/components/icons-components/icons.ts   |  93 +++-----
 .../js/components/icons-components/types.ts   |  24 ++
 .../issue/components/IssueCommentLine.js      |  20 +-
 .../__tests__/IssueCommentLine-test.js        |   5 +-
 .../IssueCommentLine-test.js.snap             |  32 +--
 .../src/main/js/components/nav/NavBar.tsx     |   3 +-
 .../main/js/components/nav/NavBarNotif.tsx    |  39 ++--
 .../ChangeIcon.tsx => ui/buttons.css}         |  52 +++--
 .../src/main/js/components/ui/buttons.tsx     |  79 +++++++
 .../pageobjects/projects/ProjectsPage.java    |   2 +-
 .../tests/projectSearch/ProjectsPageTest.java |   6 +-
 104 files changed, 1018 insertions(+), 1449 deletions(-)
 delete mode 100644 server/sonar-web/src/main/js/apps/tutorials/onboarding/ProjectKeyStep.js
 delete mode 100644 server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/ProjectKeyStep-test.js
 delete mode 100644 server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/ProjectKeyStep-test.js.snap
 rename server/sonar-web/src/main/js/components/icons-components/{ChartLegendIcon.js => ChartLegendIcon.tsx} (78%)
 rename server/sonar-web/src/main/js/components/icons-components/{CloseIcon.tsx => ClearIcon.tsx} (57%)
 rename server/sonar-web/src/main/js/components/icons-components/{ListIcon.js => ListIcon.tsx} (84%)
 rename server/sonar-web/src/main/js/components/icons-components/{OrganizationIcon.js => OrganizationIcon.tsx} (83%)
 rename server/sonar-web/src/main/js/components/icons-components/{ProjectEventIcon.js => ProjectEventIcon.tsx} (84%)
 rename server/sonar-web/src/main/js/components/icons-components/{SortAscIcon.js => SortAscIcon.tsx} (86%)
 rename server/sonar-web/src/main/js/components/icons-components/{SortDescIcon.js => SortDescIcon.tsx} (86%)
 rename server/sonar-web/src/main/js/components/icons-components/{TreeIcon.js => TreeIcon.tsx} (84%)
 rename server/sonar-web/src/main/js/components/icons-components/{TreemapIcon.js => TreemapIcon.tsx} (75%)
 create mode 100644 server/sonar-web/src/main/js/components/icons-components/__mocks__/ClearIcon.tsx
 create mode 100644 server/sonar-web/src/main/js/components/icons-components/types.ts
 rename server/sonar-web/src/main/js/components/{icons-components/ChangeIcon.tsx => ui/buttons.css} (51%)
 create mode 100644 server/sonar-web/src/main/js/components/ui/buttons.tsx

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranch.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranch.tsx
index 8372ba11539..c621bcf4170 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranch.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranch.tsx
@@ -196,7 +196,7 @@ export default class ComponentNavBranch extends React.PureComponent<Props, State
     if (!this.context.branchesEnabled) {
       return (
         <div className="navbar-context-branches">
-          <BranchIcon branch={currentBranch} className="little-spacer-right" color={theme.gray80} />
+          <BranchIcon branch={currentBranch} className="little-spacer-right" fill={theme.gray80} />
           <span className="note">{currentBranch.name}</span>
           {this.renderNoBranchSupportPopup()}
         </div>
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranch-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranch-test.tsx.snap
index baa03cf6636..3571893cc96 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranch-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranch-test.tsx.snap
@@ -48,7 +48,7 @@ exports[`renders no branch support popup 1`] = `
       }
     }
     className="little-spacer-right"
-    color="#cdcdcd"
+    fill="#cdcdcd"
   />
   <span
     className="note"
diff --git a/server/sonar-web/src/main/js/app/components/nav/settings/__tests__/SettingsEditionsNotif-test.tsx b/server/sonar-web/src/main/js/app/components/nav/settings/__tests__/SettingsEditionsNotif-test.tsx
index 0d73fbd8b63..02ca4e112ec 100644
--- a/server/sonar-web/src/main/js/app/components/nav/settings/__tests__/SettingsEditionsNotif-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/settings/__tests__/SettingsEditionsNotif-test.tsx
@@ -96,7 +96,7 @@ it('should allow to dismiss install errors', async () => {
       setEditionStatus={setEditionStatus}
     />
   );
-  click(wrapper.find('a'));
+  click(wrapper.find('button'));
   expect(dismissMsg).toHaveBeenCalled();
   await new Promise(setImmediate);
   expect(setEditionStatus).toHaveBeenCalledWith({
diff --git a/server/sonar-web/src/main/js/app/styles/init/forms.css b/server/sonar-web/src/main/js/app/styles/init/forms.css
index b539c0ec578..a9a610f6632 100644
--- a/server/sonar-web/src/main/js/app/styles/init/forms.css
+++ b/server/sonar-web/src/main/js/app/styles/init/forms.css
@@ -292,24 +292,17 @@ input[type='submit'].button-grey.button-active {
   cursor: default;
 }
 
-.button-icon {
-  border: none;
-  color: var(--secondFontColor);
-}
-
 .button-small {
-  height: 20px;
+  height: var(--smallControlHeight);
   line-height: 18px;
+  padding: 0 6px;
+  font-size: 11px;
 }
 
 .button-small > svg {
   margin-top: 2px;
 }
 
-.button-compact {
-  padding: 0 6px;
-}
-
 .button-group {
   display: inline-block;
   vertical-align: middle;
@@ -395,7 +388,7 @@ textarea.input-super-large {
   min-width: 300px;
 }
 
-.input-clear {
+.input-ghost {
   padding: 0 !important;
   border: none !important;
   background-color: transparent !important;
diff --git a/server/sonar-web/src/main/js/app/styles/init/icons.css b/server/sonar-web/src/main/js/app/styles/init/icons.css
index 7fdffc1f0be..82baae3dac5 100644
--- a/server/sonar-web/src/main/js/app/styles/init/icons.css
+++ b/server/sonar-web/src/main/js/app/styles/init/icons.css
@@ -789,30 +789,6 @@ a:hover > .icon-radio {
   background-repeat: no-repeat;
 }
 
-.icon-pending {
-  position: relative;
-  top: -1px;
-}
-
-.icon-pending path {
-  fill: var(--secondFontColor);
-  animation: animation-pending 2s linear infinite;
-}
-
-@keyframes animation-pending {
-  0% {
-    fill: var(--secondFontColor);
-  }
-
-  50% {
-    fill: #aaa;
-  }
-
-  100% {
-    fill: var(--secondFontColor);
-  }
-}
-
 /*
  * Spinner
  */
diff --git a/server/sonar-web/src/main/js/app/theme.js b/server/sonar-web/src/main/js/app/theme.js
index df4935a6b16..024f34c7d80 100644
--- a/server/sonar-web/src/main/js/app/theme.js
+++ b/server/sonar-web/src/main/js/app/theme.js
@@ -35,6 +35,8 @@ module.exports = {
   gray94: '#efefef',
   gray80: '#cdcdcd',
   gray71: '#b4b4b4',
+  gray67: '#aaa',
+  gray60: '#999',
 
   barBackgroundColor: '#f3f3f3',
   barBorderColor: '#e6e6e6',
@@ -52,6 +54,8 @@ module.exports = {
   bigFontSize: '16px',
 
   controlHeight: '24px',
+  smallControlHeight: '20px',
+  tinyControlHeight: '16px',
 
   // different
   defaultShadow: '0 6px 12px rgba(0, 0, 0, 0.175)',
diff --git a/server/sonar-web/src/main/js/apps/account/notifications/Projects.js b/server/sonar-web/src/main/js/apps/account/notifications/Projects.js
index c55e6c8aaa0..14a7f74020c 100644
--- a/server/sonar-web/src/main/js/apps/account/notifications/Projects.js
+++ b/server/sonar-web/src/main/js/apps/account/notifications/Projects.js
@@ -21,7 +21,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { differenceBy } from 'lodash';
 import ProjectNotifications from './ProjectNotifications';
-import Select, { AsyncSelect } from '../../../components/controls/Select';
+import { AsyncSelect } from '../../../components/controls/Select';
 import Organization from '../../../components/shared/Organization';
 import { translate } from '../../../helpers/l10n';
 import { getSuggestions } from '../../../api/components';
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/Stats.js b/server/sonar-web/src/main/js/apps/background-tasks/components/Stats.js
index 8c239e9d812..7d10b92b669 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/components/Stats.js
+++ b/server/sonar-web/src/main/js/apps/background-tasks/components/Stats.js
@@ -20,7 +20,7 @@
 /* @flow */
 import React from 'react';
 import Tooltip from '../../../components/controls/Tooltip';
-import DeleteIcon from '../../../components/icons-components/DeleteIcon';
+import { DeleteButton } from '../../../components/ui/buttons';
 import { translate } from '../../../helpers/l10n';
 
 /*::
@@ -41,12 +41,6 @@ export default class Stats extends React.PureComponent {
   /*:: props: Props; */
   /*:: state: State; */
 
-  handleCancelAllPending = (event /*: Object */) => {
-    event.preventDefault();
-    event.currentTarget.blur();
-    this.props.onCancelAllPending();
-  };
-
   handleShowFailing = (event /*: Object */) => {
     event.preventDefault();
     event.currentTarget.blur();
@@ -65,12 +59,10 @@ export default class Stats extends React.PureComponent {
           {translate('background_tasks.pending')}
           {this.props.isSystemAdmin && (
             <Tooltip overlay={translate('background_tasks.cancel_all_tasks')}>
-              <a
-                className="js-cancel-pending spacer-left link-no-underline"
-                href="#"
-                onClick={this.handleCancelAllPending}>
-                <DeleteIcon className="text-text-top" />
-              </a>
+              <DeleteButton
+                className="js-cancel-pending spacer-left"
+                onClick={this.props.onCancelAllPending}
+              />
             </Tooltip>
           )}
         </span>
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/Workers.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/Workers.tsx
index a5eef35810f..e77351cfaf7 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/components/Workers.tsx
+++ b/server/sonar-web/src/main/js/apps/background-tasks/components/Workers.tsx
@@ -26,7 +26,7 @@ import { getWorkers } from '../../../api/ce';
 import { translate } from '../../../helpers/l10n';
 import HelpIcon from '../../../components/icons-components/HelpIcon';
 import BubblePopupHelper from '../../../components/common/BubblePopupHelper';
-import EditIcon from '../../../components/icons-components/EditIcon';
+import { EditButton } from '../../../components/ui/buttons';
 
 interface State {
   canSetWorkerCount: boolean;
@@ -80,8 +80,7 @@ export default class Workers extends React.PureComponent<{}, State> {
       ? this.setState({ formOpen: false, workerCount: newWorkerCount })
       : this.setState({ formOpen: false });
 
-  handleChangeClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
-    event.preventDefault();
+  handleChangeClick = () => {
     this.setState({ formOpen: true });
   };
 
@@ -111,23 +110,23 @@ export default class Workers extends React.PureComponent<{}, State> {
             </Tooltip>
           )}
 
-        {translate('background_tasks.number_of_workers')}
+        <span className="text-middle">
+          {translate('background_tasks.number_of_workers')}
 
-        {loading ? (
-          <i className="spinner little-spacer-left" />
-        ) : (
-          <strong className="little-spacer-left">{workerCount}</strong>
-        )}
+          {loading ? (
+            <i className="spinner little-spacer-left" />
+          ) : (
+            <strong className="little-spacer-left">{workerCount}</strong>
+          )}
+        </span>
 
         {!loading &&
           canSetWorkerCount && (
             <Tooltip overlay={translate('background_tasks.change_number_of_workers')}>
-              <a
-                className="js-edit link-no-underline spacer-left"
-                href="#"
-                onClick={this.handleChangeClick}>
-                <EditIcon className="text-text-top" />
-              </a>
+              <EditButton
+                className="js-edit button-small spacer-left"
+                onClick={this.handleChangeClick}
+              />
             </Tooltip>
           )}
 
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/Workers-test.tsx.snap b/server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/Workers-test.tsx.snap
index 73abbbf04b4..3aa130c12ac 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/Workers-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/Workers-test.tsx.snap
@@ -2,50 +2,48 @@
 
 exports[`opens form 1`] = `
 <div>
-  background_tasks.number_of_workers
-  <strong
-    className="little-spacer-left"
+  <span
+    className="text-middle"
   >
-    1
-  </strong>
+    background_tasks.number_of_workers
+    <strong
+      className="little-spacer-left"
+    >
+      1
+    </strong>
+  </span>
   <Tooltip
     overlay="background_tasks.change_number_of_workers"
     placement="bottom"
   >
-    <a
-      className="js-edit link-no-underline spacer-left"
-      href="#"
+    <EditButton
+      className="js-edit button-small spacer-left"
       onClick={[Function]}
-    >
-      <EditIcon
-        className="text-text-top"
-      />
-    </a>
+    />
   </Tooltip>
 </div>
 `;
 
 exports[`opens form 2`] = `
 <div>
-  background_tasks.number_of_workers
-  <strong
-    className="little-spacer-left"
+  <span
+    className="text-middle"
   >
-    1
-  </strong>
+    background_tasks.number_of_workers
+    <strong
+      className="little-spacer-left"
+    >
+      1
+    </strong>
+  </span>
   <Tooltip
     overlay="background_tasks.change_number_of_workers"
     placement="bottom"
   >
-    <a
-      className="js-edit link-no-underline spacer-left"
-      href="#"
+    <EditButton
+      className="js-edit button-small spacer-left"
       onClick={[Function]}
-    >
-      <EditIcon
-        className="text-text-top"
-      />
-    </a>
+    />
   </Tooltip>
   <WorkersForm
     onClose={[Function]}
@@ -56,34 +54,37 @@ exports[`opens form 2`] = `
 
 exports[`renders 1`] = `
 <div>
-  background_tasks.number_of_workers
-  <i
-    className="spinner little-spacer-left"
-  />
+  <span
+    className="text-middle"
+  >
+    background_tasks.number_of_workers
+    <i
+      className="spinner little-spacer-left"
+    />
+  </span>
 </div>
 `;
 
 exports[`renders 2`] = `
 <div>
-  background_tasks.number_of_workers
-  <strong
-    className="little-spacer-left"
+  <span
+    className="text-middle"
   >
-    1
-  </strong>
+    background_tasks.number_of_workers
+    <strong
+      className="little-spacer-left"
+    >
+      1
+    </strong>
+  </span>
   <Tooltip
     overlay="background_tasks.change_number_of_workers"
     placement="bottom"
   >
-    <a
-      className="js-edit link-no-underline spacer-left"
-      href="#"
+    <EditButton
+      className="js-edit button-small spacer-left"
       onClick={[Function]}
-    >
-      <EditIcon
-        className="text-text-top"
-      />
-    </a>
+    />
   </Tooltip>
 </div>
 `;
@@ -98,25 +99,24 @@ exports[`renders 3`] = `
       className="icon-alert-warn little-spacer-right bt-workers-warning-icon"
     />
   </Tooltip>
-  background_tasks.number_of_workers
-  <strong
-    className="little-spacer-left"
+  <span
+    className="text-middle"
   >
-    2
-  </strong>
+    background_tasks.number_of_workers
+    <strong
+      className="little-spacer-left"
+    >
+      2
+    </strong>
+  </span>
   <Tooltip
     overlay="background_tasks.change_number_of_workers"
     placement="bottom"
   >
-    <a
-      className="js-edit link-no-underline spacer-left"
-      href="#"
+    <EditButton
+      className="js-edit button-small spacer-left"
       onClick={[Function]}
-    >
-      <EditIcon
-        className="text-text-top"
-      />
-    </a>
+    />
   </Tooltip>
 </div>
 `;
@@ -131,12 +131,16 @@ exports[`renders 4`] = `
       className="icon-alert-warn little-spacer-right bt-workers-warning-icon"
     />
   </Tooltip>
-  background_tasks.number_of_workers
-  <strong
-    className="little-spacer-left"
+  <span
+    className="text-middle"
   >
-    2
-  </strong>
+    background_tasks.number_of_workers
+    <strong
+      className="little-spacer-left"
+    >
+      2
+    </strong>
+  </span>
   <span
     className="spacer-left"
   >
@@ -162,25 +166,24 @@ exports[`renders 4`] = `
 
 exports[`updates worker count 1`] = `
 <div>
-  background_tasks.number_of_workers
-  <strong
-    className="little-spacer-left"
+  <span
+    className="text-middle"
   >
-    1
-  </strong>
+    background_tasks.number_of_workers
+    <strong
+      className="little-spacer-left"
+    >
+      1
+    </strong>
+  </span>
   <Tooltip
     overlay="background_tasks.change_number_of_workers"
     placement="bottom"
   >
-    <a
-      className="js-edit link-no-underline spacer-left"
-      href="#"
+    <EditButton
+      className="js-edit button-small spacer-left"
       onClick={[Function]}
-    >
-      <EditIcon
-        className="text-text-top"
-      />
-    </a>
+    />
   </Tooltip>
   <WorkersForm
     onClose={[Function]}
@@ -199,25 +202,24 @@ exports[`updates worker count 2`] = `
       className="icon-alert-warn little-spacer-right bt-workers-warning-icon"
     />
   </Tooltip>
-  background_tasks.number_of_workers
-  <strong
-    className="little-spacer-left"
+  <span
+    className="text-middle"
   >
-    7
-  </strong>
+    background_tasks.number_of_workers
+    <strong
+      className="little-spacer-left"
+    >
+      7
+    </strong>
+  </span>
   <Tooltip
     overlay="background_tasks.change_number_of_workers"
     placement="bottom"
   >
-    <a
-      className="js-edit link-no-underline spacer-left"
-      href="#"
+    <EditButton
+      className="js-edit button-small spacer-left"
       onClick={[Function]}
-    >
-      <EditIcon
-        className="text-text-top"
-      />
-    </a>
+    />
   </Tooltip>
 </div>
 `;
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureHeader.js b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureHeader.js
index bbbded8e6c1..97457c84d76 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureHeader.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureHeader.js
@@ -66,7 +66,7 @@ export default function MeasureHeader(props /*: Props*/) {
               placement="right"
               overlay={translate('component_measures.show_metric_history')}>
               <Link
-                className="js-show-history spacer-left button button-small button-compact"
+                className="js-show-history spacer-left button button-small"
                 to={getMeasureHistoryUrl(component.key, metric.key, branch)}>
                 <HistoryIcon />
               </Link>
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/MeasureHeader-test.js.snap b/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/MeasureHeader-test.js.snap
index ec3b0d5395c..e58ba900cd7 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/MeasureHeader-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/MeasureHeader-test.js.snap
@@ -100,7 +100,7 @@ exports[`should render correctly 1`] = `
         placement="right"
       >
         <Link
-          className="js-show-history spacer-left button button-small button-compact"
+          className="js-show-history spacer-left button button-small"
           onlyActiveOnIndex={false}
           style={Object {}}
           to={
@@ -219,7 +219,7 @@ exports[`should render correctly for leak 1`] = `
 
 exports[`should render with branch 1`] = `
 <Link
-  className="js-show-history spacer-left button button-small button-compact"
+  className="js-show-history spacer-left button button-small"
   onlyActiveOnIndex={false}
   style={Object {}}
   to={
diff --git a/server/sonar-web/src/main/js/apps/overview/main/BugsAndVulnerabilities.js b/server/sonar-web/src/main/js/apps/overview/main/BugsAndVulnerabilities.js
index 77d13e6fc5e..a7716341fa1 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/BugsAndVulnerabilities.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/BugsAndVulnerabilities.js
@@ -38,13 +38,13 @@ class BugsAndVulnerabilities extends React.PureComponent {
         <div className="overview-title">
           <span>{translate('metric.bugs.name')}</span>
           <Link
-            className="button button-small button-compact spacer-left text-text-bottom"
+            className="button button-small spacer-left text-text-bottom"
             to={getComponentDrilldownUrl(component.key, 'Reliability', branch)}>
             <BubblesIcon size={14} />
           </Link>
           <span className="big-spacer-left">{translate('metric.vulnerabilities.name')}</span>
           <Link
-            className="button button-small button-compact spacer-left text-text-bottom"
+            className="button button-small spacer-left text-text-bottom"
             to={getComponentDrilldownUrl(component.key, 'Security', branch)}>
             <BubblesIcon size={14} />
           </Link>
diff --git a/server/sonar-web/src/main/js/apps/overview/main/enhance.js b/server/sonar-web/src/main/js/apps/overview/main/enhance.js
index 15104554cc6..0e5e31983a6 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/enhance.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/enhance.js
@@ -65,7 +65,7 @@ export default function enhance(ComposedComponent) {
           <div className="overview-title">
             <span>{label}</span>
             <Link
-              className="button button-small button-compact spacer-left text-text-bottom"
+              className="button button-small spacer-left text-text-bottom"
               to={getComponentDrilldownUrl(component.key, domain, branch)}>
               <BubblesIcon size={14} />
             </Link>
@@ -170,8 +170,7 @@ export default function enhance(ComposedComponent) {
     };
 
     renderHistoryLink = metricKey => {
-      const linkClass =
-        'button button-small button-compact spacer-left overview-domain-measure-history-link';
+      const linkClass = 'button button-small spacer-left overview-domain-measure-history-link';
       return (
         <Link
           className={linkClass}
diff --git a/server/sonar-web/src/main/js/apps/portfolio/components/HistoryButtonLink.tsx b/server/sonar-web/src/main/js/apps/portfolio/components/HistoryButtonLink.tsx
index fbf281d704d..869fb82f38b 100644
--- a/server/sonar-web/src/main/js/apps/portfolio/components/HistoryButtonLink.tsx
+++ b/server/sonar-web/src/main/js/apps/portfolio/components/HistoryButtonLink.tsx
@@ -30,7 +30,7 @@ interface Props {
 export default function HistoryButtonLink({ component, metric }: Props) {
   return (
     <Link
-      className="button button-small button-compact spacer-left text-text-bottom"
+      className="button button-small spacer-left text-text-bottom"
       to={getMeasureHistoryUrl(component, metric)}>
       <HistoryIcon size={14} />
     </Link>
diff --git a/server/sonar-web/src/main/js/apps/portfolio/components/MeasuresButtonLink.tsx b/server/sonar-web/src/main/js/apps/portfolio/components/MeasuresButtonLink.tsx
index a4fc94fcf77..951cb0d0f8d 100644
--- a/server/sonar-web/src/main/js/apps/portfolio/components/MeasuresButtonLink.tsx
+++ b/server/sonar-web/src/main/js/apps/portfolio/components/MeasuresButtonLink.tsx
@@ -30,7 +30,7 @@ interface Props {
 export default function MeasuresButtonLink({ component, metric }: Props) {
   return (
     <Link
-      className="button button-small button-compact spacer-left text-text-bottom"
+      className="button button-small spacer-left text-text-bottom"
       to={getComponentDrilldownUrl(component, metric)}>
       <BubblesIcon size={14} />
     </Link>
diff --git a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/HistoryButtonLink-test.tsx.snap b/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/HistoryButtonLink-test.tsx.snap
index d64b7c80c4e..e62b2d558c6 100644
--- a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/HistoryButtonLink-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/HistoryButtonLink-test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders 1`] = `
 <Link
-  className="button button-small button-compact spacer-left text-text-bottom"
+  className="button button-small spacer-left text-text-bottom"
   onlyActiveOnIndex={false}
   style={Object {}}
   to={
diff --git a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/MeasuresButtonLink-test.tsx.snap b/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/MeasuresButtonLink-test.tsx.snap
index 5b7f1c4bb23..a97849bb45e 100644
--- a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/MeasuresButtonLink-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/MeasuresButtonLink-test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders 1`] = `
 <Link
-  className="button button-small button-compact spacer-left text-text-bottom"
+  className="button button-small spacer-left text-text-bottom"
   onlyActiveOnIndex={false}
   style={Object {}}
   to={
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/Event.js b/server/sonar-web/src/main/js/apps/projectActivity/components/Event.js
index cf63eb85c13..8cec8967717 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/Event.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/Event.js
@@ -22,8 +22,7 @@ import React from 'react';
 import EventInner from './EventInner';
 import ChangeEventForm from './forms/ChangeEventForm';
 import RemoveEventForm from './forms/RemoveEventForm';
-import DeleteIcon from '../../../components/icons-components/DeleteIcon';
-import ChangeIcon from '../../../components/icons-components/ChangeIcon';
+import { DeleteButton, EditButton } from '../../../components/ui/buttons';
 /*:: import type { Event as EventType } from '../types'; */
 
 /*::
@@ -60,8 +59,7 @@ export default class Event extends React.PureComponent {
     this.mounted = false;
   }
 
-  startChanging = (e /*: MouseEvent */) => {
-    e.stopPropagation();
+  startChanging = () => {
     this.setState({ changing: true });
   };
 
@@ -71,8 +69,7 @@ export default class Event extends React.PureComponent {
     }
   };
 
-  startDeleting = (e /*: MouseEvent */) => {
-    e.stopPropagation();
+  startDeleting = () => {
     this.setState({ deleting: true });
   };
 
@@ -97,14 +94,10 @@ export default class Event extends React.PureComponent {
         {showActions && (
           <div className="project-activity-event-actions spacer-left">
             {canChange && (
-              <button className="js-change-event button-clean" onClick={this.startChanging}>
-                <ChangeIcon />
-              </button>
+              <EditButton className="js-change-event button-small" onClick={this.startChanging} />
             )}
             {canDelete && (
-              <button className="js-delete-event button-clean" onClick={this.startDeleting}>
-                <DeleteIcon />
-              </button>
+              <DeleteButton className="js-delete-event button-small" onClick={this.startDeleting} />
             )}
           </div>
         )}
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsLegendItem.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsLegendItem.tsx
index a2c10331cd4..862239270d7 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsLegendItem.tsx
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsLegendItem.tsx
@@ -19,9 +19,11 @@
  */
 import * as React from 'react';
 import * as classNames from 'classnames';
+import * as theme from '../../../app/theme';
 import AlertWarnIcon from '../../../components/icons-components/AlertWarnIcon';
 import ChartLegendIcon from '../../../components/icons-components/ChartLegendIcon';
-import CloseIcon from '../../../components/icons-components/CloseIcon';
+import { ButtonIcon } from '../../../components/ui/buttons';
+import ClearIcon from '../../../components/icons-components/ClearIcon';
 
 interface Props {
   className?: string;
@@ -33,8 +35,7 @@ interface Props {
 }
 
 export default class GraphsLegendItem extends React.PureComponent<Props> {
-  handleClick = (e: React.MouseEvent<HTMLElement>) => {
-    e.preventDefault();
+  handleClick = () => {
     if (this.props.removeMetric) {
       this.props.removeMetric(this.props.metric);
     }
@@ -53,16 +54,19 @@ export default class GraphsLegendItem extends React.PureComponent<Props> {
         ) : (
           <ChartLegendIcon
             className={classNames(
-              'spacer-right line-chart-legend',
+              'text-middle spacer-right line-chart-legend',
               'line-chart-legend-' + this.props.style
             )}
           />
         )}
-        {this.props.name}
+        <span className="text-middle">{this.props.name}</span>
         {isActionable && (
-          <a className="spacer-left button-clean text-text-top" href="#" onClick={this.handleClick}>
-            <CloseIcon className="text-danger" />
-          </a>
+          <ButtonIcon
+            className="button-tiny spacer-left text-middle"
+            color={theme.gray60}
+            onClick={this.handleClick}>
+            <ClearIcon size={12} />
+          </ButtonIcon>
         )}
       </span>
     );
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysis.js b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysis.js
index 1f9453b9630..b26471cec14 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysis.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysis.js
@@ -76,10 +76,10 @@ export default class ProjectActivityAnalysis extends React.PureComponent {
         <div className="project-activity-time spacer-right">
           <TimeTooltipFormatter className="text-middle" date={date} placement="right" />
         </div>
-        <div className="project-activity-analysis-icon big-spacer-right" title={analysisTitle} />
+        <div className="project-activity-analysis-icon spacer-right" title={analysisTitle} />
 
         {(canAddVersion || canAddEvent || canDeleteAnalyses) && (
-          <div className="project-activity-analysis-actions spacer-left">
+          <div className="project-activity-analysis-actions big-spacer-right">
             <ActionsDropdown small={true} toggleClassName="js-analysis-actions">
               {canAddVersion && (
                 <AddEventForm
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsLegendItem-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsLegendItem-test.tsx.snap
index 0133ac83d5c..395dde84e79 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsLegendItem-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsLegendItem-test.tsx.snap
@@ -5,9 +5,13 @@ exports[`should render correctly a legend 1`] = `
   className=""
 >
   <ChartLegendIcon
-    className="spacer-right line-chart-legend line-chart-legend-2"
+    className="text-middle spacer-right line-chart-legend line-chart-legend-2"
   />
-  Bugs
+  <span
+    className="text-middle"
+  >
+    Bugs
+  </span>
 </span>
 `;
 
@@ -16,18 +20,22 @@ exports[`should render correctly an actionable legend 1`] = `
   className="project-activity-graph-legend-actionable myclass"
 >
   <ChartLegendIcon
-    className="spacer-right line-chart-legend line-chart-legend-1"
+    className="text-middle spacer-right line-chart-legend line-chart-legend-1"
   />
-  Foo
-  <a
-    className="spacer-left button-clean text-text-top"
-    href="#"
+  <span
+    className="text-middle"
+  >
+    Foo
+  </span>
+  <ButtonIcon
+    className="button-tiny spacer-left text-middle"
+    color="#999"
     onClick={[Function]}
   >
-    <CloseIcon
-      className="text-danger"
+    <ClearIcon
+      size={12}
     />
-  </a>
+  </ButtonIcon>
 </span>
 `;
 
@@ -38,6 +46,10 @@ exports[`should render correctly legends with warning 1`] = `
   <AlertWarnIcon
     className="spacer-right"
   />
-  Foo
+  <span
+    className="text-middle"
+  >
+    Foo
+  </span>
 </span>
 `;
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/projectActivity.css b/server/sonar-web/src/main/js/apps/projectActivity/components/projectActivity.css
index e1e5cf542d2..721095c5bcb 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/projectActivity.css
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/projectActivity.css
@@ -71,7 +71,8 @@
 }
 
 .project-activity-graph-legend-actionable {
-  padding: 4px 12px;
+  display: inline-block;
+  padding: 4px 8px 4px 12px;
   border-width: 1px;
   border-style: solid;
   border-radius: 12px;
@@ -164,7 +165,7 @@
 }
 
 .project-activity-analysis-actions {
-  float: right;
+  float: left;
 }
 
 .project-activity-time {
@@ -193,7 +194,7 @@
 }
 
 .project-activity-event {
-  line-height: 20px;
+  line-height: 18px;
   display: flex;
 }
 
@@ -223,14 +224,6 @@
   display: inline-block;
 }
 
-.project-activity-event-actions button {
-  height: 20px;
-}
-
-.project-activity-event-actions button + button {
-  margin-left: 4px;
-}
-
 .project-activity-event-inner-icon .project-activity-event-icon {
   margin-top: 3px;
 }
diff --git a/server/sonar-web/src/main/js/apps/projectBranches/components/LongBranchesPattern.tsx b/server/sonar-web/src/main/js/apps/projectBranches/components/LongBranchesPattern.tsx
index da026682bfe..302f3ddae98 100644
--- a/server/sonar-web/src/main/js/apps/projectBranches/components/LongBranchesPattern.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBranches/components/LongBranchesPattern.tsx
@@ -20,7 +20,7 @@
 import * as React from 'react';
 import LongBranchesPatternForm from './LongBranchesPatternForm';
 import { getValues, SettingValue } from '../../../api/settings';
-import ChangeIcon from '../../../components/icons-components/ChangeIcon';
+import { EditButton } from '../../../components/ui/buttons';
 import { translate } from '../../../helpers/l10n';
 
 interface Props {
@@ -64,9 +64,7 @@ export default class LongBranchesPattern extends React.PureComponent<Props, Stat
     }
   };
 
-  handleChangeClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
-    event.preventDefault();
-    event.currentTarget.blur();
+  handleChangeClick = () => {
     this.setState({ formOpen: true });
   };
 
@@ -88,12 +86,7 @@ export default class LongBranchesPattern extends React.PureComponent<Props, Stat
         {translate('branches.long_living_branches_pattern')}
         {': '}
         <strong>{setting.value}</strong>
-        <a
-          className="display-inline-block spacer-left link-no-underline"
-          href="#"
-          onClick={this.handleChangeClick}>
-          <ChangeIcon />
-        </a>
+        <EditButton className="button-small spacer-left" onClick={this.handleChangeClick} />
         {this.state.formOpen && (
           <LongBranchesPatternForm
             onClose={this.closeForm}
diff --git a/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/LongBranchesPattern-test.tsx b/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/LongBranchesPattern-test.tsx
index 8324b04e538..121099fd034 100644
--- a/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/LongBranchesPattern-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/LongBranchesPattern-test.tsx
@@ -21,7 +21,6 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
 import LongBranchesPattern from '../LongBranchesPattern';
-import { click } from '../../../../helpers/testUtils';
 
 jest.mock('../../../../api/settings', () => ({
   getValues: jest.fn(() => Promise.resolve([]))
@@ -43,7 +42,8 @@ it('opens form', () => {
   const wrapper = shallow(<LongBranchesPattern project="project" />);
   wrapper.setState({ loading: false, setting: { value: 'release-.*' } });
 
-  click(wrapper.find('a'));
+  wrapper.find('EditButton').prop<Function>('onClick')();
+  wrapper.update();
   expect(wrapper.find('LongBranchesPatternForm').exists()).toBeTruthy();
 
   wrapper.find('LongBranchesPatternForm').prop<Function>('onClose')();
diff --git a/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/LongBranchesPattern-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/LongBranchesPattern-test.tsx.snap
index 312bdd3d079..8d1c83d3003 100644
--- a/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/LongBranchesPattern-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/LongBranchesPattern-test.tsx.snap
@@ -9,12 +9,9 @@ exports[`renders 1`] = `
   <strong>
     release-.*
   </strong>
-  <a
-    className="display-inline-block spacer-left link-no-underline"
-    href="#"
+  <EditButton
+    className="button-small spacer-left"
     onClick={[Function]}
-  >
-    <ChangeIcon />
-  </a>
+  />
 </div>
 `;
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectsSortingSelect.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectsSortingSelect.tsx
index 9c213790359..5fdcec83a09 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectsSortingSelect.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectsSortingSelect.tsx
@@ -20,10 +20,12 @@
 import * as React from 'react';
 import { sortBy } from 'lodash';
 import ProjectsSortingSelectOption, { Option } from './ProjectsSortingSelectOption';
+import * as theme from '../../../app/theme';
 import SortAscIcon from '../../../components/icons-components/SortAscIcon';
 import SortDescIcon from '../../../components/icons-components/SortDescIcon';
 import Select from '../../../components/controls/Select';
 import Tooltip from '../../../components/controls/Tooltip';
+import { ButtonIcon } from '../../../components/ui/buttons';
 import { translate } from '../../../helpers/l10n';
 import { SORTING_METRICS, SORTING_LEAK_METRICS, parseSorting } from '../utils';
 
@@ -50,9 +52,7 @@ export default class ProjectsSortingSelect extends React.PureComponent<Props> {
     }));
   };
 
-  handleDescToggle = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
-    event.preventDefault();
-    event.currentTarget.blur();
+  handleDescToggle = () => {
     const sorting = this.getSorting();
     this.props.onChange(sorting.sortValue, !sorting.sortDesc);
   };
@@ -79,13 +79,12 @@ export default class ProjectsSortingSelect extends React.PureComponent<Props> {
           overlay={
             sortDesc ? translate('projects.sort_descending') : translate('projects.sort_ascending')
           }>
-          <a className="spacer-left button-icon" href="#" onClick={this.handleDescToggle}>
-            {sortDesc ? (
-              <SortDescIcon className="little-spacer-top" />
-            ) : (
-              <SortAscIcon className="little-spacer-top" />
-            )}
-          </a>
+          <ButtonIcon
+            className="js-projects-sorting-invert spacer-left"
+            color={theme.gray60}
+            onClick={this.handleDescToggle}>
+            {sortDesc ? <SortDescIcon className="" /> : <SortAscIcon className="" />}
+          </ButtonIcon>
         </Tooltip>
       </div>
     );
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectsSortingSelect-test.tsx b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectsSortingSelect-test.tsx
index 649d9bec8e3..aa943c230dd 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectsSortingSelect-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectsSortingSelect-test.tsx
@@ -20,7 +20,6 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
 import ProjectsSortingSelect from '../ProjectsSortingSelect';
-import { click } from '../../../../helpers/testUtils';
 
 it('should render correctly for overall view', () => {
   expect(
@@ -85,6 +84,6 @@ it('reverses sorting', () => {
       view="overall"
     />
   );
-  click(wrapper.find('a'));
+  wrapper.find('ButtonIcon').prop<Function>('onClick')();
   expect(onChange).toBeCalledWith('size', false);
 });
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectsSortingSelect-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectsSortingSelect-test.tsx.snap
index e5219e7902b..cc30f32ad4c 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectsSortingSelect-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectsSortingSelect-test.tsx.snap
@@ -62,15 +62,15 @@ exports[`should handle the descending sort direction 1`] = `
     overlay="projects.sort_descending"
     placement="bottom"
   >
-    <a
-      className="spacer-left button-icon"
-      href="#"
+    <ButtonIcon
+      className="js-projects-sorting-invert spacer-left"
+      color="#999"
       onClick={[Function]}
     >
       <SortDescIcon
-        className="little-spacer-top"
+        className=""
       />
-    </a>
+    </ButtonIcon>
   </Tooltip>
 </div>
 `;
@@ -137,15 +137,15 @@ exports[`should render correctly for leak view 1`] = `
     overlay="projects.sort_ascending"
     placement="bottom"
   >
-    <a
-      className="spacer-left button-icon"
-      href="#"
+    <ButtonIcon
+      className="js-projects-sorting-invert spacer-left"
+      color="#999"
       onClick={[Function]}
     >
       <SortAscIcon
-        className="little-spacer-top"
+        className=""
       />
-    </a>
+    </ButtonIcon>
   </Tooltip>
 </div>
 `;
@@ -212,15 +212,15 @@ exports[`should render correctly for overall view 1`] = `
     overlay="projects.sort_ascending"
     placement="bottom"
   >
-    <a
-      className="spacer-left button-icon"
-      href="#"
+    <ButtonIcon
+      className="js-projects-sorting-invert spacer-left"
+      color="#999"
       onClick={[Function]}
     >
       <SortAscIcon
-        className="little-spacer-top"
+        className=""
       />
-    </a>
+    </ButtonIcon>
   </Tooltip>
 </div>
 `;
diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/Header.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/Header.tsx
index 5dd7604092d..f2f56ee80b3 100644
--- a/server/sonar-web/src/main/js/apps/projectsManagement/Header.tsx
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/Header.tsx
@@ -21,7 +21,7 @@ import * as React from 'react';
 import ChangeVisibilityForm from './ChangeVisibilityForm';
 import { Organization, Visibility } from '../../app/types';
 import { translate } from '../../helpers/l10n';
-import EditIcon from '../../components/icons-components/EditIcon';
+import { EditButton } from '../../components/ui/buttons';
 
 export interface Props {
   hasProvisionPermission?: boolean;
@@ -42,8 +42,7 @@ export default class Header extends React.PureComponent<Props, State> {
     this.props.onProjectCreate();
   };
 
-  handleChangeVisibilityClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
-    event.preventDefault();
+  handleChangeVisibilityClick = () => {
     this.setState({ visibilityForm: true });
   };
 
@@ -60,14 +59,14 @@ export default class Header extends React.PureComponent<Props, State> {
 
         <div className="page-actions">
           <span className="big-spacer-right">
-            {translate('organization.default_visibility_of_new_projects')}{' '}
-            <strong>{translate('visibility', organization.projectVisibility)}</strong>
-            <a
-              className="js-change-visibility spacer-left link-no-underline"
-              href="#"
-              onClick={this.handleChangeVisibilityClick}>
-              <EditIcon className="text-text-top" />
-            </a>
+            <span className="text-middle">
+              {translate('organization.default_visibility_of_new_projects')}{' '}
+              <strong>{translate('visibility', organization.projectVisibility)}</strong>
+            </span>
+            <EditButton
+              className="js-change-visibility spacer-left button-small"
+              onClick={this.handleChangeVisibilityClick}
+            />
           </span>
           {this.props.hasProvisionPermission && (
             <button id="create-project" onClick={this.handleCreateProjectClick}>
diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Header-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Header-test.tsx.snap
index c94a5a5cb29..e001d3f7298 100644
--- a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Header-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Header-test.tsx.snap
@@ -29,20 +29,19 @@ exports[`renders 1`] = `
     <span
       className="big-spacer-right"
     >
-      organization.default_visibility_of_new_projects
-       
-      <strong>
-        visibility.public
-      </strong>
-      <a
-        className="js-change-visibility spacer-left link-no-underline"
-        href="#"
-        onClick={[Function]}
+      <span
+        className="text-middle"
       >
-        <EditIcon
-          className="text-text-top"
-        />
-      </a>
+        organization.default_visibility_of_new_projects
+         
+        <strong>
+          visibility.public
+        </strong>
+      </span>
+      <EditButton
+        className="js-change-visibility spacer-left button-small"
+        onClick={[Function]}
+      />
     </span>
     <button
       id="create-project"
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/ThresholdInput-test.js b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/ThresholdInput-test.js
index 68c4f084c17..32727393559 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/ThresholdInput-test.js
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/ThresholdInput-test.js
@@ -20,7 +20,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import ThresholdInput from '../ThresholdInput';
-import Select from '../../../../components/controls/Select';
 import { change } from '../../../../helpers/testUtils';
 
 describe('on strings', () => {
@@ -47,7 +46,7 @@ describe('on ratings', () => {
   it('should render Select', () => {
     const select = shallow(
       <ThresholdInput name="foo" value="2" metric={{ type: 'RATING' }} onChange={jest.fn()} />
-    ).find(Select);
+    ).find('Select');
     expect(select.length).toEqual(1);
     expect(select.prop('value')).toEqual('2');
   });
@@ -56,7 +55,7 @@ describe('on ratings', () => {
     const onChange = jest.fn();
     const select = shallow(
       <ThresholdInput name="foo" value="2" metric={{ type: 'RATING' }} onChange={onChange} />
-    ).find(Select);
+    ).find('Select');
     select.prop('onChange')({ label: 'D', value: '4' });
     expect(onChange).toBeCalledWith('4');
   });
@@ -65,7 +64,7 @@ describe('on ratings', () => {
     const onChange = jest.fn();
     const select = shallow(
       <ThresholdInput name="foo" value="2" metric={{ type: 'RATING' }} onChange={onChange} />
-    ).find(Select);
+    ).find('Select');
     select.prop('onChange')(null);
     expect(onChange).toBeCalledWith('');
   });
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsGroup.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsGroup.tsx
index c2ae2c10b02..d6a5c624ba7 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsGroup.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsGroup.tsx
@@ -22,8 +22,8 @@ import { FormattedMessage } from 'react-intl';
 import { Group } from './ProfilePermissions';
 import { removeGroup } from '../../../api/quality-profiles';
 import SimpleModal, { ChildrenProps } from '../../../components/controls/SimpleModal';
-import DeleteIcon from '../../../components/icons-components/DeleteIcon';
 import GroupIcon from '../../../components/icons-components/GroupIcon';
+import { DeleteButton } from '../../../components/ui/buttons';
 import { translate } from '../../../helpers/l10n';
 
 interface Props {
@@ -49,9 +49,7 @@ export default class ProfilePermissionsGroup extends React.PureComponent<Props,
     this.mounted = false;
   }
 
-  handleDeleteClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
-    event.preventDefault();
-    event.currentTarget.blur();
+  handleDeleteClick = () => {
     this.setState({ deleteModal: true });
   };
 
@@ -108,12 +106,10 @@ export default class ProfilePermissionsGroup extends React.PureComponent<Props,
 
     return (
       <div className="clearfix big-spacer-bottom">
-        <a
-          className="pull-right spacer-top spacer-left spacer-right button-icon"
-          href="#"
-          onClick={this.handleDeleteClick}>
-          <DeleteIcon />
-        </a>
+        <DeleteButton
+          className="pull-right spacer-top spacer-left spacer-right button-small"
+          onClick={this.handleDeleteClick}
+        />
         <GroupIcon className="pull-left spacer-right" size={32} />
         <div className="overflow-hidden" style={{ lineHeight: '32px' }}>
           <strong>{group.name}</strong>
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsUser.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsUser.tsx
index b2f74e190e3..97deae1364c 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsUser.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsUser.tsx
@@ -22,7 +22,7 @@ import { FormattedMessage } from 'react-intl';
 import { User } from './ProfilePermissions';
 import { removeUser } from '../../../api/quality-profiles';
 import SimpleModal, { ChildrenProps } from '../../../components/controls/SimpleModal';
-import DeleteIcon from '../../../components/icons-components/DeleteIcon';
+import { DeleteButton } from '../../../components/ui/buttons';
 import Avatar from '../../../components/ui/Avatar';
 import { translate } from '../../../helpers/l10n';
 
@@ -49,9 +49,7 @@ export default class ProfilePermissionsUser extends React.PureComponent<Props, S
     this.mounted = false;
   }
 
-  handleDeleteClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
-    event.preventDefault();
-    event.currentTarget.blur();
+  handleDeleteClick = () => {
     this.setState({ deleteModal: true });
   };
 
@@ -108,12 +106,10 @@ export default class ProfilePermissionsUser extends React.PureComponent<Props, S
 
     return (
       <div className="clearfix big-spacer-bottom">
-        <a
-          className="pull-right spacer-top spacer-left spacer-right button-icon"
-          href="#"
-          onClick={this.handleDeleteClick}>
-          <DeleteIcon />
-        </a>
+        <DeleteButton
+          className="pull-right spacer-top spacer-left spacer-right button-small"
+          onClick={this.handleDeleteClick}
+        />
         <Avatar className="pull-left spacer-right" hash={user.avatar} name={user.name} size={32} />
         <div className="overflow-hidden">
           <strong>{user.name}</strong>
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/ProfilePermissionsGroup-test.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/ProfilePermissionsGroup-test.tsx
index d9edeb1d1a1..4471eda5814 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/ProfilePermissionsGroup-test.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/ProfilePermissionsGroup-test.tsx
@@ -25,7 +25,6 @@ jest.mock('../../../../api/quality-profiles', () => ({
 import * as React from 'react';
 import { shallow } from 'enzyme';
 import ProfilePermissionsGroup from '../ProfilePermissionsGroup';
-import { click } from '../../../../helpers/testUtils';
 
 const removeGroup = require('../../../../api/quality-profiles').removeGroup as jest.Mock<any>;
 
@@ -55,7 +54,8 @@ it('removes user', async () => {
   (wrapper.instance() as ProfilePermissionsGroup).mounted = true;
   expect(wrapper.find('SimpleModal').exists()).toBeFalsy();
 
-  click(wrapper.find('a'));
+  wrapper.find('DeleteButton').prop<Function>('onClick')();
+  wrapper.update();
   expect(wrapper.find('SimpleModal').exists()).toBeTruthy();
 
   wrapper.find('SimpleModal').prop<Function>('onSubmit')();
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/ProfilePermissionsUser-test.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/ProfilePermissionsUser-test.tsx
index f2b26b8ce41..d242d77b4a0 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/ProfilePermissionsUser-test.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/ProfilePermissionsUser-test.tsx
@@ -25,7 +25,6 @@ jest.mock('../../../../api/quality-profiles', () => ({
 import * as React from 'react';
 import { shallow } from 'enzyme';
 import ProfilePermissionsUser from '../ProfilePermissionsUser';
-import { click } from '../../../../helpers/testUtils';
 
 const removeUser = require('../../../../api/quality-profiles').removeUser as jest.Mock<any>;
 
@@ -50,7 +49,8 @@ it('removes user', async () => {
   (wrapper.instance() as ProfilePermissionsUser).mounted = true;
   expect(wrapper.find('SimpleModal').exists()).toBeFalsy();
 
-  click(wrapper.find('a'));
+  wrapper.find('DeleteButton').prop<Function>('onClick')();
+  wrapper.update();
   expect(wrapper.find('SimpleModal').exists()).toBeTruthy();
 
   wrapper.find('SimpleModal').prop<Function>('onSubmit')();
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfilePermissionsGroup-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfilePermissionsGroup-test.tsx.snap
index b72e86d9dd7..d3748320cea 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfilePermissionsGroup-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfilePermissionsGroup-test.tsx.snap
@@ -4,13 +4,10 @@ exports[`renders 1`] = `
 <div
   className="clearfix big-spacer-bottom"
 >
-  <a
-    className="pull-right spacer-top spacer-left spacer-right button-icon"
-    href="#"
+  <DeleteButton
+    className="pull-right spacer-top spacer-left spacer-right button-small"
     onClick={[Function]}
-  >
-    <DeleteIcon />
-  </a>
+  />
   <GroupIcon
     className="pull-left spacer-right"
     size={32}
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfilePermissionsUser-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfilePermissionsUser-test.tsx.snap
index f606faf8ad1..305d0624f07 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfilePermissionsUser-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfilePermissionsUser-test.tsx.snap
@@ -4,13 +4,10 @@ exports[`renders 1`] = `
 <div
   className="clearfix big-spacer-bottom"
 >
-  <a
-    className="pull-right spacer-top spacer-left spacer-right button-icon"
-    href="#"
+  <DeleteButton
+    className="pull-right spacer-top spacer-left spacer-right button-small"
     onClick={[Function]}
-  >
-    <DeleteIcon />
-  </a>
+  />
   <Connect(Avatar)
     className="pull-left spacer-right"
     name="Luke Skywalker"
diff --git a/server/sonar-web/src/main/js/apps/settings/components/inputs/MultiValueInput.js b/server/sonar-web/src/main/js/apps/settings/components/inputs/MultiValueInput.js
index 76850ecbf06..44e00a94e31 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/inputs/MultiValueInput.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/inputs/MultiValueInput.js
@@ -21,7 +21,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import PrimitiveInput from './PrimitiveInput';
 import { getEmptyValue } from '../../utils';
-import DeleteIcon from '../../../../components/icons-components/DeleteIcon';
+import { DeleteButton } from '../../../../components/ui/buttons';
 
 export default class MultiValueInput extends React.PureComponent {
   static propTypes = {
@@ -40,10 +40,7 @@ export default class MultiValueInput extends React.PureComponent {
     this.props.onChange(newValue);
   }
 
-  handleDeleteValue(e, index) {
-    e.preventDefault();
-    e.target.blur();
-
+  handleDeleteValue(index) {
     const newValue = [...this.ensureValue()];
     newValue.splice(index, 1);
     this.props.onChange(newValue);
@@ -70,11 +67,10 @@ export default class MultiValueInput extends React.PureComponent {
 
         {!isLast && (
           <div className="display-inline-block spacer-left">
-            <button
-              className="js-remove-value button-clean"
-              onClick={e => this.handleDeleteValue(e, index)}>
-              <DeleteIcon />
-            </button>
+            <DeleteButton
+              className="js-remove-value"
+              onClick={this.handleDeleteValue.bind(this, index)}
+            />
           </div>
         )}
       </li>
diff --git a/server/sonar-web/src/main/js/apps/settings/components/inputs/PropertySetInput.js b/server/sonar-web/src/main/js/apps/settings/components/inputs/PropertySetInput.js
index 4016656f336..075e95c3df0 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/inputs/PropertySetInput.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/inputs/PropertySetInput.js
@@ -21,7 +21,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import PrimitiveInput from './PrimitiveInput';
 import { getEmptyValue, getUniqueName } from '../../utils';
-import DeleteIcon from '../../../../components/icons-components/DeleteIcon';
+import { DeleteButton } from '../../../../components/ui/buttons';
 
 export default class PropertySetInput extends React.PureComponent {
   static propTypes = {
@@ -38,10 +38,7 @@ export default class PropertySetInput extends React.PureComponent {
     return getUniqueName(this.props.setting.definition, field.key);
   }
 
-  handleDeleteValue(e, index) {
-    e.preventDefault();
-    e.target.blur();
-
+  handleDeleteValue(index) {
     const newValue = [...this.ensureValue()];
     newValue.splice(index, 1);
     this.props.onChange(newValue);
@@ -70,13 +67,12 @@ export default class PropertySetInput extends React.PureComponent {
             />
           </td>
         ))}
-        <td className="thin nowrap">
+        <td className="thin nowrap text-middle">
           {!isLast && (
-            <button
-              className="js-remove-value button-link"
-              onClick={e => this.handleDeleteValue(e, index)}>
-              <DeleteIcon className="text-middle" />
-            </button>
+            <DeleteButton
+              className="js-remove-value"
+              onClick={this.handleDeleteValue.bind(this, index)}
+            />
           )}
         </td>
       </tr>
diff --git a/server/sonar-web/src/main/js/apps/system/components/PageActions.tsx b/server/sonar-web/src/main/js/apps/system/components/PageActions.tsx
index c27c7dd4521..864467319f0 100644
--- a/server/sonar-web/src/main/js/apps/system/components/PageActions.tsx
+++ b/server/sonar-web/src/main/js/apps/system/components/PageActions.tsx
@@ -20,7 +20,7 @@
 import * as React from 'react';
 import ChangeLogLevelForm from './ChangeLogLevelForm';
 import RestartForm from '../../../components/common/RestartForm';
-import EditIcon from '../../../components/icons-components/EditIcon';
+import { EditButton } from '../../../components/ui/buttons';
 import { getBaseUrl } from '../../../helpers/urls';
 import { translate } from '../../../helpers/l10n';
 
@@ -54,8 +54,7 @@ export default class PageActions extends React.PureComponent<Props, State> {
     }
   }
 
-  handleLogsLevelOpen = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
-    event.preventDefault();
+  handleLogsLevelOpen = () => {
     this.setState({ openLogsLevelForm: true });
   };
 
@@ -78,16 +77,16 @@ export default class PageActions extends React.PureComponent<Props, State> {
     return (
       <div className="page-actions">
         <span>
-          {translate('system.logs_level')}
-          {':'}
-          <strong className="little-spacer-left">{this.state.logLevel}</strong>
-          <a
+          <span className="text-middle">
+            {translate('system.logs_level')}
+            {':'}
+            <strong className="little-spacer-left">{this.state.logLevel}</strong>
+          </span>
+          <EditButton
             id="edit-logs-level-button"
-            className="spacer-left link-no-underline"
-            href="#"
-            onClick={this.handleLogsLevelOpen}>
-            <EditIcon className="little-spacer-top" />
-          </a>
+            className="spacer-left button-small"
+            onClick={this.handleLogsLevelOpen}
+          />
         </span>
         {this.props.canDownloadLogs && (
           <div className="display-inline-block dropdown spacer-left">
diff --git a/server/sonar-web/src/main/js/apps/system/components/__tests__/__snapshots__/PageActions-test.tsx.snap b/server/sonar-web/src/main/js/apps/system/components/__tests__/__snapshots__/PageActions-test.tsx.snap
index d665e37ec15..3556043a83b 100644
--- a/server/sonar-web/src/main/js/apps/system/components/__tests__/__snapshots__/PageActions-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/system/components/__tests__/__snapshots__/PageActions-test.tsx.snap
@@ -5,23 +5,22 @@ exports[`should render correctly 1`] = `
   className="page-actions"
 >
   <span>
-    system.logs_level
-    :
-    <strong
-      className="little-spacer-left"
+    <span
+      className="text-middle"
     >
-      INFO
-    </strong>
-    <a
-      className="spacer-left link-no-underline"
-      href="#"
+      system.logs_level
+      :
+      <strong
+        className="little-spacer-left"
+      >
+        INFO
+      </strong>
+    </span>
+    <EditButton
+      className="spacer-left button-small"
       id="edit-logs-level-button"
       onClick={[Function]}
-    >
-      <EditIcon
-        className="little-spacer-top"
-      />
-    </a>
+    />
   </span>
   <div
     className="display-inline-block dropdown spacer-left"
@@ -104,23 +103,22 @@ exports[`should render without restart and log download 1`] = `
   className="page-actions"
 >
   <span>
-    system.logs_level
-    :
-    <strong
-      className="little-spacer-left"
+    <span
+      className="text-middle"
     >
-      INFO
-    </strong>
-    <a
-      className="spacer-left link-no-underline"
-      href="#"
+      system.logs_level
+      :
+      <strong
+        className="little-spacer-left"
+      >
+        INFO
+      </strong>
+    </span>
+    <EditButton
+      className="spacer-left button-small"
       id="edit-logs-level-button"
       onClick={[Function]}
-    >
-      <EditIcon
-        className="little-spacer-top"
-      />
-    </a>
+    />
   </span>
   <a
     className="button spacer-left"
diff --git a/server/sonar-web/src/main/js/apps/system/components/info-items/SysInfoItem.tsx b/server/sonar-web/src/main/js/apps/system/components/info-items/SysInfoItem.tsx
index bd1751ec61e..a4a36491c9f 100644
--- a/server/sonar-web/src/main/js/apps/system/components/info-items/SysInfoItem.tsx
+++ b/server/sonar-web/src/main/js/apps/system/components/info-items/SysInfoItem.tsx
@@ -20,7 +20,7 @@
 import * as React from 'react';
 import { map } from 'lodash';
 import CheckIcon from '../../../../components/icons-components/CheckIcon';
-import CloseIcon from '../../../../components/icons-components/CloseIcon';
+import ClearIcon from '../../../../components/icons-components/ClearIcon';
 import HealthItem from './HealthItem';
 import { HealthType, SysValue, SysValueObject } from '../../../../api/system';
 import { HEALTH_FIELD } from '../../utils';
@@ -51,7 +51,7 @@ function BooleanItem({ value }: { value: boolean }) {
   if (value) {
     return <CheckIcon />;
   } else {
-    return <CloseIcon />;
+    return <ClearIcon />;
   }
 }
 
diff --git a/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/SysInfoItem-test.tsx b/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/SysInfoItem-test.tsx
index acbf8d43ab9..e7401281c00 100644
--- a/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/SysInfoItem-test.tsx
+++ b/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/SysInfoItem-test.tsx
@@ -51,10 +51,10 @@ it('should render object correctly', () => {
 
 it('should render `true`', () => {
   const wrapper = mount(<SysInfoItem name="test" value={true} />);
-  expect(wrapper.find('CheckIcon')).toHaveLength(1);
+  expect(wrapper.find('CheckIcon').exists()).toBeTruthy();
 });
 
 it('should render `false`', () => {
   const wrapper = mount(<SysInfoItem name="test" value={false} />);
-  expect(wrapper.find('CloseIcon')).toHaveLength(1);
+  expect(wrapper.find('ClearIcon').exists()).toBeTruthy();
 });
diff --git a/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/__snapshots__/SysInfoItem-test.tsx.snap b/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/__snapshots__/SysInfoItem-test.tsx.snap
index f2164f53967..0e730faf515 100644
--- a/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/__snapshots__/SysInfoItem-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/__snapshots__/SysInfoItem-test.tsx.snap
@@ -131,9 +131,11 @@ Array [
                   <svg
                     className={undefined}
                     height={16}
+                    version="1.1"
                     viewBox="0 0 16 16"
                     width={16}
-                    xmlns="http://www.w3.org/2000/svg"
+                    xmlSpace="preserve"
+                    xmlnsXlink="http://www.w3.org/1999/xlink"
                   >
                     <path
                       d="M14.92 4.804q0 0.357-0.25 0.607l-7.679 7.679q-0.25 0.25-0.607 0.25t-0.607-0.25l-4.446-4.446q-0.25-0.25-0.25-0.607t0.25-0.607l1.214-1.214q0.25-0.25 0.607-0.25t0.607 0.25l2.625 2.634 5.857-5.866q0.25-0.25 0.607-0.25t0.607 0.25l1.214 1.214q0.25 0.25 0.25 0.607z"
diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/NewOrganizationForm.js b/server/sonar-web/src/main/js/apps/tutorials/onboarding/NewOrganizationForm.js
index aee2e30489d..1231a7ef54a 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/NewOrganizationForm.js
+++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/NewOrganizationForm.js
@@ -20,12 +20,12 @@
 // @flow
 import React from 'react';
 import { debounce } from 'lodash';
-import CloseIcon from '../../../components/icons-components/CloseIcon';
 import {
   createOrganization,
   deleteOrganization,
   getOrganization
 } from '../../../api/organizations';
+import { DeleteButton } from '../../../components/ui/buttons';
 import { translate } from '../../../helpers/l10n';
 
 /*::
@@ -109,8 +109,7 @@ export default class NewOrganizationForm extends React.PureComponent {
     }
   };
 
-  handleOrganizationDelete = (event /*: Event */) => {
-    event.preventDefault();
+  handleOrganizationDelete = () => {
     const { organization } = this.state;
     if (organization) {
       this.setState({ loading: true });
@@ -129,16 +128,14 @@ export default class NewOrganizationForm extends React.PureComponent {
     const valid = unique && organization.length >= 2;
 
     return done ? (
-      <form onSubmit={this.handleOrganizationDelete}>
+      <div>
         <span className="spacer-right text-middle">{organization}</span>
         {loading ? (
           <i className="spinner text-middle" />
         ) : (
-          <button className="button-clean text-middle">
-            <CloseIcon className="icon-red" />
-          </button>
+          <DeleteButton className="button-small" onClick={this.handleOrganizationDelete} />
         )}
-      </form>
+      </div>
     ) : (
       <form onSubmit={this.handleOrganizationCreate}>
         <input
diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/NewProjectForm.js b/server/sonar-web/src/main/js/apps/tutorials/onboarding/NewProjectForm.js
index da09a96dcb8..7c71f378928 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/NewProjectForm.js
+++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/NewProjectForm.js
@@ -19,8 +19,8 @@
  */
 // @flow
 import React from 'react';
-import CloseIcon from '../../../components/icons-components/CloseIcon';
 import { createProject, deleteProject } from '../../../api/components';
+import { DeleteButton } from '../../../components/ui/buttons';
 import { translate } from '../../../helpers/l10n';
 
 /*::
@@ -93,8 +93,7 @@ export default class NewProjectForm extends React.PureComponent {
     }, this.stopLoading);
   };
 
-  handleProjectDelete = (event /*: Event */) => {
-    event.preventDefault();
+  handleProjectDelete = () => {
     const { projectKey } = this.state;
     this.setState({ loading: true });
     deleteProject(projectKey).then(() => {
@@ -111,16 +110,14 @@ export default class NewProjectForm extends React.PureComponent {
     const valid = projectKey.length > 0;
 
     const form = done ? (
-      <form onSubmit={this.handleProjectDelete}>
+      <div>
         <span className="spacer-right text-middle">{projectKey}</span>
         {loading ? (
           <i className="spinner text-middle" />
         ) : (
-          <button className="button-clean text-middle">
-            <CloseIcon className="icon-red" />
-          </button>
+          <DeleteButton className="button-small text-middle" onClick={this.handleProjectDelete} />
         )}
-      </form>
+      </div>
     ) : (
       <form onSubmit={this.handleProjectCreate}>
         <input
diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/ProjectKeyStep.js b/server/sonar-web/src/main/js/apps/tutorials/onboarding/ProjectKeyStep.js
deleted file mode 100644
index 6d84a73fc55..00000000000
--- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/ProjectKeyStep.js
+++ /dev/null
@@ -1,156 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2017 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-// @flow
-import React from 'react';
-import { createProject, deleteProject } from '../../../api/components';
-import DeleteIcon from '../../../components/icons-components/DeleteIcon';
-import { translate } from '../../../helpers/l10n';
-
-/*::
-type Props = {
-  onDelete: () => void,
-  onDone: (projectKey: string) => void,
-  organization?: string,
-  projectKey?: string
-};
-*/
-
-/*::
-type State = {
-  done: boolean,
-  loading: boolean,
-  projectKey: string
-};
-*/
-
-export default class ProjectKeyStep extends React.PureComponent {
-  /*:: mounted: boolean; */
-  /*:: props: Props; */
-  /*:: state: State; */
-
-  constructor(props /*: Props */) {
-    super(props);
-    this.state = {
-      done: props.projectKey != null,
-      loading: false,
-      projectKey: props.projectKey || ''
-    };
-  }
-
-  componentDidMount() {
-    this.mounted = true;
-  }
-
-  componentWillUnmount() {
-    this.mounted = false;
-  }
-
-  stopLoading = () => {
-    if (this.mounted) {
-      this.setState({ loading: false });
-    }
-  };
-
-  sanitizeProjectKey = (projectKey /*: string */) => projectKey.replace(/[^a-zA-Z0-9-_\.:]/, '');
-
-  handleProjectKeyChange = (event /*: { target: HTMLInputElement } */) => {
-    this.setState({ projectKey: this.sanitizeProjectKey(event.target.value) });
-  };
-
-  handleProjectCreate = (event /*: Event */) => {
-    event.preventDefault();
-    const { projectKey } = this.state;
-    const data /*: { [string]: string } */ = {
-      name: projectKey,
-      project: projectKey
-    };
-    if (this.props.organization) {
-      data.organization = this.props.organization;
-    }
-    this.setState({ loading: true });
-    createProject(data).then(() => {
-      if (this.mounted) {
-        this.setState({ done: true, loading: false });
-        this.props.onDone(projectKey);
-      }
-    }, this.stopLoading);
-  };
-
-  handleProjectDelete = (event /*: Event */) => {
-    event.preventDefault();
-    const { projectKey } = this.state;
-    this.setState({ loading: true });
-    deleteProject(projectKey).then(() => {
-      if (this.mounted) {
-        this.setState({ done: false, loading: false, projectKey: '' });
-        this.props.onDelete();
-      }
-    }, this.stopLoading);
-  };
-
-  render() {
-    const { done, loading, projectKey } = this.state;
-
-    const valid = projectKey.length > 0;
-
-    const form = done ? (
-      <form onSubmit={this.handleProjectDelete}>
-        <span className="spacer-right text-middle">{projectKey}</span>
-        {loading ? (
-          <i className="spinner" />
-        ) : (
-          <button className="button-clean">
-            <DeleteIcon />
-          </button>
-        )}
-      </form>
-    ) : (
-      <form onSubmit={this.handleProjectCreate}>
-        <input
-          autoFocus={true}
-          className="input-large spacer-right text-middle"
-          minLength={1}
-          maxLength={400}
-          onChange={this.handleProjectKeyChange}
-          required={true}
-          type="text"
-          value={projectKey}
-        />
-        {loading ? (
-          <i className="spinner" />
-        ) : (
-          <button className="text-middle" disabled={!valid}>
-            {translate('Done')}
-          </button>
-        )}
-        <div className="note spacer-top abs-width-300">
-          {translate('onboarding.project_key_requirement')}
-        </div>
-      </form>
-    );
-
-    return (
-      <div className="big-spacer-top">
-        <h4 className="spacer-bottom">{translate('onboarding.language.project_key')}</h4>
-        {form}
-      </div>
-    );
-  }
-}
diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/TokenStep.js b/server/sonar-web/src/main/js/apps/tutorials/onboarding/TokenStep.js
index 1bbaa9df1b4..dd72bd238e8 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/TokenStep.js
+++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/TokenStep.js
@@ -23,7 +23,7 @@ import classNames from 'classnames';
 import Step from './Step';
 import { getTokens, generateToken, revokeToken } from '../../../api/user-tokens';
 import AlertErrorIcon from '../../../components/icons-components/AlertErrorIcon';
-import CloseIcon from '../../../components/icons-components/CloseIcon';
+import { DeleteButton } from '../../../components/ui/buttons';
 import { translate } from '../../../helpers/l10n';
 
 /*::
@@ -110,8 +110,7 @@ export default class TokenStep extends React.PureComponent {
     }
   };
 
-  handleTokenRevoke = (event /*: Event */) => {
-    event.preventDefault();
+  handleTokenRevoke = () => {
     const { tokenName } = this.state;
     if (tokenName) {
       this.setState({ loading: true });
@@ -249,9 +248,7 @@ export default class TokenStep extends React.PureComponent {
             {loading ? (
               <i className="spinner text-middle" />
             ) : (
-              <button className="button-clean text-middle" onClick={this.handleTokenRevoke}>
-                <CloseIcon className="icon-red" />
-              </button>
+              <DeleteButton className="button-small text-middle" onClick={this.handleTokenRevoke} />
             )}
           </form>
         ) : (
diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/NewOrganizationForm-test.js b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/NewOrganizationForm-test.js
index f6f6eba3125..8f8e996d587 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/NewOrganizationForm-test.js
+++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/NewOrganizationForm-test.js
@@ -29,6 +29,8 @@ jest.mock('../../../../api/organizations', () => ({
   getOrganization: () => Promise.resolve(null)
 }));
 
+jest.mock('../../../../components/icons-components/ClearIcon');
+
 it('creates new organization', async () => {
   const onDone = jest.fn();
   const wrapper = mount(<NewOrganizationForm onDelete={jest.fn()} onDone={onDone} />);
@@ -47,7 +49,8 @@ it('deletes organization', async () => {
   const wrapper = mount(<NewOrganizationForm onDelete={onDelete} onDone={jest.fn()} />);
   wrapper.setState({ done: true, loading: false, organization: 'foo' });
   expect(wrapper).toMatchSnapshot();
-  submit(wrapper.find('form'));
+  wrapper.find('DeleteButton').prop('onClick')();
+  wrapper.update();
   expect(wrapper).toMatchSnapshot(); // spinner
   await new Promise(setImmediate);
   wrapper.update();
diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/NewProjectForm-test.js b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/NewProjectForm-test.js
index 89952611111..3bdb9048b36 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/NewProjectForm-test.js
+++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/NewProjectForm-test.js
@@ -28,6 +28,8 @@ jest.mock('../../../../api/components', () => ({
   deleteProject: () => Promise.resolve()
 }));
 
+jest.mock('../../../../components/icons-components/ClearIcon');
+
 it('creates new project', async () => {
   const onDone = jest.fn();
   const wrapper = mount(<NewProjectForm onDelete={jest.fn()} onDone={onDone} />);
@@ -46,7 +48,8 @@ it('deletes project', async () => {
   const wrapper = mount(<NewProjectForm onDelete={onDelete} onDone={jest.fn()} />);
   wrapper.setState({ done: true, loading: false, projectKey: 'foo' });
   expect(wrapper).toMatchSnapshot();
-  submit(wrapper.find('form'));
+  wrapper.find('DeleteButton').prop('onClick')();
+  wrapper.update();
   expect(wrapper).toMatchSnapshot(); // spinner
   await new Promise(setImmediate);
   wrapper.update();
diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/ProjectKeyStep-test.js b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/ProjectKeyStep-test.js
deleted file mode 100644
index 962b33b1acb..00000000000
--- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/ProjectKeyStep-test.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2017 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-// @flow
-import React from 'react';
-import { mount } from 'enzyme';
-import ProjectKeyStep from '../ProjectKeyStep';
-import { change, doAsync, submit } from '../../../../helpers/testUtils';
-
-jest.mock('../../../../api/components', () => ({
-  createProject: () => Promise.resolve(),
-  deleteProject: () => Promise.resolve()
-}));
-
-jest.mock(
-  '../../../../components/icons-components/DeleteIcon',
-  () =>
-    function DeleteIcon() {
-      return null;
-    }
-);
-
-it('creates new project', async () => {
-  const onDone = jest.fn();
-  const wrapper = mount(<ProjectKeyStep onDelete={jest.fn()} onDone={onDone} />);
-  expect(wrapper).toMatchSnapshot();
-  change(wrapper.find('input'), 'foo');
-  submit(wrapper.find('form'));
-  expect(wrapper).toMatchSnapshot(); // spinner
-  await new Promise(setImmediate);
-  wrapper.update();
-  expect(wrapper).toMatchSnapshot();
-  expect(onDone).toBeCalledWith('foo');
-});
-
-it('deletes project', async () => {
-  const onDelete = jest.fn();
-  const wrapper = mount(<ProjectKeyStep onDelete={onDelete} onDone={jest.fn()} />);
-  wrapper.setState({ done: true, loading: false, projectKey: 'foo' });
-  expect(wrapper).toMatchSnapshot();
-  submit(wrapper.find('form'));
-  expect(wrapper).toMatchSnapshot(); // spinner
-  await new Promise(setImmediate);
-  wrapper.update();
-  expect(wrapper).toMatchSnapshot();
-  expect(onDelete).toBeCalled();
-});
diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/TokenStep-test.js b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/TokenStep-test.js
index 801da708998..5cb3709c78e 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/TokenStep-test.js
+++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/TokenStep-test.js
@@ -29,6 +29,8 @@ jest.mock('../../../../api/user-tokens', () => ({
   revokeToken: () => Promise.resolve()
 }));
 
+jest.mock('../../../../components/icons-components/ClearIcon');
+
 const currentUser = { login: 'user' };
 
 it('generates token', async () => {
@@ -67,7 +69,8 @@ it('revokes token', async () => {
   await new Promise(setImmediate);
   wrapper.setState({ token: 'abcd1234', tokenName: 'my token' });
   expect(wrapper).toMatchSnapshot();
-  submit(wrapper.find('form'));
+  wrapper.find('DeleteButton').prop('onClick')();
+  wrapper.update();
   expect(wrapper).toMatchSnapshot(); // spinner
   await new Promise(setImmediate);
   wrapper.update();
diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/NewOrganizationForm-test.js.snap b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/NewOrganizationForm-test.js.snap
index fde0778232a..8386f670119 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/NewOrganizationForm-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/NewOrganizationForm-test.js.snap
@@ -70,35 +70,35 @@ exports[`creates new organization 3`] = `
   onDelete={[Function]}
   onDone={[Function]}
 >
-  <form
-    onSubmit={[Function]}
-  >
+  <div>
     <span
       className="spacer-right text-middle"
     >
       foo
     </span>
-    <button
-      className="button-clean text-middle"
+    <DeleteButton
+      className="button-small"
+      onClick={[Function]}
     >
-      <CloseIcon
-        className="icon-red"
+      <ButtonIcon
+        className="button-small"
+        color="#d4333f"
+        onClick={[Function]}
       >
-        <svg
-          className="icon-red"
-          height={16}
-          viewBox="0 0 16 16"
-          width={16}
-          xmlns="http://www.w3.org/2000/svg"
+        <button
+          className="button-small button-icon"
+          onClick={[Function]}
+          style={
+            Object {
+              "color": "#d4333f",
+            }
+          }
         >
-          <path
-            d="M12.843 11.232q0 0.357-0.25 0.607l-1.214 1.214q-0.25 0.25-0.607 0.25t-0.607-0.25l-2.625-2.625-2.625 2.625q-0.25 0.25-0.607 0.25t-0.607-0.25l-1.214-1.214q-0.25-0.25-0.25-0.607t0.25-0.607l2.625-2.625-2.625-2.625q-0.25-0.25-0.25-0.607t0.25-0.607l1.214-1.214q0.25-0.25 0.607-0.25t0.607 0.25l2.625 2.625 2.625-2.625q0.25-0.25 0.607-0.25t0.607 0.25l1.214 1.214q0.25 0.25 0.25 0.607t-0.25 0.607l-2.625 2.625 2.625 2.625q0.25 0.25 0.25 0.607z"
-            fill="currentColor"
-          />
-        </svg>
-      </CloseIcon>
-    </button>
-  </form>
+          <ClearIcon />
+        </button>
+      </ButtonIcon>
+    </DeleteButton>
+  </div>
 </NewOrganizationForm>
 `;
 
@@ -107,35 +107,35 @@ exports[`deletes organization 1`] = `
   onDelete={[Function]}
   onDone={[Function]}
 >
-  <form
-    onSubmit={[Function]}
-  >
+  <div>
     <span
       className="spacer-right text-middle"
     >
       foo
     </span>
-    <button
-      className="button-clean text-middle"
+    <DeleteButton
+      className="button-small"
+      onClick={[Function]}
     >
-      <CloseIcon
-        className="icon-red"
+      <ButtonIcon
+        className="button-small"
+        color="#d4333f"
+        onClick={[Function]}
       >
-        <svg
-          className="icon-red"
-          height={16}
-          viewBox="0 0 16 16"
-          width={16}
-          xmlns="http://www.w3.org/2000/svg"
+        <button
+          className="button-small button-icon"
+          onClick={[Function]}
+          style={
+            Object {
+              "color": "#d4333f",
+            }
+          }
         >
-          <path
-            d="M12.843 11.232q0 0.357-0.25 0.607l-1.214 1.214q-0.25 0.25-0.607 0.25t-0.607-0.25l-2.625-2.625-2.625 2.625q-0.25 0.25-0.607 0.25t-0.607-0.25l-1.214-1.214q-0.25-0.25-0.25-0.607t0.25-0.607l2.625-2.625-2.625-2.625q-0.25-0.25-0.25-0.607t0.25-0.607l1.214-1.214q0.25-0.25 0.607-0.25t0.607 0.25l2.625 2.625 2.625-2.625q0.25-0.25 0.607-0.25t0.607 0.25l1.214 1.214q0.25 0.25 0.25 0.607t-0.25 0.607l-2.625 2.625 2.625 2.625q0.25 0.25 0.25 0.607z"
-            fill="currentColor"
-          />
-        </svg>
-      </CloseIcon>
-    </button>
-  </form>
+          <ClearIcon />
+        </button>
+      </ButtonIcon>
+    </DeleteButton>
+  </div>
 </NewOrganizationForm>
 `;
 
@@ -144,9 +144,7 @@ exports[`deletes organization 2`] = `
   onDelete={[Function]}
   onDone={[Function]}
 >
-  <form
-    onSubmit={[Function]}
-  >
+  <div>
     <span
       className="spacer-right text-middle"
     >
@@ -155,7 +153,7 @@ exports[`deletes organization 2`] = `
     <i
       className="spinner text-middle"
     />
-  </form>
+  </div>
 </NewOrganizationForm>
 `;
 
diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/NewProjectForm-test.js.snap b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/NewProjectForm-test.js.snap
index 1943af530a5..1074cf5cefc 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/NewProjectForm-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/NewProjectForm-test.js.snap
@@ -94,35 +94,35 @@ exports[`creates new project 3`] = `
     >
       onboarding.language.project_key
     </h4>
-    <form
-      onSubmit={[Function]}
-    >
+    <div>
       <span
         className="spacer-right text-middle"
       >
         foo
       </span>
-      <button
-        className="button-clean text-middle"
+      <DeleteButton
+        className="button-small text-middle"
+        onClick={[Function]}
       >
-        <CloseIcon
-          className="icon-red"
+        <ButtonIcon
+          className="button-small text-middle"
+          color="#d4333f"
+          onClick={[Function]}
         >
-          <svg
-            className="icon-red"
-            height={16}
-            viewBox="0 0 16 16"
-            width={16}
-            xmlns="http://www.w3.org/2000/svg"
+          <button
+            className="button-small text-middle button-icon"
+            onClick={[Function]}
+            style={
+              Object {
+                "color": "#d4333f",
+              }
+            }
           >
-            <path
-              d="M12.843 11.232q0 0.357-0.25 0.607l-1.214 1.214q-0.25 0.25-0.607 0.25t-0.607-0.25l-2.625-2.625-2.625 2.625q-0.25 0.25-0.607 0.25t-0.607-0.25l-1.214-1.214q-0.25-0.25-0.25-0.607t0.25-0.607l2.625-2.625-2.625-2.625q-0.25-0.25-0.25-0.607t0.25-0.607l1.214-1.214q0.25-0.25 0.607-0.25t0.607 0.25l2.625 2.625 2.625-2.625q0.25-0.25 0.607-0.25t0.607 0.25l1.214 1.214q0.25 0.25 0.25 0.607t-0.25 0.607l-2.625 2.625 2.625 2.625q0.25 0.25 0.25 0.607z"
-              fill="currentColor"
-            />
-          </svg>
-        </CloseIcon>
-      </button>
-    </form>
+            <ClearIcon />
+          </button>
+        </ButtonIcon>
+      </DeleteButton>
+    </div>
   </div>
 </NewProjectForm>
 `;
@@ -140,35 +140,35 @@ exports[`deletes project 1`] = `
     >
       onboarding.language.project_key
     </h4>
-    <form
-      onSubmit={[Function]}
-    >
+    <div>
       <span
         className="spacer-right text-middle"
       >
         foo
       </span>
-      <button
-        className="button-clean text-middle"
+      <DeleteButton
+        className="button-small text-middle"
+        onClick={[Function]}
       >
-        <CloseIcon
-          className="icon-red"
+        <ButtonIcon
+          className="button-small text-middle"
+          color="#d4333f"
+          onClick={[Function]}
         >
-          <svg
-            className="icon-red"
-            height={16}
-            viewBox="0 0 16 16"
-            width={16}
-            xmlns="http://www.w3.org/2000/svg"
+          <button
+            className="button-small text-middle button-icon"
+            onClick={[Function]}
+            style={
+              Object {
+                "color": "#d4333f",
+              }
+            }
           >
-            <path
-              d="M12.843 11.232q0 0.357-0.25 0.607l-1.214 1.214q-0.25 0.25-0.607 0.25t-0.607-0.25l-2.625-2.625-2.625 2.625q-0.25 0.25-0.607 0.25t-0.607-0.25l-1.214-1.214q-0.25-0.25-0.25-0.607t0.25-0.607l2.625-2.625-2.625-2.625q-0.25-0.25-0.25-0.607t0.25-0.607l1.214-1.214q0.25-0.25 0.607-0.25t0.607 0.25l2.625 2.625 2.625-2.625q0.25-0.25 0.607-0.25t0.607 0.25l1.214 1.214q0.25 0.25 0.25 0.607t-0.25 0.607l-2.625 2.625 2.625 2.625q0.25 0.25 0.25 0.607z"
-              fill="currentColor"
-            />
-          </svg>
-        </CloseIcon>
-      </button>
-    </form>
+            <ClearIcon />
+          </button>
+        </ButtonIcon>
+      </DeleteButton>
+    </div>
   </div>
 </NewProjectForm>
 `;
@@ -186,9 +186,7 @@ exports[`deletes project 2`] = `
     >
       onboarding.language.project_key
     </h4>
-    <form
-      onSubmit={[Function]}
-    >
+    <div>
       <span
         className="spacer-right text-middle"
       >
@@ -197,7 +195,7 @@ exports[`deletes project 2`] = `
       <i
         className="spinner text-middle"
       />
-    </form>
+    </div>
   </div>
 </NewProjectForm>
 `;
diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/ProjectKeyStep-test.js.snap b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/ProjectKeyStep-test.js.snap
deleted file mode 100644
index 21ad43db2e6..00000000000
--- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/ProjectKeyStep-test.js.snap
+++ /dev/null
@@ -1,215 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`creates new project 1`] = `
-<ProjectKeyStep
-  onDelete={[Function]}
-  onDone={[Function]}
->
-  <div
-    className="big-spacer-top"
-  >
-    <h4
-      className="spacer-bottom"
-    >
-      onboarding.language.project_key
-    </h4>
-    <form
-      onSubmit={[Function]}
-    >
-      <input
-        autoFocus={true}
-        className="input-large spacer-right text-middle"
-        maxLength={400}
-        minLength={1}
-        onChange={[Function]}
-        required={true}
-        type="text"
-        value=""
-      />
-      <button
-        className="text-middle"
-        disabled={true}
-      >
-        Done
-      </button>
-      <div
-        className="note spacer-top abs-width-300"
-      >
-        onboarding.project_key_requirement
-      </div>
-    </form>
-  </div>
-</ProjectKeyStep>
-`;
-
-exports[`creates new project 2`] = `
-<ProjectKeyStep
-  onDelete={[Function]}
-  onDone={[Function]}
->
-  <div
-    className="big-spacer-top"
-  >
-    <h4
-      className="spacer-bottom"
-    >
-      onboarding.language.project_key
-    </h4>
-    <form
-      onSubmit={[Function]}
-    >
-      <input
-        autoFocus={true}
-        className="input-large spacer-right text-middle"
-        maxLength={400}
-        minLength={1}
-        onChange={[Function]}
-        required={true}
-        type="text"
-        value="foo"
-      />
-      <i
-        className="spinner"
-      />
-      <div
-        className="note spacer-top abs-width-300"
-      >
-        onboarding.project_key_requirement
-      </div>
-    </form>
-  </div>
-</ProjectKeyStep>
-`;
-
-exports[`creates new project 3`] = `
-<ProjectKeyStep
-  onDelete={[Function]}
-  onDone={[Function]}
->
-  <div
-    className="big-spacer-top"
-  >
-    <h4
-      className="spacer-bottom"
-    >
-      onboarding.language.project_key
-    </h4>
-    <form
-      onSubmit={[Function]}
-    >
-      <span
-        className="spacer-right text-middle"
-      >
-        foo
-      </span>
-      <button
-        className="button-clean"
-      >
-        <DeleteIcon />
-      </button>
-    </form>
-  </div>
-</ProjectKeyStep>
-`;
-
-exports[`deletes project 1`] = `
-<ProjectKeyStep
-  onDelete={[Function]}
-  onDone={[Function]}
->
-  <div
-    className="big-spacer-top"
-  >
-    <h4
-      className="spacer-bottom"
-    >
-      onboarding.language.project_key
-    </h4>
-    <form
-      onSubmit={[Function]}
-    >
-      <span
-        className="spacer-right text-middle"
-      >
-        foo
-      </span>
-      <button
-        className="button-clean"
-      >
-        <DeleteIcon />
-      </button>
-    </form>
-  </div>
-</ProjectKeyStep>
-`;
-
-exports[`deletes project 2`] = `
-<ProjectKeyStep
-  onDelete={[Function]}
-  onDone={[Function]}
->
-  <div
-    className="big-spacer-top"
-  >
-    <h4
-      className="spacer-bottom"
-    >
-      onboarding.language.project_key
-    </h4>
-    <form
-      onSubmit={[Function]}
-    >
-      <span
-        className="spacer-right text-middle"
-      >
-        foo
-      </span>
-      <i
-        className="spinner"
-      />
-    </form>
-  </div>
-</ProjectKeyStep>
-`;
-
-exports[`deletes project 3`] = `
-<ProjectKeyStep
-  onDelete={[Function]}
-  onDone={[Function]}
->
-  <div
-    className="big-spacer-top"
-  >
-    <h4
-      className="spacer-bottom"
-    >
-      onboarding.language.project_key
-    </h4>
-    <form
-      onSubmit={[Function]}
-    >
-      <input
-        autoFocus={true}
-        className="input-large spacer-right text-middle"
-        maxLength={400}
-        minLength={1}
-        onChange={[Function]}
-        required={true}
-        type="text"
-        value=""
-      />
-      <button
-        className="text-middle"
-        disabled={true}
-      >
-        Done
-      </button>
-      <div
-        className="note spacer-top abs-width-300"
-      >
-        onboarding.project_key_requirement
-      </div>
-    </form>
-  </div>
-</ProjectKeyStep>
-`;
diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/TokenStep-test.js.snap b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/TokenStep-test.js.snap
index 637a26c6425..c0f9d5a2e4e 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/TokenStep-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/TokenStep-test.js.snap
@@ -264,27 +264,28 @@ exports[`generates token 3`] = `
           >
             abcd1234
           </strong>
-          <button
-            className="button-clean text-middle"
+          <DeleteButton
+            className="button-small text-middle"
             onClick={[Function]}
           >
-            <CloseIcon
-              className="icon-red"
+            <ButtonIcon
+              className="button-small text-middle"
+              color="#d4333f"
+              onClick={[Function]}
             >
-              <svg
-                className="icon-red"
-                height={16}
-                viewBox="0 0 16 16"
-                width={16}
-                xmlns="http://www.w3.org/2000/svg"
+              <button
+                className="button-small text-middle button-icon"
+                onClick={[Function]}
+                style={
+                  Object {
+                    "color": "#d4333f",
+                  }
+                }
               >
-                <path
-                  d="M12.843 11.232q0 0.357-0.25 0.607l-1.214 1.214q-0.25 0.25-0.607 0.25t-0.607-0.25l-2.625-2.625-2.625 2.625q-0.25 0.25-0.607 0.25t-0.607-0.25l-1.214-1.214q-0.25-0.25-0.25-0.607t0.25-0.607l2.625-2.625-2.625-2.625q-0.25-0.25-0.25-0.607t0.25-0.607l1.214-1.214q0.25-0.25 0.607-0.25t0.607 0.25l2.625 2.625 2.625-2.625q0.25-0.25 0.607-0.25t0.607 0.25l1.214 1.214q0.25 0.25 0.25 0.607t-0.25 0.607l-2.625 2.625 2.625 2.625q0.25 0.25 0.25 0.607z"
-                  fill="currentColor"
-                />
-              </svg>
-            </CloseIcon>
-          </button>
+                <ClearIcon />
+              </button>
+            </ButtonIcon>
+          </DeleteButton>
         </form>
         <div
           className="note big-spacer-top width-50"
@@ -364,27 +365,28 @@ exports[`revokes token 1`] = `
           >
             abcd1234
           </strong>
-          <button
-            className="button-clean text-middle"
+          <DeleteButton
+            className="button-small text-middle"
             onClick={[Function]}
           >
-            <CloseIcon
-              className="icon-red"
+            <ButtonIcon
+              className="button-small text-middle"
+              color="#d4333f"
+              onClick={[Function]}
             >
-              <svg
-                className="icon-red"
-                height={16}
-                viewBox="0 0 16 16"
-                width={16}
-                xmlns="http://www.w3.org/2000/svg"
+              <button
+                className="button-small text-middle button-icon"
+                onClick={[Function]}
+                style={
+                  Object {
+                    "color": "#d4333f",
+                  }
+                }
               >
-                <path
-                  d="M12.843 11.232q0 0.357-0.25 0.607l-1.214 1.214q-0.25 0.25-0.607 0.25t-0.607-0.25l-2.625-2.625-2.625 2.625q-0.25 0.25-0.607 0.25t-0.607-0.25l-1.214-1.214q-0.25-0.25-0.25-0.607t0.25-0.607l2.625-2.625-2.625-2.625q-0.25-0.25-0.25-0.607t0.25-0.607l1.214-1.214q0.25-0.25 0.607-0.25t0.607 0.25l2.625 2.625 2.625-2.625q0.25-0.25 0.607-0.25t0.607 0.25l1.214 1.214q0.25 0.25 0.25 0.607t-0.25 0.607l-2.625 2.625 2.625 2.625q0.25 0.25 0.25 0.607z"
-                  fill="currentColor"
-                />
-              </svg>
-            </CloseIcon>
-          </button>
+                <ClearIcon />
+              </button>
+            </ButtonIcon>
+          </DeleteButton>
         </form>
         <div
           className="note big-spacer-top width-50"
diff --git a/server/sonar-web/src/main/js/apps/users/components/UsersAppContainer.js b/server/sonar-web/src/main/js/apps/users/components/UsersAppContainer.js
index 3dae41946b2..70b309109d0 100644
--- a/server/sonar-web/src/main/js/apps/users/components/UsersAppContainer.js
+++ b/server/sonar-web/src/main/js/apps/users/components/UsersAppContainer.js
@@ -24,6 +24,8 @@ import { connect } from 'react-redux';
 import init from '../init';
 import { getCurrentUser } from '../../../store/rootReducer';
 import { translate } from '../../../helpers/l10n';
+// import styles to have the `.button-icon` styles
+import '../../../components/ui/buttons.css';
 
 class UsersAppContainer extends React.PureComponent {
   static propTypes = {
diff --git a/server/sonar-web/src/main/js/apps/users/templates/users-form.hbs b/server/sonar-web/src/main/js/apps/users/templates/users-form.hbs
index 8538c31d914..35a49fba342 100644
--- a/server/sonar-web/src/main/js/apps/users/templates/users-form.hbs
+++ b/server/sonar-web/src/main/js/apps/users/templates/users-form.hbs
@@ -38,12 +38,24 @@
       <label>{{t 'my_profile.scm_accounts'}}</label>
       <span class="js-scm-input hidden">
         <input name="scmAccounts" type="text" size="50" maxlength="255">
-        <a class="icon-delete js-remove-scm" href="#"></a>
+        <button class="js-remove-scm button-icon text-top" href="#">
+          <svg width="16" height="16" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
+            <g transform="matrix(0.0392029,0,0,0.0392029,0.878798,-1.19111)">
+              <path d="M334.7,138.6L277.5,81.4L181.6,177.3L85.8,81.4L28.6,138.6L124.4,234.4L28.6,330.3L85.8,387.5L181.6,291.6L277.5,387.5L334.7,330.3L238.8,234.4L334.7,138.6Z" style="fill: #d4333f"/>
+            </g>
+          </svg>
+        </button>
       </span>
       {{#each scmAccounts}}
         <span class="js-scm-input">
           <input name="scmAccounts" type="text" size="50" maxlength="255" value="{{this}}">
-          <a class="icon-delete js-remove-scm" href="#"></a>
+          <button class="js-remove-scm button-icon text-top" href="#">
+            <svg width="16" height="16" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
+              <g transform="matrix(0.0392029,0,0,0.0392029,0.878798,-1.19111)">
+                <path d="M334.7,138.6L277.5,81.4L181.6,177.3L85.8,81.4L28.6,138.6L124.4,234.4L28.6,330.3L85.8,387.5L181.6,291.6L277.5,387.5L334.7,330.3L238.8,234.4L334.7,138.6Z" style="fill: #d4333f"/>
+              </g>
+          </svg>
+          </button>
         </span>
       {{/each}}
       <div class="spacer-bottom">
diff --git a/server/sonar-web/src/main/js/components/controls/ActionsDropdown.tsx b/server/sonar-web/src/main/js/components/controls/ActionsDropdown.tsx
index fbcb30b299c..04a4426cf44 100644
--- a/server/sonar-web/src/main/js/components/controls/ActionsDropdown.tsx
+++ b/server/sonar-web/src/main/js/components/controls/ActionsDropdown.tsx
@@ -35,13 +35,13 @@ export default function ActionsDropdown(props: Props) {
     <div className={classNames('dropdown', props.className)}>
       <button
         className={classNames('dropdown-toggle', props.toggleClassName, {
-          'button-small button-compact': props.small
+          'button-small': props.small
         })}
         data-toggle="dropdown">
         <SettingsIcon className="text-text-bottom" />
         <i className="icon-dropdown little-spacer-left" />
       </button>
-      <ul className="dropdown-menu dropdown-menu-right">{props.children}</ul>
+      <ul className="dropdown-menu">{props.children}</ul>
     </div>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/controls/DateInput.tsx b/server/sonar-web/src/main/js/components/controls/DateInput.tsx
index 1bb65c64457..7f9c1fdc324 100644
--- a/server/sonar-web/src/main/js/components/controls/DateInput.tsx
+++ b/server/sonar-web/src/main/js/components/controls/DateInput.tsx
@@ -21,8 +21,10 @@ import * as $ from 'jquery';
 import * as React from 'react';
 import * as classNames from 'classnames';
 import { pick } from 'lodash';
+import * as theme from '../../app/theme';
+import ClearIcon from '../icons-components/ClearIcon';
+import { ButtonIcon } from '../ui/buttons';
 import './styles.css';
-import CloseIcon from '../icons-components/CloseIcon';
 
 interface Props {
   className?: string;
@@ -65,9 +67,7 @@ export default class DateInput extends React.PureComponent<Props> {
     this.props.onChange(value);
   };
 
-  handleResetClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
-    event.preventDefault();
-    event.currentTarget.blur();
+  handleResetClick = () => {
     this.props.onChange(undefined);
   };
 
@@ -109,9 +109,12 @@ export default class DateInput extends React.PureComponent<Props> {
           </svg>
         </span>
         {this.props.value !== undefined && (
-          <a className="date-input-control-reset" href="#" onClick={this.handleResetClick}>
-            <CloseIcon className="" />
-          </a>
+          <ButtonIcon
+            className="button-tiny date-input-control-reset"
+            color={theme.gray60}
+            onClick={this.handleResetClick}>
+            <ClearIcon size={12} />
+          </ButtonIcon>
         )}
       </span>
     );
diff --git a/server/sonar-web/src/main/js/components/controls/Select.tsx b/server/sonar-web/src/main/js/components/controls/Select.tsx
index 406c81fa362..240b4164bf2 100644
--- a/server/sonar-web/src/main/js/components/controls/Select.tsx
+++ b/server/sonar-web/src/main/js/components/controls/Select.tsx
@@ -25,11 +25,26 @@ import ReactSelect, {
   ReactCreatableSelectProps,
   ReactAsyncSelectProps
 } from 'react-select';
+import * as theme from '../../app/theme';
+import ClearIcon from '../icons-components/ClearIcon';
+import { ButtonIcon } from '../ui/buttons';
 import './react-select.css';
 
+function renderInput() {
+  return (
+    <ButtonIcon className="button-tiny spacer-left text-middle" color={theme.gray60}>
+      <ClearIcon size={12} />
+    </ButtonIcon>
+  );
+}
+
 export default function Select(props: ReactSelectProps) {
   // TODO try to define good defaults, if any
-  return <ReactSelect {...props} />;
+  // ReactSelect doesn't declare `clearRenderer` prop
+  const ReactSelectAny = ReactSelect as any;
+  // hide the "x" icon when select is empty
+  const clearable = props.clearable ? Boolean(props.value) : false;
+  return <ReactSelectAny {...props} clearable={clearable} clearRenderer={renderInput} />;
 }
 
 export function Creatable(props: ReactCreatableSelectProps) {
diff --git a/server/sonar-web/src/main/js/components/controls/react-select.css b/server/sonar-web/src/main/js/components/controls/react-select.css
index 3d3816e8aa4..4e130a23369 100644
--- a/server/sonar-web/src/main/js/components/controls/react-select.css
+++ b/server/sonar-web/src/main/js/components/controls/react-select.css
@@ -214,8 +214,8 @@
   position: relative;
   text-align: center;
   vertical-align: middle;
-  width: 9px;
-  padding-left: 4px;
+  width: 16px;
+  height: 16px;
   padding-right: 4px;
 }
 
diff --git a/server/sonar-web/src/main/js/components/icons-components/AlertErrorIcon.tsx b/server/sonar-web/src/main/js/components/icons-components/AlertErrorIcon.tsx
index ce08d3d97ba..3c05c751176 100644
--- a/server/sonar-web/src/main/js/components/icons-components/AlertErrorIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons-components/AlertErrorIcon.tsx
@@ -19,22 +19,20 @@
  */
 import * as React from 'react';
 import * as theme from '../../app/theme';
+import { IconProps } from './types';
 
-interface Props {
-  className?: string;
-  size?: number;
-}
-
-export default function AlertErrorIcon({ className, size = 16 }: Props) {
+export default function AlertErrorIcon({ className, fill = theme.red, size = 16 }: IconProps) {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
       className={className}
-      height={size}
       width={size}
-      viewBox="0 0 16 16">
+      height={size}
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      xmlSpace="preserve">
       <path
-        style={{ fill: theme.red }}
+        style={{ fill }}
         d="M11.402 10.018q0-0.232-0.17-0.402l-1.616-1.616 1.616-1.616q0.17-0.17 0.17-0.402 0-0.241-0.17-0.411l-0.804-0.804q-0.17-0.17-0.411-0.17-0.232 0-0.402 0.17l-1.616 1.616-1.616-1.616q-0.17-0.17-0.402-0.17-0.241 0-0.411 0.17l-0.804 0.804q-0.17 0.17-0.17 0.411 0 0.232 0.17 0.402l1.616 1.616-1.616 1.616q-0.17 0.17-0.17 0.402 0 0.241 0.17 0.411l0.804 0.804q0.17 0.17 0.411 0.17 0.232 0 0.402-0.17l1.616-1.616 1.616 1.616q0.17 0.17 0.402 0.17 0.241 0 0.411-0.17l0.804-0.804q0.17-0.17 0.17-0.411zM14.857 8q0 1.866-0.92 3.442t-2.496 2.496-3.442 0.92-3.442-0.92-2.496-2.496-0.92-3.442 0.92-3.442 2.496-2.496 3.442-0.92 3.442 0.92 2.496 2.496 0.92 3.442z"
       />
     </svg>
diff --git a/server/sonar-web/src/main/js/components/icons-components/AlertWarnIcon.tsx b/server/sonar-web/src/main/js/components/icons-components/AlertWarnIcon.tsx
index 98a12595841..f9b3f92ab85 100644
--- a/server/sonar-web/src/main/js/components/icons-components/AlertWarnIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons-components/AlertWarnIcon.tsx
@@ -18,23 +18,20 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { IconProps } from './types';
 
-interface Props {
-  className?: string;
-  size?: number;
-}
-
-export default function AlertWarnIcon({ className, size = 16 }: Props) {
-  /* eslint-disable max-len */
+export default function AlertWarnIcon({ className, fill = '#ed7d20', size = 16 }: IconProps) {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
       className={className}
-      height={size}
       width={size}
-      viewBox="0 0 16 16">
+      height={size}
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      xmlSpace="preserve">
       <path
-        style={{ fill: '#ed7d20' }}
+        style={{ fill }}
         d="M8 1.143q1.866 0 3.442.92t2.496 2.496.92 3.442-.92 3.442-2.496 2.496-3.442.92-3.442-.92-2.496-2.496-.92-3.442.92-3.442 2.496-2.496T8 1.143zm1.143 11.134v-1.696q0-.125-.08-.21t-.196-.085H7.153q-.116 0-.205.089t-.089.205v1.696q0 .116.089.205t.205.089h1.714q.116 0 .196-.085t.08-.21zm-.018-3.072l.161-5.545q0-.107-.089-.161-.089-.071-.214-.071H7.019q-.125 0-.214.071-.089.054-.089.161l.152 5.545q0 .089.089.156t.214.067h1.652q.125 0 .21-.067t.094-.156z"
       />
     </svg>
diff --git a/server/sonar-web/src/main/js/components/icons-components/BranchIcon.tsx b/server/sonar-web/src/main/js/components/icons-components/BranchIcon.tsx
index 62c4bf0d741..81353baf6b4 100644
--- a/server/sonar-web/src/main/js/components/icons-components/BranchIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons-components/BranchIcon.tsx
@@ -20,15 +20,13 @@
 import * as React from 'react';
 import ShortLivingBranchIcon from './ShortLivingBranchIcon';
 import LongLivingBranchIcon from './LongLivingBranchIcon';
+import { IconProps } from './types';
 // import PullRequestIcon from './PullRequestIcon';
 import { Branch } from '../../app/types';
 import { isShortLivingBranch } from '../../helpers/branches';
 
-interface Props {
+interface Props extends IconProps {
   branch: Branch;
-  className?: string;
-  color?: string;
-  size?: number;
 }
 
 export default function BranchIcon({ branch, ...props }: Props) {
diff --git a/server/sonar-web/src/main/js/components/icons-components/BubblesIcon.tsx b/server/sonar-web/src/main/js/components/icons-components/BubblesIcon.tsx
index 2372a606683..a62c84d6c3b 100644
--- a/server/sonar-web/src/main/js/components/icons-components/BubblesIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons-components/BubblesIcon.tsx
@@ -18,22 +18,20 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { IconProps } from './types';
 
-interface Props {
-  className?: string;
-  size?: number;
-}
-
-export default function BubblesIcon({ className, size = 16 }: Props) {
+export default function BubblesIcon({ className, fill = 'currentColor', size = 16 }: IconProps) {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
       className={className}
-      height={size}
       width={size}
-      viewBox="0 0 16 16">
+      height={size}
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      xmlSpace="preserve">
       <path
-        fill="currentColor"
+        style={{ fill }}
         d="M4.1 10.2c1 0 1.9.8 1.9 1.9S5.1 14 4.1 14s-1.9-.8-1.9-1.9.8-1.9 1.9-1.9m0-2C2 8.2.2 9.9.2 12.1S1.9 16 4.1 16 8 14.3 8 12.1 6.2 8.2 4.1 8.2zM10.3 2c2 0 3.7 1.7 3.7 3.7s-1.7 3.7-3.7 3.7-3.8-1.6-3.8-3.7S8.2 2 10.3 2m0-2C7.1 0 4.5 2.6 4.5 5.7s2.6 5.7 5.7 5.7S16 8.9 16 5.7 13.4 0 10.3 0z"
       />
     </svg>
diff --git a/server/sonar-web/src/main/js/components/icons-components/BugIcon.tsx b/server/sonar-web/src/main/js/components/icons-components/BugIcon.tsx
index eb5f504ecb8..8cf7db7cbc3 100644
--- a/server/sonar-web/src/main/js/components/icons-components/BugIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons-components/BugIcon.tsx
@@ -18,23 +18,20 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { IconProps } from './types';
 
-interface Props {
-  className?: string;
-  size?: number;
-}
-
-export default function BugIcon({ className, size = 16 }: Props) {
-  /* eslint-disable max-len */
+export default function BugIcon({ className, fill = 'currentColor', size = 16 }: IconProps) {
   return (
     <svg
       className={className}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 16 16"
       width={size}
-      height={size}>
+      height={size}
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      xmlSpace="preserve">
       <path
-        style={{ fill: 'currentColor' }}
+        style={{ fill }}
         d="M11 9h1.3l.5.8.8-.5-.8-1.3H11v-.3l2-2.3V3h-1v2l-1 1.2V5c-.1-.8-.7-1.5-1.4-1.9L11 1.8l-.7-.7-1.8 1.6-1.8-1.6-.7.7 1.5 1.3C6.7 3.5 6.1 4.2 6 5v1.1L5 5V3H4v2.3l2 2.3V8H4.2l-.7 1.2.8.5.4-.7H6v.3l-2 1.9V14h1v-2.4l1-1C6 12 7.1 13 8.4 13h.8c.7 0 1.4-.3 1.8-.9.3-.4.3-.9.2-1.4l.9.9V14h1v-2.8l-2-1.9V9zm-2 2H8V6h1v5z"
       />
     </svg>
diff --git a/server/sonar-web/src/main/js/components/icons-components/ChartLegendIcon.js b/server/sonar-web/src/main/js/components/icons-components/ChartLegendIcon.tsx
similarity index 78%
rename from server/sonar-web/src/main/js/components/icons-components/ChartLegendIcon.js
rename to server/sonar-web/src/main/js/components/icons-components/ChartLegendIcon.tsx
index 93b40513c93..a2206adc21b 100644
--- a/server/sonar-web/src/main/js/components/icons-components/ChartLegendIcon.js
+++ b/server/sonar-web/src/main/js/components/icons-components/ChartLegendIcon.tsx
@@ -17,24 +17,25 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-// @flow
-import React from 'react';
+import * as React from 'react';
+import { IconProps } from './types';
 
-/*::
-type Props = { className?: string, size?: number };
-*/
-
-export default function ChartLegendIcon({ className, size = 16 } /*: Props */) {
-  /* eslint-disable max-len */
+export default function ChartLegendIcon({
+  className,
+  fill = 'currentColor',
+  size = 16
+}: IconProps) {
   return (
     <svg
       className={className}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 16 16"
       width={size}
-      height={size}>
+      height={size}
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      xmlSpace="preserve">
       <path
-        style={{ fill: 'currentColor' }}
+        style={{ fill }}
         d="M14.325 7.143v1.714q0 0.357-0.25 0.607t-0.607 0.25h-10.857q-0.357 0-0.607-0.25t-0.25-0.607v-1.714q0-0.357 0.25-0.607t0.607-0.25h10.857q0.357 0 0.607 0.25t0.25 0.607z"
       />
     </svg>
diff --git a/server/sonar-web/src/main/js/components/icons-components/CheckIcon.tsx b/server/sonar-web/src/main/js/components/icons-components/CheckIcon.tsx
index 487fac702cf..6d41dea3b75 100644
--- a/server/sonar-web/src/main/js/components/icons-components/CheckIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons-components/CheckIcon.tsx
@@ -18,22 +18,20 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { IconProps } from './types';
 
-interface Props {
-  className?: string;
-  size?: number;
-}
-
-export default function CheckIcon({ className, size = 16 }: Props) {
+export default function CheckIcon({ className, fill = 'currentColor', size = 16 }: IconProps) {
   return (
     <svg
       className={className}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 16 16"
       width={size}
-      height={size}>
+      height={size}
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      xmlSpace="preserve">
       <path
-        style={{ fill: 'currentColor' }}
+        style={{ fill }}
         d="M14.92 4.804q0 0.357-0.25 0.607l-7.679 7.679q-0.25 0.25-0.607 0.25t-0.607-0.25l-4.446-4.446q-0.25-0.25-0.25-0.607t0.25-0.607l1.214-1.214q0.25-0.25 0.607-0.25t0.607 0.25l2.625 2.634 5.857-5.866q0.25-0.25 0.607-0.25t0.607 0.25l1.214 1.214q0.25 0.25 0.25 0.607z"
       />;
     </svg>
diff --git a/server/sonar-web/src/main/js/components/icons-components/CloseIcon.tsx b/server/sonar-web/src/main/js/components/icons-components/ClearIcon.tsx
similarity index 57%
rename from server/sonar-web/src/main/js/components/icons-components/CloseIcon.tsx
rename to server/sonar-web/src/main/js/components/icons-components/ClearIcon.tsx
index 5ab53930909..741e9178272 100644
--- a/server/sonar-web/src/main/js/components/icons-components/CloseIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons-components/ClearIcon.tsx
@@ -1,7 +1,7 @@
 /*
  * SonarQube
  * Copyright (C) 2009-2017 SonarSource SA
- * mailto:info AT sonarsource DOT com
+ * mailto:contact AT sonarsource DOT com
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU Lesser General Public
@@ -18,23 +18,21 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { IconProps } from './types';
 
-interface Props {
-  className?: string;
-  size?: number;
-}
-
-export default function CloseIcon({ className, size = 16 }: Props) {
+export default function ClearIcon({ className, fill = 'currentColor', size = 16 }: IconProps) {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
       className={className}
-      height={size}
       width={size}
-      viewBox="0 0 16 16">
+      height={size}
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      xmlSpace="preserve">
       <path
-        fill="currentColor"
-        d="M12.843 11.232q0 0.357-0.25 0.607l-1.214 1.214q-0.25 0.25-0.607 0.25t-0.607-0.25l-2.625-2.625-2.625 2.625q-0.25 0.25-0.607 0.25t-0.607-0.25l-1.214-1.214q-0.25-0.25-0.25-0.607t0.25-0.607l2.625-2.625-2.625-2.625q-0.25-0.25-0.25-0.607t0.25-0.607l1.214-1.214q0.25-0.25 0.607-0.25t0.607 0.25l2.625 2.625 2.625-2.625q0.25-0.25 0.607-0.25t0.607 0.25l1.214 1.214q0.25 0.25 0.25 0.607t-0.25 0.607l-2.625 2.625 2.625 2.625q0.25 0.25 0.25 0.607z"
+        style={{ fill }}
+        d="M14 4.242L11.758 2l-3.76 3.76L4.242 2 2 4.242l3.756 3.756L2 11.758 4.242 14l3.756-3.76 3.76 3.76L14 11.758l-3.76-3.76L14 4.242z"
       />
     </svg>
   );
diff --git a/server/sonar-web/src/main/js/components/icons-components/CodeSmellIcon.tsx b/server/sonar-web/src/main/js/components/icons-components/CodeSmellIcon.tsx
index 767a69fd195..4b45a10c99c 100644
--- a/server/sonar-web/src/main/js/components/icons-components/CodeSmellIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons-components/CodeSmellIcon.tsx
@@ -18,23 +18,18 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { IconProps } from './types';
 
-interface Props {
-  className?: string;
-  size?: number;
-}
-
-export default function CodeSmellIcon({ className, size = 16 }: Props) {
-  /* eslint-disable max-len */
+export default function CodeSmellIcon({ className, fill = 'currentColor', size = 16 }: IconProps) {
   return (
     <svg
       className={className}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 16 16"
       width={size}
-      height={size}>
+      height={size}
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg">
       <path
-        style={{ fill: 'currentColor' }}
+        style={{ fill }}
         d="M8 2C4.7 2 2 4.7 2 8s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zm-.5 5.5h.9v.9h-.9v-.9zm-3.8.2c-.1 0-.2-.1-.2-.2 0-.4.1-1.2.6-2S5.3 4.2 5.6 4c.2 0 .3 0 .3.1l1.3 2.3c0 .1 0 .2-.1.2-.1.2-.2.3-.3.5-.1.2-.2.4-.2.5 0 .1-.1.2-.2.2l-2.7-.1zM9.9 12c-.3.2-1.1.5-2 .5-.9 0-1.7-.3-2-.5-.1 0-.1-.2-.1-.3l1.3-2.3c0-.1.1-.1.2-.1.2.1.3.1.5.1s.4 0 .5-.1c.1 0 .2 0 .2.1l1.3 2.3c.2.2.2.3.1.3zm2.5-4.1L9.7 8c-.1 0-.2-.1-.2-.2 0-.2-.1-.4-.2-.5 0-.1-.2-.3-.3-.4-.1 0-.1-.1-.1-.2l1.3-2.3c.1-.1.2-.1.3-.1.3.2 1 .7 1.5 1.5s.6 1.6.6 2c0 0-.1.1-.2.1z"
       />
     </svg>
diff --git a/server/sonar-web/src/main/js/components/icons-components/DeleteIcon.tsx b/server/sonar-web/src/main/js/components/icons-components/DeleteIcon.tsx
index 75b3e6dcb74..224589add4b 100644
--- a/server/sonar-web/src/main/js/components/icons-components/DeleteIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons-components/DeleteIcon.tsx
@@ -19,24 +19,13 @@
  */
 import * as React from 'react';
 import * as theme from '../../app/theme';
+import { ClearIcon } from './icons';
 
 interface Props {
   className?: string;
   size?: number;
 }
 
-export default function DeleteIcon({ className, size = 12 }: Props) {
-  return (
-    <svg
-      className={className}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 14 14"
-      width={size}
-      height={size}>
-      <path
-        fill={theme.red}
-        d="M14 11.27c0 .3-.1.58-.33.8l-1.6 1.6c-.22.22-.5.33-.8.33-.32 0-.6-.1-.8-.33L7 10.2l-3.46 3.47c-.22.22-.5.33-.8.33-.32 0-.6-.1-.8-.33l-1.6-1.6c-.23-.22-.34-.5-.34-.8 0-.32.1-.6.33-.8L3.8 7 .32 3.54C.1 3.32 0 3.04 0 2.74c0-.32.1-.6.33-.8l1.6-1.6c.22-.23.5-.34.8-.34.32 0 .6.1.8.33L7 3.8 10.46.32c.22-.22.5-.33.8-.33.32 0 .6.1.8.33l1.6 1.6c.23.22.34.5.34.8 0 .32-.1.6-.33.8L10.2 7l3.47 3.46c.22.22.33.5.33.8z"
-      />
-    </svg>
-  );
+export default function DeleteIcon(props: Props) {
+  return <ClearIcon fill={theme.red} {...props} />;
 }
diff --git a/server/sonar-web/src/main/js/components/icons-components/EditIcon.tsx b/server/sonar-web/src/main/js/components/icons-components/EditIcon.tsx
index c327d09c778..d542d0ca73a 100644
--- a/server/sonar-web/src/main/js/components/icons-components/EditIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons-components/EditIcon.tsx
@@ -18,23 +18,21 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { IconProps } from './types';
 
-interface Props {
-  className?: string;
-  size?: number;
-}
-
-export default function EditIcon({ className, size = 14 }: Props) {
+export default function EditIcon({ className, fill = 'currentColor', size = 16 }: IconProps) {
   return (
     <svg
       className={className}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 14 14"
       width={size}
-      height={size}>
+      height={size}
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      xmlSpace="preserve">
       <path
-        fill="currentColor"
-        d="M3.918 11.918l0.711-0.711-1.836-1.836-0.711 0.711v0.836h1v1h0.836zM8.004 4.668q0-0.172-0.172-0.172-0.078 0-0.133 0.055l-4.234 4.234q-0.055 0.055-0.055 0.133 0 0.172 0.172 0.172 0.078 0 0.133-0.055l4.234-4.234q0.055-0.055 0.055-0.133zM7.582 3.168l3.25 3.25-6.5 6.5h-3.25v-3.25zM12.918 3.918q0 0.414-0.289 0.703l-1.297 1.297-3.25-3.25 1.297-1.289q0.281-0.297 0.703-0.297 0.414 0 0.711 0.297l1.836 1.828q0.289 0.305 0.289 0.711z"
+        style={{ fill }}
+        d="M4.875 12.986l.721-.72-1.861-1.862-.721.72v.848h1.014v1.014h.847zm4.143-7.35c0-.117-.058-.175-.174-.175a.183.183 0 0 0-.135.056L4.416 9.81a.183.183 0 0 0-.056.135c0 .116.058.174.175.174a.183.183 0 0 0 .134-.056L8.962 5.77a.183.183 0 0 0 .056-.134zM8.59 4.115l3.295 3.295L5.295 14H2v-3.295l6.59-6.59zm5.41.76a.97.97 0 0 1-.293.713l-1.315 1.315-3.295-3.295L10.412 2.3c.19-.2.428-.301.713-.301.28 0 .52.1.72.301l1.862 1.853c.195.206.293.447.293.721z"
       />
     </svg>
   );
diff --git a/server/sonar-web/src/main/js/components/icons-components/GroupIcon.tsx b/server/sonar-web/src/main/js/components/icons-components/GroupIcon.tsx
index cb971f1c4d9..6074a1acba7 100644
--- a/server/sonar-web/src/main/js/components/icons-components/GroupIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons-components/GroupIcon.tsx
@@ -18,19 +18,22 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import * as theme from '../../app/theme';
+import { IconProps } from './types';
 
-interface Props {
-  className?: string;
-  fill?: string;
-  size?: number;
-}
-
-export default function GroupIcon({ className, fill = '#aaa', size = 36 }: Props) {
+export default function GroupIcon({ className, fill = theme.gray67, size = 36 }: IconProps) {
   return (
-    <svg className={className} width={size} height={size} viewBox="0 0 36 36">
+    <svg
+      className={className}
+      width={size}
+      height={size}
+      viewBox="0 0 36 36"
+      version="1.1"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      xmlSpace="preserve">
       <g transform="matrix(0.0625,0,0,0.0625,3,4)">
         <path
-          fill={fill}
+          style={{ fill }}
           d="M148.25,224C121.25,224.833 99.167,235.5 82,256L48.5,256C34.833,256 23.333,252.625 14,245.875C4.667,239.125 0,229.25 0,216.25C0,157.417 10.333,128 31,128C32,128 35.625,129.75 41.875,133.25C48.125,136.75 56.25,140.292 66.25,143.875C76.25,147.458 86.167,149.25 96,149.25C107.167,149.25 118.25,147.333 129.25,143.5C128.417,149.667 128,155.167 128,160C128,183.167 134.75,204.5 148.25,224ZM416,383.25C416,403.25 409.917,419.042 397.75,430.625C385.583,442.208 369.417,448 349.25,448L130.75,448C110.583,448 94.417,442.208 82.25,430.625C70.083,419.042 64,403.25 64,383.25C64,374.417 64.292,365.792 64.875,357.375C65.458,348.958 66.625,339.875 68.375,330.125C70.125,320.375 72.333,311.333 75,303C77.667,294.667 81.25,286.542 85.75,278.625C90.25,270.708 95.417,263.958 101.25,258.375C107.083,252.792 114.208,248.333 122.625,245C131.042,241.667 140.333,240 150.5,240C152.167,240 155.75,241.792 161.25,245.375C166.75,248.958 172.833,252.958 179.5,257.375C186.167,261.792 195.083,265.792 206.25,269.375C217.417,272.958 228.667,274.75 240,274.75C251.333,274.75 262.583,272.958 273.75,269.375C284.917,265.792 293.833,261.792 300.5,257.375C307.167,252.958 313.25,248.958 318.75,245.375C324.25,241.792 327.833,240 329.5,240C339.667,240 348.958,241.667 357.375,245C365.792,248.333 372.917,252.792 378.75,258.375C384.583,263.958 389.75,270.708 394.25,278.625C398.75,286.542 402.333,294.667 405,303C407.667,311.333 409.875,320.375 411.625,330.125C413.375,339.875 414.542,348.958 415.125,357.375C415.708,365.792 416,374.417 416,383.25ZM160,64C160,81.667 153.75,96.75 141.25,109.25C128.75,121.75 113.667,128 96,128C78.333,128 63.25,121.75 50.75,109.25C38.25,96.75 32,81.667 32,64C32,46.333 38.25,31.25 50.75,18.75C63.25,6.25 78.333,0 96,0C113.667,0 128.75,6.25 141.25,18.75C153.75,31.25 160,46.333 160,64ZM336,160C336,186.5 326.625,209.125 307.875,227.875C289.125,246.625 266.5,256 240,256C213.5,256 190.875,246.625 172.125,227.875C153.375,209.125 144,186.5 144,160C144,133.5 153.375,110.875 172.125,92.125C190.875,73.375 213.5,64 240,64C266.5,64 289.125,73.375 307.875,92.125C326.625,110.875 336,133.5 336,160ZM480,216.25C480,229.25 475.333,239.125 466,245.875C456.667,252.625 445.167,256 431.5,256L398,256C380.833,235.5 358.75,224.833 331.75,224C345.25,204.5 352,183.167 352,160C352,155.167 351.583,149.667 350.75,143.5C361.75,147.333 372.833,149.25 384,149.25C393.833,149.25 403.75,147.458 413.75,143.875C423.75,140.292 431.875,136.75 438.125,133.25C444.375,129.75 448,128 449,128C469.667,128 480,157.417 480,216.25ZM448,64C448,81.667 441.75,96.75 429.25,109.25C416.75,121.75 401.667,128 384,128C366.333,128 351.25,121.75 338.75,109.25C326.25,96.75 320,81.667 320,64C320,46.333 326.25,31.25 338.75,18.75C351.25,6.25 366.333,0 384,0C401.667,0 416.75,6.25 429.25,18.75C441.75,31.25 448,46.333 448,64Z"
         />
       </g>
diff --git a/server/sonar-web/src/main/js/components/icons-components/HelpIcon.tsx b/server/sonar-web/src/main/js/components/icons-components/HelpIcon.tsx
index 5097fde124e..f8413c6624a 100644
--- a/server/sonar-web/src/main/js/components/icons-components/HelpIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons-components/HelpIcon.tsx
@@ -18,19 +18,21 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { IconProps } from './types';
 
-interface Props {
-  className?: string;
-  fill?: string;
-  size?: number;
-}
-
-export default function HelpIcon({ className, fill = 'currentColor', size = 16 }: Props) {
+export default function HelpIcon({ className, fill = 'currentColor', size = 16 }: IconProps) {
   return (
-    <svg className={className} viewBox="0 0 16 16" width={size} height={size}>
+    <svg
+      className={className}
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      xmlSpace="preserve">
       <g transform="matrix(0.0364583,0,0,0.0364583,1,-0.166667)">
         <path
-          fill={fill}
+          style={{ fill }}
           d="M224,344L224,296C224,293.667 223.25,291.75 221.75,290.25C220.25,288.75 218.333,288 216,288L168,288C165.667,288 163.75,288.75 162.25,290.25C160.75,291.75 160,293.667 160,296L160,344C160,346.333 160.75,348.25 162.25,349.75C163.75,351.25 165.667,352 168,352L216,352C218.333,352 220.25,351.25 221.75,349.75C223.25,348.25 224,346.333 224,344ZM288,176C288,161.333 283.375,147.75 274.125,135.25C264.875,122.75 253.333,113.083 239.5,106.25C225.667,99.417 211.5,96 197,96C156.5,96 125.583,113.75 104.25,149.25C101.75,153.25 102.417,156.75 106.25,159.75L139.25,184.75C140.417,185.75 142,186.25 144,186.25C146.667,186.25 148.75,185.25 150.25,183.25C159.083,171.917 166.25,164.25 171.75,160.25C177.417,156.25 184.583,154.25 193.25,154.25C201.25,154.25 208.375,156.417 214.625,160.75C220.875,165.083 224,170 224,175.5C224,181.833 222.333,186.917 219,190.75C215.667,194.583 210,198.333 202,202C191.5,206.667 181.875,213.875 173.125,223.625C164.375,233.375 160,243.833 160,255L160,264C160,266.333 160.75,268.25 162.25,269.75C163.75,271.25 165.667,272 168,272L216,272C218.333,272 220.25,271.25 221.75,269.75C223.25,268.25 224,266.333 224,264C224,260.833 225.792,256.708 229.375,251.625C232.958,246.542 237.5,242.417 243,239.25C248.333,236.25 252.417,233.875 255.25,232.125C258.083,230.375 261.917,227.458 266.75,223.375C271.583,219.292 275.292,215.292 277.875,211.375C280.458,207.458 282.792,202.417 284.875,196.25C286.958,190.083 288,183.333 288,176ZM384,224C384,258.833 375.417,290.958 358.25,320.375C341.083,349.792 317.792,373.083 288.375,390.25C258.958,407.417 226.833,416 192,416C157.167,416 125.042,407.417 95.625,390.25C66.208,373.083 42.917,349.792 25.75,320.375C8.583,290.958 0,258.833 0,224C0,189.167 8.583,157.042 25.75,127.625C42.917,98.208 66.208,74.917 95.625,57.75C125.042,40.583 157.167,32 192,32C226.833,32 258.958,40.583 288.375,57.75C317.792,74.917 341.083,98.208 358.25,127.625C375.417,157.042 384,189.167 384,224Z"
         />
       </g>
diff --git a/server/sonar-web/src/main/js/components/icons-components/HistoryIcon.tsx b/server/sonar-web/src/main/js/components/icons-components/HistoryIcon.tsx
index aac6843a977..5af52b075c1 100644
--- a/server/sonar-web/src/main/js/components/icons-components/HistoryIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons-components/HistoryIcon.tsx
@@ -18,22 +18,20 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { IconProps } from './types';
 
-interface Props {
-  className?: string;
-  size?: number;
-}
-
-export default function IconHistory({ className, size = 16 }: Props) {
+export default function IconHistory({ className, fill = 'currentColor', size = 16 }: IconProps) {
   return (
     <svg
       className={className}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 16 16"
       width={size}
-      height={size}>
+      height={size}
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      xmlSpace="preserve">
       <path
-        style={{ fill: 'currentColor' }}
+        style={{ fill }}
         d="M14.7 3.4v3.3c0 .1 0 .2-.1.2s-.2 0-.3-.1l-.9-.9-4.8 4.8c-.1.1-.1.1-.2.1s-.1 0-.2-.1L6.4 9l-3.2 3.2-1.5-1.5 4.5-4.5c.1-.1.1-.1.2-.1s.1 0 .2.1L8.4 8l3.5-3.5-.9-1c-.1-.1-.1-.2-.1-.3s.1-.1.2-.1h3.3c.1 0 .1 0 .2.1.1 0 .1.1.1.2z"
       />
     </svg>
diff --git a/server/sonar-web/src/main/js/components/icons-components/LinkIcon.tsx b/server/sonar-web/src/main/js/components/icons-components/LinkIcon.tsx
index cbbb2606f69..5ad893afd47 100644
--- a/server/sonar-web/src/main/js/components/icons-components/LinkIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons-components/LinkIcon.tsx
@@ -18,24 +18,24 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { IconProps } from './types';
 
-interface Props {
-  className?: string;
-  size?: number;
-}
-
-export default function LinkIcon({ className, size = 14 }: Props) {
+export default function LinkIcon({ className, fill = 'currentColor', size = 16 }: IconProps) {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
       className={className}
-      height={size}
       width={size}
-      viewBox="0 0 16 16">
-      <path
-        fill="currentColor"
-        d="M13.501 11.429q0-0.357-0.25-0.607l-1.857-1.857q-0.25-0.25-0.607-0.25-0.375 0-0.643 0.286 0.027 0.027 0.17 0.165t0.192 0.192 0.134 0.17 0.116 0.228 0.031 0.246q0 0.357-0.25 0.607t-0.607 0.25q-0.134 0-0.246-0.031t-0.228-0.116-0.17-0.134-0.192-0.192-0.165-0.17q-0.295 0.277-0.295 0.652 0 0.357 0.25 0.607l1.839 1.848q0.241 0.241 0.607 0.241 0.357 0 0.607-0.232l1.313-1.304q0.25-0.25 0.25-0.598zM7.224 5.134q0-0.357-0.25-0.607l-1.839-1.848q-0.25-0.25-0.607-0.25-0.348 0-0.607 0.241l-1.313 1.304q-0.25 0.25-0.25 0.598 0 0.357 0.25 0.607l1.857 1.857q0.241 0.241 0.607 0.241 0.375 0 0.643-0.277-0.027-0.027-0.17-0.165t-0.192-0.192-0.134-0.17-0.116-0.228-0.031-0.246q0-0.357 0.25-0.607t0.607-0.25q0.134 0 0.246 0.031t0.228 0.116 0.17 0.134 0.192 0.192 0.165 0.17q0.295-0.277 0.295-0.652zM15.215 11.429q0 1.071-0.759 1.813l-1.313 1.304q-0.741 0.741-1.813 0.741-1.080 0-1.821-0.759l-1.839-1.848q-0.741-0.741-0.741-1.813 0-1.098 0.786-1.866l-0.786-0.786q-0.768 0.786-1.857 0.786-1.071 0-1.821-0.75l-1.857-1.857q-0.75-0.75-0.75-1.821t0.759-1.813l1.313-1.304q0.741-0.741 1.813-0.741 1.080 0 1.821 0.759l1.839 1.848q0.741 0.741 0.741 1.813 0 1.098-0.786 1.866l0.786 0.786q0.768-0.786 1.857-0.786 1.071 0 1.821 0.75l1.857 1.857q0.75 0.75 0.75 1.821z"
-      />
+      height={size}
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      xmlSpace="preserve">
+      <g transform="matrix(0.823497,0,0,0.823497,1.47008,1.4122)">
+        <path
+          style={{ fill }}
+          d="M13.501,11.429C13.501,11.191 13.418,10.989 13.251,10.822L11.394,8.965C11.227,8.798 11.025,8.715 10.787,8.715C10.537,8.715 10.323,8.81 10.144,9.001C10.162,9.019 10.219,9.074 10.314,9.166C10.409,9.258 10.473,9.322 10.506,9.358C10.539,9.394 10.583,9.451 10.64,9.528C10.697,9.605 10.735,9.681 10.756,9.756C10.777,9.831 10.787,9.913 10.787,10.002C10.787,10.24 10.704,10.442 10.537,10.609C10.37,10.776 10.168,10.859 9.93,10.859C9.841,10.859 9.759,10.849 9.684,10.828C9.609,10.807 9.533,10.769 9.456,10.712C9.379,10.655 9.322,10.611 9.286,10.578C9.25,10.545 9.186,10.481 9.094,10.386C9.002,10.291 8.947,10.234 8.929,10.216C8.732,10.401 8.634,10.618 8.634,10.868C8.634,11.106 8.717,11.308 8.884,11.475L10.723,13.323C10.884,13.484 11.086,13.564 11.33,13.564C11.568,13.564 11.77,13.487 11.937,13.332L13.25,12.028C13.417,11.861 13.5,11.662 13.5,11.43L13.501,11.429ZM7.224,5.134C7.224,4.896 7.141,4.694 6.974,4.527L5.135,2.679C4.968,2.512 4.766,2.429 4.528,2.429C4.296,2.429 4.094,2.509 3.921,2.67L2.608,3.974C2.441,4.141 2.358,4.34 2.358,4.572C2.358,4.81 2.441,5.012 2.608,5.179L4.465,7.036C4.626,7.197 4.828,7.277 5.072,7.277C5.322,7.277 5.536,7.185 5.715,7C5.697,6.982 5.64,6.927 5.545,6.835C5.45,6.743 5.386,6.679 5.353,6.643C5.32,6.607 5.276,6.55 5.219,6.473C5.162,6.396 5.124,6.32 5.103,6.245C5.082,6.17 5.072,6.088 5.072,5.999C5.072,5.761 5.155,5.559 5.322,5.392C5.489,5.225 5.691,5.142 5.929,5.142C6.018,5.142 6.1,5.152 6.175,5.173C6.25,5.194 6.326,5.232 6.403,5.289C6.48,5.346 6.537,5.39 6.573,5.423C6.609,5.456 6.673,5.52 6.765,5.615C6.857,5.71 6.912,5.767 6.93,5.785C7.127,5.6 7.225,5.383 7.225,5.133L7.224,5.134ZM15.215,11.429C15.215,12.143 14.962,12.747 14.456,13.242L13.143,14.546C12.649,15.04 12.045,15.287 11.33,15.287C10.61,15.287 10.003,15.034 9.509,14.528L7.67,12.68C7.176,12.186 6.929,11.582 6.929,10.867C6.929,10.135 7.191,9.513 7.715,9.001L6.929,8.215C6.417,8.739 5.798,9.001 5.072,9.001C4.358,9.001 3.751,8.751 3.251,8.251L1.394,6.394C0.894,5.894 0.644,5.287 0.644,4.573C0.644,3.859 0.897,3.255 1.403,2.76L2.716,1.456C3.21,0.962 3.814,0.715 4.529,0.715C5.249,0.715 5.856,0.968 6.35,1.474L8.189,3.322C8.683,3.816 8.93,4.42 8.93,5.135C8.93,5.867 8.668,6.489 8.144,7.001L8.93,7.787C9.442,7.263 10.061,7.001 10.787,7.001C11.501,7.001 12.108,7.251 12.608,7.751L14.465,9.608C14.965,10.108 15.215,10.715 15.215,11.429L15.215,11.429Z"
+        />
+      </g>
     </svg>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/icons-components/ListIcon.js b/server/sonar-web/src/main/js/components/icons-components/ListIcon.tsx
similarity index 84%
rename from server/sonar-web/src/main/js/components/icons-components/ListIcon.js
rename to server/sonar-web/src/main/js/components/icons-components/ListIcon.tsx
index 66c62be5dcc..d5b9160bf57 100644
--- a/server/sonar-web/src/main/js/components/icons-components/ListIcon.js
+++ b/server/sonar-web/src/main/js/components/icons-components/ListIcon.tsx
@@ -17,24 +17,21 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-// @flow
-import React from 'react';
+import * as React from 'react';
+import { IconProps } from './types';
 
-/*::
-type Props = { className?: string, size?: number };
-*/
-
-export default function ListIcon({ className, size = 16 } /*: Props */) {
-  /* eslint-disable max-len */
+export default function ListIcon({ className, fill = 'currentColor', size = 16 }: IconProps) {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
       className={className}
-      height={size}
       width={size}
-      viewBox="0 0 16 16">
+      height={size}
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      xmlSpace="preserve">
       <path
-        fill="currentColor"
+        style={{ fill }}
         d="M15.045 11.526v1.007q0 0.204-0.149 0.354t-0.354 0.149h-13.084q-0.204 0-0.354-0.149t-0.149-0.354v-1.006q0-0.204 0.149-0.354t0.354-0.149h13.084q0.204 0 0.354 0.149t0.149 0.354zM15.045 8.506v1.006q0 0.204-0.149 0.354t-0.354 0.149h-13.084q-0.204 0-0.354-0.149t-0.149-0.354v-1.006q0-0.204 0.149-0.354t0.354-0.149h13.084q0.204 0 0.354 0.149t0.149 0.354zM15.045 5.487v1.006q0 0.204-0.149 0.354t-0.354 0.149h-13.084q-0.204 0-0.354-0.149t-0.149-0.354v-1.006q0-0.204 0.149-0.354t0.354-0.149h13.084q0.204 0 0.354 0.149t0.149 0.354zM15.045 2.468v1.006q0 0.204-0.149 0.354t-0.354 0.149h-13.084q-0.204 0-0.354-0.149t-0.149-0.354v-1.006q0-0.204 0.149-0.354t0.354-0.149h13.084q0.204 0 0.354 0.149t0.149 0.354z"
       />
     </svg>
diff --git a/server/sonar-web/src/main/js/components/icons-components/LongLivingBranchIcon.tsx b/server/sonar-web/src/main/js/components/icons-components/LongLivingBranchIcon.tsx
index 9e263ee825a..f3f084c8446 100644
--- a/server/sonar-web/src/main/js/components/icons-components/LongLivingBranchIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons-components/LongLivingBranchIcon.tsx
@@ -19,25 +19,25 @@
  */
 import * as React from 'react';
 import * as theme from '../../app/theme';
+import { IconProps } from './types';
 
-interface Props {
-  className?: string;
-  color?: string;
-  size?: number;
-}
-
-export default function LongLivingBranchIcon({ className, color = theme.blue, size = 16 }: Props) {
-  /* eslint-disable max-len */
+export default function LongLivingBranchIcon({
+  className,
+  fill = theme.blue,
+  size = 16
+}: IconProps) {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
       className={className}
-      height={size}
       width={size}
-      viewBox="0 0 16 16">
+      height={size}
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      xmlSpace="preserve">
       <g transform="translate(5, 0)">
         <path
-          style={{ fill: color }}
+          style={{ fill }}
           d="M4.5 8c0-.9-.6-1.7-1.5-1.9V4c.9-.2 1.5-1 1.5-1.9 0-1.1-.9-2-2-2s-2 .9-2 2C.5 3 1.1 3.8 2 4v2.1C1.1 6.3.5 7.1.5 8s.6 1.7 1.5 2v2.1c-.9.2-1.5 1-1.5 1.9 0 1.1.9 2 2 2s2-.9 2-2c0-.9-.6-1.7-1.5-1.9V10c.9-.3 1.5-1 1.5-2zm-3-5.9c0-.6.4-1 1-1s1 .4 1 1-.4 1-1 1-1-.5-1-1zm0 5.9c0-.6.4-1 1-1s1 .4 1 1-.4 1-1 1-1-.4-1-1zm2 6c0 .6-.4 1-1 1s-1-.4-1-1 .4-1 1-1 1 .5 1 1z"
         />
       </g>
diff --git a/server/sonar-web/src/main/js/components/icons-components/OpenCloseIcon.tsx b/server/sonar-web/src/main/js/components/icons-components/OpenCloseIcon.tsx
index ba583b3de7c..5c35472e73c 100644
--- a/server/sonar-web/src/main/js/components/icons-components/OpenCloseIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons-components/OpenCloseIcon.tsx
@@ -18,26 +18,37 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { IconProps } from './types';
 
-interface Props {
-  className?: string;
+interface Props extends IconProps {
   open: boolean;
-  size?: number;
 }
 
-export default function OpenCloseIcon({ className, open, size = 14 }: Props) {
+export default function OpenCloseIcon({
+  className,
+  fill = 'currentColor',
+  open,
+  size = 14
+}: Props) {
   return (
     <svg
       className={className}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 16 16"
       width={size}
       height={size}
-      style={{ fill: 'currentColor' }}>
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      xmlSpace="preserve">
       {open ? (
-        <path d="M13.506 9.289l-5.191 5.184q-0.133 0.133-0.315 0.133t-0.315-0.133l-5.191-5.184q-0.133-0.133-0.133-0.318t0.133-0.318l1.161-1.154q0.133-0.133 0.315-0.133t0.315 0.133l3.715 3.715 3.715-3.715q0.133-0.133 0.315-0.133t0.315 0.133l1.161 1.154q0.133 0.133 0.133 0.318t-0.133 0.318z" />
+        <path
+          style={{ fill }}
+          d="M13.506 9.289l-5.191 5.184q-0.133 0.133-0.315 0.133t-0.315-0.133l-5.191-5.184q-0.133-0.133-0.133-0.318t0.133-0.318l1.161-1.154q0.133-0.133 0.315-0.133t0.315 0.133l3.715 3.715 3.715-3.715q0.133-0.133 0.315-0.133t0.315 0.133l1.161 1.154q0.133 0.133 0.133 0.318t-0.133 0.318z"
+        />
       ) : (
-        <path d="M13.527 9.318l-5.244 5.244q-0.134 0.134-0.318 0.134t-0.318-0.134l-1.173-1.173q-0.134-0.134-0.134-0.318t0.134-0.318l3.753-3.753-3.753-3.753q-0.134-0.134-0.134-0.318t0.134-0.318l1.173-1.173q0.134-0.134 0.318-0.134t0.318 0.134l5.244 5.244q0.134 0.134 0.134 0.318t-0.134 0.318z" />
+        <path
+          style={{ fill }}
+          d="M13.527 9.318l-5.244 5.244q-0.134 0.134-0.318 0.134t-0.318-0.134l-1.173-1.173q-0.134-0.134-0.134-0.318t0.134-0.318l3.753-3.753-3.753-3.753q-0.134-0.134-0.134-0.318t0.134-0.318l1.173-1.173q0.134-0.134 0.318-0.134t0.318 0.134l5.244 5.244q0.134 0.134 0.134 0.318t-0.134 0.318z"
+        />
       )}
     </svg>
   );
diff --git a/server/sonar-web/src/main/js/components/icons-components/OrganizationIcon.js b/server/sonar-web/src/main/js/components/icons-components/OrganizationIcon.tsx
similarity index 83%
rename from server/sonar-web/src/main/js/components/icons-components/OrganizationIcon.js
rename to server/sonar-web/src/main/js/components/icons-components/OrganizationIcon.tsx
index a9bd0122161..dc89017c23d 100644
--- a/server/sonar-web/src/main/js/components/icons-components/OrganizationIcon.js
+++ b/server/sonar-web/src/main/js/components/icons-components/OrganizationIcon.tsx
@@ -17,25 +17,22 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-// @flow
-import React from 'react';
+import * as React from 'react';
 import * as theme from '../../app/theme';
+import { IconProps } from './types';
 
-/*::
-type Props = { className?: string, size?: number };
-*/
-
-export default function OrganizationIcon({ className, size = 16 } /*: Props */) {
-  /* eslint-disable max-len */
+export default function OrganizationIcon({ className, fill = theme.blue, size = 16 }: IconProps) {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
       className={className}
-      height={size}
       width={size}
-      viewBox="0 0 16 16">
+      height={size}
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      xmlSpace="preserve">
       <path
-        style={{ fill: theme.blue }}
+        style={{ fill }}
         d="M13.5 6c-.4 0-.7.1-1.1.2L11 4.8v-.3C11 3.1 9.9 2 8.5 2S6 3.1 6 4.5v.2L4.5 6.2c-.3-.1-.7-.2-1-.2C2.1 6 1 7.1 1 8.5S2.1 11 3.5 11 6 9.9 6 8.5c0-.7-.3-1.3-.7-1.7l1-1c.4.6 1 1 1.7 1.1V9c-1.1.2-2 1.2-2 2.4C6 12.9 7.1 14 8.5 14s2.5-1.1 2.5-2.5c0-1.2-.9-2.2-2-2.4V6.9c.7-.1 1.2-.5 1.6-1.1l1 1c-.4.4-.6 1-.6 1.6 0 1.4 1.1 2.5 2.5 2.5s2.5-1 2.5-2.4S14.9 6 13.5 6zm-10 4C2.7 10 2 9.3 2 8.5S2.7 7 3.5 7 5 7.7 5 8.5 4.3 10 3.5 10zm6.5 1.5c0 .8-.7 1.5-1.5 1.5S7 12.3 7 11.5 7.7 10 8.5 10s1.5.7 1.5 1.5zM8.5 6C7.7 6 7 5.3 7 4.5S7.7 3 8.5 3s1.5.7 1.5 1.5S9.3 6 8.5 6zm5 4c-.8 0-1.5-.7-1.5-1.5S12.7 7 13.5 7s1.5.7 1.5 1.5-.7 1.5-1.5 1.5z"
       />
     </svg>
diff --git a/server/sonar-web/src/main/js/components/icons-components/PendingIcon.tsx b/server/sonar-web/src/main/js/components/icons-components/PendingIcon.tsx
index 3e34178aa1c..ffbdb484f6b 100644
--- a/server/sonar-web/src/main/js/components/icons-components/PendingIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons-components/PendingIcon.tsx
@@ -18,23 +18,24 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import * as classNames from 'classnames';
+import * as theme from '../../app/theme';
+import { IconProps } from './types';
 
-interface Props {
-  className?: string;
-  size?: number;
-}
-
-export default function PendingIcon({ className, size = 16 }: Props) {
+export default function PendingIcon({ className, fill = theme.gray67, size = 16 }: IconProps) {
   return (
     <svg
-      className={classNames('icon-pending', className)}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 16 16"
+      className={className}
       width={size}
-      height={size}>
+      height={size}
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      xmlSpace="preserve">
       <g transform="matrix(0.0364583,0,0,0.0364583,1,-0.166667)">
-        <path d="M224,136L224,248C224,250.333 223.25,252.25 221.75,253.75C220.25,255.25 218.333,256 216,256L136,256C133.667,256 131.75,255.25 130.25,253.75C128.75,252.25 128,250.333 128,248L128,232C128,229.667 128.75,227.75 130.25,226.25C131.75,224.75 133.667,224 136,224L192,224L192,136C192,133.667 192.75,131.75 194.25,130.25C195.75,128.75 197.667,128 200,128L216,128C218.333,128 220.25,128.75 221.75,130.25C223.25,131.75 224,133.667 224,136ZM328,224C328,199.333 321.917,176.583 309.75,155.75C297.583,134.917 281.083,118.417 260.25,106.25C239.417,94.083 216.667,88 192,88C167.333,88 144.583,94.083 123.75,106.25C102.917,118.417 86.417,134.917 74.25,155.75C62.083,176.583 56,199.333 56,224C56,248.667 62.083,271.417 74.25,292.25C86.417,313.083 102.917,329.583 123.75,341.75C144.583,353.917 167.333,360 192,360C216.667,360 239.417,353.917 260.25,341.75C281.083,329.583 297.583,313.083 309.75,292.25C321.917,271.417 328,248.667 328,224ZM384,224C384,258.833 375.417,290.958 358.25,320.375C341.083,349.792 317.792,373.083 288.375,390.25C258.958,407.417 226.833,416 192,416C157.167,416 125.042,407.417 95.625,390.25C66.208,373.083 42.917,349.792 25.75,320.375C8.583,290.958 0,258.833 0,224C0,189.167 8.583,157.042 25.75,127.625C42.917,98.208 66.208,74.917 95.625,57.75C125.042,40.583 157.167,32 192,32C226.833,32 258.958,40.583 288.375,57.75C317.792,74.917 341.083,98.208 358.25,127.625C375.417,157.042 384,189.167 384,224Z" />
+        <path
+          style={{ fill }}
+          d="M224,136L224,248C224,250.333 223.25,252.25 221.75,253.75C220.25,255.25 218.333,256 216,256L136,256C133.667,256 131.75,255.25 130.25,253.75C128.75,252.25 128,250.333 128,248L128,232C128,229.667 128.75,227.75 130.25,226.25C131.75,224.75 133.667,224 136,224L192,224L192,136C192,133.667 192.75,131.75 194.25,130.25C195.75,128.75 197.667,128 200,128L216,128C218.333,128 220.25,128.75 221.75,130.25C223.25,131.75 224,133.667 224,136ZM328,224C328,199.333 321.917,176.583 309.75,155.75C297.583,134.917 281.083,118.417 260.25,106.25C239.417,94.083 216.667,88 192,88C167.333,88 144.583,94.083 123.75,106.25C102.917,118.417 86.417,134.917 74.25,155.75C62.083,176.583 56,199.333 56,224C56,248.667 62.083,271.417 74.25,292.25C86.417,313.083 102.917,329.583 123.75,341.75C144.583,353.917 167.333,360 192,360C216.667,360 239.417,353.917 260.25,341.75C281.083,329.583 297.583,313.083 309.75,292.25C321.917,271.417 328,248.667 328,224ZM384,224C384,258.833 375.417,290.958 358.25,320.375C341.083,349.792 317.792,373.083 288.375,390.25C258.958,407.417 226.833,416 192,416C157.167,416 125.042,407.417 95.625,390.25C66.208,373.083 42.917,349.792 25.75,320.375C8.583,290.958 0,258.833 0,224C0,189.167 8.583,157.042 25.75,127.625C42.917,98.208 66.208,74.917 95.625,57.75C125.042,40.583 157.167,32 192,32C226.833,32 258.958,40.583 288.375,57.75C317.792,74.917 341.083,98.208 358.25,127.625C375.417,157.042 384,189.167 384,224Z"
+        />
       </g>
     </svg>
   );
diff --git a/server/sonar-web/src/main/js/components/icons-components/ProjectEventIcon.js b/server/sonar-web/src/main/js/components/icons-components/ProjectEventIcon.tsx
similarity index 84%
rename from server/sonar-web/src/main/js/components/icons-components/ProjectEventIcon.js
rename to server/sonar-web/src/main/js/components/icons-components/ProjectEventIcon.tsx
index b2a99892e17..234e0e61410 100644
--- a/server/sonar-web/src/main/js/components/icons-components/ProjectEventIcon.js
+++ b/server/sonar-web/src/main/js/components/icons-components/ProjectEventIcon.tsx
@@ -17,22 +17,23 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-// @flow
-import React from 'react';
+import * as React from 'react';
 
-/*::
-type Props = { className?: string, size?: number };
-*/
+interface Props {
+  className?: string;
+  size?: number;
+}
 
-export default function ProjectEventIcon({ className, size = 14 } /*: Props */) {
-  /* eslint-disable max-len */
+export default function ProjectEventIcon({ className, size = 14 }: Props) {
   return (
     <svg
       className={className}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 16 16"
       width={size}
-      height={size}>
+      height={size}
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      xmlSpace="preserve">
       <path
         style={{ fill: '#fff', stroke: 'currentColor', strokeWidth: '2px' }}
         d="M8 2 L14 8 L8 14 L2 8 L8 2 L14 8"
diff --git a/server/sonar-web/src/main/js/components/icons-components/PullRequestIcon.tsx b/server/sonar-web/src/main/js/components/icons-components/PullRequestIcon.tsx
index 41cfe3b50c9..1db71cfd822 100644
--- a/server/sonar-web/src/main/js/components/icons-components/PullRequestIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons-components/PullRequestIcon.tsx
@@ -19,24 +19,20 @@
  */
 import * as React from 'react';
 import * as theme from '../../app/theme';
+import { IconProps } from './types';
 
-interface Props {
-  className?: string;
-  color?: string;
-  size?: number;
-}
-
-export default function PullRequestIcon({ className, color = theme.blue, size = 16 }: Props) {
-  /* eslint-disable max-len */
+export default function PullRequestIcon({ className, fill = theme.blue, size = 16 }: IconProps) {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
       className={className}
-      height={size}
       width={size}
-      viewBox="0 0 16 16">
+      height={size}
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      xmlSpace="preserve">
       <path
-        style={{ fill: color }}
+        style={{ fill }}
         d="M3 11.9V4.1c.9-.2 1.5-1 1.5-1.9 0-1.1-.9-2-2-2s-2 .9-2 2c0 .9.6 1.7 1.5 1.9v7.8c-.9.2-1.5 1-1.5 1.9 0 1.1.9 2 2 2s2-.9 2-2c0-.9-.6-1.6-1.5-1.9zM1.5 2.2c0-.6.4-1 1-1s1 .4 1 1-.4 1-1 1-1-.4-1-1zm1 12.7c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zM14 11.9V5.5c0-.1-.2-3.1-5.1-3.5L10.1.8 9.5.1 6.9 2.6l2.6 2.5.7-.7L8.8 3c4 .2 4.2 2.4 4.2 2.5v6.4c-.9.2-1.5 1-1.5 1.9 0 1.1.9 2 2 2s2-.9 2-2c0-.9-.6-1.6-1.5-1.9zm-.5 3c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"
       />
     </svg>
diff --git a/server/sonar-web/src/main/js/components/icons-components/SettingsIcon.tsx b/server/sonar-web/src/main/js/components/icons-components/SettingsIcon.tsx
index 3c8d8d5ac5b..15fb20321f2 100644
--- a/server/sonar-web/src/main/js/components/icons-components/SettingsIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons-components/SettingsIcon.tsx
@@ -18,32 +18,22 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { IconProps } from './types';
 
-interface Props {
-  className?: string;
-  fill?: string;
-  size?: number;
-  style?: React.CSSProperties;
-}
-
-export default function SettingsIcon({
-  className,
-  fill = 'currentColor',
-  size = 14,
-  style
-}: Props) {
+export default function SettingsIcon({ className, fill = 'currentColor', size = 14 }: IconProps) {
   return (
     <svg
       className={className}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 14 14"
       width={size}
       height={size}
-      style={style}>
+      viewBox="0 0 14 14"
+      version="1.1"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      xmlSpace="preserve">
       <g transform="matrix(0.0364583,0,0,0.0364583,0,-1.16667)">
         <path
-          d="M256,224C256,206.333 249.75,191.25 237.25,178.75C224.75,166.25 209.667,160 192,160C174.333,160 159.25,166.25 146.75,178.75C134.25,191.25 128,206.333 128,224C128,241.667 134.25,256.75 146.75,269.25C159.25,281.75 174.333,288 192,288C209.667,288 224.75,281.75 237.25,269.25C249.75,256.75 256,241.667 256,224ZM384,196.75L384,252.25C384,254.25 383.333,256.167 382,258C380.667,259.833 379,260.917 377,261.25L330.75,268.25C327.583,277.25 324.333,284.833 321,291C326.833,299.333 335.75,310.833 347.75,325.5C349.417,327.5 350.25,329.583 350.25,331.75C350.25,333.917 349.5,335.833 348,337.5C343.5,343.667 335.25,352.667 323.25,364.5C311.25,376.333 303.417,382.25 299.75,382.25C297.75,382.25 295.583,381.5 293.25,380L258.75,353C251.417,356.833 243.833,360 236,362.5C233.333,385.167 230.917,400.667 228.75,409C227.583,413.667 224.583,416 219.75,416L164.25,416C161.917,416 159.875,415.292 158.125,413.875C156.375,412.458 155.417,410.667 155.25,408.5L148.25,362.5C140.083,359.833 132.583,356.75 125.75,353.25L90.5,380C88.833,381.5 86.75,382.25 84.25,382.25C81.917,382.25 79.833,381.333 78,379.5C57,360.5 43.25,346.5 36.75,337.5C35.583,335.833 35,333.917 35,331.75C35,329.75 35.667,327.833 37,326C39.5,322.5 43.75,316.958 49.75,309.375C55.75,301.792 60.25,295.917 63.25,291.75C58.75,283.417 55.333,275.167 53,267L7.25,260.25C5.083,259.917 3.333,258.875 2,257.125C0.667,255.375 0,253.417 0,251.25L0,195.75C0,193.75 0.667,191.833 2,190C3.333,188.167 4.917,187.083 6.75,186.75L53.25,179.75C55.583,172.083 58.833,164.417 63,156.75C56.333,147.25 47.417,135.75 36.25,122.25C34.583,120.25 33.75,118.25 33.75,116.25C33.75,114.583 34.5,112.667 36,110.5C40.333,104.5 48.542,95.542 60.625,83.625C72.708,71.708 80.583,65.75 84.25,65.75C86.417,65.75 88.583,66.583 90.75,68.25L125.25,95C132.583,91.167 140.167,88 148,85.5C150.667,62.833 153.083,47.333 155.25,39C156.417,34.333 159.417,32 164.25,32L219.75,32C222.083,32 224.125,32.708 225.875,34.125C227.625,35.542 228.583,37.333 228.75,39.5L235.75,85.5C243.917,88.167 251.417,91.25 258.25,94.75L293.75,68C295.25,66.5 297.25,65.75 299.75,65.75C301.917,65.75 304,66.583 306,68.25C327.5,88.083 341.25,102.25 347.25,110.75C348.417,112.083 349,113.917 349,116.25C349,118.25 348.333,120.167 347,122C344.5,125.5 340.25,131.042 334.25,138.625C328.25,146.208 323.75,152.083 320.75,156.25C325.083,164.583 328.5,172.75 331,180.75L376.75,187.75C378.917,188.083 380.667,189.125 382,190.875C383.333,192.625 384,194.583 384,196.75Z"
           style={{ fill }}
+          d="M256,224C256,206.333 249.75,191.25 237.25,178.75C224.75,166.25 209.667,160 192,160C174.333,160 159.25,166.25 146.75,178.75C134.25,191.25 128,206.333 128,224C128,241.667 134.25,256.75 146.75,269.25C159.25,281.75 174.333,288 192,288C209.667,288 224.75,281.75 237.25,269.25C249.75,256.75 256,241.667 256,224ZM384,196.75L384,252.25C384,254.25 383.333,256.167 382,258C380.667,259.833 379,260.917 377,261.25L330.75,268.25C327.583,277.25 324.333,284.833 321,291C326.833,299.333 335.75,310.833 347.75,325.5C349.417,327.5 350.25,329.583 350.25,331.75C350.25,333.917 349.5,335.833 348,337.5C343.5,343.667 335.25,352.667 323.25,364.5C311.25,376.333 303.417,382.25 299.75,382.25C297.75,382.25 295.583,381.5 293.25,380L258.75,353C251.417,356.833 243.833,360 236,362.5C233.333,385.167 230.917,400.667 228.75,409C227.583,413.667 224.583,416 219.75,416L164.25,416C161.917,416 159.875,415.292 158.125,413.875C156.375,412.458 155.417,410.667 155.25,408.5L148.25,362.5C140.083,359.833 132.583,356.75 125.75,353.25L90.5,380C88.833,381.5 86.75,382.25 84.25,382.25C81.917,382.25 79.833,381.333 78,379.5C57,360.5 43.25,346.5 36.75,337.5C35.583,335.833 35,333.917 35,331.75C35,329.75 35.667,327.833 37,326C39.5,322.5 43.75,316.958 49.75,309.375C55.75,301.792 60.25,295.917 63.25,291.75C58.75,283.417 55.333,275.167 53,267L7.25,260.25C5.083,259.917 3.333,258.875 2,257.125C0.667,255.375 0,253.417 0,251.25L0,195.75C0,193.75 0.667,191.833 2,190C3.333,188.167 4.917,187.083 6.75,186.75L53.25,179.75C55.583,172.083 58.833,164.417 63,156.75C56.333,147.25 47.417,135.75 36.25,122.25C34.583,120.25 33.75,118.25 33.75,116.25C33.75,114.583 34.5,112.667 36,110.5C40.333,104.5 48.542,95.542 60.625,83.625C72.708,71.708 80.583,65.75 84.25,65.75C86.417,65.75 88.583,66.583 90.75,68.25L125.25,95C132.583,91.167 140.167,88 148,85.5C150.667,62.833 153.083,47.333 155.25,39C156.417,34.333 159.417,32 164.25,32L219.75,32C222.083,32 224.125,32.708 225.875,34.125C227.625,35.542 228.583,37.333 228.75,39.5L235.75,85.5C243.917,88.167 251.417,91.25 258.25,94.75L293.75,68C295.25,66.5 297.25,65.75 299.75,65.75C301.917,65.75 304,66.583 306,68.25C327.5,88.083 341.25,102.25 347.25,110.75C348.417,112.083 349,113.917 349,116.25C349,118.25 348.333,120.167 347,122C344.5,125.5 340.25,131.042 334.25,138.625C328.25,146.208 323.75,152.083 320.75,156.25C325.083,164.583 328.5,172.75 331,180.75L376.75,187.75C378.917,188.083 380.667,189.125 382,190.875C383.333,192.625 384,194.583 384,196.75Z"
         />
       </g>
     </svg>
diff --git a/server/sonar-web/src/main/js/components/icons-components/ShortLivingBranchIcon.tsx b/server/sonar-web/src/main/js/components/icons-components/ShortLivingBranchIcon.tsx
index 0427d451e38..d6204bce7b6 100644
--- a/server/sonar-web/src/main/js/components/icons-components/ShortLivingBranchIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons-components/ShortLivingBranchIcon.tsx
@@ -18,26 +18,26 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { IconProps } from './types';
 import * as theme from '../../app/theme';
 
-interface Props {
-  className?: string;
-  color?: string;
-  size?: number;
-}
-
-export default function ShortLivingBranchIcon({ className, color = theme.blue, size = 16 }: Props) {
-  /* eslint-disable max-len */
+export default function ShortLivingBranchIcon({
+  className,
+  fill = theme.blue,
+  size = 16
+}: IconProps) {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
       className={className}
-      height={size}
       width={size}
-      viewBox="0 0 16 16">
+      height={size}
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      xmlSpace="preserve">
       <g transform="translate(3, 0)">
         <path
-          style={{ fill: color }}
+          style={{ fill }}
           d="M9.5 6.5c0-1.1-.9-2-2-2s-2 .9-2 2c0 .8.5 1.5 1.2 1.8-.3.6-.7 1.1-1.2 1.4-.9.5-1.9.5-2.5.4V4c.9-.2 1.5-1 1.5-1.9 0-1.1-.9-2-2-2s-2 .9-2 2C.5 3 1.1 3.8 2 4v8c-.9.2-1.5 1-1.5 1.9 0 1.1.9 2 2 2s2-.9 2-2c0-.9-.6-1.7-1.5-1.9v-1c.2 0 .5.1.7.1.7 0 1.5-.1 2.2-.6.8-.5 1.4-1.2 1.7-2.1 1.1 0 1.9-.9 1.9-1.9zm-8-4.4c0-.6.4-1 1-1s1 .4 1 1-.4 1-1 1-1-.5-1-1zm2 11.9c0 .6-.4 1-1 1s-1-.4-1-1 .4-1 1-1 1 .4 1 1zm4-6.5c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"
         />
       </g>
diff --git a/server/sonar-web/src/main/js/components/icons-components/SortAscIcon.js b/server/sonar-web/src/main/js/components/icons-components/SortAscIcon.tsx
similarity index 86%
rename from server/sonar-web/src/main/js/components/icons-components/SortAscIcon.js
rename to server/sonar-web/src/main/js/components/icons-components/SortAscIcon.tsx
index b426db01fef..6241465c390 100644
--- a/server/sonar-web/src/main/js/components/icons-components/SortAscIcon.js
+++ b/server/sonar-web/src/main/js/components/icons-components/SortAscIcon.tsx
@@ -17,24 +17,21 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-// @flow
-import React from 'react';
+import * as React from 'react';
+import { IconProps } from './types';
 
-/*::
-type Props = { className?: string, size?: number };
-*/
-
-export default function SortAscIcon({ className, size = 16 } /*: Props */) {
-  /* eslint-disable max-len */
+export default function SortAscIcon({ className, fill = 'currentColor', size = 16 }: IconProps) {
   return (
     <svg
       className={className}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 16 16"
       width={size}
-      height={size}>
+      height={size}
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      xmlSpace="preserve">
       <path
-        style={{ fill: 'currentColor' }}
+        style={{ fill }}
         d="M6.571 12.857q0 0.107-0.089 0.214l-2.848 2.848q-0.089 0.080-0.205 0.080-0.107 0-0.205-0.080l-2.857-2.857q-0.134-0.143-0.063-0.313 0.071-0.179 0.268-0.179h1.714v-12.286q0-0.125 0.080-0.205t0.205-0.080h1.714q0.125 0 0.205 0.080t0.080 0.205v12.286h1.714q0.125 0 0.205 0.080t0.080 0.205zM16 14v1.714q0 0.125-0.080 0.205t-0.205 0.080h-7.429q-0.125 0-0.205-0.080t-0.080-0.205v-1.714q0-0.125 0.080-0.205t0.205-0.080h7.429q0.125 0 0.205 0.080t0.080 0.205zM14.286 9.429v1.714q0 0.125-0.080 0.205t-0.205 0.080h-5.714q-0.125 0-0.205-0.080t-0.080-0.205v-1.714q0-0.125 0.080-0.205t0.205-0.080h5.714q0.125 0 0.205 0.080t0.080 0.205zM12.571 4.857v1.714q0 0.125-0.080 0.205t-0.205 0.080h-4q-0.125 0-0.205-0.080t-0.080-0.205v-1.714q0-0.125 0.080-0.205t0.205-0.080h4q0.125 0 0.205 0.080t0.080 0.205zM10.857 0.286v1.714q0 0.125-0.080 0.205t-0.205 0.080h-2.286q-0.125 0-0.205-0.080t-0.080-0.205v-1.714q0-0.125 0.080-0.205t0.205-0.080h2.286q0.125 0 0.205 0.080t0.080 0.205z"
       />
     </svg>
diff --git a/server/sonar-web/src/main/js/components/icons-components/SortDescIcon.js b/server/sonar-web/src/main/js/components/icons-components/SortDescIcon.tsx
similarity index 86%
rename from server/sonar-web/src/main/js/components/icons-components/SortDescIcon.js
rename to server/sonar-web/src/main/js/components/icons-components/SortDescIcon.tsx
index 041054adf4f..7495f7569f4 100644
--- a/server/sonar-web/src/main/js/components/icons-components/SortDescIcon.js
+++ b/server/sonar-web/src/main/js/components/icons-components/SortDescIcon.tsx
@@ -17,24 +17,21 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-// @flow
-import React from 'react';
+import * as React from 'react';
+import { IconProps } from './types';
 
-/*::
-type Props = { className?: string, size?: number };
-*/
-
-export default function SortDescIcon({ className, size = 16 } /*: Props */) {
-  /* eslint-disable max-len */
+export default function SortDescIcon({ className, fill = 'currentColor', size = 16 }: IconProps) {
   return (
     <svg
       className={className}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 16 16"
       width={size}
-      height={size}>
+      height={size}
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      xmlSpace="preserve">
       <path
-        style={{ fill: 'currentColor' }}
+        style={{ fill }}
         d="M10.857 14v1.714q0 0.125-0.080 0.205t-0.205 0.080h-2.286q-0.125 0-0.205-0.080t-0.080-0.205v-1.714q0-0.125 0.080-0.205t0.205-0.080h2.286q0.125 0 0.205 0.080t0.080 0.205zM6.571 12.857q0 0.107-0.089 0.214l-2.848 2.848q-0.089 0.080-0.205 0.080-0.107 0-0.205-0.080l-2.857-2.857q-0.134-0.143-0.063-0.313 0.071-0.179 0.268-0.179h1.714v-12.286q0-0.125 0.080-0.205t0.205-0.080h1.714q0.125 0 0.205 0.080t0.080 0.205v12.286h1.714q0.125 0 0.205 0.080t0.080 0.205zM12.571 9.429v1.714q0 0.125-0.080 0.205t-0.205 0.080h-4q-0.125 0-0.205-0.080t-0.080-0.205v-1.714q0-0.125 0.080-0.205t0.205-0.080h4q0.125 0 0.205 0.080t0.080 0.205zM14.286 4.857v1.714q0 0.125-0.080 0.205t-0.205 0.080h-5.714q-0.125 0-0.205-0.080t-0.080-0.205v-1.714q0-0.125 0.080-0.205t0.205-0.080h5.714q0.125 0 0.205 0.080t0.080 0.205zM16 0.286v1.714q0 0.125-0.080 0.205t-0.205 0.080h-7.429q-0.125 0-0.205-0.080t-0.080-0.205v-1.714q0-0.125 0.080-0.205t0.205-0.080h7.429q0.125 0 0.205 0.080t0.080 0.205z"
       />
     </svg>
diff --git a/server/sonar-web/src/main/js/components/icons-components/TreeIcon.js b/server/sonar-web/src/main/js/components/icons-components/TreeIcon.tsx
similarity index 84%
rename from server/sonar-web/src/main/js/components/icons-components/TreeIcon.js
rename to server/sonar-web/src/main/js/components/icons-components/TreeIcon.tsx
index 53ff8dbf8aa..5b8fd954576 100644
--- a/server/sonar-web/src/main/js/components/icons-components/TreeIcon.js
+++ b/server/sonar-web/src/main/js/components/icons-components/TreeIcon.tsx
@@ -17,22 +17,21 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-// @flow
-import React from 'react';
+import * as React from 'react';
+import { IconProps } from './types';
 
-/*:: type Props = { className?: string, size?: number }; */
-
-export default function TreeIcon({ className, size = 16 } /*: Props */) {
-  /* eslint-disable max-len */
+export default function TreeIcon({ className, fill = 'currentColor', size = 16 }: IconProps) {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
       className={className}
-      height={size}
       width={size}
-      viewBox="0 0 16 16">
+      height={size}
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      xmlSpace="preserve">
       <path
-        fill="currentColor"
+        style={{ fill }}
         d="M15.045 2.467c0-0.277-0.225-0.503-0.503-0.503h-13.084c-0.277 0-0.503 0.225-0.503 0.503v1.007c0 0.277 0.225 0.503 0.503 0.503h13.084c0.277 0 0.503-0.225 0.503-0.503v-1.007zM15.045 5.487c0-0.277-0.194-0.503-0.432-0.503h-11.216c-0.238 0-0.432 0.225-0.432 0.503v1.007c0 0.277 0.193 0.503 0.432 0.503h11.216c0.238 0 0.432-0.225 0.432-0.503v-1.007zM15.045 8.506c0-0.277-0.161-0.503-0.359-0.503h-9.346c-0.198 0-0.359 0.225-0.359 0.503v1.007c0 0.277 0.161 0.503 0.359 0.503h9.346c0.198 0 0.359-0.225 0.359-0.503v-1.007zM15.045 11.527c0-0.277-0.129-0.503-0.287-0.503h-7.477c-0.159 0-0.288 0.225-0.288 0.503v1.007c0 0.277 0.129 0.503 0.288 0.503h7.477c0.159 0 0.287-0.225 0.287-0.503v-1.007z"
       />
     </svg>
diff --git a/server/sonar-web/src/main/js/components/icons-components/TreemapIcon.js b/server/sonar-web/src/main/js/components/icons-components/TreemapIcon.tsx
similarity index 75%
rename from server/sonar-web/src/main/js/components/icons-components/TreemapIcon.js
rename to server/sonar-web/src/main/js/components/icons-components/TreemapIcon.tsx
index 524112c41db..441eb22e25b 100644
--- a/server/sonar-web/src/main/js/components/icons-components/TreemapIcon.js
+++ b/server/sonar-web/src/main/js/components/icons-components/TreemapIcon.tsx
@@ -17,25 +17,21 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-// @flow
-import React from 'react';
+import * as React from 'react';
+import { IconProps } from './types';
 
-/*:: type Props = { className?: string, size?: number }; */
-
-export default function TreemapIcon({ className, size = 14 } /*: Props */) {
-  /* eslint-disable max-len */
+export default function TreemapIcon({ className, fill = 'currentColor', size = 14 }: IconProps) {
   return (
     <svg
       className={className}
-      height={size}
       width={size}
+      height={size}
       viewBox="0 0 16 16"
-      fillRule="evenodd"
-      clipRule="evenodd"
-      strokeLinejoin="round"
-      strokeMiterlimit="1.414">
+      version="1.1"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      xmlSpace="preserve">
       <path
-        fill="currentColor"
+        style={{ fill }}
         d="M0 0h8v16h-8zM9.143 0h6.857v9.143h-6.857zM9.143 10.286h6.857v5.714h-6.857z"
       />
     </svg>
diff --git a/server/sonar-web/src/main/js/components/icons-components/VulnerabilityIcon.tsx b/server/sonar-web/src/main/js/components/icons-components/VulnerabilityIcon.tsx
index f0fbe93ef53..0e043340b1f 100644
--- a/server/sonar-web/src/main/js/components/icons-components/VulnerabilityIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons-components/VulnerabilityIcon.tsx
@@ -18,23 +18,24 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { IconProps } from './types';
 
-interface Props {
-  className?: string;
-  size?: number;
-}
-
-export default function VulnerabilityIcon({ className, size = 16 }: Props) {
-  /* eslint-disable max-len */
+export default function VulnerabilityIcon({
+  className,
+  fill = 'currentColor',
+  size = 16
+}: IconProps) {
   return (
     <svg
       className={className}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 16 16"
       width={size}
-      height={size}>
+      height={size}
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      xmlSpace="preserve">
       <path
-        style={{ fill: 'currentColor' }}
+        style={{ fill }}
         d="M10.8 5H6V3.9a2.28 2.28 0 0 1 2-2.5 2.22 2.22 0 0 1 1.8 1.2.48.48 0 0 0 .7.2.48.48 0 0 0 .2-.7A3 3 0 0 0 8 .4a3.34 3.34 0 0 0-3 3.5v1.2a2.16 2.16 0 0 0-2 2.1v4.4a2.22 2.22 0 0 0 2.2 2.2h5.6a2.22 2.22 0 0 0 2.2-2.2V7.2A2.22 2.22 0 0 0 10.8 5zm-2.2 5.5v1.2H7.4v-1.2a1.66 1.66 0 0 1-1.1-1.6A1.75 1.75 0 0 1 8 7.2a1.71 1.71 0 0 1 .6 3.3z"
       />
     </svg>
diff --git a/server/sonar-web/src/main/js/components/icons-components/__mocks__/ClearIcon.tsx b/server/sonar-web/src/main/js/components/icons-components/__mocks__/ClearIcon.tsx
new file mode 100644
index 00000000000..2fca30f2ec6
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/icons-components/__mocks__/ClearIcon.tsx
@@ -0,0 +1,22 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+export default function ClearIcon() {
+  return null;
+}
diff --git a/server/sonar-web/src/main/js/components/icons-components/icons.ts b/server/sonar-web/src/main/js/components/icons-components/icons.ts
index e783a6e9adb..d84d2ac30c4 100644
--- a/server/sonar-web/src/main/js/components/icons-components/icons.ts
+++ b/server/sonar-web/src/main/js/components/icons-components/icons.ts
@@ -17,62 +17,37 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import _AlertErrorIcon from './AlertErrorIcon';
-import _AlertWarnIcon from './AlertWarnIcon';
-import _BranchIcon from './BranchIcon';
-import _BubblesIcon from './BubblesIcon';
-import _BugIcon from './BugIcon';
-import _ChangeIcon from './ChangeIcon';
-import _ChartLegendIcon from './ChartLegendIcon';
-import _CheckIcon from './CheckIcon';
-import _CloseIcon from './CloseIcon';
-import _CodeSmellIcon from './CodeSmellIcon';
-import _DeleteIcon from './DeleteIcon';
-import _FavoriteIcon from './FavoriteIcon';
-import _HelpIcon from './HelpIcon';
-import _HistoryIcon from './HistoryIcon';
-import _LinkIcon from './LinkIcon';
-import _ListIcon from './ListIcon';
-import _LongLivingBranchIcon from './LongLivingBranchIcon';
-import _OpenCloseIcon from './OpenCloseIcon';
-import _OrganizationIcon from './OrganizationIcon';
-import _PendingIcon from './PendingIcon';
-import _ProjectEventIcon from './ProjectEventIcon';
-import _PullRequestIcon from './PullRequestIcon';
-import _QualifierIcon from './QualifierIcon';
-import _ShortLivingBranchIcon from './ShortLivingBranchIcon';
-import _SortAscIcon from './SortAscIcon';
-import _SortDescIcon from './SortDescIcon';
-import _TreeIcon from './TreeIcon';
-import _TreemapIcon from './TreemapIcon';
-import _VulnerabilityIcon from './VulnerabilityIcon';
-
-export const AlertErrorIcon = _AlertErrorIcon;
-export const AlertWarnIcon = _AlertWarnIcon;
-export const BranchIcon = _BranchIcon;
-export const BubblesIcon = _BubblesIcon;
-export const BugIcon = _BugIcon;
-export const ChangeIcon = _ChangeIcon;
-export const ChartLegendIcon = _ChartLegendIcon;
-export const CheckIcon = _CheckIcon;
-export const CloseIcon = _CloseIcon;
-export const CodeSmellIcon = _CodeSmellIcon;
-export const DeleteIcon = _DeleteIcon;
-export const FavoriteIcon = _FavoriteIcon;
-export const HelpIcon = _HelpIcon;
-export const HistoryIcon = _HistoryIcon;
-export const LinkIcon = _LinkIcon;
-export const ListIcon = _ListIcon;
-export const LongLivingBranchIcon = _LongLivingBranchIcon;
-export const OpenCloseIcon = _OpenCloseIcon;
-export const OrganizationIcon = _OrganizationIcon;
-export const PendingIcon = _PendingIcon;
-export const ProjectEventIcon = _ProjectEventIcon;
-export const PullRequestIcon = _PullRequestIcon;
-export const QualifierIcon = _QualifierIcon;
-export const ShortLivingBranchIcon = _ShortLivingBranchIcon;
-export const SortAscIcon = _SortAscIcon;
-export const SortDescIcon = _SortDescIcon;
-export const TreeIcon = _TreeIcon;
-export const TreemapIcon = _TreemapIcon;
-export const VulnerabilityIcon = _VulnerabilityIcon;
+export { default as AlertErrorIcon } from './AlertErrorIcon';
+export { default as AlertWarnIcon } from './AlertWarnIcon';
+export { default as BranchIcon } from './BranchIcon';
+export { default as BubblesIcon } from './BubblesIcon';
+export { default as BugIcon } from './BugIcon';
+// @deprecated use EditIcon
+export { default as ChangeIcon } from './EditIcon';
+export { default as ChartLegendIcon } from './ChartLegendIcon';
+export { default as CheckIcon } from './CheckIcon';
+export { default as ClearIcon } from './ClearIcon';
+// @deprecated use ClearIcon
+export { default as CloseIcon } from './ClearIcon';
+export { default as CodeSmellIcon } from './CodeSmellIcon';
+// @deprecated use ClearIcon
+export { default as DeleteIcon } from './DeleteIcon';
+export { default as EditIcon } from './EditIcon';
+export { default as FavoriteIcon } from './FavoriteIcon';
+export { default as HelpIcon } from './HelpIcon';
+export { default as HistoryIcon } from './HistoryIcon';
+export { default as LinkIcon } from './LinkIcon';
+export { default as ListIcon } from './ListIcon';
+export { default as LongLivingBranchIcon } from './LongLivingBranchIcon';
+export { default as OpenCloseIcon } from './OpenCloseIcon';
+export { default as OrganizationIcon } from './OrganizationIcon';
+export { default as PendingIcon } from './PendingIcon';
+export { default as ProjectEventIcon } from './ProjectEventIcon';
+export { default as PullRequestIcon } from './PullRequestIcon';
+export { default as QualifierIcon } from './QualifierIcon';
+export { default as ShortLivingBranchIcon } from './ShortLivingBranchIcon';
+export { default as SortAscIcon } from './SortAscIcon';
+export { default as SortDescIcon } from './SortDescIcon';
+export { default as TreeIcon } from './TreeIcon';
+export { default as TreemapIcon } from './TreemapIcon';
+export { default as VulnerabilityIcon } from './VulnerabilityIcon';
diff --git a/server/sonar-web/src/main/js/components/icons-components/types.ts b/server/sonar-web/src/main/js/components/icons-components/types.ts
new file mode 100644
index 00000000000..27f6a73cbd6
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/icons-components/types.ts
@@ -0,0 +1,24 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+export interface IconProps {
+  className?: string;
+  fill?: string;
+  size?: number;
+}
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueCommentLine.js b/server/sonar-web/src/main/js/components/issue/components/IssueCommentLine.js
index 79c2f1c7b18..5ae0471483b 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueCommentLine.js
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueCommentLine.js
@@ -22,7 +22,7 @@ import React from 'react';
 import Avatar from '../../../components/ui/Avatar';
 import BubblePopupHelper from '../../../components/common/BubblePopupHelper';
 import EditIcon from '../../../components/icons-components/EditIcon';
-import DeleteIcon from '../../../components/icons-components/DeleteIcon';
+import { EditButton, DeleteButton } from '../../../components/ui/buttons';
 import CommentDeletePopup from '../popups/CommentDeletePopup';
 import CommentPopup from '../popups/CommentPopup';
 import DateFromNow from '../../../components/intl/DateFromNow';
@@ -119,11 +119,10 @@ export default class IssueCommentLine extends React.PureComponent {
                   toggleComment={this.toggleEditPopup}
                 />
               }>
-              <button
-                className="js-issue-comment-edit button-link icon-half-transparent"
-                onClick={this.toggleEditPopup}>
-                <EditIcon />
-              </button>
+              <EditButton
+                className="js-issue-comment-edit button-small"
+                onClick={this.toggleEditPopup}
+              />
             </BubblePopupHelper>
           )}
           {comment.updatable && (
@@ -134,11 +133,10 @@ export default class IssueCommentLine extends React.PureComponent {
               position="bottomright"
               togglePopup={this.toggleDeletePopup}
               popup={<CommentDeletePopup onDelete={this.handleDelete} />}>
-              <button
-                className="js-issue-comment-delete button-link icon-half-transparent little-spacer-left"
-                onClick={this.toggleDeletePopup}>
-                <DeleteIcon />
-              </button>
+              <DeleteButton
+                className="js-issue-comment-delete button-small"
+                onClick={this.toggleDeletePopup}
+              />
             </BubblePopupHelper>
           )}
         </div>
diff --git a/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueCommentLine-test.js b/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueCommentLine-test.js
index 3075e60cc89..fc39cfdd0e4 100644
--- a/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueCommentLine-test.js
+++ b/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueCommentLine-test.js
@@ -53,9 +53,10 @@ it('should open the right popups when the buttons are clicked', () => {
   const element = shallow(
     <IssueCommentLine comment={comment} onDelete={jest.fn()} onEdit={jest.fn()} />
   );
-  click(element.find('button.js-issue-comment-edit'));
+  element.find('.js-issue-comment-edit').prop('onClick')();
   expect(element.state()).toMatchSnapshot();
-  click(element.find('button.js-issue-comment-delete'));
+  element.find('.js-issue-comment-delete').prop('onClick')();
   expect(element.state()).toMatchSnapshot();
+  element.update();
   expect(element).toMatchSnapshot();
 });
diff --git a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueCommentLine-test.js.snap b/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueCommentLine-test.js.snap
index 2ffdaa63fd4..71f4ef39f22 100644
--- a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueCommentLine-test.js.snap
+++ b/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueCommentLine-test.js.snap
@@ -79,12 +79,10 @@ exports[`should open the right popups when the buttons are clicked 3`] = `
       position="bottomright"
       togglePopup={[Function]}
     >
-      <button
-        className="js-issue-comment-edit button-link icon-half-transparent"
+      <EditButton
+        className="js-issue-comment-edit button-small"
         onClick={[Function]}
-      >
-        <EditIcon />
-      </button>
+      />
     </BubblePopupHelper>
     <BubblePopupHelper
       className="bubble-popup-helper-inline"
@@ -103,12 +101,10 @@ exports[`should open the right popups when the buttons are clicked 3`] = `
       position="bottomright"
       togglePopup={[Function]}
     >
-      <button
-        className="js-issue-comment-delete button-link icon-half-transparent little-spacer-left"
+      <DeleteButton
+        className="js-issue-comment-delete button-small"
         onClick={[Function]}
-      >
-        <DeleteIcon />
-      </button>
+      />
     </BubblePopupHelper>
   </div>
 </div>
@@ -221,12 +217,10 @@ exports[`should render correctly a comment that is updatable 1`] = `
       position="bottomright"
       togglePopup={[Function]}
     >
-      <button
-        className="js-issue-comment-edit button-link icon-half-transparent"
+      <EditButton
+        className="js-issue-comment-edit button-small"
         onClick={[Function]}
-      >
-        <EditIcon />
-      </button>
+      />
     </BubblePopupHelper>
     <BubblePopupHelper
       className="bubble-popup-helper-inline"
@@ -245,12 +239,10 @@ exports[`should render correctly a comment that is updatable 1`] = `
       position="bottomright"
       togglePopup={[Function]}
     >
-      <button
-        className="js-issue-comment-delete button-link icon-half-transparent little-spacer-left"
+      <DeleteButton
+        className="js-issue-comment-delete button-small"
         onClick={[Function]}
-      >
-        <DeleteIcon />
-      </button>
+      />
     </BubblePopupHelper>
   </div>
 </div>
diff --git a/server/sonar-web/src/main/js/components/nav/NavBar.tsx b/server/sonar-web/src/main/js/components/nav/NavBar.tsx
index e44a3e9d722..19397032533 100644
--- a/server/sonar-web/src/main/js/components/nav/NavBar.tsx
+++ b/server/sonar-web/src/main/js/components/nav/NavBar.tsx
@@ -19,14 +19,13 @@
  */
 import * as React from 'react';
 import * as classNames from 'classnames';
-import NavBarNotif from './NavBarNotif';
 import './NavBar.css';
 
 interface Props {
   children?: any;
   className?: string;
   height: number;
-  notif?: React.ReactElement<NavBarNotif>;
+  notif?: React.ReactNode;
 }
 
 export default function NavBar({ children, className, height, notif, ...other }: Props) {
diff --git a/server/sonar-web/src/main/js/components/nav/NavBarNotif.tsx b/server/sonar-web/src/main/js/components/nav/NavBarNotif.tsx
index c276e20f62f..a58f469c182 100644
--- a/server/sonar-web/src/main/js/components/nav/NavBarNotif.tsx
+++ b/server/sonar-web/src/main/js/components/nav/NavBarNotif.tsx
@@ -19,7 +19,7 @@
  */
 import * as React from 'react';
 import * as classNames from 'classnames';
-import CloseIcon from '../icons-components/CloseIcon';
+import { DeleteButton } from '../ui/buttons';
 
 interface Props {
   children?: React.ReactNode;
@@ -27,31 +27,18 @@ interface Props {
   onCancel?: () => {};
 }
 
-export default class NavBarNotif extends React.PureComponent<Props> {
-  handleCancel = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
-    event.preventDefault();
-    if (this.props.onCancel) {
-      this.props.onCancel();
-    }
-  };
-
-  render() {
-    if (!this.props.children) {
-      return null;
-    }
-    return (
-      <div className={classNames('navbar-notif', this.props.className)}>
-        <div className="navbar-limited clearfix">
-          <div className={classNames({ 'navbar-notif-cancelable': !!this.props.onCancel })}>
-            {this.props.children}
-            {this.props.onCancel && (
-              <a className="button-link text-danger" href="#" onClick={this.handleCancel}>
-                <CloseIcon />
-              </a>
-            )}
-          </div>
+export default function NavBarNotif(props: Props) {
+  if (!props.children) {
+    return null;
+  }
+  return (
+    <div className={classNames('navbar-notif', props.className)}>
+      <div className="navbar-limited clearfix">
+        <div className={classNames({ 'navbar-notif-cancelable': !!props.onCancel })}>
+          {props.children}
+          {props.onCancel && <DeleteButton className="button-small" onClick={props.onCancel} />}
         </div>
       </div>
-    );
-  }
+    </div>
+  );
 }
diff --git a/server/sonar-web/src/main/js/components/icons-components/ChangeIcon.tsx b/server/sonar-web/src/main/js/components/ui/buttons.css
similarity index 51%
rename from server/sonar-web/src/main/js/components/icons-components/ChangeIcon.tsx
rename to server/sonar-web/src/main/js/components/ui/buttons.css
index a36bd201b71..fd15962d0f5 100644
--- a/server/sonar-web/src/main/js/components/icons-components/ChangeIcon.tsx
+++ b/server/sonar-web/src/main/js/components/ui/buttons.css
@@ -17,26 +17,40 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import * as React from 'react';
-import * as theme from '../../app/theme';
+.button-icon {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  vertical-align: middle;
+  width: var(--controlHeight);
+  height: var(--controlHeight);
+  padding: 0;
+  border: none;
+  color: inherit;
+}
+
+.button-icon.button-small {
+  width: var(--smallControlHeight);
+  height: var(--smallControlHeight);
+  padding: 0;
+}
+
+.button-icon.button-small svg {
+  margin-top: 0;
+}
+
+.button-icon.button-tiny {
+  width: var(--tinyControlHeight);
+  height: var(--tinyControlHeight);
+  padding: 0;
+}
 
-interface Props {
-  className?: string;
-  size?: number;
+.button-icon:hover,
+.button-icon:focus {
+  background-color: currentColor;
 }
 
-export default function ChangeIcon({ className, size = 12 }: Props) {
-  return (
-    <svg
-      className={className}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 14 14"
-      width={size}
-      height={size}>
-      <path
-        fill={theme.darkBlue}
-        d="M3.35 12.82l.85-.84L2.02 9.8l-.84.85v.98h1.2v1.2h.97zM8.2 4.24c0-.13-.08-.2-.22-.2-.06 0-.1.02-.15.06l-5 5c-.05.05-.08.1-.08.17 0 .13.07.2.2.2.07 0 .12-.02.16-.06l5.02-5c.05-.04.07-.1.07-.16zm-.5-1.77l3.83 3.84-7.7 7.7H0v-3.84l7.7-7.7zm6.3.88c0 .33-.1.6-.34.84L12.12 5.7 8.28 1.88 9.8.35c.24-.23.5-.35.85-.35.32 0 .6.12.84.35l2.16 2.16c.23.25.34.53.34.85z"
-      />
-    </svg>
-  );
+.button-icon:hover svg,
+.button-icon:focus svg {
+  color: #fff;
 }
diff --git a/server/sonar-web/src/main/js/components/ui/buttons.tsx b/server/sonar-web/src/main/js/components/ui/buttons.tsx
new file mode 100644
index 00000000000..e4cd085eb05
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/ui/buttons.tsx
@@ -0,0 +1,79 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import * as React from 'react';
+import * as classNames from 'classnames';
+import * as theme from '../../app/theme';
+import ClearIcon from '../icons-components/ClearIcon';
+import './buttons.css';
+import EditIcon from '../icons-components/EditIcon';
+
+interface ButtonIconProps {
+  children: React.ReactNode;
+  className?: string;
+  color?: string;
+  onClick?: () => void;
+  [x: string]: any;
+}
+
+export class ButtonIcon extends React.PureComponent<ButtonIconProps> {
+  handleClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    event.currentTarget.blur();
+    event.stopPropagation();
+    if (this.props.onClick) {
+      this.props.onClick();
+    }
+  };
+
+  render() {
+    const { children, className, color = theme.darkBlue, ...props } = this.props;
+    return (
+      <button
+        className={classNames(className, 'button-icon')}
+        onClick={this.handleClick}
+        style={{ color }}
+        {...props}>
+        {children}
+      </button>
+    );
+  }
+}
+
+interface ActionButtonProps {
+  className?: string;
+  onClick?: () => void;
+  [x: string]: any;
+}
+
+export function DeleteButton(props: ActionButtonProps) {
+  return (
+    <ButtonIcon color={theme.red} {...props}>
+      <ClearIcon />
+    </ButtonIcon>
+  );
+}
+
+export function EditButton(props: ActionButtonProps) {
+  return (
+    <ButtonIcon {...props}>
+      <EditIcon />
+    </ButtonIcon>
+  );
+}
diff --git a/tests/src/test/java/org/sonarqube/pageobjects/projects/ProjectsPage.java b/tests/src/test/java/org/sonarqube/pageobjects/projects/ProjectsPage.java
index d019dcd74c8..767c2fbf2d8 100644
--- a/tests/src/test/java/org/sonarqube/pageobjects/projects/ProjectsPage.java
+++ b/tests/src/test/java/org/sonarqube/pageobjects/projects/ProjectsPage.java
@@ -110,7 +110,7 @@ public class ProjectsPage {
   }
 
   public ProjectsPage invertSorting() {
-    getOpenTopBar().$(".js-projects-sorting-select a.button-icon").should(Condition.exist).click();
+    getOpenTopBar().$(".js-projects-sorting-invert").should(Condition.exist).click();
     return this;
   }
 
diff --git a/tests/src/test/java/org/sonarqube/tests/projectSearch/ProjectsPageTest.java b/tests/src/test/java/org/sonarqube/tests/projectSearch/ProjectsPageTest.java
index dde5ace24cb..c14cc18e9fc 100644
--- a/tests/src/test/java/org/sonarqube/tests/projectSearch/ProjectsPageTest.java
+++ b/tests/src/test/java/org/sonarqube/tests/projectSearch/ProjectsPageTest.java
@@ -21,20 +21,20 @@ package org.sonarqube.tests.projectSearch;
 
 import com.sonar.orchestrator.Orchestrator;
 import com.sonar.orchestrator.build.SonarScanner;
-import org.sonarqube.tests.Category1Suite;
 import org.junit.AfterClass;
 import org.junit.Before;
 import org.junit.BeforeClass;
 import org.junit.ClassRule;
 import org.junit.Test;
 import org.junit.rules.RuleChain;
+import org.sonarqube.pageobjects.Navigation;
+import org.sonarqube.pageobjects.projects.ProjectsPage;
+import org.sonarqube.tests.Category1Suite;
 import org.sonarqube.tests.Tester;
 import org.sonarqube.ws.WsUsers;
 import org.sonarqube.ws.client.PostRequest;
 import org.sonarqube.ws.client.WsClient;
 import org.sonarqube.ws.client.project.DeleteRequest;
-import org.sonarqube.pageobjects.Navigation;
-import org.sonarqube.pageobjects.projects.ProjectsPage;
 
 import static com.codeborne.selenide.Selenide.clearBrowserLocalStorage;
 import static com.codeborne.selenide.WebDriverRunner.url;
-- 
2.39.5