diff --git a/package-lock.json b/package-lock.json
index 15360b3..d8848e3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,36 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@fortawesome/fontawesome": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome/-/fontawesome-1.1.8.tgz",
+      "integrity": "sha512-c0/MtkPVT0fmiFcCyYoPjkG9PkMOvfrZw2+0BaJ+Rh6UEcK1AR/LaRgrHHjUkbAbs9LXxQJhFS8CJ4uSnK2+JA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.1.7"
+      }
+    },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.7.tgz",
+      "integrity": "sha512-ego8jRVSHfq/iq4KRZJKQeUAdi3ZjGNrqw4oPN3fNdvTBnLCSntwVCnc37bsAJP9UB8MhrTfPnZYxkv2vpS4pg=="
+    },
+    "@fortawesome/fontawesome-free-solid": {
+      "version": "5.0.13",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free-solid/-/fontawesome-free-solid-5.0.13.tgz",
+      "integrity": "sha512-b+krVnqkdDt52Yfev0x0ZZgtxBQsLw00Zfa3uaVWIDzpNZVtrEXuxldUSUaN/ihgGhSNi8VpvDAdNPVgCKOSxw==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.1.7"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.0.20.tgz",
+      "integrity": "sha512-0a1VYxlCU1oQZzxXK2KIlVArQJSGG3BgBwelLNbR5f2CD6+zQhXXMC9Vm8V4VLO1ZWDeGdjAJZmf7VL/zuuBGQ==",
+      "requires": {
+        "humps": "^2.0.1",
+        "prop-types": "^15.5.7"
+      }
+    },
     "abab": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/abab/-/abab-1.0.4.tgz",
diff --git a/package.json b/package.json
index 231fe04..daa6829 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome": "^1.1.8",
+    "@fortawesome/fontawesome-free-solid": "^5.0.13",
+    "@fortawesome/react-fontawesome": "0.0.20",
     "babel-runtime": "^6.26.0",
     "bootstrap": "^3.3.7",
     "classnames": "^2.2.5",
diff --git a/src/components/dialog/edit-widget-color-zones-control.js b/src/components/dialog/edit-widget-color-zones-control.js
index 458a4ce..3367218 100644
--- a/src/components/dialog/edit-widget-color-zones-control.js
+++ b/src/components/dialog/edit-widget-color-zones-control.js
@@ -20,8 +20,10 @@
  ******************************************************************************/
 
 import React from 'react';
-import { FormGroup, ControlLabel, Button, Glyphicon } from 'react-bootstrap';
+import { FormGroup, ControlLabel, Button } from 'react-bootstrap';
 
+
+import Icon from '../icon';
 import Table from '../table';
 import TableColumn from '../table-column';
 
