diff --git a/media/css/seahub.css b/media/css/seahub.css
index 9d6c6ffc9f..379b343f7b 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -347,6 +347,18 @@ p { margin:0.5em 0; }
 .op-icon.sf2-x:hover {
     color:#f89a68;
 }
+.op-icon.sf2-icon-edit,
+.user-status-edit-icon.sf2-icon-edit,
+.perm-edit-icon.sf2-icon-edit {
+    font-size:16px;
+    color:#888;
+    opacity:0.5;
+}
+.op-icon.sf2-icon-edit:hover,
+.user-status-edit-icon.sf2-icon-edit:hover,
+.perm-edit-icon.sf2-icon-edit:hover {
+    opacity:1;
+}
 .op-icon:hover {/** for <a> **/
     color:#888;
     text-decoration:none;
diff --git a/seahub/share/templates/share/list_priv_shared_folders.html b/seahub/share/templates/share/list_priv_shared_folders.html
index 35e7aeb8f4..91dcb4740d 100644
--- a/seahub/share/templates/share/list_priv_shared_folders.html
+++ b/seahub/share/templates/share/list_priv_shared_folders.html
@@ -25,7 +25,7 @@
         <td>
             <div class="share-permission">
                 <span class="share-permission-cur-value">{{ repo.share_permission }}</span>
-                <img src="{{MEDIA_URL}}img/edit_12.png" alt="{% trans "Edit"%}" title="{% trans "Edit"%}" class="share-permission-edit-icon op-icon vh" />
+                <span title="{% trans "Edit"%}" class="share-permission-edit-icon sf2-icon-edit op-icon vh"></span>
             </div>
             <select name="permission" class="share-permission-select hide">
                 <option value="{{ repo.props.permission }}" selected="selected">{{ repo.share_permission }}</option>
diff --git a/seahub/share/templates/share/repos.html b/seahub/share/templates/share/repos.html
index f68a36de58..dd65814f9e 100644
--- a/seahub/share/templates/share/repos.html
+++ b/seahub/share/templates/share/repos.html
@@ -29,7 +29,7 @@
         <td>
             <div class="share-permission">
                 <span class="share-permission-cur-value">{{ repo.share_permission }}</span>
-                <img src="{{MEDIA_URL}}img/edit_12.png" alt="{% trans "Edit"%}" title="{% trans "Edit"%}" class="share-permission-edit-icon op-icon vh" />
+                <span title="{% trans "Edit"%}" class="share-permission-edit-icon sf2-icon-edit op-icon vh"></span>
             </div>
             <select name="permission" class="share-permission-select hide">
                 <option value="{{ repo.props.permission }}" selected="selected">{{ repo.share_permission }}</option>
diff --git a/seahub/templates/js/templates.html b/seahub/templates/js/templates.html
index 02c152a3cb..4eb325b18e 100644
--- a/seahub/templates/js/templates.html
+++ b/seahub/templates/js/templates.html
@@ -666,7 +666,7 @@
                 {% trans "Read-Only" %}
             <% } %>
             </span>
-            <img src="{{ MEDIA_URL }}img/edit_12.png" alt="{% trans "Edit" %}" title="{% trans "Edit" %}" class="perm-edit-icon op-icon vh" />
+            <span title="{% trans "Edit" %}" class="perm-edit-icon sf2-icon-edit op-icon vh"></span>
         </div>
         <select class="perm-toggle-select hide w100">
             <% if (perm == 'rw') { %>
diff --git a/seahub/templates/repo_share_manage.html b/seahub/templates/repo_share_manage.html
index 85eb3db977..b4f62b3ab6 100644
--- a/seahub/templates/repo_share_manage.html
+++ b/seahub/templates/repo_share_manage.html
@@ -61,7 +61,7 @@
                           {% else %}
                             <span class="share-perm-cur-value">{% trans "Read-Only" %}</span>
                           {% endif %}
-                            <img src="{{MEDIA_URL}}img/edit_12.png" alt="{% trans "Edit"%}" title="{% trans "Edit"%}" class="perm-edit-icon cspt vh" />
+                            <span title="{% trans "Edit"%}" class="perm-edit-icon sf2-icon-edit vam cspt vh"></span>
                         </div>
                         <select class="perm-toggle-select hide">
                             <option value="rw" {%if share.permission == 'rw' %}selected="selected"{% endif %}>{% trans "Read-Write" %}</option>
@@ -94,7 +94,7 @@
                           {% else %}
                             <span class="perm-cur-value">{% trans "Read-Only" %}</span>
                           {% endif %}
-                            <img src="{{MEDIA_URL}}img/edit_12.png" alt="{% trans "Edit"%}" title="{% trans "Edit"%}" class="perm-edit-icon cspt vh" />
+                            <span title="{% trans "Edit"%}" class="perm-edit-icon sf2-icon-edit vam cspt vh"></span>
                         </div>
                         <select class="perm-toggle-select hide">
                             <option value="rw" {%if share.permission == 'rw' %}selected="selected"{% endif %}>{% trans "Read-Write" %}</option>
diff --git a/seahub/templates/sysadmin/useradmin_table.html b/seahub/templates/sysadmin/useradmin_table.html
index 626fa83b90..ee46ac800f 100644
--- a/seahub/templates/sysadmin/useradmin_table.html
+++ b/seahub/templates/sysadmin/useradmin_table.html
@@ -33,7 +33,7 @@
               {% else %}
                 <span class="user-status-cur-value">{% trans "Inactive" %}</span>
               {% endif %}
-                <img src="{{MEDIA_URL}}img/edit_12.png" alt="{% trans "Edit"%}" title="{% trans "Edit"%}" class="user-status-edit-icon cspt vh" />
+                <span title="{% trans "Edit"%}" class="user-status-edit-icon sf2-icon-edit vam cspt vh"></span>
             </div>
             <select name="permission" class="user-status-select hide">
                 <option value="1" {%if user.is_active %}selected="selected"{% endif %}>{% trans "Active" %}</option>