diff --git a/skyux-spa-visual-tests/src/app/list-toolbar/list-toolbar-visual.component.html b/skyux-spa-visual-tests/src/app/list-toolbar/list-toolbar-visual.component.html
index b87ff8012..4df23a655 100644
--- a/skyux-spa-visual-tests/src/app/list-toolbar/list-toolbar-visual.component.html
+++ b/skyux-spa-visual-tests/src/app/list-toolbar/list-toolbar-visual.component.html
@@ -25,14 +25,14 @@
           title="Sort descending"
           type="button"
         >
-          <i class="fa fa-angle-double-down" aria-hidden="true"></i>
+          <sky-icon icon="angle-double-down"></sky-icon>
         </button>
         <button
           class="sky-btn sky-btn-default"
           title="Sort ascending"
           type="button"
         >
-          <i class="fa fa-angle-double-up" aria-hidden="true"></i>
+          <sky-icon icon="angle-double-up"></sky-icon>
         </button>
       </sky-list-toolbar-view-actions>
     </sky-list-toolbar>
diff --git a/src/demos/autocomplete/autocomplete-demo.component.html b/src/demos/autocomplete/autocomplete-demo.component.html
index b396dcc51..16a895423 100644
--- a/src/demos/autocomplete/autocomplete-demo.component.html
+++ b/src/demos/autocomplete/autocomplete-demo.component.html
@@ -192,6 +192,6 @@ <h2 class="sky-section-heading">
 <ng-template
   let-item="item"
   #oceanSearchResultTemplate>
-  <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
+  <sky-icon icon="long-arrow-right"></sky-icon>
   {{ item.title }} &bull; ID {{ item.id }}
 </ng-template>
diff --git a/src/demos/flyout/flyout-demo.component.html b/src/demos/flyout/flyout-demo.component.html
index c74d05857..80d549f59 100644
--- a/src/demos/flyout/flyout-demo.component.html
+++ b/src/demos/flyout/flyout-demo.component.html
@@ -29,7 +29,7 @@
     class="sky-btn sky-btn-default"
     title="Close record"
     (click)="closeFlyout()">
-    <i class="fa fa-close" aria-hidden="true"></i>
+    <sky-icon icon="close"></sky-icon>
   </button>
 </ng-template>
 
@@ -42,7 +42,7 @@
     type="button"
     class="sky-btn sky-btn-default"
     (click)="removeFlyout()">
-    <i class="fa fa-trash" aria-hidden="true"></i>
+    <sky-icon icon="trash"></sky-icon>
     Delete flyout
   </button>
 </div>
diff --git a/src/demos/list-toolbar/list-toolbar-demo.component.html b/src/demos/list-toolbar/list-toolbar-demo.component.html
index ec8aaba8e..ccb5b79e9 100644
--- a/src/demos/list-toolbar/list-toolbar-demo.component.html
+++ b/src/demos/list-toolbar/list-toolbar-demo.component.html
@@ -13,7 +13,7 @@
           buttonStyle="primary"
         >
           <sky-dropdown-button>
-            <i class="fa fa-plus-circle" aria-hidden="true"></i>
+            <sky-icon icon="plus-circle"></sky-icon>
             Add
           </sky-dropdown-button>
         </sky-dropdown>
diff --git a/src/modules/alert/alert.component.html b/src/modules/alert/alert.component.html
index 0053e78ae..3277351b7 100644
--- a/src/modules/alert/alert.component.html
+++ b/src/modules/alert/alert.component.html
@@ -18,6 +18,6 @@
       [attr.aria-label]="'alert_close' | skyResources"
       [hidden]="!closeable"
   >
-    <span aria-hidden="true"><i class="fa fa-close"></i></span>
+    <span aria-hidden="true"><sky-icon icon="close"></sky-icon></span>
   </button>
 </div>
diff --git a/src/modules/alert/alert.module.ts b/src/modules/alert/alert.module.ts
index f3c7fde24..e05baac2f 100644
--- a/src/modules/alert/alert.module.ts
+++ b/src/modules/alert/alert.module.ts
@@ -1,12 +1,28 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {
+  NgModule
+} from '@angular/core';
+import {
+  CommonModule
+} from '@angular/common';
 
-import { SkyAlertComponent } from './alert.component';
-import { SkyResourcesModule } from '../resources';
+import {
+  SkyResourcesModule
+} from '../resources';
+import {
+  SkyIconModule
+} from '../icon';
+
+import {
+  SkyAlertComponent
+} from './alert.component';
 
 @NgModule({
   declarations: [SkyAlertComponent],
-  imports: [CommonModule, SkyResourcesModule],
+  imports: [
+    CommonModule,
+    SkyResourcesModule,
+    SkyIconModule
+  ],
   exports: [SkyAlertComponent]
 })
 export class SkyAlertModule { }
diff --git a/src/modules/autocomplete/autocomplete.module.ts b/src/modules/autocomplete/autocomplete.module.ts
index 15b2682c7..6b23361ea 100644
--- a/src/modules/autocomplete/autocomplete.module.ts
+++ b/src/modules/autocomplete/autocomplete.module.ts
@@ -1,12 +1,29 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import {
+  NgModule
+} from '@angular/core';
+import {
+  CommonModule
+} from '@angular/common';
+import {
+  FormsModule
+} from '@angular/forms';
 
-import { SkyDropdownModule } from '../dropdown';
-import { SkyTextHighlightModule } from '../text-highlight';
+import {
+  SkyDropdownModule
+} from '../dropdown';
+import {
+  SkyTextHighlightModule
+} from '../text-highlight';
+import {
+  SkyIconModule
+} from '../icon';
 
