diff --git a/frontend/components/Icon/Icon.jsx b/frontend/components/Icon/Icon.jsx
new file mode 100644
index 0000000000..5a80ef9c39
--- /dev/null
+++ b/frontend/components/Icon/Icon.jsx
@@ -0,0 +1,28 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+
+const baseClass = 'kolidecon';
+
+export class Icon extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    fw: PropTypes.bool,
+    name: PropTypes.string.isRequired,
+    size: PropTypes.string,
+    title: PropTypes.string,
+  };
+
+  render () {
+    const { className, fw, name, size, title } = this.props;
+    const iconClasses = classnames(baseClass, `${baseClass}-${name}`, className, {
+      [`${baseClass}-fw`]: fw,
+      [`${baseClass}-${size}`]: size,
+    });
+
+    return (
+      <i className={iconClasses} title={title} />
+    );
+  }
+}
+
+export default Icon;
diff --git a/frontend/components/Icon/Icon.tests.jsx b/frontend/components/Icon/Icon.tests.jsx
new file mode 100644
index 0000000000..4b602746cf
--- /dev/null
+++ b/frontend/components/Icon/Icon.tests.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import expect from 'expect';
+import { mount } from 'enzyme';
+
+import Icon from './Icon';
+
+describe('Icon - component', () => {
+  it('renders', () => {
+    expect(mount(<Icon name="success-check" />)).toExist();
+  });
+});
diff --git a/frontend/components/Icon/index.js b/frontend/components/Icon/index.js
new file mode 100644
index 0000000000..3680ed0ed3
--- /dev/null
+++ b/frontend/components/Icon/index.js
@@ -0,0 +1 @@
+export default from './Icon';
diff --git a/frontend/components/buttons/Rocker/Rocker.jsx b/frontend/components/buttons/Rocker/Rocker.jsx
index 9fc0f28b8a..23bea52e28 100644
--- a/frontend/components/buttons/Rocker/Rocker.jsx
+++ b/frontend/components/buttons/Rocker/Rocker.jsx
@@ -2,6 +2,8 @@ import React, { Component, PropTypes } from 'react';
 import { noop } from 'lodash';
 import classnames from 'classnames';
 