@@ -67,7 +69,7 @@ class EditWidgetColorZonesControl extends React.Component {
   changeCell = (event, row, column) => {
     // change row
     const widget = this.state.widget;
-    
+
     if (column === 1) {
       widget.zones[row].strokeStyle = event.target.value;
     } else if (column === 2) {
@@ -96,7 +98,7 @@ class EditWidgetColorZonesControl extends React.Component {
   checkedCell = (row, event) => {
     // update selected rows
     const selectedZones = this.state.selectedZones;
-    
+
     if (event.target.checked) {
       if (selectedZones.indexOf(row) === -1) {
         selectedZones.push(row);
@@ -122,8 +124,8 @@ class EditWidgetColorZonesControl extends React.Component {
         <TableColumn title="Maximum" dataKey="max" inlineEditable onInlineChange={this.changeCell} />
       </Table>
 
-      <Button onClick={this.addZone} disabled={!this.props.widget.colorZones}><Glyphicon glyph="plus" /> Add</Button>
-      <Button onClick={this.removeZones} disabled={!this.props.widget.colorZones}><Glyphicon glyph="minus" /> Remove</Button>
+      <Button onClick={this.addZone} disabled={!this.props.widget.colorZones}><Icon icon="plus" /> Add</Button>
+      <Button onClick={this.removeZones} disabled={!this.props.widget.colorZones}><Icon icon="minus" /> Remove</Button>
     </FormGroup>;
   }
 }
diff --git a/src/components/editable-header.js b/src/components/editable-header.js
index 77a4293..0b114bc 100644
--- a/src/components/editable-header.js
+++ b/src/components/editable-header.js
@@ -21,7 +21,8 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Glyphicon, FormControl } from 'react-bootstrap';
+import { FormControl } from 'react-bootstrap';
+import Icon from './icon';
 
 class EditableHeader extends React.Component {
     titleInput = null;
@@ -64,7 +65,7 @@ class EditableHeader extends React.Component {
             float: 'left'
         };
 
-        const glyphStyle = {
+        const iconStyle = {
             float: 'left',
 
             marginLeft: '10px',
@@ -84,8 +85,8 @@ class EditableHeader extends React.Component {
                     <FormControl type='text' bsSize='large' value={this.state.title} onChange={this.onChange} style={editStyle} autoFocus />
                 </form>
 
-                <a onClick={this.save}><Glyphicon glyph='ok' style={glyphStyle} /></a>
-                <a onClick={this.cancel}><Glyphicon glyph='remove' style={glyphStyle} /></a>
+                <a onClick={this.save}><Icon icon='check' style={iconStyle} /></a>
+                <a onClick={this.cancel}><Icon icon='times' style={iconStyle} /></a>
             </div>;
         }
 
@@ -94,7 +95,7 @@ class EditableHeader extends React.Component {
                 {this.state.title}
             </h1>
 
-            <a onClick={this.edit}><Glyphicon glyph='pencil' style={glyphStyle} /></a>
+            <a onClick={this.edit}><Icon icon='edit' style={iconStyle} /></a>
         </div>;
     }
 }
diff --git a/src/components/header.js b/src/components/header.js
index d0d0a87..710ea9b 100644
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -20,7 +20,8 @@
  ******************************************************************************/
 
 import React from 'react';
-import { Col, Button, Glyphicon } from 'react-bootstrap';
+import { Col, Button } from 'react-bootstrap';
+import Icon from './icon';
 
 class Header extends React.Component {
   render() {
@@ -31,7 +32,7 @@ class Header extends React.Component {
         </Col>
         <Col xs={2} smHidden mdHidden lgHidden style={{ paddingLeft: 'auto', paddingRight: 0 }}>
           {this.props.showMenuButton &&
-            <Button bsStyle="link" onClick={this.props.onMenuButton} style={{ float: 'right', marginRight: '10px' }}><Glyphicon glyph="menu-hamburger" className="menu-icon" /></Button>
+            <Button bsStyle="link" onClick={this.props.onMenuButton} style={{ float: 'right', marginRight: '10px' }}><Icon size="3x" icon="bars" className="menu-icon" /></Button>
           }
         </Col>
       </header>
diff --git a/src/components/icon.js b/src/components/icon.js
new file mode 100644
index 0000000..b2fca6e
--- /dev/null
+++ b/src/components/icon.js
@@ -0,0 +1,35 @@
+/**
+ * File: icon.js
+ * Author: Steffen Vogel <stvogel@eonerc.rwth-aachen.de>
+ * Date: 09.06.2018
+ *
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb 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 General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import React from 'react';
+
+import FontAwesomeIcon from '@fortawesome/react-fontawesome'
+
+import '@fortawesome/fontawesome-free-solid';
+
+class Icon extends React.Component {
+
+  render() {
+    return <FontAwesomeIcon size={this.props.size} style={this.props.style} icon={this.props.icon} />
+  }
+}
+
+export default Icon;
diff --git a/src/components/table.js b/src/components/table.js
index 1c1910d..b155826 100644
--- a/src/components/table.js
+++ b/src/components/table.js
@@ -21,8 +21,9 @@
 
 import React, { Component } from 'react';
 import _ from 'lodash';
-import { Table, Button, Glyphicon, FormControl, Label, Checkbox } from 'react-bootstrap';
+import { Table, Button, FormControl, Label, Checkbox } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
+import Icon from './icon';
 
 class CustomTable extends Component {
   constructor(props) {
@@ -97,11 +98,11 @@ class CustomTable extends Component {
 
     // add buttons
     if (child.props.editButton) {
-      cell.push(<Button bsClass='table-control-button' onClick={() => child.props.onEdit(index)} disabled={child.props.onEdit == null}><Glyphicon glyph='pencil' /></Button>);
+      cell.push(<Button bsClass='table-control-button' onClick={() => child.props.onEdit(index)} disabled={child.props.onEdit == null}><Icon icon='edit' /></Button>);
     }
 
     if (child.props.deleteButton) {
-      cell.push(<Button bsClass='table-control-button' onClick={() => child.props.onDelete(index)} disabled={child.props.onDelete == null}><Glyphicon glyph='remove' /></Button>);
+      cell.push(<Button bsClass='table-control-button' onClick={() => child.props.onDelete(index)} disabled={child.props.onDelete == null}><Icon icon='trash' /></Button>);
     }
 
     if (child.props.checkbox) {
@@ -111,7 +112,7 @@ class CustomTable extends Component {
     }
 
     if (child.props.exportButton) {
-      cell.push(<Button bsClass='table-control-button' onClick={() => child.props.onExport(index)} disabled={child.props.onExport == null}><Glyphicon glyph='export' /></Button>);
+      cell.push(<Button bsClass='table-control-button' onClick={() => child.props.onExport(index)} disabled={child.props.onExport == null}><Icon icon='download' /></Button>);
     }
 
     return cell;
diff --git a/src/containers/project.js b/src/containers/project.js
index f649303..985dfbc 100644
--- a/src/containers/project.js
+++ b/src/containers/project.js
@@ -21,7 +21,7 @@
 
 import React, { Component } from 'react';
 import { Container } from 'flux/utils';
-import { Button, Glyphicon } from 'react-bootstrap';
+import { Button } from 'react-bootstrap';
 import FileSaver from 'file-saver';
 
 import AppDispatcher from '../app-dispatcher';
@@ -30,6 +30,7 @@ import UserStore from '../stores/user-store';
 import VisualizationStore from '../stores/visualization-store';
 import SimulationStore from '../stores/simulation-store';
 
+import Icon from '../components/icon';
 import CustomTable from '../components/table';
 import TableColumn from '../components/table-column';
 import NewVisualzationDialog from '../components/dialog/new-visualization';
@@ -128,7 +129,7 @@ class Visualizations extends Component {
 
     if (confirmDelete === false) {
       return;
-    } 
+    }
 
     AppDispatcher.dispatch({
       type: 'visualizations/start-remove',
@@ -190,7 +191,7 @@ class Visualizations extends Component {
   onModalKeyPress = (event) => {
     if (event.key === 'Enter') {
       event.preventDefault();
-    
+
       this.confirmDeleteModal();
     }
   }
@@ -206,19 +207,19 @@ class Visualizations extends Component {
 
         <CustomTable data={this.state.visualizations}>
           <TableColumn title='Name' dataKey='name' link='/visualizations/' linkKey='_id' />
-          <TableColumn 
-            width='100' 
-            editButton 
-            deleteButton 
+          <TableColumn
+            width='100'
+            editButton
+            deleteButton
             exportButton
-            onEdit={(index) => this.setState({ editModal: true, modalData: this.state.visualizations[index] })} 
-            onDelete={(index) => this.setState({ deleteModal: true, modalData: this.state.visualizations[index] })} 
+            onEdit={(index) => this.setState({ editModal: true, modalData: this.state.visualizations[index] })}
+            onDelete={(index) => this.setState({ deleteModal: true, modalData: this.state.visualizations[index] })}
             onExport={index => this.exportVisualization(index)}
           />
         </CustomTable>
 
-        <Button onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Glyphicon glyph="plus" /> Visualization</Button>
-        <Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Glyphicon glyph="import" /> Import</Button>
+        <Button onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Icon icon="plus" /> Visualization</Button>
+        <Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Icon icon="upload" /> Import</Button>
 
         <NewVisualzationDialog show={this.state.newModal} onClose={(data) => this.closeNewModal(data)} />
         <EditVisualizationDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} visualization={this.state.modalData} />
diff --git a/src/containers/projects.js b/src/containers/projects.js
index 37cb384..8173006 100644
--- a/src/containers/projects.js
+++ b/src/containers/projects.js
@@ -21,13 +21,14 @@
 
 import React from 'react';
 import { Container } from 'flux/utils';
-import { Button, Glyphicon } from 'react-bootstrap';
+import { Button } from 'react-bootstrap';
 
 import AppDispatcher from '../app-dispatcher';
 import ProjectStore from '../stores/project-store';
 import UserStore from '../stores/user-store';
 import SimulationStore from '../stores/simulation-store';
 
+import Icon from '../components/icon';
 import Table from '../components/table';
 import TableColumn from '../components/table-column';
 import NewProjectDialog from '../components/dialog/new-project';
@@ -117,14 +118,14 @@ class Projects extends React.Component {
     const simulations = this.state.simulations.filter(simulation => {
       return simulation.models.length > 0;
     });
-    
+
     return simulations.length > 0;
   }
 
   onModalKeyPress = (event) => {
     if (event.key === 'Enter') {
       event.preventDefault();
-    
+
       this.confirmDeleteModal();
     }
   }
@@ -140,7 +141,7 @@ class Projects extends React.Component {
           <TableColumn width='70' editButton deleteButton onEdit={index => this.setState({ editModal: true, modalData: this.state.projects[index] })} onDelete={index => this.setState({ deleteModal: true, modalData: this.state.projects[index] })} />
         </Table>
 
-        <Button onClick={() => this.setState({ newModal: true })} disabled={!this.hasValidSimulation()}><Glyphicon glyph='plus' /> Project</Button>
+        <Button onClick={() => this.setState({ newModal: true })} disabled={!this.hasValidSimulation()}><Icon icon='plus' /> Project</Button>
 
         {!this.hasValidSimulation() &&
           <span><i> Simulation with at least one simulation-model required!</i></span>
diff --git a/src/containers/simulation.js b/src/containers/simulation.js
index 19c1a06..6fb8c0b 100644
--- a/src/containers/simulation.js
+++ b/src/containers/simulation.js
@@ -21,7 +21,7 @@
 
 import React from 'react';
 import { Container } from 'flux/utils';
-import { Button, Glyphicon } from 'react-bootstrap';
+import { Button } from 'react-bootstrap';
 import FileSaver from 'file-saver';
 import _ from 'lodash';
 
@@ -31,6 +31,7 @@ import SimulationModelStore from '../stores/simulation-model-store';
 import UserStore from '../stores/user-store';
 import AppDispatcher from '../app-dispatcher';
 
+import Icon from '../components/icon';
 import Table from '../components/table';
 import TableColumn from '../components/table-column';
 import ImportSimulationModelDialog from '../components/dialog/import-simulation-model';
@@ -146,7 +147,7 @@ class Simulation extends React.Component {
     simulationModel.simulation = this.state.simulation._id;
 
     console.log(simulationModel);
-    
+
     AppDispatcher.dispatch({
       type: 'simulationModels/start-add',
       data: simulationModel,
@@ -173,7 +174,7 @@ class Simulation extends React.Component {
   exportModel(index) {
     // filter properties
     const model = Object.assign({}, this.state.simulationModels[index]);
-    
+
     delete model.simulator;
     delete model.simulation;
 
@@ -222,7 +223,7 @@ class Simulation extends React.Component {
       }
 
       if (action.data.action === 'start') {
-        action.data.parameters = this.state.simulationModels[index].startParameters; 
+        action.data.parameters = this.state.simulationModels[index].startParameters;
       }
 
       AppDispatcher.dispatch({
@@ -248,31 +249,31 @@ class Simulation extends React.Component {
         <TableColumn title='Simulator' dataKey='simulator' modifier={(simulator) => this.getSimulatorName(simulator)} />
         <TableColumn title='Output' dataKey='outputLength' width='100' />
         <TableColumn title='Input' dataKey='inputLength' width='100' />
-        <TableColumn 
-          title='' 
-          width='70' 
-          deleteButton 
+        <TableColumn
+          title=''
+          width='70'
+          deleteButton
           exportButton
-          onDelete={(index) => this.setState({ deleteModal: true, modalData: this.state.simulationModels[index], modalIndex: index })} 
+          onDelete={(index) => this.setState({ deleteModal: true, modalData: this.state.simulationModels[index], modalIndex: index })}
           onExport={index => this.exportModel(index)}
         />
       </Table>
 
       <div style={{ float: 'left' }}>
-        <SimulatorAction 
-          runDisabled={this.state.selectedSimulationModels.length === 0} 
+        <SimulatorAction
+          runDisabled={this.state.selectedSimulationModels.length === 0}
           runAction={this.runAction}
           actions={[
-            { id: '0', title: 'Start', data: { action: 'start' } }, 
-            { id: '1', title: 'Stop', data: { action: 'stop' } }, 
-            { id: '2', title: 'Pause', data: { action: 'pause' } }, 
-            { id: '3', title: 'Resume', data: { action: 'resume' } } 
+            { id: '0', title: 'Start', data: { action: 'start' } },
+            { id: '1', title: 'Stop', data: { action: 'stop' } },
+            { id: '2', title: 'Pause', data: { action: 'pause' } },
+            { id: '3', title: 'Resume', data: { action: 'resume' } }
           ]}/>
       </div>
 
       <div style={{ float: 'right' }}>
-        <Button onClick={this.addSimulationModel} style={buttonStyle}><Glyphicon glyph="plus" /> Simulation Model</Button>
-        <Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Glyphicon glyph="import" /> Import</Button>
+        <Button onClick={this.addSimulationModel} style={buttonStyle}><Icon icon="plus" /> Simulation Model</Button>
+        <Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Icon icon="upload" /> Import</Button>
       </div>
 
       <div style={{ clear: 'both' }} />
diff --git a/src/containers/simulations.js b/src/containers/simulations.js
index 1367d8a..25ee82a 100644
--- a/src/containers/simulations.js
+++ b/src/containers/simulations.js
@@ -21,7 +21,7 @@
 
 import React, { Component } from 'react';
 import { Container } from 'flux/utils';
-import { Button, Glyphicon } from 'react-bootstrap';
+import { Button } from 'react-bootstrap';
 import FileSaver from 'file-saver';
 
 import AppDispatcher from '../app-dispatcher';
@@ -30,6 +30,7 @@ import UserStore from '../stores/user-store';
 import SimulatorStore from '../stores/simulator-store';
 import SimulationModelStore from '../stores/simulation-model-store';
 
+import Icon from '../components/icon';
 import Table from '../components/table';
 import TableColumn from '../components/table-column';
 import NewSimulationDialog from '../components/dialog/new-simulation';
@@ -101,7 +102,7 @@ class Simulations extends Component {
         token: this.state.sessionToken
       });
     }
-    
+
     if (simulatorIds.length > 0) {
       AppDispatcher.dispatch({
         type: 'simulators/start-load',
@@ -190,7 +191,7 @@ class Simulations extends Component {
   onModalKeyPress = (event) => {
     if (event.key === 'Enter') {
       event.preventDefault();
-    
+
       this.confirmDeleteModal();
     }
   }
@@ -259,9 +260,9 @@ class Simulations extends Component {
         }
 
         if (action.data.action === 'start') {
-          action.data.parameters = Object.assign({}, this.state.simulations[index].startParameters, simulationModel.startParameters); 
+          action.data.parameters = Object.assign({}, this.state.simulations[index].startParameters, simulationModel.startParameters);
         }
-    
+
         AppDispatcher.dispatch({
           type: 'simulators/start-action',
           simulator,
@@ -284,32 +285,32 @@ class Simulations extends Component {
         <Table data={this.state.simulations}>
           <TableColumn checkbox onChecked={(index, event) => this.onSimulationChecked(index, event)} width='30' />
           <TableColumn title='Name' dataKey='name' link='/simulations/' linkKey='_id' />
-          <TableColumn 
-            width='100' 
-            editButton 
-            deleteButton 
-            exportButton 
-            onEdit={index => this.setState({ editModal: true, modalSimulation: this.state.simulations[index] })} 
-            onDelete={index => this.setState({ deleteModal: true, modalSimulation: this.state.simulations[index] })} 
+          <TableColumn
+            width='100'
+            editButton
+            deleteButton
+            exportButton
+            onEdit={index => this.setState({ editModal: true, modalSimulation: this.state.simulations[index] })}
+            onDelete={index => this.setState({ deleteModal: true, modalSimulation: this.state.simulations[index] })}
             onExport={index => this.exportSimulation(index)}
           />
         </Table>
 
         <div style={{ float: 'left' }}>
-          <SimulatorAction 
-            runDisabled={this.state.selectedSimulations.length === 0} 
+          <SimulatorAction
+            runDisabled={this.state.selectedSimulations.length === 0}
             runAction={this.runAction}
-            actions={[ 
-              { id: '0', title: 'Start', data: { action: 'start' } }, 
-              { id: '1', title: 'Stop', data: { action: 'stop' } }, 
-              { id: '2', title: 'Pause', data: { action: 'pause' } }, 
-              { id: '3', title: 'Resume', data: { action: 'resume' } } 
+            actions={[
+              { id: '0', title: 'Start', data: { action: 'start' } },
+              { id: '1', title: 'Stop', data: { action: 'stop' } },
+              { id: '2', title: 'Pause', data: { action: 'pause' } },
+              { id: '3', title: 'Resume', data: { action: 'resume' } }
             ]}/>
         </div>
 
         <div style={{ float: 'right' }}>
-          <Button onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Glyphicon glyph="plus" /> Simulation</Button>
-          <Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Glyphicon glyph="import" /> Import</Button>
+          <Button onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Icon icon="plus" /> Simulation</Button>
+          <Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Icon icon="upload" /> Import</Button>
         </div>
 
         <div style={{ clear: 'both' }} />
diff --git a/src/containers/simulators.js b/src/containers/simulators.js
index 5c425c5..4bd7ff6 100644
--- a/src/containers/simulators.js
+++ b/src/containers/simulators.js
@@ -21,7 +21,7 @@
 
 import React, { Component } from 'react';
 import { Container } from 'flux/utils';
-import { Button, Glyphicon } from 'react-bootstrap';
+import { Button } from 'react-bootstrap';
 import FileSaver from 'file-saver';
 import _ from 'lodash';
 
@@ -29,6 +29,7 @@ import AppDispatcher from '../app-dispatcher';
 import SimulatorStore from '../stores/simulator-store';
 import UserStore from '../stores/user-store';
 
+import Icon from '../components/icon';
 import Table from '../components/table';
 import TableColumn from '../components/table-column';
 import NewSimulatorDialog from '../components/dialog/new-simulator';
@@ -175,7 +176,7 @@ class Simulators extends Component {
   }
 
   isSimulatorOnline(state) {
-    return state != '' && state !== 'shutdown' && state !== 'unknown';
+    return state !== '' && state !== 'shutdown' && state !== 'unknown';
   }
 
   stateLabelStyle = (state, simulator) => {
@@ -245,8 +246,8 @@ class Simulators extends Component {
         </div>
 
         <div style={{ float: 'right' }}>
-          <Button onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Glyphicon glyph="plus" /> Simulator</Button>
-          <Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Glyphicon glyph="import" /> Import</Button>
+          <Button onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Icon icon="plus" /> Simulator</Button>
+          <Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Icon icon="upload" /> Import</Button>
         </div>
 
         <div style={{ clear: 'both' }} />
diff --git a/src/containers/users.js b/src/containers/users.js
index edf4162..9d34c3b 100644
--- a/src/containers/users.js
+++ b/src/containers/users.js
@@ -21,12 +21,13 @@
 
 import React, { Component } from 'react';
 import { Container } from 'flux/utils';
-import { Button, Glyphicon } from 'react-bootstrap';
+import { Button } from 'react-bootstrap';
 
 import AppDispatcher from '../app-dispatcher';
 import UserStore from '../stores/user-store';
 import UsersStore from '../stores/users-store';
 
+import Icon from '../components/icon';
 import Table from '../components/table';
 import TableColumn from '../components/table-column';
 import NewUserDialog from '../components/dialog/new-user';
@@ -102,14 +103,14 @@ class Users extends Component {
 
   getHumanRoleName(role_key) {
     const HUMAN_ROLE_NAMES = {admin: 'Administrator', user: 'User', guest: 'Guest'};
-    
+
     return HUMAN_ROLE_NAMES.hasOwnProperty(role_key)? HUMAN_ROLE_NAMES[role_key] : '';
   }
 
   onModalKeyPress = (event) => {
     if (event.key === 'Enter') {
       event.preventDefault();
-    
+
       this.confirmDeleteModal();
     }
   }
@@ -127,7 +128,7 @@ class Users extends Component {
           <TableColumn width='70' editButton deleteButton onEdit={index => this.setState({ editModal: true, modalData: this.state.users[index] })} onDelete={index => this.setState({ deleteModal: true, modalData: this.state.users[index] })} />
         </Table>
 
-        <Button onClick={() => this.setState({ newModal: true })}><Glyphicon glyph='plus' /> User</Button>
+        <Button onClick={() => this.setState({ newModal: true })}><Icon icon='plus' /> User</Button>
 
         <NewUserDialog show={this.state.newModal} onClose={(data) => this.closeNewModal(data)} />
         <EditUserDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} user={this.state.modalData} />
diff --git a/src/styles/app.css b/src/styles/app.css
index 52cb3bd..5017aea 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -373,10 +373,6 @@ body {
   text-decoration: none;
 }
 
-.section-header .glyphicon {
-  font-size: 0.8em;
-}
-
 .section-buttons-group-right {
   height: auto !important;