Use svg for paperclip icon

// FREEBIE

images/paperclip.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M15 36C8.92 36 4 31.07 4 25s4.92-11 11-11h21c4.42 0 8 3.58 8 8s-3.58 8-8 8H19c-2.76 0-5-2.24-5-5s2.24-5 5-5h15v3H19c-1.1 0-2 .89-2 2s.9 2 2 2h17c2.76 0 5-2.24 5-5s-2.24-5-5-5H15c-4.42 0-8 3.58-8 8s3.58 8 8 8h19v3H15z"/></svg>

stylesheets/_global.scss

@@ -143,12 +143,19 @@ button.back {
   position: relative;
   .choose-file {
     cursor: pointer;
+    padding-left: 10px;
   }
 
   .paperclip {
-    width: 36px;
+    width: $button-height;
     height: 100%;
-    background: url('/images/paperclip.png') no-repeat center center;
+    @include color-svg('/images/paperclip.svg', $grey);
+    opacity: 0.5;
+    transform: rotateZ(-45deg);
+
+    &:hover {
+      opacity: 1.0;
+    }
   }
 
   input[type=file] {

stylesheets/manifest.css

@@ -150,11 +150,18 @@ button.back {
 .file-input {
   position: relative; }
   .file-input .choose-file {
-    cursor: pointer; }
+    cursor: pointer;
+    padding-left: 10px; }
   .file-input .paperclip {
-    width: 36px;
+    width: 24px;
     height: 100%;
-    background: url("/images/paperclip.png") no-repeat center center; }
+    -webkit-mask: url("/images/paperclip.svg") no-repeat center;
+    -webkit-mask-size: 100%;
+    background-color: #616161;
+    opacity: 0.5;
+    transform: rotateZ(-45deg); }
+    .file-input .paperclip:hover {
+      opacity: 1.0; }
   .file-input input[type=file] {
     display: none;
     position: absolute;