diff --git a/public/app/features/variables/editor/VariableEditorList.tsx b/public/app/features/variables/editor/VariableEditorList.tsx
index 2f2fe304897..fe18f55fbd2 100644
--- a/public/app/features/variables/editor/VariableEditorList.tsx
+++ b/public/app/features/variables/editor/VariableEditorList.tsx
@@ -1,5 +1,5 @@
 import React, { MouseEvent, PureComponent } from 'react';
-import { Icon } from '@grafana/ui';
+import { IconButton } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
 
 import EmptyListCTA from '../../../core/components/EmptyListCTA/EmptyListCTA';
@@ -111,9 +111,10 @@ export class VariableEditorList extends PureComponent<Props> {
 
                         <td style={{ width: '1%' }}>
                           {index > 0 && (
-                            <Icon
+                            <IconButton
                               onClick={event => this.onChangeVariableOrder(event, variable, MoveType.up)}
                               name="arrow-up"
+                              title="Move variable up"
                               aria-label={selectors.pages.Dashboard.Settings.Variables.List.tableRowArrowUpButtons(
                                 variable.name
                               )}
@@ -122,9 +123,10 @@ export class VariableEditorList extends PureComponent<Props> {
                         </td>
                         <td style={{ width: '1%' }}>
                           {index < this.props.variables.length - 1 && (
-                            <Icon
+                            <IconButton
                               onClick={event => this.onChangeVariableOrder(event, variable, MoveType.down)}
                               name="arrow-down"
+                              title="Move variable down"
                               aria-label={selectors.pages.Dashboard.Settings.Variables.List.tableRowArrowDownButtons(
                                 variable.name
                               )}
@@ -132,26 +134,24 @@ export class VariableEditorList extends PureComponent<Props> {
                           )}
                         </td>
                         <td style={{ width: '1%' }}>
-                          <a
+                          <IconButton
                             onClick={event => this.onDuplicateVariable(event, toVariableIdentifier(variable))}
-                            className="btn btn-inverse btn-small"
+                            name="copy"
+                            title="Duplicate variable"
                             aria-label={selectors.pages.Dashboard.Settings.Variables.List.tableRowDuplicateButtons(
                               variable.name
                             )}
-                          >
-                            Duplicate
-                          </a>
+                          />
                         </td>
                         <td style={{ width: '1%' }}>
-                          <a
+                          <IconButton
                             onClick={event => this.onRemoveVariable(event, toVariableIdentifier(variable))}
-                            className="btn btn-danger btn-small"
+                            name="trash-alt"
+                            title="Remove variable"
                             aria-label={selectors.pages.Dashboard.Settings.Variables.List.tableRowRemoveButtons(
                               variable.name
                             )}
-                          >
-                            <Icon name="times" style={{ marginBottom: 0 }} />
-                          </a>
+                          />
                         </td>
                       </tr>
                     );