diff --git a/cms/static/js/views/settings/main_settings_view.js b/cms/static/js/views/settings/main_settings_view.js
index 982f232495..2f6239cb59 100644
--- a/cms/static/js/views/settings/main_settings_view.js
+++ b/cms/static/js/views/settings/main_settings_view.js
@@ -16,7 +16,7 @@ CMS.Views.Settings.Details = CMS.Views.ValidatingView.extend({
 
     },
     initialize : function() {
-        this.fileAnchorTemplate = _.template('<a href="<%= fullpath %>"> <i class="ss-icon ss-standard">&#x1F4C4;</i><%= filename %></a>');
+        this.fileAnchorTemplate = _.template('<a href="<%= fullpath %>"> <i class="icon-file"></i><%= filename %></a>');
         // fill in fields
         this.$el.find("#course-name").val(this.model.get('location').get('name'));
         this.$el.find("#course-organization").val(this.model.get('location').get('org'));
diff --git a/cms/static/sass/elements/_footer.scss b/cms/static/sass/elements/_footer.scss
index 24cf415ea1..a357b2f6ca 100644
--- a/cms/static/sass/elements/_footer.scss
+++ b/cms/static/sass/elements/_footer.scss
@@ -48,7 +48,7 @@
           padding: ($baseline/2) ($baseline*0.75);
           background: transparent;
 
-          .ss-icon {
+          [class^="icon-"] {
             @include transition(top .25s ease-in-out .25s);
             @include font-size(15);
             display: inline-block;
@@ -60,7 +60,7 @@
           &:hover, &:active {
             color: $gray-d2;
 
-            .ss-icon {
+            [class^="icon-"] {
               color: $gray-d2;
             }
           }
diff --git a/cms/static/sass/elements/_icons.scss b/cms/static/sass/elements/_icons.scss
index 2bc73d8b8d..a75c97ea76 100644
--- a/cms/static/sass/elements/_icons.scss
+++ b/cms/static/sass/elements/_icons.scss
@@ -5,12 +5,12 @@
 
 }
 
-.ss-icon {
-  
+[class^="icon-"] {
+
 }
 
 .icon-inline {
   display: inline-block;
   vertical-align: middle;
   margin-right: ($baseline/4);
-}
\ No newline at end of file
+}
diff --git a/cms/static/sass/views/_account.scss b/cms/static/sass/views/_account.scss
index c23cd53093..f1fd2bbcc4 100644
--- a/cms/static/sass/views/_account.scss
+++ b/cms/static/sass/views/_account.scss
@@ -272,9 +272,9 @@ body.signup, body.signin {
   background: $yellow-d1;
   color: $white;
 
-  .ss-icon {
+  [class^="icon-"] {
     position: relative;
-    top: 3px;
+    top: 1px;
     @include font-size(16);
     display: inline-block;
     margin-right: ($baseline/2);
diff --git a/cms/templates/js/system-feedback.underscore b/cms/templates/js/system-feedback.underscore
index 09d59700c5..b8ef1b8dc8 100644
--- a/cms/templates/js/system-feedback.underscore
+++ b/cms/templates/js/system-feedback.underscore
@@ -9,8 +9,8 @@
   >
   <div class="<%= type %> <%= intent %> <% if(obj.actions) { %>has-actions<% } %>">
     <% if(obj.icon) { %>
-      <% var iconText = {"warning": "&#x26A0;", "confirmation": "&#x2713;", "error": "&#x26A0;", "announcement": "&#x1F4E2;", "step-required": "&#xE0D1", "help": "&#x2753;", "saving": "&#x2699;"} %>
-      <i class="ss-icon ss-symbolicons-block icon icon-<%= intent %>"><%= iconText[intent] %></i>
+      <% var iconClass = {"warning": "warning-sign", "confirmation": "ok", "error": "warning-sign", "announcement": "bullhorn", "step-required": "exclamation-sign", "help": "question-sign", "saving": "cog"} %>
+      <i class="icon-<%= iconClass[intent] %>"></i>
     <% } %>
 
     <div class="copy">
@@ -40,7 +40,7 @@
 
     <% if(obj.closeIcon) { %>
     <a href="#" rel="view" class="action action-close action-<%= type %>-close">
-      <i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
+      <i class="icon-remove-sign"></i>
       <span class="label">close <%= type %></span>
     </a>
     <% } %>
diff --git a/cms/templates/settings_advanced.html b/cms/templates/settings_advanced.html
index 858dc9cbf0..0400d95694 100644
--- a/cms/templates/settings_advanced.html
+++ b/cms/templates/settings_advanced.html
@@ -110,7 +110,7 @@ editor.render();
 <!-- notification: change has been made and a save is needed -->
 <div class="wrapper wrapper-notification wrapper-notification-warning" aria-hidden="true" role="dialog" aria-labelledby="notification-changesMade-title" aria-describedby="notification-changesMade-description">
   <div class="notification warning has-actions">
-    <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
+    <i class="icon-warning-sign"></i>
 
     <div class="copy">
       <h2 class="title title-3" id="notification-changesMade-title">You've Made Some Changes</h2>
@@ -136,7 +136,7 @@ editor.render();
 <!-- alert: save confirmed with close -->
 <div class="wrapper wrapper-alert wrapper-alert-confirmation" role="status">
   <div class="alert confirmation">
-    <i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
+    <i class="icon-ok"></i>
 
     <div class="copy">
       <h2 class="title title-3">Your policy changes have been saved.</h2>
@@ -144,7 +144,7 @@ editor.render();
     </div>
 
     <a href="" rel="view" class="action action-alert-close">
-      <i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
+      <i class="icon-remove-sign"></i>
       <span class="label">close alert</span>
     </a>
   </div>
@@ -153,7 +153,7 @@ editor.render();
 <!-- alert: error -->
 <div class="wrapper wrapper-alert wrapper-alert-error" role="status">
   <div class="alert error">
-    <i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i>
+    <i class="icon-warning-sign"></i>
 
     <div class="copy">
       <h2 class="title title-3">There was an error saving your information</h2>