+import Icon from 'components/Icon';
+
 class Rocker extends Component {
 
   static propTypes = {
@@ -34,12 +36,12 @@ class Rocker extends Component {
           <input className={`${baseClass}__checkbox`} type="checkbox" value={value} name={name} id={name} onChange={handleChange} checked={value === bText} />
           <span className={`${baseClass}__switch ${baseClass}__switch--opt-b`}>
             <span className={`${baseClass}__text`}>
-              <i className={`kolidecon kolidecon-${bIcon}`} /> {bText}
+              <Icon name={bIcon} /> {bText}
             </span>
           </span>
           <span className={`${baseClass}__switch ${baseClass}__switch--opt-a`}>
             <span className={`${baseClass}__text`}>
-              <i className={`kolidecon kolidecon-${aIcon}`} /> {aText}
+              <Icon name={aIcon} /> {aText}
             </span>
           </span>
         </label>
diff --git a/frontend/components/forms/ForgotPasswordForm/ForgotPasswordForm.jsx b/frontend/components/forms/ForgotPasswordForm/ForgotPasswordForm.jsx
index b2bcb7a8b7..62bd7e82d4 100644
--- a/frontend/components/forms/ForgotPasswordForm/ForgotPasswordForm.jsx
+++ b/frontend/components/forms/ForgotPasswordForm/ForgotPasswordForm.jsx
@@ -26,7 +26,7 @@ class ForgotPasswordForm extends Component {
         <InputFieldWithIcon
           {...fields.email}
           autofocus
-          iconName="kolidecon-email"
+          iconName="email"
           placeholder="Email Address"
         />
         <div className={`${baseClass}__button-wrap`}>
diff --git a/frontend/components/forms/LoginForm/LoginForm.jsx b/frontend/components/forms/LoginForm/LoginForm.jsx
index a72c0249f2..9d0611dcc0 100644
--- a/frontend/components/forms/LoginForm/LoginForm.jsx
+++ b/frontend/components/forms/LoginForm/LoginForm.jsx
@@ -38,12 +38,12 @@ class LoginForm extends Component {
           <InputFieldWithIcon
             {...fields.username}
             autofocus
-            iconName="kolidecon-username"
+            iconName="username"
             placeholder="Username or Email"
           />
           <InputFieldWithIcon
             {...fields.password}
-            iconName="kolidecon-password"
+            iconName="password"
             placeholder="Password"
             type="password"
           />
diff --git a/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx b/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx
index 3182506fd5..f2718d5b56 100644
--- a/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx
+++ b/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx
@@ -32,24 +32,24 @@ class AdminDetails extends Component {
         />
         <InputFieldWithIcon
           {...fields.username}
-          iconName="kolidecon-username"
+          iconName="username"
           placeholder="Username"
         />
         <InputFieldWithIcon
           {...fields.password}
-          iconName="kolidecon-password"
+          iconName="password"
           placeholder="Password"
           type="password"
         />
         <InputFieldWithIcon
           {...fields.password_confirmation}
-          iconName="kolidecon-password"
+          iconName="password"
           placeholder="Confirm Password"
           type="password"
         />
         <InputFieldWithIcon
           {...fields.email}
-          iconName="kolidecon-email"
+          iconName="email"
           placeholder="Email"
         />
         <Button
diff --git a/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.jsx b/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.jsx
index 994dd1a675..32a6f2d60a 100644
--- a/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.jsx
+++ b/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.jsx
@@ -2,6 +2,7 @@ import React, { Component, PropTypes } from 'react';
 
 import Button from 'components/buttons/Button';
 import formDataInterface from 'interfaces/registration_form_data';
+import Icon from 'components/Icon';
 
 class ConfirmationPage extends Component {
   static propTypes = {
@@ -31,7 +32,7 @@ class ConfirmationPage extends Component {
 
     return (
       <div>
-        <i className="kolidecon kolidecon-success-check" />
+        <Icon name="success-check" />
         <table>
           <caption>Administrator Configuration</caption>
           <tbody>
diff --git a/frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx b/frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx
index fda668b565..deb6577b84 100644
--- a/frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx
+++ b/frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx
@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 
+import Icon from 'components/Icon';
 import InputField from '../InputField';
 
 const baseClass = 'input-icon-field';
@@ -44,7 +45,6 @@ class InputFieldWithIcon extends InputField {
 
     const iconClasses = classnames(
       `${baseClass}__icon`,
-      iconName,
       { [`${baseClass}__icon--error`]: error },
       { [`${baseClass}__icon--active`]: value }
     );
@@ -61,7 +61,7 @@ class InputFieldWithIcon extends InputField {
           type={type}
           value={value}
         />
-        {iconName && <i className={iconClasses} />}
+        {iconName && <Icon name={iconName} className={iconClasses} />}
       </div>
     );
   }
diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.jsx b/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.jsx
index 46fc4dbc4a..a7be2c7a58 100644
--- a/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.jsx
+++ b/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.jsx
@@ -4,6 +4,7 @@ import AceEditor from 'react-ace';
 import classnames from 'classnames';
 
 import hostHelpers from 'components/hosts/HostDetails/helpers';
+import Icon from 'components/Icon';
 import targetInterface from 'interfaces/target';
 
 const baseClass = 'target-details';
@@ -53,16 +54,16 @@ class TargetDetails extends Component {
     return (
       <div className={`${hostBaseClass} ${className}`}>
         <button className={`button button--unstyled ${hostBaseClass}__back`} onClick={handleBackToResults}>
-          <i className="kolidecon kolidecon-chevronleft" />Back
+          <Icon name="chevronleft" />Back
         </button>
 
         <p className={`${hostBaseClass}__display-text`}>
-          <i className={`${hostBaseClass}__icon kolidecon-fw kolidecon-single-host`} />
+          <Icon name="single-host" fw className={`${hostBaseClass}__icon`} />
           <span>{displayText}</span>
         </p>
         <p className={statusClassName}>
-          {isOnline && <i className={`${hostBaseClass}__icon ${hostBaseClass}__icon--online kolidecon-fw kolidecon-success-check`} />}
-          {isOffline && <i className={`${hostBaseClass}__icon ${hostBaseClass}__icon--offline kolidecon-fw kolidecon-offline`} />}
+          {isOnline && <Icon name="success-check" fw className={`${hostBaseClass}__icon ${hostBaseClass}__icon--online`} />}
+          {isOffline && <Icon name="offline" fw className={`${hostBaseClass}__icon ${hostBaseClass}__icon--offline`} />}
           <span>{status}</span>
         </p>
         <table className={`${baseClass}__table`}>
@@ -78,7 +79,7 @@ class TargetDetails extends Component {
             <tr>
               <th>Platform</th>
               <td>
-                <i className={hostHelpers.platformIconClass(platform)} />
+                <Icon name={hostHelpers.platformIconClass(platform)} />
                 <span className={`${hostBaseClass}__platform-text`}> {platform}</span>
               </td>
             </tr>
@@ -98,7 +99,7 @@ class TargetDetails extends Component {
         </table>
         <div className={`${hostBaseClass}__labels-wrapper`}>
           <p className={`${hostBaseClass}__labels-header`}>
-            <i className={`${hostBaseClass}__icon kolidecon-fw kolidecon-label`} />
+            <Icon name="label" fw className={`${hostBaseClass}__icon`} />
             <span>Labels</span>
           </p>
           <ul className={`${hostBaseClass}__labels-list`}>
@@ -127,11 +128,11 @@ class TargetDetails extends Component {
     return (
       <div className={`${labelBaseClass} ${className}`}>
         <button className={`button button--unstyled ${labelBaseClass}__back`} onClick={handleBackToResults}>
-          <i className="kolidecon kolidecon-chevronleft" /> Back
+          <Icon name="chevronleft" /> Back
         </button>
 
         <p className={`${labelBaseClass}__display-text`}>
-          <i className={`${labelBaseClass}__icon kolidecon-fw kolidecon-label`} />
+          <Icon name="label" fw className={`${labelBaseClass}__icon`} />
           <span>{displayText}</span>
         </p>
 
diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetOption.jsx b/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetOption.jsx
index f6d1dd5005..33bf7a8839 100644
--- a/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetOption.jsx
+++ b/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetOption.jsx
@@ -1,6 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 
+import Icon from 'components/Icon';
 import targetInterface from 'interfaces/target';
 
 const baseClass = 'target-option';
@@ -21,7 +22,7 @@ class TargetOption extends Component {
   hostPlatformIconClass = () => {
     const { platform } = this.props.target;
 
-    return platform === 'darwin' ? 'kolidecon-apple' : `kolidecon-${platform}`;
+    return platform === 'darwin' ? 'apple' : `${platform}`;
   }
 
   renderTargetDetail = () => {
@@ -56,11 +57,11 @@ class TargetOption extends Component {
     return (
       <div className={wrapperClassName}>
         <button className={`button button--unstyled ${baseClass}__add-btn`} onClick={handleSelect}>
-          <i className="kolidecon-add-button" />
+          <Icon name="add-button" />
         </button>
         <button className={`button button--unstyled ${baseClass}__target-content`} onClick={onMoreInfoClick(target)}>
-          {targetType === 'hosts' && <i className={`${baseClass}__icon ${hostPlatformIconClass()}`} />}
-          {targetType === 'labels' && <i className={`${baseClass}__icon kolidecon-label`} />}
+          {targetType === 'hosts' && <Icon name={hostPlatformIconClass()} className={`${baseClass}__icon`} />}
+          {targetType === 'labels' && <Icon name="label" className={`${baseClass}__icon`} />}
           <span className={`${baseClass}__label-label`}>{displayText}</span>
           {renderTargetDetail()}
         </button>
diff --git a/frontend/components/hosts/HostDetails/HostDetails.jsx b/frontend/components/hosts/HostDetails/HostDetails.jsx
index d2f24c0f04..1259990cf6 100644
--- a/frontend/components/hosts/HostDetails/HostDetails.jsx
+++ b/frontend/components/hosts/HostDetails/HostDetails.jsx
@@ -1,8 +1,9 @@
 import React, { PropTypes } from 'react';
 import { noop } from 'lodash';
 
-import EllipsisMenu from '../../../components/buttons/EllipsisMenu';
-import hostInterface from '../../../interfaces/host';
+import EllipsisMenu from 'components/buttons/EllipsisMenu';
+import hostInterface from 'interfaces/host';
+import Icon from 'components/Icon';
 import { humanMemory, humanUptime, platformIconClass } from './helpers';
 
 const baseClass = 'host-details';
@@ -29,12 +30,12 @@ const HostDetails = ({ host, onQueryClick = noop, onDisableClick = noop }) => {
       <EllipsisMenu positionStyles={{ top: '-3px', right: '10px' }}>
         <div className={`${baseClass}__ellipsis-children`}>
           <button className={`${baseClass}__ellipsis-child-item button button--unstyled`} onClick={onQueryClick(host)}>
-            <i className={`${baseClass}__query-icon kolidecon-query`} />
+            <Icon name="query" className={`${baseClass}__query-icon`} />
             <div>Query</div>
           </button>
           <div className={`${baseClass}__vertical-separator`} />
           <button className={`${baseClass}__ellipsis-child-item button button--unstyled`} onClick={onDisableClick(host)}>
-            <i className={`${baseClass}__disabled-icon kolidecon-ex`} />
+            <Icon name="offline" className={`${baseClass}__disabled-icon`} />
             <div>Disable</div>
           </button>
         </div>
@@ -45,7 +46,7 @@ const HostDetails = ({ host, onQueryClick = noop, onDisableClick = noop }) => {
       <p className={`${baseClass}__hostname`}>{hostname}</p>
       <div className={`${baseClass}__separator`}>
         <div>
-          <i className={`${baseClass}__icon ${platformIconClass(platform)}`} />
+          <Icon name={platformIconClass(platform)} className={`${baseClass}__icon`} />
           <span className={`${baseClass}__host-content`}>{osVersion}</span>
         </div>
         <div>
@@ -53,18 +54,18 @@ const HostDetails = ({ host, onQueryClick = noop, onDisableClick = noop }) => {
         </div>
         <div>
           <span style={{ marginRight: '8px' }}>
-            <i className={`${baseClass}__icon kolidecon-memory`} />
+            <Icon name="memory" className={`${baseClass}__icon`} />
             <span className={`${baseClass}__host-content`}>{humanMemory(memory)}</span>
           </span>
-          <i className={`${baseClass}__icon kolidecon-uptime`} />
+          <Icon name="uptime" className={`${baseClass}__icon`} />
           <span className={`${baseClass}__host-content`}>{humanUptime(uptime)}</span>
         </div>
         <div>
-          <i className={`${baseClass}__icon kolidecon-mac`} />
+          <Icon name="mac" className={`${baseClass}__icon`} />
           <span className={`${baseClass}__host-content ${baseClass}__host-content--mono`}>{mac}</span>
         </div>
         <div>
-          <i className={`${baseClass}__icon kolidecon-world`} />
+          <Icon name="world" className={`${baseClass}__icon`} />
           <span className={`${baseClass}__host-content ${baseClass}__host-content--mono`}>{ip}</span>
         </div>
       </div>
diff --git a/frontend/components/hosts/HostDetails/helpers.js b/frontend/components/hosts/HostDetails/helpers.js
index c008f4a0e1..2ca228d145 100644
--- a/frontend/components/hosts/HostDetails/helpers.js
+++ b/frontend/components/hosts/HostDetails/helpers.js
@@ -28,7 +28,7 @@ export const platformIconClass = (platform) => {
     platformClass = 'apple';
   }
 
-  return `kolidecon-${platformClass}`;
+  return platformClass;
 };
 
 export default { humanMemory, humanUptime, platformIconClass };
diff --git a/frontend/components/hosts/HostsTable/HostsTable.jsx b/frontend/components/hosts/HostsTable/HostsTable.jsx
index 38b3ba74fe..d28284e7f2 100644
--- a/frontend/components/hosts/HostsTable/HostsTable.jsx
+++ b/frontend/components/hosts/HostsTable/HostsTable.jsx
@@ -1,6 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 
+import Icon from 'components/Icon';
 import hostInterface from 'interfaces/host';
 import { platformIconClass, statusIconClass } from 'utilities/icon_class';
 
@@ -17,8 +18,8 @@ class HostsTable extends Component {
     return (
       <tr key={`host-${host.id}-table`}>
         <td className={`${baseClass}__hostname`}>{host.hostname}</td>
-        <td className={statusClassName}><i className={statusIconClass(host.status)} /></td>
-        <td><i className={platformIconClass(host.platform)} /> {host.os_version}</td>
+        <td className={statusClassName}><Icon name={statusIconClass(host.status)} /></td>
+        <td><Icon name={platformIconClass(host.platform)} /> {host.os_version}</td>
         <td>{host.osquery_version}</td>
         <td>{host.ip}</td>
         <td>{host.mac}</td>
diff --git a/frontend/components/side_panels/HostSidePanel/HostSidePanel.jsx b/frontend/components/side_panels/HostSidePanel/HostSidePanel.jsx
index 7e5f74cef6..fa47021e75 100644
--- a/frontend/components/side_panels/HostSidePanel/HostSidePanel.jsx
+++ b/frontend/components/side_panels/HostSidePanel/HostSidePanel.jsx
@@ -1,6 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import { filter } from 'lodash';
 
+import Icon from 'components/Icon';
 import InputField from 'components/forms/fields/InputField';
 import labelInterface from 'interfaces/label';
 import PanelGroup from 'components/side_panels/HostSidePanel/PanelGroup';
@@ -64,7 +65,7 @@ class HostSidePanel extends Component {
         />
         <hr className={`${baseClass}__hr`} />
         <div className={`${baseClass}__panel-group-item`}>
-          <i className="kolidecon-tag" />
+          <Icon name="tag" />
           <span className="title">LABELS</span>
         </div>
         <div className={`${baseClass}__panel-group-item`}>
@@ -82,9 +83,9 @@ class HostSidePanel extends Component {
         />
         <hr className={`${baseClass}__hr`} />
         <button className={`${baseClass}__add-label-btn button button--unstyled`} onClick={onAddLabelClick}>
-          <i className="kolidecon-add-button" />
+          <Icon name="add-button" />
           ADD NEW LABEL
-          <i className="kolidecon-label" />
+          <Icon name="label" />
         </button>
       </SecondarySidePanelContainer>
     );
diff --git a/frontend/components/side_panels/HostSidePanel/PanelGroupItem/PanelGroupItem.jsx b/frontend/components/side_panels/HostSidePanel/PanelGroupItem/PanelGroupItem.jsx
index 3b3bf736ba..5a29ce9a4b 100644
--- a/frontend/components/side_panels/HostSidePanel/PanelGroupItem/PanelGroupItem.jsx
+++ b/frontend/components/side_panels/HostSidePanel/PanelGroupItem/PanelGroupItem.jsx
@@ -1,6 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 
+import Icon from 'components/Icon';
 import { iconClassForLabel } from './helpers';
 
 const baseClass = 'panel-group-item';
@@ -28,7 +29,7 @@ class PanelGroupItem extends Component {
 
     return (
       <button className={`${wrapperClassName} button button--unstyled`} onClick={onLabelClick}>
-        <i className={iconClassForLabel(item)} />
+        <Icon name={iconClassForLabel(item)} />
         <span>{displayText}</span>
         <span>{count}</span>
       </button>
diff --git a/frontend/components/side_panels/HostSidePanel/PanelGroupItem/helpers.js b/frontend/components/side_panels/HostSidePanel/PanelGroupItem/helpers.js
index 0a072cd72a..1d62b9abf3 100644
--- a/frontend/components/side_panels/HostSidePanel/PanelGroupItem/helpers.js
+++ b/frontend/components/side_panels/HostSidePanel/PanelGroupItem/helpers.js
@@ -2,16 +2,16 @@ export const iconClassForLabel = (label) => {
   const lowerType = label.type && label.type.toLowerCase();
   const lowerDisplayText = label.display_text && label.display_text.toLowerCase();
 
-  if (lowerType === 'all') return 'kolidecon-hosts';
+  if (lowerType === 'all') return 'hosts';
 
   switch (lowerDisplayText) {
-    case 'offline': return 'kolidecon-hosts';
-    case 'online': return 'kolidecon-hosts';
-    case 'mac os': return 'kolidecon-apple';
-    case 'centos': return 'kolidecon-centos';
-    case 'ubuntu': return 'kolidecon-ubuntu';
-    case 'windows': return 'kolidecon-windows';
-    default: return 'kolidecon-label';
+    case 'offline': return 'hosts';
+    case 'online': return 'hosts';
+    case 'mac os': return 'apple';
+    case 'centos': return 'centos';
+    case 'ubuntu': return 'ubuntu';
+    case 'windows': return 'windows';
+    default: return 'label';
   }
 };
 
diff --git a/frontend/components/side_panels/PackInfoSidePanel/PackInfoSidePanel.jsx b/frontend/components/side_panels/PackInfoSidePanel/PackInfoSidePanel.jsx
index c6f6fc78e2..beade3e1b8 100644
--- a/frontend/components/side_panels/PackInfoSidePanel/PackInfoSidePanel.jsx
+++ b/frontend/components/side_panels/PackInfoSidePanel/PackInfoSidePanel.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import Icon from 'components/Icon';
 import SecondarySidePanelContainer from '../SecondarySidePanelContainer';
 
 const classBlock = 'pack-info-side-panel';
@@ -10,7 +11,7 @@ class PackInfoSidePanel extends React.Component {
       <SecondarySidePanelContainer className={classBlock}>
         <div>
           <h3>
-            <i className="kolidecon-packs" />
+            <Icon name="packs" />
             &nbsp;
             What&apos;s a Query Pack?
           </h3>
diff --git a/frontend/components/side_panels/QuerySidePanel/QuerySidePanel.jsx b/frontend/components/side_panels/QuerySidePanel/QuerySidePanel.jsx
index a2bc0515bc..bf84c093a9 100644
--- a/frontend/components/side_panels/QuerySidePanel/QuerySidePanel.jsx
+++ b/frontend/components/side_panels/QuerySidePanel/QuerySidePanel.jsx
@@ -1,5 +1,10 @@
 import React, { Component, PropTypes } from 'react';
 
+import osqueryTableInterface from 'interfaces/osquery_table';
+import { osqueryTableNames } from 'utilities/osquery_tables';
+import Dropdown from 'components/forms/fields/Dropdown';
+import Icon from 'components/Icon';
+import SecondarySidePanelContainer from '../SecondarySidePanelContainer';
 import Button from '../../buttons/Button';
 import {
   availability,
@@ -8,10 +13,6 @@ import {
   numAdditionalColumns,
   shouldShowAllColumns,
 } from './helpers';
-import osqueryTableInterface from '../../../interfaces/osquery_table';
-import { osqueryTableNames } from '../../../utilities/osquery_tables';
-import SecondarySidePanelContainer from '../SecondarySidePanelContainer';
-import Dropdown from '../../../components/forms/fields/Dropdown';
 
 const baseClass = 'query-side-panel';
 
@@ -74,7 +75,7 @@ class QuerySidePanel extends Component {
           <span className={`${baseClass}__column-name`}>{column.name}</span>
           <div>
             <span>{displayTypeForDataType(column.type)}</span>
-            <i className={`${baseClass}__help kolidecon-help`} title={column.description} />
+            <Icon name="help" className={`${baseClass}__help`} title={column.description} />
           </div>
         </div>
       );
diff --git a/frontend/components/side_panels/SiteNavSidePanel/SiteNavSidePanel.jsx b/frontend/components/side_panels/SiteNavSidePanel/SiteNavSidePanel.jsx
index e7bcb9f681..6350679226 100644
--- a/frontend/components/side_panels/SiteNavSidePanel/SiteNavSidePanel.jsx
+++ b/frontend/components/side_panels/SiteNavSidePanel/SiteNavSidePanel.jsx
@@ -7,6 +7,7 @@ import classnames from 'classnames';
 import configInterface from 'interfaces/config';
 import { logoutUser } from 'redux/nodes/auth/actions';
 import userInterface from 'interfaces/user';
+import Icon from 'components/Icon';
 
 import { activeTabFromPathname, activeSubTabFromPathname } from './helpers';
 import kolideLogo from '../../../../assets/images/kolide-logo.svg';
@@ -152,7 +153,7 @@ class SiteNavSidePanel extends Component {
             <h1 className={`${headerBaseClass}__org-name`}>{orgName}</h1>
             <div className={userStatusClass} />
             <h2 className={`${headerBaseClass}__username`}>{username}</h2>
-            <i className={`${headerBaseClass}__org-chevron kolidecon-chevrondown`} />
+            <Icon name="chevrondown" className={`${headerBaseClass}__org-chevron`} />
           </div>
 
           <UserMenu
@@ -189,7 +190,7 @@ class SiteNavSidePanel extends Component {
             key={name}
             className={navItemClasses}
           >
-            <i className={`${navItemBaseClass}__icon ${icon}`} />
+            <Icon name={icon} className={`${navItemBaseClass}__icon`} />
             <span className={`${navItemBaseClass}__name`}>
               {name}
             </span>
@@ -275,14 +276,14 @@ class SiteNavSidePanel extends Component {
   renderCollapseSubItems = () => {
     const { toggleShowSubItems } = this;
     const { showSubItems } = this.state;
-    const iconName = showSubItems ? 'kolidecon-chevronleftbold' : 'kolidecon-chevronrightbold';
+    const iconName = showSubItems ? 'chevronleft' : 'chevronright';
 
     return (
       <button
         className="button button--unstyled collapse-sub-item"
         onClick={toggleShowSubItems(!showSubItems)}
       >
-        <i className={iconName} />
+        <Icon name={iconName} />
       </button>
     );
   }
diff --git a/frontend/components/side_panels/SiteNavSidePanel/UserMenu.jsx b/frontend/components/side_panels/SiteNavSidePanel/UserMenu.jsx
index 4b7b52d4a1..4a06bb3f01 100644
--- a/frontend/components/side_panels/SiteNavSidePanel/UserMenu.jsx
+++ b/frontend/components/side_panels/SiteNavSidePanel/UserMenu.jsx
@@ -1,6 +1,8 @@
 import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 
+import Icon from 'components/Icon';
+
 class UserMenu extends Component {
   static propTypes = {
     isOpened: PropTypes.bool,
@@ -46,8 +48,8 @@ class UserMenu extends Component {
 
         <nav className={`${toggleBaseClass}__nav`}>
           <ul className={`${toggleBaseClass}__nav-list`}>
-            <li className={`${toggleBaseClass}__nav-item`}><a href="#user-settings"><i className="kolidecon-user-settings" /><span>Account Settings</span></a></li>
-            <li className={`${toggleBaseClass}__nav-item`}><a href="#logout" onClick={onLogout}><i className="kolidecon-logout" /><span>Log Out</span></a></li>
+            <li className={`${toggleBaseClass}__nav-item`}><a href="#user-settings"><Icon name="user-settings" /><span>Account Settings</span></a></li>
+            <li className={`${toggleBaseClass}__nav-item`}><a href="#logout" onClick={onLogout}><Icon name="logout" /><span>Log Out</span></a></li>
           </ul>
         </nav>
       </div>
diff --git a/frontend/components/side_panels/SiteNavSidePanel/navItems.js b/frontend/components/side_panels/SiteNavSidePanel/navItems.js
index 85fb2e04d2..9cdf075241 100644
--- a/frontend/components/side_panels/SiteNavSidePanel/navItems.js
+++ b/frontend/components/side_panels/SiteNavSidePanel/navItems.js
@@ -1,7 +1,7 @@
 export default (admin) => {
   const adminNavItems = [
     {
-      icon: 'kolidecon-admin',
+      icon: 'admin',
       name: 'Admin',
       path: {
         regex: /^\/admin/,
@@ -28,7 +28,7 @@ export default (admin) => {
 
   const userNavItems = [
     {
-      icon: 'kolidecon-hosts',
+      icon: 'hosts',
       name: 'Hosts',
       path: {
         regex: /^\/hosts/,
@@ -53,7 +53,7 @@ export default (admin) => {
     },
     {
       defaultPathname: '/queries/new',
-      icon: 'kolidecon-query',
+      icon: 'query',
       name: 'Query',
       path: {
         regex: /^\/queries/,
@@ -78,7 +78,7 @@ export default (admin) => {
     },
     {
       defaultPathname: '/packs/all',
-      icon: 'kolidecon-packs',
+      icon: 'packs',
       name: 'Packs',
       path: {
         regex: /^\/packs/,
@@ -102,7 +102,7 @@ export default (admin) => {
       ],
     },
     {
-      icon: 'kolidecon-help',
+      icon: 'help',
       name: 'Help',
       path: {
         regex: /^\/help/,
diff --git a/frontend/pages/ForgotPasswordPage/ForgotPasswordPage.jsx b/frontend/pages/ForgotPasswordPage/ForgotPasswordPage.jsx
index fc012ed3d8..a32d9e4bb2 100644
--- a/frontend/pages/ForgotPasswordPage/ForgotPasswordPage.jsx
+++ b/frontend/pages/ForgotPasswordPage/ForgotPasswordPage.jsx
@@ -5,10 +5,11 @@ import { noop } from 'lodash';
 import {
   clearForgotPasswordErrors,
   forgotPasswordAction,
-} from '../../redux/nodes/components/ForgotPasswordPage/actions';
-import debounce from '../../utilities/debounce';
-import ForgotPasswordForm from '../../components/forms/ForgotPasswordForm';
-import StackedWhiteBoxes from '../../components/StackedWhiteBoxes';
+} from 'redux/nodes/components/ForgotPasswordPage/actions';
+import debounce from 'utilities/debounce';
+import ForgotPasswordForm from 'components/forms/ForgotPasswordForm';
+import Icon from 'components/Icon';
+import StackedWhiteBoxes from 'components/StackedWhiteBoxes';
 
 export class ForgotPasswordPage extends Component {
   static propTypes = {
@@ -50,7 +51,7 @@ export class ForgotPasswordPage extends Component {
             </p>
           </div>
           <div className={`${baseClass}__button`}>
-            <i className={`${baseClass}__icon kolidecon kolidecon-success-check`} />
+            <Icon name="success-check" className={`${baseClass}__icon`} />
             EMAIL SENT
           </div>
         </div>
diff --git a/frontend/pages/LoginSuccessfulPage/LoginSuccessfulPage.jsx b/frontend/pages/LoginSuccessfulPage/LoginSuccessfulPage.jsx
index 02296f55e3..3184a56979 100644
--- a/frontend/pages/LoginSuccessfulPage/LoginSuccessfulPage.jsx
+++ b/frontend/pages/LoginSuccessfulPage/LoginSuccessfulPage.jsx
@@ -1,6 +1,8 @@
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 
+import Icon from 'components/Icon';
+
 class LoginSuccessfulPage extends Component {
   static propTypes = {
     dispatch: PropTypes.func.isRequired,
@@ -10,7 +12,7 @@ class LoginSuccessfulPage extends Component {
     const baseClass = 'login-success';
     return (
       <div className={baseClass}>
-        <i className={`${baseClass}__icon kolidecon kolidecon-success-check`} />
+        <Icon name="success-check" className={`${baseClass}__icon`} />
         <p className={`${baseClass}__text`}>Login successful</p>
         <p className={`${baseClass}__sub-text`}>hold on to your butts...</p>
       </div>
diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx
index 52f776b71d..393fee9f17 100644
--- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx
+++ b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx
@@ -12,6 +12,7 @@ import HostDetails from 'components/hosts/HostDetails';
 import hostInterface from 'interfaces/host';
 import HostSidePanel from 'components/side_panels/HostSidePanel';
 import HostsTable from 'components/hosts/HostsTable';
+import Icon from 'components/Icon';
 import osqueryTableInterface from 'interfaces/osquery_table';
 import QueryComposer from 'components/queries/QueryComposer';
 import QuerySidePanel from 'components/side_panels/QuerySidePanel';
@@ -189,7 +190,7 @@ export class ManageHostsPage extends Component {
 
     return (
       <div>
-        <i className="kolidecon-label" />
+        <Icon name="label" />
         <span>{displayText}</span>
         <AceEditor
           editorProps={{ $blockScrolling: Infinity }}
diff --git a/frontend/pages/hosts/NewHostPage/NewHostPage.jsx b/frontend/pages/hosts/NewHostPage/NewHostPage.jsx
index b739947218..0d01001954 100644
--- a/frontend/pages/hosts/NewHostPage/NewHostPage.jsx
+++ b/frontend/pages/hosts/NewHostPage/NewHostPage.jsx
@@ -3,8 +3,9 @@ import { connect } from 'react-redux';
 import { map, noop } from 'lodash';
 import classnames from 'classnames';
 
+import { renderFlash } from 'redux/nodes/notifications/actions';
+import Icon from 'components/Icon';
 import { copyText } from './helpers';
-import { renderFlash } from '../../../redux/nodes/notifications/actions';
 
 const HOST_TABS = {
   FIRST: 'What Does This Script Do?',
@@ -122,15 +123,13 @@ export class NewHostPage extends Component {
     const { method1Text, method1TextCopied, method2Text, method2TextCopied } = this.state;
     const { onCopyText, renderHostTabContent, renderHostTabHeaders } = this;
 
-    const method1IconClasses = classnames('kolidecon',
-      'kolidecon-clipboard',
+    const method1IconClasses = classnames(
       `${baseClass}__clipboard-icon`,
       {
         [`${baseClass}__clipboard-icon--copied`]: method1TextCopied,
       }
     );
-    const method2IconClasses = classnames('kolidecon',
-      'kolidecon-clipboard',
+    const method2IconClasses = classnames(
       `${baseClass}__clipboard-icon`,
       {
         [`${baseClass}__clipboard-icon--copied`]: method2TextCopied,
@@ -144,7 +143,7 @@ export class NewHostPage extends Component {
           <div className={`${baseClass}__input-wrap`}>
             <input id="method1" className={`${baseClass}__input`} value={method1Text} readOnly />
             {method1TextCopied && <span className={`${baseClass}__clipboard-text`}>copied!</span>}
-            <a href="#copyMethod1" onClick={onCopyText(method1Text, '#method1')}><i className={method1IconClasses} /></a>
+            <a href="#copyMethod1" onClick={onCopyText(method1Text, '#method1')}><Icon name="clipboard" className={method1IconClasses} /></a>
           </div>
           <div className={`${baseClass}__tab-wrap`}>
             {renderHostTabHeaders()}
@@ -158,7 +157,7 @@ export class NewHostPage extends Component {
           <div className={`${baseClass}__input-wrap`}>
             <input id="method2" className={`${baseClass}__input`} value={method2Text} readOnly />
             {method2TextCopied && <span className={`${baseClass}__clipboard-text`}>copied!</span>}
-            <a href="#copyMethod2" onClick={onCopyText(method2Text, '#method2')}><i className={method2IconClasses} /></a>
+            <a href="#copyMethod2" onClick={onCopyText(method2Text, '#method2')}><Icon name="clipboard" className={method2IconClasses} /></a>
           </div>
           <p className={`${baseClass}__text`}>This method allows you to configure an existing osqueryd installation to work with Kolide. The <code>--config_endpoints</code> flag allows us to point your osqueryd installation to your Kolide configuration.</p>
         </div>
diff --git a/frontend/utilities/icon_class.js b/frontend/utilities/icon_class.js
index 0bdf223e6c..cad75610dc 100644
--- a/frontend/utilities/icon_class.js
+++ b/frontend/utilities/icon_class.js
@@ -3,9 +3,9 @@ export const statusIconClass = (status = '') => {
 
   switch (lowerStatus) {
     case 'online':
-      return 'kolidecon-success-check';
+      return 'success-check';
     case 'offline':
-      return 'kolidecon-offline';
+      return 'offline';
     default:
       return '';
   }
@@ -16,9 +16,9 @@ export const platformIconClass = (platform = '') => {
 
   switch (lowerPlatform) {
     case 'darwin':
-      return 'kolidecon-apple';
+      return 'apple';
     default:
-      return `kolidecon-${lowerPlatform}`;
+      return lowerPlatform;
   }
 };