diff --git a/src/main/twirl/gitbucket/core/helper/diff.scala.html b/src/main/twirl/gitbucket/core/helper/diff.scala.html
index 2877060..605efd2 100644
--- a/src/main/twirl/gitbucket/core/helper/diff.scala.html
+++ b/src/main/twirl/gitbucket/core/helper/diff.scala.html
@@ -24,16 +24,16 @@
     <li@if(i > 0){ class="border"}>
       <a href="#diff-@i">
         @if(diff.changeType == ChangeType.COPY || diff.changeType == ChangeType.RENAME){
-          <img src="@assets/common/images/diff_move.png"/> @diff.oldPath -> @diff.newPath
+          <i class="octicon octicon-diff-renamed"></i> @diff.oldPath -> @diff.newPath
         }
         @if(diff.changeType == ChangeType.ADD){
-          <img src="@assets/common/images/diff_add.png"/> @diff.newPath
+          <i class="octicon octicon-diff-added"></i> @diff.newPath
         }
         @if(diff.changeType == ChangeType.MODIFY){
-          <img src="@assets/common/images/diff_edit.png"/> @diff.newPath
+          <i class="octicon octicon-diff-modified"></i> @diff.newPath
         }
         @if(diff.changeType == ChangeType.DELETE){
-          <img src="@assets/common/images/diff_delete.png"/> @diff.oldPath
+          <i class="octicon octicon-diff-removed"></i> @diff.oldPath
         }
       </a>
     </li>
@@ -46,7 +46,7 @@
     <tr>
       <th style="font-weight: normal; line-height: 27px;" class="box-header">
         @if(diff.changeType == ChangeType.COPY || diff.changeType == ChangeType.RENAME){
-          <img src="@assets/common/images/diff_move.png"/> @diff.oldPath -> @diff.newPath
+          <i class="octicon octicon-diff-renamed"> @diff.oldPath -> @diff.newPath
           @if(newCommitId.isDefined){
             <div class="pull-right align-right">
               <label class="checkbox" style="display: inline-block;"><input type="checkbox" class="toggle-notes" checked><span>Show notes</span></label>
@@ -56,9 +56,9 @@
         }
         @if(diff.changeType == ChangeType.ADD || diff.changeType == ChangeType.MODIFY){
           @if(diff.changeType == ChangeType.ADD){
-            <img src="@assets/common/images/diff_add.png"/>
+            <i class="octicon octicon-diff-added">
           }else{
-            <img src="@assets/common/images/diff_edit.png"/>
+            <i class="octicon octicon-diff-modified">
           } @diff.newPath
           @if(newCommitId.isDefined){
             <div class="pull-right align-right">
@@ -68,7 +68,7 @@
           }
         }
         @if(diff.changeType == ChangeType.DELETE){
-          <img src="@assets/common/images/diff_delete.png"/> @diff.oldPath
+          <i class="octicon octicon-diff-removed"> @diff.oldPath
           @if(oldCommitId.isDefined){
             <div class="pull-right align-right">
               <label class="checkbox" style="display: inline-block;"><input type="checkbox" class="toggle-notes" checked><span>Show notes</span></label>
diff --git a/src/main/twirl/gitbucket/core/issues/labels/label.scala.html b/src/main/twirl/gitbucket/core/issues/labels/label.scala.html
index b7cee42..891f31a 100644
--- a/src/main/twirl/gitbucket/core/issues/labels/label.scala.html
+++ b/src/main/twirl/gitbucket/core/issues/labels/label.scala.html
@@ -11,7 +11,7 @@
         <div style="margin-top: 6px">
           <a href="@url(repository)/issues?labels=@urlEncode(label.labelName)" id="label-row-content-@label.labelId">
             <span style="background-color: #@label.color; color: #@label.fontColor; padding: 8px; font-size: 120%; border-radius: 4px;">
-              <img src="@assets/common/images/label_@(if(label.fontColor == "ffffff") "white" else "black").png" style="width: 12px;"/>
+              <i class="octicon octicon-tag" style="color: #@label.fontColor;"></i>
               @label.labelName
             </span>
           </a>
diff --git a/src/main/twirl/gitbucket/core/issues/milestones/list.scala.html b/src/main/twirl/gitbucket/core/issues/milestones/list.scala.html
index 0f35834..e1e8f7c 100644
--- a/src/main/twirl/gitbucket/core/issues/milestones/list.scala.html
+++ b/src/main/twirl/gitbucket/core/issues/milestones/list.scala.html
@@ -13,11 +13,11 @@
         <th style="background-color: #eee;">
           <span class="small">
             <a class="button-link@if(state == "open"){ selected}" href="?state=open">
-              <img src="@assets/common/images/milestone@(if(state == "open"){"-active"}).png"/>
+              <i class="octicon octicon-milestone @(if(state == "open"){"active"})"></i>
               @milestones.count(_._1.closedDate.isEmpty) Open
             </a>&nbsp;&nbsp;
             <a class="button-link@if(state == "closed"){ selected}" href="?state=closed">
-              <img src="@assets/common/images/milestone@(if(state == "closed"){"-active"}).png"/>
+              <i class="octicon octicon-milestone @(if(state == "closed"){"active"})"></i>
               @milestones.count(_._1.closedDate.isDefined) Closed
             </a>
           </span>
diff --git a/src/main/twirl/gitbucket/core/repo/files.scala.html b/src/main/twirl/gitbucket/core/repo/files.scala.html
index 11d5f70..0e68b19 100644
--- a/src/main/twirl/gitbucket/core/repo/files.scala.html
+++ b/src/main/twirl/gitbucket/core/repo/files.scala.html
@@ -76,12 +76,12 @@
         <td width="16">
         @if(file.isDirectory){
           @if(file.linkUrl.isDefined){
-            <img src="@assets/common/images/folder_link.png"/>
+            <i class="octicon octicon-file-symlink-directory"></i>
           } else {
-            <img src="@assets/common/images/folder.png"/>
+            <i class="octicon octicon-file-directory"></i>
           }
         } else {
-          <img src="@assets/common/images/file.png"/>
+          <i class="octicon octicon-file-text"></i>
         }
         </td>
         <td>
diff --git a/src/main/webapp/assets/common/css/gitbucket.css b/src/main/webapp/assets/common/css/gitbucket.css
index 75da72f..3af0520 100644
--- a/src/main/webapp/assets/common/css/gitbucket.css
+++ b/src/main/webapp/assets/common/css/gitbucket.css
@@ -257,6 +257,7 @@
   background: #f2f8fa;
 }
 
+
 div.box-content {
   background-color: white;
   border: 1px solid #d8d8d8;
@@ -277,6 +278,10 @@
   text-shadow: 0 1px 0 #fff
 }
 
+th.box-header .octicon {
+    display: inline;
+}
+
 th.metal {
   background-color: #e0e0e0;
   background-image: -moz-linear-gradient(#fafafa, #e8e8e8);