-import { SkyAutocompleteComponent } from './autocomplete.component';
-import { SkyAutocompleteInputDirective } from './autocomplete-input.directive';
+import {
+  SkyAutocompleteComponent
+} from './autocomplete.component';
+import {
+  SkyAutocompleteInputDirective
+} from './autocomplete-input.directive';
 
 @NgModule({
   declarations: [
@@ -17,7 +34,8 @@ import { SkyAutocompleteInputDirective } from './autocomplete-input.directive';
     CommonModule,
     FormsModule,
     SkyTextHighlightModule,
-    SkyDropdownModule
+    SkyDropdownModule,
+    SkyIconModule
   ],
   exports: [
     SkyAutocompleteComponent,
diff --git a/src/modules/datepicker/datepicker.module.ts b/src/modules/datepicker/datepicker.module.ts
index 7c0b1c8ea..2d85e0b30 100644
--- a/src/modules/datepicker/datepicker.module.ts
+++ b/src/modules/datepicker/datepicker.module.ts
@@ -1,21 +1,47 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import {
+  NgModule
+} from '@angular/core';
+import {
+  CommonModule
+} from '@angular/common';
+import {
+  FormsModule
+} from '@angular/forms';
 
-import { SkyDatepickerCalendarComponent } from './datepicker-calendar.component';
-import { SkyDatepickerCalendarInnerComponent } from './datepicker-calendar-inner.component';
-import { SkyDayPickerComponent } from './daypicker.component';
-import { SkyMonthPickerComponent } from './monthpicker.component';
-import { SkyYearPickerComponent } from './yearpicker.component';
+import {
+  SkyResourcesModule
+} from '../resources';
+import {
+  SkyDropdownModule
+} from '../dropdown';
+import {
+  SkyIconModule
+} from '../icon';
 
-import { SkyDatepickerComponent } from './datepicker.component';
-
-import { SkyDatepickerConfigService } from './datepicker-config.service';
-import { SkyResourcesModule } from '../resources';
-
-import { SkyDropdownModule } from '../dropdown';
-
-import { SkyDatepickerInputDirective } from './datepicker-input.directive';
+import {
+  SkyDatepickerCalendarComponent
+} from './datepicker-calendar.component';
+import {
+  SkyDatepickerCalendarInnerComponent
+} from './datepicker-calendar-inner.component';
+import {
+  SkyDayPickerComponent
+} from './daypicker.component';
+import {
+  SkyMonthPickerComponent
+} from './monthpicker.component';
+import {
+  SkyYearPickerComponent
+} from './yearpicker.component';
+import {
+  SkyDatepickerComponent
+} from './datepicker.component';
+import {
+  SkyDatepickerConfigService
+} from './datepicker-config.service';
+import {
+  SkyDatepickerInputDirective
+} from './datepicker-input.directive';
 
 @NgModule({
   declarations: [
@@ -31,7 +57,8 @@ import { SkyDatepickerInputDirective } from './datepicker-input.directive';
     CommonModule,
     SkyResourcesModule,
     SkyDropdownModule,
-    FormsModule
+    FormsModule,
+    SkyIconModule
   ],
   exports: [
     SkyDatepickerCalendarComponent,
diff --git a/src/modules/datepicker/daypicker.component.html b/src/modules/datepicker/daypicker.component.html
index be4c79486..c812e8944 100644
--- a/src/modules/datepicker/daypicker.component.html
+++ b/src/modules/datepicker/daypicker.component.html
@@ -13,7 +13,7 @@
           tabindex="-1"
           aria-hidden="true"
           >
-          <i class="fa fa-chevron-left"></i>
+          <sky-icon icon="chevron-left"></sky-icon>
         </button>
       </th>
       <th [attr.colspan]="5 + (datepicker.showWeeks ? 1 : 0)" scope="col">
@@ -38,7 +38,7 @@
           tabindex="-1"
           aria-hidden="true"
           >
-          <i class="fa fa-chevron-right"></i>
+          <sky-icon icon="chevron-right"></sky-icon>
         </button>
       </th>
     </tr>
diff --git a/src/modules/datepicker/monthpicker.component.html b/src/modules/datepicker/monthpicker.component.html
index 7bf2498a6..3e17b346d 100644
--- a/src/modules/datepicker/monthpicker.component.html
+++ b/src/modules/datepicker/monthpicker.component.html
@@ -8,7 +8,7 @@
           (click)="datepicker.moveCalendar($event, -1)"
           tabindex="-1"
           >
-          <i class="fa fa-chevron-left"></i>
+          <sky-icon icon="chevron-left"></sky-icon>
         </button></th>
       <th [attr.colspan]="((datepicker.monthColLimit - 2) <= 0) ? 1 : datepicker.monthColLimit - 2">
         <button
@@ -30,7 +30,7 @@
           (click)="datepicker.moveCalendar($event, 1)"
           tabindex="-1"
           >
-          <i class="fa fa-chevron-right"></i>
+          <sky-icon icon="chevron-right"></sky-icon>
         </button>
       </th>
     </tr>
diff --git a/src/modules/datepicker/yearpicker.component.html b/src/modules/datepicker/yearpicker.component.html
index 3a972f283..7f62fee15 100644
--- a/src/modules/datepicker/yearpicker.component.html
+++ b/src/modules/datepicker/yearpicker.component.html
@@ -8,7 +8,7 @@
           (click)="datepicker.moveCalendar($event, -1)"
           tabindex="-1"
           >
-          <i class="fa fa-chevron-left"></i>
+          <sky-icon icon="chevron-left"></sky-icon>
         </button>
       </th>
       <th [attr.colspan]="((datepicker.yearColLimit - 2) <= 0) ? 1 : datepicker.yearColLimit - 2">
@@ -32,7 +32,7 @@
           (click)="datepicker.moveCalendar($event, 1)"
           tabindex="-1"
           >
-          <i class="fa fa-chevron-right"></i>
+          <sky-icon icon="chevron-right"></sky-icon>
         </button>
       </th>
     </tr>
diff --git a/src/modules/dropdown/dropdown.component.html b/src/modules/dropdown/dropdown.component.html
index 363eb6e66..630f31353 100644
--- a/src/modules/dropdown/dropdown.component.html
+++ b/src/modules/dropdown/dropdown.component.html
@@ -19,7 +19,7 @@
 
     <div [ngSwitch]="buttonType">
       <ng-template ngSwitchCase="context-menu">
-        <i class="fa fa-ellipsis-h"></i>
+        <sky-icon icon="ellipsis-h"></sky-icon>
       </ng-template>
 
       <ng-template ngSwitchDefault>
@@ -32,7 +32,7 @@
             </ng-content>
           </div>
           <div class="sky-dropdown-button-icon-container">
-            <i class="fa fa-caret-down sky-dropdown-caret"></i>
+            <sky-icon icon="caret-down" class="sky-dropdown-caret"></sky-icon>
           </div>
         </div>
         <div
diff --git a/src/modules/dropdown/dropdown.module.ts b/src/modules/dropdown/dropdown.module.ts
index 6868212f4..7520721f7 100644
--- a/src/modules/dropdown/dropdown.module.ts
+++ b/src/modules/dropdown/dropdown.module.ts
@@ -1,13 +1,32 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {
+  NgModule
+} from '@angular/core';
+import {
+  CommonModule
+} from '@angular/common';
 
-import { SkyWindowRefService } from '../window';
-import { SkyPopoverModule } from '../popover';
+import {
+  SkyWindowRefService
+} from '../window';
+import {
+  SkyPopoverModule
+} from '../popover';
+import {
+  SkyIconModule
+} from '../icon';
 
-import { SkyDropdownButtonComponent } from './dropdown-button.component';
-import { SkyDropdownItemComponent } from './dropdown-item.component';
-import { SkyDropdownMenuComponent } from './dropdown-menu.component';
-import { SkyDropdownComponent } from './dropdown.component';
+import {
+  SkyDropdownButtonComponent
+} from './dropdown-button.component';
+import {
+  SkyDropdownItemComponent
+} from './dropdown-item.component';
+import {
+  SkyDropdownMenuComponent
+} from './dropdown-menu.component';
+import {
+  SkyDropdownComponent
+} from './dropdown.component';
 
 @NgModule({
   declarations: [
@@ -18,7 +37,8 @@ import { SkyDropdownComponent } from './dropdown.component';
   ],
   imports: [
     CommonModule,
-    SkyPopoverModule
+    SkyPopoverModule,
+    SkyIconModule
   ],
   exports: [
     SkyDropdownButtonComponent,
diff --git a/src/modules/fileattachments/file-drop.component.html b/src/modules/fileattachments/file-drop.component.html
index 805159cce..99ed9705c 100644
--- a/src/modules/fileattachments/file-drop.component.html
+++ b/src/modules/fileattachments/file-drop.component.html
@@ -33,7 +33,7 @@
         <div class="sky-file-drop-text">
           {{ 'file_upload_or_click_to_browse' | skyResources }}
         </div>
-        <i class="fa fa-cloud-upload sky-file-upload-icon"></i>
+        <sky-icon icon="cloud-upload" class="sky-file-upload-icon"></sky-icon>
       </div>
 
       <!-- This will appear when file is dragged over and is valid -->
@@ -41,7 +41,7 @@
         <div class="sky-file-drop-text-header sky-headline">
           {{ 'file_upload_drop_files_here' | skyResources }}
         </div>
-        <i class="fa fa-bullseye sky-file-upload-icon"></i>
+        <sky-icon icon="bullseye" class="sky-file-upload-icon"></sky-icon>
       </div>
 
       <!-- This will appear when file is dragged over and is invalid -->
@@ -49,7 +49,7 @@
         <div class="sky-file-drop-text-header sky-headline">
           {{ 'file_upload_invalid_file' | skyResources }}
         </div>
-        <i class="fa fa-times-circle sky-file-upload-icon"></i>
+        <sky-icon icon="times-circle" class="sky-file-upload-icon"></sky-icon>
       </div>
     </div>
 
diff --git a/src/modules/fileattachments/file-drop.component.scss b/src/modules/fileattachments/file-drop.component.scss
index ef1c3da31..ce5c14cbc 100644
--- a/src/modules/fileattachments/file-drop.component.scss
+++ b/src/modules/fileattachments/file-drop.component.scss
@@ -96,6 +96,7 @@ button.sky-file-drop {
 .sky-file-upload-icon {
   display: block;
   font-size: 40px;
+  max-height: 40px;
   margin-top: $sky-margin;
 }
 
diff --git a/src/modules/fileattachments/file-item.component.html b/src/modules/fileattachments/file-item.component.html
index c7995cd5c..9cbed93d7 100644
--- a/src/modules/fileattachments/file-item.component.html
+++ b/src/modules/fileattachments/file-item.component.html
@@ -11,7 +11,7 @@
         </div>
         <div class="sky-pull-right">
           <button type="button" class="sky-btn sky-btn-default sky-file-item-btn-delete" [attr.aria-label]="'file_item_delete' | skyResources" (click)="itemDelete()">
-              <i class="fa fa-lg fa-trash-o"></i>
+            <sky-icon icon="trash-o" size="lg"></sky-icon>
           </button>
         </div>
     </div>
diff --git a/src/modules/fileattachments/fileattachments.module.ts b/src/modules/fileattachments/fileattachments.module.ts
index 457467352..588cd9155 100644
--- a/src/modules/fileattachments/fileattachments.module.ts
+++ b/src/modules/fileattachments/fileattachments.module.ts
@@ -1,11 +1,30 @@
-import { NgModule } from '@angular/core';
-import { CommonModule, DecimalPipe } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import {
+  NgModule
+} from '@angular/core';
+import {
+  CommonModule,
+  DecimalPipe
+} from '@angular/common';
+import {
+  FormsModule
+} from '@angular/forms';
 
-import { SkyFileDropComponent } from './file-drop.component';
-import { SkyFileItemComponent } from './file-item.component';
-import { SkyResourcesModule } from '../resources';
-import { SkyFileSizePipe } from './file-size.pipe';
+import {
+  SkyResourcesModule
+} from '../resources';
+import {
+  SkyIconModule
+} from '../icon';
+
+import {
+  SkyFileDropComponent
+} from './file-drop.component';
+import {
+  SkyFileItemComponent
+} from './file-item.component';
+import {
+  SkyFileSizePipe
+} from './file-size.pipe';
 
 @NgModule({
   declarations: [
@@ -16,7 +35,8 @@ import { SkyFileSizePipe } from './file-size.pipe';
   imports: [
     CommonModule,
     SkyResourcesModule,
-    FormsModule
+    FormsModule,
+    SkyIconModule
   ],
   exports: [
     SkyFileDropComponent,
diff --git a/src/modules/flyout/flyout.component.html b/src/modules/flyout/flyout.component.html
index aeb7c0793..d6886780c 100644
--- a/src/modules/flyout/flyout.component.html
+++ b/src/modules/flyout/flyout.component.html
@@ -30,7 +30,7 @@
         class="sky-btn sky-btn-default sky-flyout-btn-close"
         (click)="close()"
         [attr.aria-label]="'flyout_close' | skyResources">
-        <i class="fa fa-close" aria-hidden="true"></i>
+        <sky-icon icon="close"></sky-icon>
       </button>
     </div>
   </div>
diff --git a/src/modules/flyout/flyout.module.ts b/src/modules/flyout/flyout.module.ts
index fd805d017..fde0d809e 100644
--- a/src/modules/flyout/flyout.module.ts
+++ b/src/modules/flyout/flyout.module.ts
@@ -13,14 +13,22 @@ import {
 import {
   SkyResourcesModule
 } from '../resources';
-
 import {
   SkyWindowRefService
 } from '../window';
+import {
+  SkyIconModule
+} from '../icon';
 
-import { SkyFlyoutAdapterService } from './flyout-adapter.service';
-import { SkyFlyoutComponent } from './flyout.component';
-import { SkyFlyoutService } from './flyout.service';
+import {
+  SkyFlyoutAdapterService
+} from './flyout-adapter.service';
+import {
+  SkyFlyoutComponent
+} from './flyout.component';
+import {
+  SkyFlyoutService
+} from './flyout.service';
 
 @NgModule({
   declarations: [
@@ -34,7 +42,8 @@ import { SkyFlyoutService } from './flyout.service';
   imports: [
     CommonModule,
     RouterModule,
-    SkyResourcesModule
+    SkyResourcesModule,
+    SkyIconModule
   ],
   exports: [
     SkyFlyoutComponent
diff --git a/src/modules/help-inline/help-inline.component.html b/src/modules/help-inline/help-inline.component.html
index 6d40d0c59..3b56351f1 100644
--- a/src/modules/help-inline/help-inline.component.html
+++ b/src/modules/help-inline/help-inline.component.html
@@ -3,5 +3,5 @@
   type="button"
   (click)="onClick()"
   [attr.title]="'help_inline_button_title' | skyResources">
-  <i class="fa fa-info-circle" aria-hidden="true"></i>
+  <sky-icon icon="info-circle"></sky-icon>
 </button>
diff --git a/src/modules/help-inline/help-inline.module.ts b/src/modules/help-inline/help-inline.module.ts
index f2c9703f9..4aaefb906 100644
--- a/src/modules/help-inline/help-inline.module.ts
+++ b/src/modules/help-inline/help-inline.module.ts
@@ -9,8 +9,13 @@ import {
 import {
   SkyResourcesModule
 } from '../resources';
+import {
+  SkyIconModule
+} from '../icon';
 
-import { SkyHelpInlineComponent } from './help-inline.component';
+import {
+  SkyHelpInlineComponent
+} from './help-inline.component';
 
 @NgModule({
   declarations: [
@@ -18,7 +23,8 @@ import { SkyHelpInlineComponent } from './help-inline.component';
   ],
   imports: [
     CommonModule,
-    SkyResourcesModule
+    SkyResourcesModule,
+    SkyIconModule
   ],
   exports: [
     SkyHelpInlineComponent
diff --git a/src/modules/list-secondary-actions/list-secondary-actions.component.html b/src/modules/list-secondary-actions/list-secondary-actions.component.html
index 35807e53c..823560ed1 100644
--- a/src/modules/list-secondary-actions/list-secondary-actions.component.html
+++ b/src/modules/list-secondary-actions/list-secondary-actions.component.html
@@ -5,7 +5,7 @@
     <sky-dropdown
       [attr.title]="'list_show_secondary_actions' | skyResources">
       <sky-dropdown-button>
-        <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
+        <sky-icon icon="ellipsis-h"></sky-icon>
         <span class="sky-list-secondary-actions-btn-text">
           {{ 'list_show_secondary_actions_button' | skyResources }}
         </span>
diff --git a/src/modules/list-secondary-actions/list-secondary-actions.module.ts b/src/modules/list-secondary-actions/list-secondary-actions.module.ts
index d87055aa2..7b382eecf 100644
--- a/src/modules/list-secondary-actions/list-secondary-actions.module.ts
+++ b/src/modules/list-secondary-actions/list-secondary-actions.module.ts
@@ -1,14 +1,29 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { SkyDropdownModule } from '../dropdown';
+import {
+  NgModule
+} from '@angular/core';
+import {
+  CommonModule
+} from '@angular/common';
+
+import {
+  SkyDropdownModule
+} from '../dropdown';
+import {
+  SkyResourcesModule
+} from '../resources';
+import {
+  SkyMediaQueryModule
+} from '../media-queries';
+import {
+  SkyIconModule
+} from '../icon';
+
 import {
   SkyListSecondaryActionsComponent
 } from './list-secondary-actions.component';
 import {
   SkyListSecondaryActionComponent
 } from './list-secondary-action.component';
-import { SkyResourcesModule } from '../resources';
-import { SkyMediaQueryModule } from '../media-queries';
 
 @NgModule({
   declarations: [
@@ -19,7 +34,8 @@ import { SkyMediaQueryModule } from '../media-queries';
     CommonModule,
     SkyDropdownModule,
     SkyResourcesModule,
-    SkyMediaQueryModule
+    SkyMediaQueryModule,
+    SkyIconModule
   ],
   exports: [
     SkyListSecondaryActionsComponent,
@@ -28,5 +44,4 @@ import { SkyMediaQueryModule } from '../media-queries';
   providers: [
   ]
 })
-export class SkyListSecondaryActionsModule {
-}
+export class SkyListSecondaryActionsModule { }
diff --git a/src/modules/list-secondary-actions/list-secondary-actions.spec.ts b/src/modules/list-secondary-actions/list-secondary-actions.spec.ts
index 0702d6db9..b004c1646 100644
--- a/src/modules/list-secondary-actions/list-secondary-actions.spec.ts
+++ b/src/modules/list-secondary-actions/list-secondary-actions.spec.ts
@@ -14,13 +14,16 @@ import {
   ListState,
   ListStateDispatcher
 } from '../list/state';
-
 import {
   SkyListToolbarModule
 } from '../list-toolbar';
 
-import { ListSecondaryActionsTestComponent } from './fixtures/list-secondary-actions.component.fixture';
-import { SkyListSecondaryActionsModule } from './list-secondary-actions.module';
+import {
+  ListSecondaryActionsTestComponent
+} from './fixtures/list-secondary-actions.component.fixture';
+import {
+  SkyListSecondaryActionsModule
+} from './list-secondary-actions.module';
 
 describe('List Secondary Actions Component', () => {
   let state: ListState;
diff --git a/src/modules/list-toolbar/list-toolbar.module.ts b/src/modules/list-toolbar/list-toolbar.module.ts
index 2c82de22e..125b35e8e 100644
--- a/src/modules/list-toolbar/list-toolbar.module.ts
+++ b/src/modules/list-toolbar/list-toolbar.module.ts
@@ -1,14 +1,41 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { SkyToolbarModule } from '../toolbar';
-import { SkySearchModule } from '../search';
-import { SkySortModule } from '../sort';
-import { SkyFilterModule } from '../filter';
-import { SkyListFiltersModule } from '../list-filters';
-import { SkyListToolbarComponent } from './list-toolbar.component';
-import { SkyListToolbarItemComponent } from './list-toolbar-item.component';
-import { SkyListToolbarItemRendererComponent } from './list-toolbar-item-renderer.component';
-import { SkyListToolbarSortComponent } from './list-toolbar-sort.component';
+import {
+  NgModule
+} from '@angular/core';
+import {
+  CommonModule
+} from '@angular/common';
+
+import {
+  SkyToolbarModule
+} from '../toolbar';
+import {
+  SkySearchModule
+} from '../search';
+import {
+  SkySortModule
+} from '../sort';
+import {
+  SkyFilterModule
+} from '../filter';
+import {
+  SkyListFiltersModule
+} from '../list-filters';
+import {
+  SkyIconModule
+} from '../icon';
+
+import {
+  SkyListToolbarComponent
+} from './list-toolbar.component';
+import {
+  SkyListToolbarItemComponent
+} from './list-toolbar-item.component';
+import {
+  SkyListToolbarItemRendererComponent
+} from './list-toolbar-item-renderer.component';
+import {
+  SkyListToolbarSortComponent
+} from './list-toolbar-sort.component';
 
 import {
   SkyListToolbarViewActionsComponent
@@ -28,7 +55,8 @@ import {
     SkySearchModule,
     SkySortModule,
     SkyFilterModule,
-    SkyListFiltersModule
+    SkyListFiltersModule,
+    SkyIconModule
   ],
   exports: [
     SkyListToolbarComponent,
@@ -36,8 +64,6 @@ import {
     SkyListToolbarItemRendererComponent,
     SkyListToolbarSortComponent,
     SkyListToolbarViewActionsComponent
-  ],
-  providers: [
   ]
 })
 export class SkyListToolbarModule {
diff --git a/src/modules/modal/modal.component.html b/src/modules/modal/modal.component.html
index 52789c275..2e0678425 100644
--- a/src/modules/modal/modal.component.html
+++ b/src/modules/modal/modal.component.html
@@ -38,12 +38,11 @@
       </div>
       <div class="sky-modal-header-buttons">
         <button *ngIf="helpKey" type="button" class="sky-btn" name="help-button" [attr.aria-label]="'open_help' | skyResources" (click)="helpButtonClick()">
-          <i class="fa fa-question-circle"></i>
+          <sky-icon icon="question-circle"></sky-icon>
         </button>
 
         <button type="button" class="sky-btn sky-modal-btn-close" [attr.aria-label]="'modal_close' | skyResources" (click)="closeButtonClick()">
-
-          <i class="fa fa-close"></i>
+          <sky-icon icon="close"></sky-icon>
         </button>
       </div>
 
diff --git a/src/modules/modal/modal.module.ts b/src/modules/modal/modal.module.ts
index a47130311..b1def2f7a 100644
--- a/src/modules/modal/modal.module.ts
+++ b/src/modules/modal/modal.module.ts
@@ -5,17 +5,40 @@ import {
   RouterModule
 } from '@angular/router';
 
-import { SkyModalAdapterService } from './modal-adapter.service';
-import { SkyModalContentComponent } from './modal-content.component';
-import { SkyModalFooterComponent } from './modal-footer.component';
-import { SkyModalHeaderComponent } from './modal-header.component';
-import { SkyModalHostComponent } from './modal-host.component';
-import { SkyModalComponent } from './modal.component';
-import { SkyModalService } from './modal.service';
-import { SkyWindowRefService } from '../window';
+import {
+  SkyWindowRefService
+} from '../window';
+import {
+  SkyResourcesModule
+} from '../resources';
+import {
+  SkyErrorModalFormComponent
+} from '../error/error-modal-form.component';
+import {
+  SkyIconModule
+} from '../icon';
 
-import { SkyResourcesModule } from '../resources';
-import { SkyErrorModalFormComponent } from '../error/error-modal-form.component';
+import {
+  SkyModalAdapterService
+} from './modal-adapter.service';
+import {
+  SkyModalContentComponent
+} from './modal-content.component';
+import {
+  SkyModalFooterComponent
+} from './modal-footer.component';
+import {
+  SkyModalHeaderComponent
+} from './modal-header.component';
+import {
+  SkyModalHostComponent
+} from './modal-host.component';
+import {
+  SkyModalComponent
+} from './modal.component';
+import {
+  SkyModalService
+} from './modal.service';
 
 @NgModule({
   declarations: [
@@ -34,7 +57,8 @@ import { SkyErrorModalFormComponent } from '../error/error-modal-form.component'
   imports: [
     CommonModule,
     RouterModule,
-    SkyResourcesModule
+    SkyResourcesModule,
+    SkyIconModule
   ],
   exports: [
     SkyModalComponent,
diff --git a/src/modules/search/search.component.html b/src/modules/search/search.component.html
index 4529bed9f..240a85d18 100644
--- a/src/modules/search/search.component.html
+++ b/src/modules/search/search.component.html
@@ -8,7 +8,11 @@
       [ngClass]="{'sky-search-btn-open-applied': clearButtonShown}"
       (click)="toggleSearchInput(true)"
     >
-      <i class="fa fa-search fa-lg"></i>
+      <sky-icon
+        icon="search"
+        size="lg"
+      >
+      </sky-icon>
     </button>
   </div>
   <div
@@ -18,13 +22,14 @@
   >
     <div class="sky-search-item-input">
       <div
+        class="sky-search-input-container sky-input-group"
         [ngClass]="{
           'sky-search-input-focused sky-field-status-active sky-rounded-corners': searchInputFocused
         }"
         [@inputState]="inputAnimate"
         (@inputState.start)="inputAnimationStart($event)"
         (@inputState.done)="inputAnimationEnd($event)"
-        class="sky-search-input-container sky-input-group">
+      >
         <input
           class="sky-form-control sky-search-input sky-rounded-corners"
           type="text"
@@ -38,7 +43,8 @@
           (ngModelChange)="searchTextChanged($event)"/>
         <span
           class="sky-input-group-btn sky-input-group-clear"
-          [hidden]="!clearButtonShown">
+          [hidden]="!clearButtonShown"
+        >
           <button
             aria-hidden="true"
             class="sky-btn sky-btn-default sky-search-btn sky-search-btn-clear"
@@ -47,11 +53,15 @@
             [disabled]="disabled"
             (click)="clearSearchText()"
           >
-            <i class="fa fa-times"></i>
+            <sky-icon
+              icon="times"
+            >
+            </sky-icon>
           </button>
         </span>
         <span
-          class="sky-input-group-btn">
+          class="sky-input-group-btn"
+        >
           <button
             class="sky-btn sky-btn-default sky-search-btn sky-search-btn-apply"
             type="button"
@@ -59,19 +69,30 @@
             [disabled]="disabled"
             (click)="applySearchText(searchText)"
           >
-            <i class="fa fa-search fa-lg"></i>
+            <sky-icon
+              icon="search"
+              size="lg"
+            >
+            </sky-icon>
           </button>
         </span>
       </div>
     </div>
-    <div class="sky-search-item-dismiss">
-      <button *ngIf="mobileSearchShown"
+    <div
+      class="sky-search-item-dismiss"
+    >
+      <button
+        *ngIf="mobileSearchShown"
         class="sky-btn sky-btn-secondary sky-search-btn-dismiss"
         type="button"
         [attr.title]="'search_dismiss' | skyResources"
         (click)="toggleSearchInput(false)"
       >
-        <i class="fa fa-chevron-circle-left fa-lg"></i>
+        <sky-icon
+          icon="chevron-circle-left"
+          size="lg"
+        >
+        </sky-icon>
       </button>
     </div>
   </div>
diff --git a/src/modules/search/search.module.ts b/src/modules/search/search.module.ts
index c93ee65c2..d74734817 100644
--- a/src/modules/search/search.module.ts
+++ b/src/modules/search/search.module.ts
@@ -1,13 +1,29 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import {
+  NgModule
+} from '@angular/core';
+import {
+  CommonModule
+} from '@angular/common';
+import {
+  FormsModule
+} from '@angular/forms';
+import {
+  BrowserAnimationsModule
+} from '@angular/platform-browser/animations';
 
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {
+  SkyMediaQueryModule
+} from '../media-queries';
+import {
+  SkyResourcesModule
+} from '../resources';
+import {
+  SkyIconModule
+} from '../icon';
 
-import { SkySearchComponent } from './search.component';
-import { SkyMediaQueryModule } from '../media-queries';
-
-import { SkyResourcesModule } from '../resources';
+import {
+  SkySearchComponent
+} from './search.component';
 
 @NgModule({
   declarations: [
@@ -18,7 +34,8 @@ import { SkyResourcesModule } from '../resources';
     CommonModule,
     SkyResourcesModule,
     SkyMediaQueryModule,
-    FormsModule
+    FormsModule,
+    SkyIconModule
   ],
   exports: [
     SkySearchComponent
diff --git a/src/modules/sort/sort.component.html b/src/modules/sort/sort.component.html
index 3b366ee3b..aa6549edb 100644
--- a/src/modules/sort/sort.component.html
+++ b/src/modules/sort/sort.component.html
@@ -5,7 +5,7 @@
     [messageStream]="dropdownController"
     [title]="'sort_button_label' | skyResources">
     <sky-dropdown-button>
-      <i class="fa fa-sort" aria-hidden="true"></i>
+      <sky-icon icon="sort"></sky-icon>
       <span
         *ngIf="showButtonText"
         class="sky-sort-btn-text">
diff --git a/src/modules/sort/sort.module.ts b/src/modules/sort/sort.module.ts
index 64e0b1e93..824f8370f 100644
--- a/src/modules/sort/sort.module.ts
+++ b/src/modules/sort/sort.module.ts
@@ -1,11 +1,29 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {
+  NgModule
+} from '@angular/core';
+import {
+  CommonModule
+} from '@angular/common';
 
-import { SkySortComponent } from './sort.component';
-import { SkySortItemComponent } from './sort-item.component';
-import { SkyDropdownModule } from '../dropdown';
-import { SkyResourcesModule } from '../resources';
-import { SkyMediaQueryModule } from '../media-queries';
+import {
+  SkyDropdownModule
+} from '../dropdown';
+import {
+  SkyResourcesModule
+} from '../resources';
+import {
+  SkyMediaQueryModule
+} from '../media-queries';
+import {
+  SkyIconModule
+} from '../icon';
+
+import {
+  SkySortComponent
+} from './sort.component';
+import {
+  SkySortItemComponent
+} from './sort-item.component';
 
 @NgModule({
   declarations: [
@@ -16,7 +34,8 @@ import { SkyMediaQueryModule } from '../media-queries';
     CommonModule,
     SkyDropdownModule,
     SkyMediaQueryModule,
-    SkyResourcesModule
+    SkyResourcesModule,
+    SkyIconModule
   ],
   exports: [
     SkySortComponent,
diff --git a/src/modules/tabs/tab-button.component.html b/src/modules/tabs/tab-button.component.html
index f2bbfb287..ac929b6f1 100644
--- a/src/modules/tabs/tab-button.component.html
+++ b/src/modules/tabs/tab-button.component.html
@@ -31,6 +31,6 @@
       *ngIf="allowClose"
       (click)="doCloseClick();$event.stopPropagation()"
   >
-    <i class="fa fa-remove"></i>
+    <sky-icon icon="remove"></sky-icon>
   </button>
 </a>
diff --git a/src/modules/tabs/tab-dropdown.component.html b/src/modules/tabs/tab-dropdown.component.html
index 48a98023a..0baf44f36 100644
--- a/src/modules/tabs/tab-dropdown.component.html
+++ b/src/modules/tabs/tab-dropdown.component.html
@@ -23,7 +23,7 @@
             class="sky-btn sky-tab-dropdown-item-close sky-padding-even-default"
             *ngIf="tab.allowClose"
             (click)="closeTab(tab)">
-            <i class="fa fa-remove"></i>
+            <sky-icon icon="remove"></sky-icon>
           </button>
         </div>
       </sky-dropdown-item>
diff --git a/src/modules/tabs/tabs.module.ts b/src/modules/tabs/tabs.module.ts
index 762cd0b89..93119d59b 100644
--- a/src/modules/tabs/tabs.module.ts
+++ b/src/modules/tabs/tabs.module.ts
@@ -1,15 +1,35 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {
+  NgModule
+} from '@angular/core';
+import {
+  CommonModule
+} from '@angular/common';
 
-import { SkyDropdownModule } from '../dropdown';
+import {
+  SkyTabButtonComponent
+} from './tab-button.component';
+import {
+  SkyTabDropdownComponent
+} from './tab-dropdown.component';
+import {
+  SkyTabComponent
+} from './tab.component';
+import {
+  SkyTabsetComponent
+} from './tabset.component';
+import {
+  SkyTabsetNavButtonComponent
+} from './tabset-nav-button.component';
 
-import { SkyTabButtonComponent } from './tab-button.component';
-import { SkyTabDropdownComponent } from './tab-dropdown.component';
-import { SkyTabComponent } from './tab.component';
-import { SkyTabsetComponent } from './tabset.component';
-import { SkyTabsetNavButtonComponent } from './tabset-nav-button.component';
-
-import { SkyResourcesModule } from '../resources';
+import {
+ SkyDropdownModule
+} from '../dropdown';
+import {
+  SkyResourcesModule
+} from '../resources';
+import {
+  SkyIconModule
+} from '../icon';
 
 @NgModule({
   declarations: [
@@ -22,7 +42,8 @@ import { SkyResourcesModule } from '../resources';
   imports: [
     CommonModule,
     SkyDropdownModule,
-    SkyResourcesModule
+    SkyResourcesModule,
+    SkyIconModule
   ],
   exports: [
     SkyTabComponent,
diff --git a/src/modules/tabs/tabset.component.html b/src/modules/tabs/tabset.component.html
index b22d99d53..2160906c1 100644
--- a/src/modules/tabs/tabset.component.html
+++ b/src/modules/tabs/tabset.component.html
@@ -1,11 +1,11 @@
 <div
-    class="sky-tabset" role="tablist"
+    class="sky-tabset"
+    role="tablist"
     [ngClass]="'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle"
     (window:resize)="windowResize()"
 >
   <span class="sky-tabset-dropdown">
-    <sky-tab-dropdown
-        *ngIf="tabDisplayMode === 'dropdown'"
+    <sky-tab-dropdown *ngIf="tabDisplayMode === 'dropdown'"
         [tabs]="tabs"
         (tabClick)="selectTab($event)"
         (closeClick)="tabCloseClick($event)"
@@ -13,9 +13,9 @@
     </sky-tab-dropdown>
   </span>
   <span
-    class="sky-tabset-tabs">
-    <sky-tab-button
-        *ngFor="let tab of tabs; let i = index"
+    class="sky-tabset-tabs"
+  >
+    <sky-tab-button *ngFor="let tab of tabs; let i = index"
         [active]="tab.active"
         [allowClose]="tab.allowClose"
         [attr.aria-controls]="tab.tabId"
@@ -26,26 +26,33 @@
         [tabStyle]="tabStyle"
         (closeClick)="tabCloseClick(tab)"
         (tabClick)="selectTab(tab)"
-    ></sky-tab-button>
+    >
+    </sky-tab-button>
   </span>
   <span class="sky-tabset-btns">
-    <button
-        type="button"
+    <button *ngIf="newTab.observers.length > 0"
         class="sky-btn sky-btn-default sky-tabset-btn-new"
-        (click)="newTabClick()"
+        type="button"
         [attr.aria-label]="'tab_add' | skyResources"
-        *ngIf="newTab.observers.length > 0"
+        (click)="newTabClick()"
     >
-      <i class="fa fa-lg fa-plus-circle"></i>
+      <sky-icon
+        icon="plus-circle"
+        size="lg"
+      >
+      </sky-icon>
     </button>
-    <button
-        type="button"
+    <button *ngIf="openTab.observers.length > 0"
         class="sky-btn sky-btn-default sky-tabset-btn-open"
-        (click)="openTabClick()"
+        type="button"
         [attr.aria-label]="'tab_open' | skyResources"
-        *ngIf="openTab.observers.length > 0"
+        (click)="openTabClick()"
     >
-      <i class="fa fa-lg fa-folder-open-o"></i>
+      <sky-icon
+        icon="folder-open-o"
+        size="lg"
+      >
+      </sky-icon>
     </button>
   </span>
 </div>
diff --git a/src/modules/toast/toast.component.html b/src/modules/toast/toast.component.html
index 494cb163e..6b406498b 100644
--- a/src/modules/toast/toast.component.html
+++ b/src/modules/toast/toast.component.html
@@ -18,7 +18,7 @@
       [attr.title]="'toast_close_button' | skyResources"
       (click)="close()"
     >
-      <i class="fa fa-close" aria-hidden="true"></i>
+      <sky-icon icon="close"></sky-icon>
     </button>
   </div>
 </aside>
diff --git a/src/modules/toast/toast.module.ts b/src/modules/toast/toast.module.ts
index 17ee64cc9..23a11dd42 100644
--- a/src/modules/toast/toast.module.ts
+++ b/src/modules/toast/toast.module.ts
@@ -2,7 +2,6 @@
 import {
   NgModule
 } from '@angular/core';
-
 import {
   CommonModule
 } from '@angular/common';
@@ -10,27 +9,25 @@ import {
 import {
   SkyResourcesModule
 } from '../resources';
-
 import {
   SkyWindowRefService
 } from '../window';
+import {
+  SkyIconModule
+} from '../icon';
 
 import {
   SkyToastAdapterService
 } from './toast-adapter.service';
-
 import {
   SkyToastBodyComponent
 } from './toast-body.component';
-
 import {
   SkyToastComponent
 } from './toast.component';
-
 import {
   SkyToasterComponent
 } from './toaster.component';
-
 import {
   SkyToastService
 } from './toast.service';
@@ -44,7 +41,8 @@ import {
   ],
   imports: [
     CommonModule,
-    SkyResourcesModule
+    SkyResourcesModule,
+    SkyIconModule
   ],
   exports: [
     SkyToastComponent
diff --git a/src/modules/vertical-tabset/vertical-tabset.component.html b/src/modules/vertical-tabset/vertical-tabset.component.html
index 225457fc4..a2d8c6352 100644
--- a/src/modules/vertical-tabset/vertical-tabset.component.html
+++ b/src/modules/vertical-tabset/vertical-tabset.component.html
@@ -19,7 +19,7 @@
       (click)="tabService.showTabs()"
       class="sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn"
     >
-      <i class="fa fa-chevron-left"></i>
+      <sky-icon icon="chevron-left"></sky-icon>
       {{ showTabsText }}
     </button>
   </div>
diff --git a/src/modules/vertical-tabset/vertical-tabset.module.ts b/src/modules/vertical-tabset/vertical-tabset.module.ts
index 887135950..b8b1372c7 100644
--- a/src/modules/vertical-tabset/vertical-tabset.module.ts
+++ b/src/modules/vertical-tabset/vertical-tabset.module.ts
@@ -1,11 +1,29 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {
+  NgModule
+} from '@angular/core';
+import {
+  CommonModule
+} from '@angular/common';
+import {
+  BrowserAnimationsModule
+} from '@angular/platform-browser/animations';
 
-import { SkyVerticalTabsetComponent } from './vertical-tabset.component';
-import { SkyVerticalTabComponent } from './vertical-tab.component';
-import { SkyVerticalTabsetGroupComponent } from './vertical-tabset-group.component';
-import { SkyChevronModule } from './../chevron/chevron.module';
+import {
+  SkyIconModule
+} from '../icon';
+
+import {
+  SkyVerticalTabsetComponent
+} from './vertical-tabset.component';
+import {
+  SkyVerticalTabComponent
+} from './vertical-tab.component';
+import {
+  SkyVerticalTabsetGroupComponent
+} from './vertical-tabset-group.component';
+import {
+  SkyChevronModule
+} from './../chevron/chevron.module';
 
 @NgModule({
   declarations: [
@@ -16,7 +34,8 @@ import { SkyChevronModule } from './../chevron/chevron.module';
   imports: [
     CommonModule,
     BrowserAnimationsModule,
-    SkyChevronModule
+    SkyChevronModule,
+    SkyIconModule
   ],
   exports: [
     SkyVerticalTabsetComponent,