Merge pull request #855 from taigaio/icon-sprites

SVG sprite icon system and redesign

CHANGELOG.md

@@ -5,6 +5,7 @@
 
 ### Features
 - Ability to create url custom fields. (thanks to [@astagi](https://github.com/astagi)).
+- Moved from iconfont to SVG sprite icon system and redesign.
 
 ### Misc
 - Lots of small and not so small bugfixes.

app/coffee/modules/admin/lightboxes.coffee

@@ -53,12 +53,21 @@ CreateMembersDirective = ($rs, $rootScope, $confirm, $loading, lightboxService,
                 <option value="<%- role.id %>"><%- role.name %></option>
                 <% }); %>
             </select>
-            <a class="icon icon-plus add-fieldset" href=""></a>
+            <a class="add-fieldset" href="">
+                <svg class="icon icon-add">
+                    <use xlink:href="#icon-add">
+                </svg>
+            </a>
         </fieldset>
     </div>
     """)
 
     link = ($scope, $el, $attrs) ->
+        createButton = (type) ->
+            html = "<svg class='icon " + type + "'><use xlink:href='#" + type + "'></svg>";
+            console.log html
+            return html
+
         createFieldSet = (required = true)->
             ctx = {roleList: $scope.project.roles, required: required}
             return $compile(template(ctx))($scope)
@@ -88,17 +97,19 @@ CreateMembersDirective = ($rs, $rootScope, $confirm, $loading, lightboxService,
             fieldSet.remove()
 
             lastActionButton = $el.find(".add-member-wrapper fieldset:last > a")
-            if lastActionButton.hasClass("icon-delete delete-fieldset")
+            if lastActionButton.hasClass("delete-fieldset")
-                lastActionButton.removeClass("icon-delete delete-fieldset")
+                lastActionButton.removeClass("delete-fieldset").addClass("add-fieldset")
-                                .addClass("icon-plus add-fieldset")
+                svg = createButton('icon-add')
+                lastActionButton.html(svg)
 
         $el.on "click", ".add-fieldset", (event) ->
             event.preventDefault()
             target = angular.element(event.currentTarget)
             fieldSet = target.closest('.add-member-wrapper')
 
-            target.removeClass("icon-plus add-fieldset")
+            target.removeClass("add-fieldset").addClass("delete-fieldset")
-                  .addClass("icon-delete delete-fieldset")
+            svg = createButton('icon-trash')
+            target.html(svg)
 
             newFieldSet = createFieldSet(false)
             fieldSet.after(newFieldSet)
@@ -106,8 +117,10 @@ CreateMembersDirective = ($rs, $rootScope, $confirm, $loading, lightboxService,
             $scope.$digest() # To compile newFieldSet and translate text
 
             if $el.find(".add-member-wrapper").length == MAX_MEMBERSHIP_FIELDSETS
-                $el.find(".add-member-wrapper fieldset:last > a").removeClass("icon-plus add-fieldset")
+                $el.find(".add-member-wrapper fieldset:last > a")
-                                             .addClass("icon-delete delete-fieldset")
+                    .removeClass("add-fieldset").addClass("delete-fieldset")
+                svg = createButton('icon-trash')
+                $el.find(".add-member-wrapper fieldset:last > a").html(svg)
 
         submit = debounce 2000, (event) =>
             event.preventDefault()

app/coffee/modules/admin/memberships.coffee

@@ -359,7 +359,9 @@ MembershipsRowActionsDirective = ($log, $repo, $rs, $confirm, $compile, $transla
     </div>
     <a class="delete" href=""
        title="{{ 'ADMIN.MEMBERSHIP.DELETE_MEMBER' | translate }}">
-        <span class="icon icon-delete"></span>
+        <svg class="icon icon-trash">
+            <use xlink:href="#icon-trash">
+        </svg>
     </a>
     """
 
@@ -370,7 +372,9 @@ MembershipsRowActionsDirective = ($log, $repo, $rs, $confirm, $compile, $transla
     </a>
     <a class="delete" href=""
        title="{{ 'ADMIN.MEMBERSHIP.DELETE_MEMBER' | translate }}">
-        <span class="icon icon-delete"></span>
+        <svg class="icon icon-trash">
+            <use xlink:href="#icon-trash">
+        </svg>
     </a>
     """
 

app/coffee/modules/admin/roles.coffee

@@ -193,7 +193,7 @@ EditRoleDirective = ($repo, $confirm) ->
 
             toggleView()
 
-        $el.on "click", "a.icon-edit", ->
+        $el.on "click", ".edit-value", ->
             toggleView()
             $el.find("input").focus()
             $el.find("input").val($scope.role.name)
@@ -292,7 +292,9 @@ RolePermissionsDirective = ($rootscope, $repo, $confirm, $compile) ->
                  title="{{ '<%- permission.name %>' | translate }}"></div>
         <% }) %>
     </div>
-    <div class="icon icon-arrow-bottom"></div>
+    <svg class="icon icon-arrow-right">
+        <use xlink:href="#icon-arrow-right">
+    </svg>
     """)
 
     categoryTemplate = _.template("""
@@ -431,6 +433,7 @@ RolePermissionsDirective = ($rootscope, $repo, $confirm, $compile) ->
             $el.on "click", ".resume", (event) ->
                 event.preventDefault()
                 target = angular.element(event.currentTarget)
+                target.toggleClass("open-drawer")
                 target.next().toggleClass("open")
 
             $el.on "change", ".category-item input", (event) ->

app/coffee/modules/backlog/lightboxes.coffee

@@ -204,7 +204,7 @@ CreateEditSprint = ($repo, $confirm, $rs, $rootscope, lightboxService, $loading,
 
         $el.on "submit", "form", submit
 
-        $el.on "click", ".delete-sprint .icon-delete", (event) ->
+        $el.on "click", ".delete-sprint", (event) ->
             event.preventDefault()
             remove()
 

app/coffee/modules/backlog/main.coffee

@@ -563,7 +563,7 @@ class BacklogController extends mixOf(taiga.Controller, taiga.PageMixin, taiga.F
 
         currentLoading = @loading()
             .target(target)
-            .removeClasses("icon-edit")
+            .removeClasses("edit-story")
             .timeout(200)
             .start()
 

app/coffee/modules/backlog/sprints.coffee

@@ -40,7 +40,7 @@ BacklogSprintDirective = ($repo, $rootscope) ->
 
     toggleSprint = ($el) =>
         sprintTable = $el.find(".sprint-table")
-        sprintArrow = $el.find(".icon-arrow-up")
+        sprintArrow = $el.find(".compact-sprint")
 
         sprintArrow.toggleClass('active')
         sprintTable.toggleClass('open')
@@ -55,7 +55,7 @@ BacklogSprintDirective = ($repo, $rootscope) ->
                 toggleSprint($el)
 
         # Event Handlers
-        $el.on "click", ".sprint-name > .icon-arrow-up", (event) ->
+        $el.on "click", ".sprint-name > .compact-sprint", (event) ->
             event.preventDefault()
 
             toggleSprint($el)

app/coffee/modules/common.coffee

@@ -288,13 +288,11 @@ Capslock = ($translate) ->
     link = ($scope, $el, $attrs) ->
         open = false
 
-        warningIcon = $('<div>')
+
-            .addClass('icon')
+        warningIcon = "<svg class='icon icon-capslock' title='" + $translate.instant('COMMON.CAPSLOCK_WARNING') + "'><use xlink:href='#icon-capslock'></svg>";
-            .addClass('icon-capslock')
-            .attr('title', $translate.instant('COMMON.CAPSLOCK_WARNING'))
 
         hideIcon = () ->
-            warningIcon.fadeOut () ->
+            $('.icon-capslock').fadeOut () ->
                 open = false
 
                 $(this).remove()

app/coffee/modules/common/components.coffee

@@ -321,7 +321,7 @@ AssignedToDirective = ($rootscope, $confirm, $repo, $loading, $qqueue, $template
             $model.$modelValue.assigned_to = $currentUserService.getUser().get('id')
             save($currentUserService.getUser().get('id'))
 
-        $el.on "click", ".icon-delete", (event) ->
+        $el.on "click", ".remove-user", (event) ->
             event.preventDefault()
             return if not isEditable()
             title = $translate.instant("COMMON.ASSIGNED_TO.CONFIRM_UNASSIGNED")
@@ -498,11 +498,10 @@ EditableSubjectDirective = ($rootscope, $repo, $confirm, $loading, $qqueue, $tem
             else if event.keyCode == 27
                 $scope.$apply () => $model.$modelValue.revert()
 
-                $el.find('div.edit-subject').hide()
+                $el.find('.edit-subject').hide()
-                $el.find('div.view-subject').show()
+                $el.find('.view-subject').show()
 
-        $el.find('div.edit-subject').hide()
+        $el.find('.edit-subject').hide()
-        $el.find('div.view-subject span.edit').hide()
 
         $scope.$watch $attrs.ngModel, (value) ->
             return if not value

app/coffee/modules/common/confirm.coffee

@@ -59,12 +59,12 @@ class ConfirmService extends taiga.Service
         el = angular.element(lightboxSelector)
 
         # Render content
-        el.find("h2.title").text(title)
+        el.find(".title").text(title)
-        el.find("span.subtitle").text(subtitle)
+        el.find(".subtitle").text(subtitle)
-        el.find("span.message").text(message)
+        el.find(".message").text(message)
 
         # Assign event handlers
-        el.on "click.confirm-dialog", "a.button-green", debounce 2000, (event) =>
+        el.on "click.confirm-dialog", ".button-green", debounce 2000, (event) =>
             event.preventDefault()
             target = angular.element(event.currentTarget)
             currentLoading = @loading()
@@ -77,7 +77,7 @@ class ConfirmService extends taiga.Service
                         @.hide(el)
             }
 
-        el.on "click.confirm-dialog", "a.button-red", (event) =>
+        el.on "click.confirm-dialog", ".button-red", (event) =>
             event.preventDefault()
             defered.reject()
             @.hide(el)
@@ -129,7 +129,7 @@ class ConfirmService extends taiga.Service
                         @.hide(el)
             }
 
-        el.on "click.confirm-dialog", "a.button-red", (event) =>
+        el.on "click.confirm-dialog", ".button-red", (event) =>
             event.preventDefault()
             defered.reject()
             @.hide(el)
@@ -144,15 +144,15 @@ class ConfirmService extends taiga.Service
         el = angular.element(".lightbox-generic-error")
 
         # Render content
-        el.find("h2.title").html(message)
+        el.find(".title").html(message)
 
         # Assign event handlers
-        el.on "click.confirm-dialog", "a.button-green", (event) =>
+        el.on "click.confirm-dialog", ".button-green", (event) =>
             event.preventDefault()
             defered.resolve()
             @.hide(el)
 
-        el.on "click.confirm-dialog", "a.close", (event) =>
+        el.on "click.confirm-dialog", ".close", (event) =>
             event.preventDefault()
             defered.resolve()
             @.hide(el)
@@ -167,16 +167,16 @@ class ConfirmService extends taiga.Service
         el = angular.element(".lightbox-generic-success")
 
         # Render content
-        el.find("h2.title").html(title) if title
+        el.find(".title").html(title) if title
-        el.find("p.message").html(message) if message
+        el.find(".message").html(message) if message
 
         # Assign event handlers
-        el.on "click.confirm-dialog", "a.button-green", (event) =>
+        el.on "click.confirm-dialog", ".button-green", (event) =>
             event.preventDefault()
             defered.resolve()
             @.hide(el)
 
-        el.on "click.confirm-dialog", "a.close", (event) =>
+        el.on "click.confirm-dialog", ".close", (event) =>
             event.preventDefault()
             defered.resolve()
             @.hide(el)
@@ -189,15 +189,15 @@ class ConfirmService extends taiga.Service
         el = angular.element(".lightbox-generic-loading")
 
         # Render content
-        el.find("h2.title").html(title) if title
+        el.find(".title").html(title) if title
-        el.find("p.message").html(message) if message
+        el.find(".message").html(message) if message
 
         return {
             start: => @lightboxService.open(el)
             stop: => @lightboxService.close(el)
             update: (status, title, message, percent) =>
-                el.find("h2.title").html(title) if title
+                el.find(".title").html(title) if title
-                el.find("p.message").html(message) if message
+                el.find(".message").html(message) if message
 
                 if percent
                     el.find(".spin").addClass("hidden")
@@ -251,7 +251,7 @@ class ConfirmService extends taiga.Service
 
             delete @.tsem
 
-        el.on "click", ".icon-delete, .close", (event) =>
+        el.on "click", ".icon-close, .close", (event) =>
             body.find(selector)
                 .removeClass('active')
                 .addClass('inactive')

app/coffee/modules/common/custom-field-values.coffee

@@ -117,15 +117,15 @@ CustomAttributesValuesDirective = ($templates, $storage) ->
             $ctrl.initialize($attrs.type, value.id)
             $ctrl.loadCustomAttributesValues()
 
-        $el.on "click", ".custom-fields-header a", ->
+        $el.on "click", ".custom-fields-header .icon", ->
             hash = collapsedHash($attrs.type)
             collapsed = not($storage.get(hash) or false)
             $storage.set(hash, collapsed)
             if collapsed
-                $el.find(".custom-fields-header a").removeClass("open")
+                $el.find(".custom-fields-header .icon").removeClass("open")
                 $el.find(".custom-fields-body").removeClass("open")
             else
-                $el.find(".custom-fields-header a").addClass("open")
+                $el.find(".custom-fields-header .icon").addClass("open")
                 $el.find(".custom-fields-body").addClass("open")
 
         $scope.$on "$destroy", ->
@@ -235,7 +235,7 @@ CustomAttributeValueDirective = ($template, $selectedText, $compile, $translate,
             render(attributeValue, true)
             setFocusAndSelectOnInputField()
 
-        $el.on "click", "a.icon-edit", (event) ->
+        $el.on "click", ".js-edit-description", (event) ->
             event.preventDefault()
             render(attributeValue, true)
             setFocusAndSelectOnInputField()
@@ -249,7 +249,7 @@ CustomAttributeValueDirective = ($template, $selectedText, $compile, $translate,
 
         $el.on "submit", "form", submit
 
-        $el.on "click", "a.icon-floppy", submit
+        $el.on "click", ".js-save-description", submit
 
         $scope.$on "$destroy", ->
             $el.off()

app/coffee/modules/common/tags.coffee

@@ -120,10 +120,13 @@ LbTagLineDirective = ($rs, $template, $compile) ->
                     tag.style = "border-left: 5px solid #{tag.color}"
 
             html = $compile(templateTags(ctx))($scope)
-            $el.find("div.tags-container").html(html)
+            $el.find(".tags-container").html(html)
 
-        showSaveButton = -> $el.find(".save").removeClass("hidden")
+        showSaveButton = ->
-        hideSaveButton = -> $el.find(".save").addClass("hidden")
+            $el.find(".save").removeClass("hidden")
+
+        hideSaveButton = ->
+            $el.find(".save").addClass("hidden")
 
         resetInput = ->
             $el.find("input").val("")
@@ -179,7 +182,7 @@ LbTagLineDirective = ($rs, $template, $compile) ->
             event.preventDefault()
             saveInputTag()
 
-        $el.on "click", ".icon-delete", (event) ->
+        $el.on "click", ".remove-tag", (event) ->
             event.preventDefault()
             target = angular.element(event.currentTarget)
 
@@ -348,7 +351,7 @@ TagLineDirective = ($rootScope, $repo, $rs, $confirm, $qqueue, $template, $compi
             hideAddTagButton()
             showInput()
 
-        $el.on "click", ".icon-delete", (event) ->
+        $el.on "click", ".remove-tag", (event) ->
             event.preventDefault()
             target = angular.element(event.currentTarget)
 

app/coffee/modules/issues/list.coffee

@@ -461,14 +461,14 @@ IssuesFiltersDirective = ($q, $log, $location, $rs, $confirm, $loading, $templat
         showFilters = (title, type) ->
             $el.find(".filters-cats").hide()
             $el.find(".filter-list").removeClass("hidden")
-            $el.find("h2.breadcrumb").removeClass("hidden")
+            $el.find(".breadcrumb").removeClass("hidden")
-            $el.find("h2 a.subfilter span.title").html(title)
+            $el.find("h2 .subfilter .title").html(title)
-            $el.find("h2 a.subfilter span.title").prop("data-type", type)
+            $el.find("h2 .subfilter .title").prop("data-type", type)
 
         showCategories = ->
             $el.find(".filters-cats").show()
             $el.find(".filter-list").addClass("hidden")
-            $el.find("h2.breadcrumb").addClass("hidden")
+            $el.find(".breadcrumb").addClass("hidden")
 
         initializeSelectedFilters = (filters) ->
             selectedFilters = []
@@ -502,7 +502,7 @@ IssuesFiltersDirective = ($q, $log, $location, $rs, $confirm, $loading, $templat
             $el.find(".filter-list").html(html)
 
         getFiltersType = () ->
-            return $el.find("h2 a.subfilter span.title").prop('data-type')
+            return $el.find(".subfilter .title").prop('data-type')
 
         reloadIssues = () ->
             currentFiltersType = getFiltersType()
@@ -617,7 +617,7 @@ IssuesFiltersDirective = ($q, $log, $location, $rs, $confirm, $loading, $templat
 
             toggleFilterSelection(type, id)
 
-        $el.on "click", ".filter-list .single-filter .icon-delete", (event) ->
+        $el.on "click", ".filter-list .single-filter .remove-filter", (event) ->
             event.preventDefault()
             event.stopPropagation()
 
@@ -665,7 +665,7 @@ IssuesFiltersDirective = ($q, $log, $location, $rs, $confirm, $loading, $templat
                         currentLoading.finish()
                         $scope.filters.myFilters = filters
 
-                        currentfilterstype = $el.find("h2 a.subfilter span.title").prop('data-type')
+                        currentfilterstype = $el.find("h2 .subfilter .title").prop('data-type')
                         if currentfilterstype == "myFilters"
                             renderFilters($scope.filters.myFilters)
 

app/coffee/modules/related-tasks.coffee

@@ -62,7 +62,7 @@ RelatedTaskRowDirective = ($repo, $compile, $confirm, $rootscope, $loading, $tem
                 else if event.keyCode == 27
                     renderView($model.$modelValue)
 
-            $el.on "click", ".icon-floppy", (event) ->
+            $el.on "click", ".save-task", (event) ->
                 saveTask($model.$modelValue).then ->
                     renderView($model.$modelValue)
 
@@ -79,7 +79,7 @@ RelatedTaskRowDirective = ($repo, $compile, $confirm, $rootscope, $loading, $tem
 
             $el.html($compile(templateView({task: task, perms: perms}))($scope))
 
-            $el.on "click", ".icon-edit", ->
+            $el.on "click", ".edit-task", ->
                 renderEdit($model.$modelValue)
                 $el.find('input').focus().select()
 

app/index.jade

@@ -45,3 +45,4 @@ html(lang="en")
         script(src="/#{v}/js/libs.js")
         script(src="/#{v}/js/templates.js")
         script(src="/#{v}/js/app-loader.js")
+        include svg/sprite.svg

app/locales/taiga/locale-en.json

@@ -41,7 +41,7 @@
         "IOCAINE_TEXT": "Feeling a bit overwhelmed by a task? Make sure others know about it by clicking on Iocaine when editing a task. It's possible to become immune to this (fictional) deadly poison by consuming small amounts over time just as it's possible to get better at what you do by occasionally taking on extra challenges!",
         "CLIENT_REQUIREMENT": "Client requirement is new requirement that was not previously expected and it is required to be part of the project",
         "TEAM_REQUIREMENT": "Team requirement is a requirement that must exist in the project but should have no cost for the client",
-        "CAPSLOCK_WARNING": "Be careful! You're writing with capital letters and this input is case sensitive.",
+        "CAPSLOCK_WARNING": "Be careful! You are writing with capital letters and this input is case sensitive.",
         "FORM_ERRORS": {
             "DEFAULT_MESSAGE": "This value seems to be invalid.",
             "TYPE_EMAIL": "This value should be a valid email.",
@@ -458,9 +458,7 @@
             "RECRUITING_MESSAGE": "Who are you looking for?",
             "RECRUITING_PLACEHOLDER": "Define the profiles you are looking for",
             "PUBLIC_PROJECT": "Public project",
-            "PUBLIC_PROJECT_DESC": "Users will be able to find and view your project",
             "PRIVATE_PROJECT": "Private project",
-            "PRIVATE_PROJECT_DESC": "By default, this project will be hidden to the public",
             "PRIVATE_OR_PUBLIC": "What's the difference between public and private projects?",
             "DELETE": "Delete this project",
             "LOGO_HELP": "The image will be scaled to 80x80px.",

app/modules/attachments/attachment-gallery.scss

@@ -13,58 +13,63 @@
                 opacity: 1;
             }
         }
-        .attachment-image {
-            display: inline-block;
-        }
-        img {
-            height: 150px;
-            margin-bottom: .2rem;
-            width: 200px;
-            &:hover {
-                filter: saturate(150%) hue-rotate(60deg);
-                transition: all .3s cubic-bezier(.01, .7, 1, 1);
-            }
-        }
-        &.deprecated {
-            img {
-                opacity: .5;
-            }
-            .attachment-name {
-                color: $gray-light;
-            }
-        }
-        .attachment-data {
-            align-content: center;
-            display: flex;
-            justify-content: space-between;
-        }
         .attachment-name {
             @extend %light;
             @include ellipsis(175px);
             display: inline-block;
         }
-        .icon-delete {
+    }
-            color: $red-light;
+    .attachment-image {
-            margin-left: auto;
+        display: inline-block;
-            opacity: 0;
+    }
-            transition: opacity .3s ease-in;
+    img {
-            transition-delay: .2s;
+        height: 150px;
-            &:hover {
+        margin-bottom: .2rem;
-                color: $red;
+        width: 200px;
-            }
+        &:hover {
-        }
+            filter: saturate(150%) hue-rotate(60deg);
-        .loading-container {
+            transition: all .3s cubic-bezier(.01, .7, 1, 1);
-            align-items: center;
-            display: flex;
-            height: 150px;
-            justify-content: center;
-            margin: 0 .5rem .5rem 0;
-            width: 200px;
-        }
-        .loading-spinner {
-            margin: 0 auto;
-            max-height: 3rem;
-            max-width: 3rem;
         }
     }
+    &.deprecated {
+        img {
+            opacity: .5;
+        }
+        .attachment-name {
+            color: $gray-light;
+        }
+    }
+    .attachment-data {
+        align-content: center;
+        display: flex;
+        justify-content: space-between;
+    }
+    .icon-delete {
+        margin-left: auto;
+        opacity: 0;
+        transition: opacity .2s ease-in;
+        transition-delay: .1s;
+        svg {
+            fill: $red-light;
+        }
+        &:hover {
+            svg {
+                color: $red;
+            }
+
+        }
+    }
+    .loading-container {
+        align-items: center;
+        display: flex;
+        height: 150px;
+        justify-content: center;
+        margin: 0 .5rem .5rem 0;
+        width: 200px;
+    }
+    .loading-spinner {
+        margin: 0 auto;
+        max-height: 3rem;
+        max-width: 3rem;
+    }
 }

app/modules/attachments/attachment-list.scss

@@ -47,34 +47,29 @@
         flex-shrink: 0;
         justify-content: space-around;
         margin-left: auto;
-        .settings,
-        .editable-settings {
-            @extend %large;
-            color: $gray-light;
-            &:hover {
-                color: $primary;
-            }
-        }
         .settings {
             opacity: 0;
         }
         .editable-settings {
             opacity: 1;
         }
-        .icon-delete {
+        svg {
+            fill: $gray-light;
+        }
+        .icon-edit,
+        .icon-save {
             &:hover {
-                color: $red;
+                fill: $primary;
             }
         }
-        .icon-drag-v {
+        .icon-trash,
-            cursor: move;
+        .icon-close {
+            &:hover {
+                fill: $red;
+            }
         }
-    }
+        .icon-drag {
-    .icon-delete {
+            cursor: move;
-        @extend %large;
-        color: $gray-light;
-        &:hover {
-            color: $red;
         }
     }
     .editable-attachment-deprecated {

app/modules/attachments/attachments.scss

@@ -4,6 +4,7 @@
 
 .attachments-header {
     align-content: center;
+    align-items: center;
     background: $whitish;
     display: flex;
     justify-content: space-between;
@@ -33,9 +34,9 @@
         }
         svg {
             fill: $white;
-            height: 1.25rem;
+            height: 1.2rem;
             margin-bottom: -.2rem;
-            width: 1.25rem;
+            width: 1.2rem;
         }
     }
     button {
@@ -50,7 +51,6 @@
         svg {
             fill: $gray-light;
             height: 1.6rem;
-            margin-bottom: -.2rem;
             width: 1.6rem;
         }
     }
@@ -77,6 +77,7 @@
 
 .single-attachment {
     @extend %small;
+    background: rgba($white, .9);
     &.ui-sortable-helper {
         background: lighten($primary, 60%);
         box-shadow: 1px 1px 10px rgba($black, .1);
@@ -89,12 +90,11 @@
     .attachment-name {
         @extend %bold;
         padding-right: 1rem;
-        .icon {
-            margin-right: .25rem;
-        }
         svg {
-            height: 1.2rem;
+            fill: $gray;
-            width: 1.2rem;
+            height: .9rem;
+            margin-right: .25rem;
+            width: .9rem;
         }
     }
     .attachment-size {

app/modules/components/attachment/attachment-gallery.jade

@@ -30,8 +30,9 @@
             span {{::vm.attachment.getIn(['file', 'name'])}}
 
         a.icon-delete(
-            ng-if="vm.attachment.get('editable')"
             href=""
             title="{{'COMMON.DELETE' | translate}}"
             ng-click="vm.delete()"
         )
+            svg.icon.icon-trash
+                use(xlink:href="#icon-trash")

app/modules/components/attachment/attachment.jade

@@ -12,8 +12,8 @@ form.single-attachment(
             target="_blank"
             download="{{::vm.attachment.getIn(['file', 'name'])}}"
         )
-            span.icon
+            svg.icon.icon-attachment
-                include ../../../svg/attachment.svg
+                use(xlink:href="#icon-attachment")
             span {{::vm.attachment.getIn(['file', 'name'])}}
 
     .attachment-comments(ng-if="!vm.attachment.get('editable') && vm.attachment.getIn(['file', 'description'])")
@@ -47,34 +47,44 @@ form.single-attachment(
 
     .attachment-settings(ng-if="vm.attachment.get('editable')")
         div(tg-loading="vm.attachment.get('loading')")
-            a.editable-settings.icon.icon-floppy(
+            a.editable-settings(
                 href=""
                 title="{{'COMMON.SAVE' | translate}}"
                 ng-click="vm.save()"
             )
+                svg.drag.icon.icon-save
+                    use(xlink:href="#icon-save")
 
         div
-            a.editable-settings.icon.icon-delete(
+            a.editable-settings(
                 href=""
                 title="{{'COMMON.CANCEL' | translate}}"
                 ng-click="vm.editMode(false)"
             )
+                svg.drag.icon.icon-close
+                    use(xlink:href="#icon-close")
 
     .attachment-settings(
         ng-if="!vm.attachment.get('editable')"
         tg-check-permission="modify_{{vm.type}}"
     )
-        a.settings.icon.icon-edit(
+        a.settings(
             href=""
             title="{{'COMMON.EDIT' | translate}}"
             ng-click="vm.editMode(true)"
         )
-        a.settings.icon.icon-delete(
+            svg.drag.icon.icon-edit
+                use(xlink:href="#icon-edit")
+        a.settings(
             href=""
             title="{{'COMMON.DELETE' | translate}}"
             ng-click="vm.delete()"
         )
-        a.settings.icon.icon-drag-v(
+            svg.drag.icon.icon-trash
+                use(xlink:href="#icon-trash")
+        a.settings(
             href=""
             title="{{'COMMON.DRAG' | translate}}"
         )
+            svg.drag.icon.icon-drag
+                use(xlink:href="#icon-drag")

app/modules/components/attachments-full/attachments-full.jade

@@ -8,21 +8,24 @@ section.attachments(tg-attachments-drop="vm.addAttachments(files, false)")
                 ng-click="vm.setMode('gallery')"
                 title="{{ 'ATTACHMENT.GALLERY_VIEW_MODE' | translate }}"
             )
-                include ../../../svg/gallery.svg
+                svg.icon.icon-gallery
+                    use(xlink:href="#icon-gallery")
             button.view-list(
                 ng-class="{'is-active': vm.mode == 'list'}"
                 ng-if="vm.attachments.size"
                 ng-click="vm.setMode('list')"
                 title="{{ 'ATTACHMENT.LIST_VIEW_MODE' | translate }}"
             )
-                include ../../../svg/list.svg
+                svg.icon.icon-list
+                    use(xlink:href="#icon-list")
             .add-attach(
                 tg-check-permission="modify_{{vm.type}}"
                 title!="{{'ATTACHMENT.ADD' | translate}}"
             )
 
                 label.add-attachment-button(for="add-attach")
-                    include ../../../svg/add.svg
+                    svg.icon.icon-add
+                        use(xlink:href="#icon-add")
 
                 input(
                     id="add-attach",
@@ -49,12 +52,11 @@ section.attachments(tg-attachments-drop="vm.addAttachments(files, false)")
 
           .single-attachment(ng-repeat="file in vm.uploadingAttachments()")
               .attachment-name
-                  span.icon
+                  svg.icon.icon-attachment
-                      include ../../../svg/attachment.svg
+                      use(xlink:href="#icon-attachment")
                   span {{file.name}}
               .attachment-size
                   span {{file.size | sizeFormat}}
-
               .attachment-comments
                   span {{file.progressMessage}}
                   .percentage(ng-style="{'width': file.progressPercent}")

app/modules/components/attachments-simple/attachments-simple.jade

@@ -5,7 +5,8 @@ section.attachments(tg-attachments-drop="vm.addAttachments(files)")
         h3.attachments-title #[span.attachments-num {{vm.attachments.size}}] #[span.attachments-text(translate="ATTACHMENT.SECTION_NAME")]
         .add-attach(title!="{{'ATTACHMENT.ADD' | translate}}")
             label.add-attachment-button(for="add-attach")
-                include ../../../svg/add.svg
+                svg.icon.icon-add
+                    use(xlink:href="#icon-add")
             input(
                 id="add-attach"
                 type="file"
@@ -18,8 +19,8 @@ section.attachments(tg-attachments-drop="vm.addAttachments(files)")
     .attachment-body.attachment-list
         .single-attachment(tg-repeat="attachment in vm.attachments track by $index")
             .attachment-name
-                span.icon
+                svg.icon.icon-attachment
-                    include ../../../svg/attachment.svg
+                    use(xlink:href="#icon-attachment")
                 span {{attachment.get('name')}}
             .attachment-size
                 span {{attachment.get('size') | sizeFormat}}
@@ -30,4 +31,5 @@ section.attachments(tg-attachments-drop="vm.addAttachments(files)")
                     title="{{'COMMON.DELETE' | translate}}"
                     ng-click="vm.deleteAttachment(attachment)"
                 )
-                    include ../../../svg/remove.svg
+                    svg.icon.icon-trash
+                        use(xlink:href="#icon-trash")

app/modules/components/attachments-sortable/attachments-sortable.directive.coffee

@@ -23,7 +23,7 @@ AttachmentSortableDirective = ($parse) ->
 
         el.sortable({
             items: "div[tg-bind-scope]"
-            handle: "a.settings.icon.icon-drag-v"
+            handle: ".settings .icon"
             containment: ".attachments"
             dropOnEmpty: true
             helper: 'clone'

app/modules/components/live-announcement/live-announcement.jade

@@ -9,4 +9,5 @@
               href=""
               title="{{ COMMON.CLOSE | translate }}"
             )
-                include ../../../svg/remove.svg
+                svg.icon.icon-close
+                    use(xlink:href="#icon-close")

app/modules/components/project-menu/project-menu.jade

@@ -12,7 +12,8 @@ nav.menu(
                     aria-label="{{'PROJECT.SECTION.SEARCH' | translate}}"
                     tabindex="1"
                  )
-                    span.icon.icon-search
+                     svg.icon.icon-search
+                         use(xlink:href="#icon-search")
                     span.helper(translate="PROJECT.SECTION.SEARCH")
 
              li(id="nav-timeline")
@@ -22,7 +23,8 @@ nav.menu(
                     aria-label="{{'PROJECT.SECTION.TIMELINE' | translate}}"
                     tabindex="2"
                  )
-                    include ../../../svg/timeline.svg
+                    svg.icon.icon-timeline
+                        use(xlink:href="#icon-timeline")
                     span.helper(translate="PROJECT.SECTION.TIMELINE")
 
             li(id="nav-backlog", ng-if="vm.menu.get('backlog')")
@@ -32,7 +34,8 @@ nav.menu(
                     aria-label="{{'PROJECT.SECTION.BACKLOG' | translate}}"
                     tabindex="2"
                 )
-                    span.icon.icon-scrum
+                    svg.icon.icon-scrum
+                        use(xlink:href="#icon-scrum")
                     span.helper(translate="PROJECT.SECTION.BACKLOG")
 
             li(id="nav-kanban", ng-if="vm.menu.get('kanban')")
@@ -42,7 +45,8 @@ nav.menu(
                     aria-label="{{'PROJECT.SECTION.KANBAN' | translate}}"
                     tabindex="3"
                 )
-                    span.icon.icon-kanban
+                    svg.icon.icon-kanban
+                        use(xlink:href="#icon-kanban")
                     span.helper(translate="PROJECT.SECTION.KANBAN")
 
             li(id="nav-issues", ng-if="vm.menu.get('issues')")
@@ -52,7 +56,8 @@ nav.menu(
                     aria-label="{{'PROJECT.SECTION.ISSUES' | translate}}"
                     tabindex="4"
                 )
-                    span.icon.icon-issues
+                    svg.icon.icon-issues
+                        use(xlink:href="#icon-issues")
                     span.helper(translate="PROJECT.SECTION.ISSUES")
 
             li(id="nav-wiki", ng-if="vm.menu.get('wiki')")
@@ -62,7 +67,8 @@ nav.menu(
                     aria-label="{{'PROJECT.SECTION.WIKI' | translate}}"
                     tabindex="5"
                 )
-                    span.icon.icon-wiki
+                    svg.icon.icon-wiki
+                        use(xlink:href="#icon-wiki")
                     span.helper(translate="PROJECT.SECTION.WIKI")
 
             li(id="nav-team")
@@ -72,7 +78,8 @@ nav.menu(
                     aria-label="{{'PROJECT.SECTION.TEAM' | translate}}"
                     tabindex="6"
                 )
-                    span(class="icon icon-team")
+                    svg.icon.icon-team
+                        use(xlink:href="#icon-team")
                     span.helper(translate="PROJECT.SECTION.TEAM")
 
             li(id="nav-video", ng-if="vm.project.get('videoconferenceUrl')")
@@ -82,7 +89,8 @@ nav.menu(
                     aria-label="{{'PROJECT.SECTION.MEETUP' | translate}}"
                     tabindex="7"
                 )
-                    span.icon.icon-video
+                    svg.icon.icon-bubble
+                        use(xlink:href="#icon-bubble")
                     span.helper(translate="PROJECT.SECTION.MEETUP")
 
             li(id="nav-admin", ng-if="vm.project.get('i_am_owner')")
@@ -92,5 +100,6 @@ nav.menu(
                     aria-label="{{'PROJECT.SECTION.ADMIN' | translate}}"
                     tabindex="8"
                 )
-                    span.icon.icon-settings
+                    svg.icon.icon-settings
+                        use(xlink:href="#icon-settings")
                     span.helper(translate="PROJECT.SECTION.ADMIN")

app/modules/components/vote-button/vote-button.jade

@@ -9,7 +9,8 @@ a.vote-inner(
     ng-mouseleave="vm.showTextWhenMouseIsLeave()"
 )
     span.track-icon
-        include ../../../svg/upvote.svg
+        svg.icon.icon-upvote
+            use(xlink:href="#icon-upvote")
     span.track-button-counter(
         title="{{ 'COMMON.VOTE_BUTTON.COUNTER_TITLE'|translate:{total:vm.item.total_voters||0}:'messageformat' }}",
         tg-loading="vm.loading"
@@ -18,7 +19,8 @@ a.vote-inner(
 //- Anonymous user button
 span.vote-inner(ng-if="::!vm.user")
     span.track-icon
-        include ../../../svg/upvote.svg
+        svg.icon.icon-upvote
+            use(xlink:href="#icon-upvote")
     span.track-button-counter(
         title="{{ 'COMMON.VOTE_BUTTON.COUNTER_TITLE'|translate:{total:vm.item.total_voters||0}:'messageformat' }}"
     ) {{ ::vm.item.total_voters }}

app/modules/components/watch-button/watch-button-ticket.jade

@@ -13,20 +13,18 @@ div.ticket-watch-inner
         ng-mouseover="vm.showTextWhenMouseIsOver()"
         ng-mouseleave="vm.showTextWhenMouseIsLeave()"
     )
-        span.track-icon
+        span(ng-if="!vm.item.is_watcher")
-            include ../../../svg/watch.svg
+            svg.icon.icon-watch
-        span(
+                use(xlink:href="#icon-watch")
-            ng-if="!vm.item.is_watcher",
+            | {{'COMMON.WATCH_BUTTON.WATCH' | translate}}
-            translate="COMMON.WATCH_BUTTON.WATCH"
+        span(ng-if="vm.item.is_watcher && !vm.isMouseOver",)
-        )
+            svg.icon.icon-watch
-        span(
+                use(xlink:href="#icon-watch")
-            ng-if="vm.item.is_watcher && !vm.isMouseOver",
+            | {{'COMMON.WATCH_BUTTON.WATCHING' | translate}}
-            translate="COMMON.WATCH_BUTTON.WATCHING"
+        span(ng-if="vm.item.is_watcher && vm.isMouseOver")
-        )
+            svg.icon.icon-unwatch
-        span(
+                use(xlink:href="#icon-unwatch")
-            ng-if="vm.item.is_watcher && vm.isMouseOver",
+            | {{'COMMON.WATCH_BUTTON.UNWATCH' | translate}}
-            translate="COMMON.WATCH_BUTTON.UNWATCH"
-        )
 
     a.add-watcher(
         href=""

app/modules/components/watch-button/watch-button.jade

@@ -2,8 +2,7 @@ mixin counter
     span.track-button-counter(
         title="{{ 'COMMON.WATCH_BUTTON.COUNTER_TITLE'|translate:{total:vm.item.watchers.length||0}:'messageformat' }}",
         tg-loading="vm.loading"
-    )
+    ) {{ vm.item.watchers.length }}
-        | {{ vm.item.watchers.length }}
 
 
 //- Registered user button
@@ -17,8 +16,8 @@ a.track-button.watch-button.watch-container(
     ng-mouseleave="vm.showTextWhenMouseIsLeave()"
 )
     span.track-inner
-        span.track-icon
+        svg.icon.icon-watch
-            include ../../../svg/watch.svg
+            use(xlink:href="#icon-watch")
         span(
             ng-if="!vm.item.is_watcher",
             translate="COMMON.WATCH_BUTTON.WATCH"
@@ -39,6 +38,7 @@ span.track-button.watch-button.watch-container(
 )
     span.track-inner
         span.track-icon
-            include ../../../svg/watch.svg
+            svg.icon.icon-watch
+                use(xlink:href="#icon-watch")
         span(translate="COMMON.WATCH_BUTTON.WATCHERS")
     +counter

app/modules/discover/components/discover-home-order-by/discover-home-order-by.jade

@@ -3,7 +3,8 @@
         href="#"
         ng-click="vm.open()"
     ) {{vm.currentText()}}
-        span.icon-arrow-bottom
+        svg.icon.icon-arrow-down
+            use(xlink:href="#icon-arrow-down")
 
     ul.filter-list(ng-if="vm.is_open")
         li(ng-click="vm.orderBy('week')") {{ 'DISCOVER.FILTERS.WEEK' | translate }}

app/modules/discover/components/discover-search-bar/discover-search-bar.jade

@@ -18,12 +18,12 @@ div.discover-header
                     placeholder="{{ 'DISCOVER.SEARCH.INPUT_PLACEHOLDER' | translate }}"
                     ng-model="vm.q"
                 )
-                a.search-button(
+                svg.search-button.icon.icon-search(
                     ng-click="vm.submitFilter()"
                     href="#"
                     title="{{ 'DISCOVER.SEARCH.ACTION_TITLE' | translate }}"
                 )
-                    include ../../../../svg/search.svg
+                    use(xlink:href="#icon-search")
 
             fieldset.searchbox-filters(ng-if="vm.filter")
                 input(

app/modules/discover/components/discover-search-bar/discover-search-bar.scss

@@ -36,19 +36,15 @@
         }
     }
     .search-button {
+        @include svg-size(1.5rem);
+        fill: $gray-light;
         position: absolute;
         right: 1rem;
         top: 1rem;
+        transition: fill .2s;
         &:hover {
-            svg {
+            cursor: pointer;
-                fill: $primary;
+            fill: $primary;
-            }
         }
     }
-    svg {
-        fill: $gray-light;
-        height: 1.5rem;
-        transition: all .2;
-        width: 1.5rem;
-    }
 }

app/modules/discover/components/discover-search-list-header/discover-search-list-header.jade

@@ -1,7 +1,8 @@
 .discover-results-header
     .discover-results-header-inner
         .title
-            include ../../../../svg/search.svg
+            svg.icon.icon-search
+                use(xlink:href="#icon-search")
             h2 {{ 'DISCOVER.SEARCH.RESULTS' | translate }}
 
         .filter-discover-search(ng-mouseleave="vm.toggleClose()")
@@ -10,14 +11,16 @@
                 ng-click="vm.openLike()"
                 ng-class="{active: vm.like_is_open}"
             )
-                include ../../../../svg/like.svg
+                svg.icon.icon-like
+                    use(xlink:href="#icon-like")
                 span {{ 'DISCOVER.MOST_LIKED' | translate }}
             a.discover-search-filter(
                 href="#"
                 ng-click="vm.openActivity()"
                 ng-class="{active: vm.activity_is_open}"
             )
-                include ../../../../svg/activity.svg
+                svg.icon.icon-activity
+                    use(xlink:href="#icon-activity")
                 span {{ 'DISCOVER.MOST_ACTIVE' | translate }}
 
     .discover-search-subfilter.most-liked-subfilter(ng-if="vm.like_is_open")

app/modules/discover/components/discover-search-list-header/discover-search-list-header.scss

@@ -5,8 +5,9 @@
         justify-content: space-between;
     }
     svg {
-        @include svg-size(1.1rem);
+        @include svg-size(1.2rem);
         fill: $gray-light;
+        margin-right: .25rem;
     }
     .title {
         @extend %bold;
@@ -23,8 +24,14 @@
         margin-right: 1rem;
         &.active {
             color: $primary;
+            svg {
+                fill: $primary;
+            }
         }
     }
+    svg {
+        @include svg-size(.8rem);
+    }
 }
 
 .discover-search-subfilter {

app/modules/discover/components/featured-projects/featured-projects.jade

@@ -26,28 +26,31 @@
                             tg-nav="project:project=project.get('slug')"
                             title="{{::project.get('name')}}"
                         ) {{::project.get('name')}}
-                        span.look-for-people(
+                        svg.look-for-people.icon.icon-recruit(
                             ng-if="project.get('is_looking_for_people')"
-                            title="{{ ::project.get('looking_for_people_note') }}"
                         )
-                            include ../../../../svg/recruit.svg
+                            use(xlink:href="#icon-recruit")
+                                title="{{ ::project.get('looking_for_people_note') }}"
                 p.project-card-description {{ ::project.get('description') | limitTo:100 }}{{ ::project.get('description').length < 100 ? '' : '...'}}
                 .project-card-statistics
                     span.statistic(
                         ng-class="{'active': project.get('is_fan')}"
                         title="{{ 'PROJECT.FANS_COUNTER_TITLE'|translate:{total:project.get('total_fans')||0}:'messageformat' }}"
                     )
-                        include ../../../../svg/like.svg
+                        svg.icon.icon-like
+                            use(xlink:href="#icon-like")
                         span {{::project.get('total_fans')}}
                     span.statistic(
                         ng-class="{'active': project.get('is_watcher')}"
                         title="{{ 'PROJECT.WATCHERS_COUNTER_TITLE'|translate:{total:project.get('total_watchers')||0}:'messageformat' }}"
                     )
-                        include ../../../../svg/eye.svg
+                        svg.icon.icon-watch
+                            use(xlink:href="#icon-watch")
                         span {{::project.get('total_watchers')}}
                     span.statistic(
                         ng-class="{'active': project.get('i_am_member')}"
                         title="{{ 'PROJECT.MEMBERS_COUNTER_TITLE'|translate:{total:project.get('members').size||0}:'messageformat' }}"
                     )
-                        include ../../../../svg/team.svg
+                        svg.icon.icon-team
+                            use(xlink:href="#icon-team")
                         span.statistics-num {{ ::project.get('members').size }}

app/modules/discover/components/highlighted/highlighted.jade

@@ -24,29 +24,30 @@
                         tg-nav="project:project=project.get('slug')"
                         title="{{::project.get('name')}}"
                     ) {{::project.get('name')}}
-                    span.look-for-people(
+                    svg.look-for-people.icon.icon-recruit(ng-if="project.get('is_looking_for_people')")
-                        ng-if="project.get('is_looking_for_people')"
+                        use(xlink:href="#icon-recruit")
-                        title="{{ ::project.get('looking_for_people_note') }}"
+                            title="{{ ::project.get('looking_for_people_note') }}"
-                    )
-                        include ../../../../svg/recruit.svg
                 .project-statistics
                     span.statistic(
                         ng-class="{'active': project.get('is_fan')}"
                         title="{{ 'PROJECT.FANS_COUNTER_TITLE'|translate:{total:project.get('total_fans')||0}:'messageformat' }}"
                     )
-                        include ../../../../svg/like.svg
+                        svg.icon.icon-like
+                            use(xlink:href="#icon-like")
                         span {{::project.get('total_fans')}}
                     span.statistic(
                         ng-class="{'active': project.get('is_watcher')}"
                         title="{{ 'PROJECT.WATCHERS_COUNTER_TITLE'|translate:{total:project.get('total_watchers')||0}:'messageformat' }}"
                     )
-                        include ../../../../svg/eye.svg
+                        svg.icon.icon-watch
+                            use(xlink:href="#icon-watch")
                         span {{::project.get('total_watchers')}}
                     span.statistic(
                         ng-class="{'active': project.get('i_am_member')}"
                         title="{{ 'PROJECT.MEMBERS_COUNTER_TITLE'|translate:{total:project.get('members').size||0}:'messageformat' }}"
                     )
-                        include ../../../../svg/team.svg
+                        svg.icon.icon-team
+                            use(xlink:href="#icon-team")
                         span.statistics-num {{ ::project.get('members').size }}
             p.project-description {{ ::project.get('description') | limitTo:150 }}{{ ::project.get('description').length < 150 ? '' : '...'}}
 

app/modules/discover/components/highlighted/highlighted.scss

@@ -34,14 +34,19 @@
         justify-content: space-between;
         margin-bottom: 1rem;
         svg {
-            @include svg-size(1.5rem);
+            @include svg-size(.8rem);
             fill: $gray-light;
-            margin: .5rem;
+            margin-left: .5rem;
         }
     }
     .title-wrapper {
         align-items: center;
         display: flex;
+        svg {
+            @include svg-size(1.25rem);
+            fill: $gray-light;
+            margin-right: .5rem;
+        }
     }
     .title {
         @extend %bold;
@@ -97,6 +102,11 @@
             position: relative;
             top: .2rem;
         }
+        &:hover {
+            svg {
+                fill: currentColor;
+            }
+        }
     }
     .filter-list {
         background: $black;
@@ -163,11 +173,9 @@
         }
     }
     .look-for-people {
-        svg {
+        @include svg-size();
-            @include svg-size();
+        fill: $gray-light;
-            fill: $gray-light;
+        margin-left: .5rem;
-            margin-left: .5rem;
-        }
     }
     .project-description {
         @extend %small;
@@ -179,8 +187,9 @@
         flex-basis: 140px;
         justify-content: flex-end;
         svg {
-            @include svg-size(.8rem);
+            @include svg-size(.75rem);
             fill: $gray-light;
+            margin-right: .25rem;
         }
         .svg-eye-closed {
             display: none;

app/modules/discover/components/most-active/most-active.jade

@@ -1,7 +1,8 @@
 .most-active(ng-if="vm.highlighted.size")
     .header
         .title-wrapper
-            include ../../../../svg/activity.svg
+            svg.icon.icon-activity
+                use(xlink:href="#icon-activity")
             h1.title {{ 'DISCOVER.MOST_ACTIVE' | translate }}
         tg-discover-home-order-by(on-change="vm.orderBy(orderBy)", order-by="vm.currentOrderBy")
     
@@ -14,5 +15,6 @@
 .empty-highlighted-project(
     ng-if="!vm.highlighted.size"
 )
-    include ../../../../svg/activity.svg
+    svg.icon.icon-activity
+        use(xlink:href="#icon-activity")
     span {{ 'DISCOVER.MOST_ACTIVE_EMPTY' | translate }}

app/modules/discover/components/most-liked/most-liked.jade

@@ -1,7 +1,8 @@
 .most-liked(ng-if="vm.highlighted.size")
     .header
         .title-wrapper
-            include ../../../../svg/like.svg
+            svg.icon.icon-like
+                use(xlink:href="#icon-like")
             h1.title {{ 'DISCOVER.MOST_LIKED' | translate }}
         tg-discover-home-order-by(on-change="vm.orderBy(orderBy)", order-by="vm.currentOrderBy")
     tg-highlighted(
@@ -13,5 +14,6 @@
 .empty-highlighted-project(
     ng-if="!vm.highlighted.size"
 )
-    include ../../../../svg/like.svg
+    svg.icon.icon-like
+        use(xlink:href="#icon-like")
     span {{ 'DISCOVER.MOST_LIKED_EMPTY' | translate }}

app/modules/discover/discover-search/discover-search.jade

@@ -43,11 +43,9 @@ div(tg-discover-search)
                                     tg-nav="project:project=project.get('slug')"
                                     title="{{ ::project.get('name') }}"
                                 ) {{project.get('name')}}
-                                span.look-for-people(
+                                svg.look-for-people.icon.icon-recruit(ng-if="project.get('is_looking_for_people')")
-                                    ng-if="project.get('is_looking_for_people')"
+                                    use(xlink:href="#icon-recruit")
-                                    title="{{ ::project.get('looking_for_people_note') }}"
+                                        title="{{ ::project.get('looking_for_people_note') }}"
-                                )
-                                    include ../../../svg/recruit.svg
                             p {{ ::project.get('description') | limitTo:300 }}
                                 span(ng-if="::project.get('description').length > 300") ...
                     .list-itemtype-project-right.project-statistics
@@ -55,19 +53,22 @@ div(tg-discover-search)
                             ng-class="{'active': project.get('is_fan')}"
                             title="{{ 'PROJECT.FANS_COUNTER_TITLE'|translate:{total:project.get('total_fans')||0}:'messageformat' }}"
                         )
-                            include ../../../svg/like.svg
+                            svg.icon.icon-like
+                                use(xlink:href="#icon-like")
                             span {{::project.get('total_fans')}}
                         span.statistic(
                             ng-class="{'active': project.get('is_watcher')}"
                             title="{{ 'PROJECT.WATCHERS_COUNTER_TITLE'|translate:{total:project.get('total_watchers')||0}:'messageformat' }}"
                         )
-                            include ../../../svg/eye.svg
+                            svg.icon.icon-watch
+                                use(xlink:href="#icon-watch")
                             span {{::project.get('total_watchers')}}
                         span.statistic(
                             ng-class="{'active': project.get('i_am_member')}"
                             title="{{ 'PROJECT.MEMBERS_COUNTER_TITLE'|translate:{total:project.get('members').size||0}:'messageformat' }}"
                         )
-                            include ../../../svg/team.svg
+                            svg.icon.icon-team
+                                use(xlink:href="#icon-team")
                             span.statistics-num {{ ::project.get('members').size }}
 
             a.button-green.more-results(

app/modules/discover/discover-search/discover-search.scss

@@ -4,7 +4,6 @@
             margin: 0 8rem;
             position: relative;
         }
-
         .search-button {
             left: 1rem;
             right: auto;
@@ -73,19 +72,17 @@
         vertical-align: middle;
     }
     .look-for-people {
+        fill: $gray-light;
         margin-left: .5rem;
-        svg {
-            @include svg-size(1rem);
-            fill: $gray-light;
-        }
     }
     .project-statistics {
         display: flex;
         flex-basis: 300px;
         justify-content: flex-end;
         svg {
-            @include svg-size(.8rem);
+            @include svg-size(.7rem);
             fill: $gray-light;
+            margin-right: .2rem;
         }
         .svg-eye-closed {
             display: none;

app/modules/home/projects/home-project-list.jade

@@ -24,11 +24,9 @@ section.home-project-list(ng-if="vm.projects.size")
                         tg-nav="project:project=project.get('slug')"
                         title="{{::project.get('name')}}"
                     ) {{::project.get('name')}}
-                    span.look-for-people(
+                    svg.look-for-people.icon.icon-recruit(ng-if="project.get('is_looking_for_people')")
-                        ng-if="project.get('is_looking_for_people')"
+                        use(xlink:href="#icon-recruit")
-                        title="{{ ::project.get('looking_for_people_note') }}"
+                            title="{{ ::project.get('looking_for_people_note') }}"
-                    )
-                        include ../../../svg/recruit.svg
             p.project-card-description {{::project.get('description')| limitTo:100 }}
                  span(ng-if="::project.get('description').length > 100") ...
             .project-card-statistics
@@ -36,25 +34,29 @@ section.home-project-list(ng-if="vm.projects.size")
                     ng-class="{'active': project.get('is_fan')}"
                     title="{{ 'PROJECT.FANS_COUNTER_TITLE'|translate:{total:project.get('total_fans')||0}:'messageformat' }}"
                 )
-                    include ../../../svg/like.svg
+                    svg.icon.icon-like
+                        use(xlink:href="#icon-like")
                     span {{::project.get('total_fans')}}
                 span.statistic(
                     ng-class="{'active': project.get('is_watcher')}"
                     title="{{ 'PROJECT.WATCHERS_COUNTER_TITLE'|translate:{total:project.get('total_watchers')||0}:'messageformat' }}"
                 )
-                    include ../../../svg/eye.svg
+                    svg.icon.icon-watch
+                        use(xlink:href="#icon-watch")
                     span {{::project.get('total_watchers')}}
                 span.statistic(
                     ng-class="{'active': project.get('i_am_member')}"
                     title="{{ 'PROJECT.MEMBERS_COUNTER_TITLE'|translate:{total:project.get('members').size||0}:'messageformat' }}"
                 )
-                    include ../../../svg/team.svg
+                    svg.icon.icon-team
+                        use(xlink:href="#icon-team")
                     span.statistics-num {{ ::project.get('members').size }}
                 span.statistic(
                     ng-if="::project.get('is_private')"
                     title="{{ 'PROJECT.PRIVATE' | translate }}"
                 )
-                    include ../../../svg/lock.svg
+                    svg.icon.icon-lock
+                        use(xlink:href="#icon-lock")
 
     a.see-more-projects-btn.button-gray(
         href="#",
@@ -65,7 +67,8 @@ section.home-project-list(ng-if="vm.projects.size")
     )
 
 section.projects-empty(ng-if="vm.projects != undefined && vm.projects.size === 0")
-    include ../../../svg/empty-project.svg
+    svg.icon.icon-project
+        use(xlink:href="#icon-project")
     p(translate="HOME.EMPTY_PROJECT_LIST")
     a.create-project-button.button-green(href="#", ng-click="vm.newProject()",
                                       title="{{'PROJECT.NAVIGATION.TITLE_CREATE_PROJECT' | translate}}",

app/modules/home/projects/home-project-list.scss

@@ -14,13 +14,11 @@
 .projects-empty {
     text-align: center;
     svg {
+        fill: $whitish;
         height: 100px;
         margin: 1rem auto;
         text-align: center;
         width: 100%;
-        path {
-            fill: $whitish;
-        }
     }
     p {
         @extend %small;

app/modules/navigation-bar/dropdown-organization-list/dropdown-organization-list.jade

@@ -1,10 +0,0 @@
-#TODO: fill correctly when implemented
-a(href="#", title="Organizations")
-    include ../../../svg/organizations.svg
-
-div.navbar-dropdown.dropdown-organization-list
-    ul
-        - for (var x = 0; x < 4; x++)
-            li
-                a(href="#", title="{{ project.title }}") Organization 1
-    a.create-organization-btn.button-green(href="#", title="Create Organization") Create Organization

app/modules/navigation-bar/dropdown-project-list/dropdown-project-list.jade

@@ -1,5 +1,6 @@
 a(href="", title="Projects", tg-nav="projects")
-    include ../../../svg/projects.svg
+    svg.icon.icon-project
+        use(xlink:href="#icon-project")
 
 div.navbar-dropdown.dropdown-project-list
     ul
@@ -19,7 +20,11 @@ div.navbar-dropdown.dropdown-project-list
             title="{{'PROJECT.NAVIGATION.ACTION_CREATE_PROJECT' | translate}}",
             translate="PROJECT.NAVIGATION.ACTION_CREATE_PROJECT")
 
-        span(tg-import-project-button)
+        a.button-blackish.import-project-button(
-            a.button-blackish.import-project-button(href="", title="{{'PROJECT.NAVIGATION.TITLE_IMPORT_PROJECT' | translate}}")
+            href=""
-                span.icon.icon-upload
+            title="{{'PROJECT.NAVIGATION.TITLE_IMPORT_PROJECT' | translate}}"
+            tg-import-project-button
+        )
+            svg.icon.icon-upload
+                use(xlink:href="#icon-upload")
             input.import-file.hidden(type="file")

app/modules/navigation-bar/navigation-bar.jade

@@ -30,14 +30,16 @@ nav.navbar(ng-if="vm.isEnabledHeader")
           ng-class="{active: vm.active}",
           title="{{'PROJECT.NAVIGATION.DASHBOARD_TITLE' | translate}}")
 
-            include ../../svg/dashboard.svg
+            svg.icon.icon-dashboard
+                use(xlink:href="#icon-dashboard")
 
         a(
             href="#",
             tg-nav="discover",
             title="{{'PROJECT.NAVIGATION.DISCOVER_TITLE' | translate}}",
         )
-            include ../../svg/discover.svg
+            svg.icon.icon-discover
+                use(xlink:href="#icon-discover")
 
         div.topnav-dropdown-wrapper(ng-show="vm.projects.size", tg-dropdown-project-list)
         //- div.topnav-dropdown-wrapper(tg-dropdown-organization-list)

app/modules/navigation-bar/navigation-bar.scss

@@ -52,13 +52,14 @@ $dropdown-width: 350px;
         color: $white;
         display: inline-block;
         transition: all .2s linear;
-        svg path {
+        svg {
             fill: darken($primary-dark, 8%);
+            transition: all .2s linear;
         }
         &:hover {
             background: rgba($black, .2);
             color: $primary-light;
-            svg path {
+            svg {
                 fill: $white;
             }
 
@@ -152,14 +153,22 @@ $dropdown-width: 350px;
         &.see-more-projects-btn {
             margin-bottom: .3rem;
         }
+        &.import-project-button {
+            padding: .8rem 1rem;
+        }
         &.create-project-btn {
             flex: 1;
         }
-        &.import-project-button {
+    }
-            padding-left: .75rem;
+    .import-project-button {
-            padding-right: .75rem;
+        &:hover {
+            svg {
+                fill: $primary-light;
+            }
+        }
+        svg {
+            fill: $white;
         }
-
     }
     .create-options {
         display: flex;

app/modules/profile/profile-bar/profile-bar.jade

@@ -2,19 +2,10 @@ section.profile-bar
     div.profile-image-wrapper(ng-class="::{'is-current-user': vm.isCurrentUser}")
         img.profile-img(ng-src="{{::vm.user.get('big_photo')}}", alt="{{::vm.user.get('full_name')}}")
         a.profile-edition(title="{{ 'USER.PROFILE.EDIT' | translate }}", tg-nav="user-settings-user-profile", translate="USER.PROFILE.EDIT")
-    // a.button-green
-    //     span(translate="USER.PROFILE.FOLLOW")
     div.profile-data
         h1(ng-class="{'not-full-name': !vm.user.get('full_name')}") {{::vm.user.get("full_name_display")}}
         .username @{{::vm.user.get("username")}}
         h2 {{::vm.stats.get('roles').join(", ")}}
-        // div.location
-        //     include ../../../svg/location.svg
-        //     span Madrid
-        // Remove Abuse Flag when a user is seeing itself
-        // a.flag(href="", title="{{ 'USER.PROFILE.REPORT' | translate }}")
-        //     include ../../../svg/flag.svg
-    // These values in profile stats are not defined yet in UX. Please ask
     div.profile-stats
         div.stat
             span.stat-number {{::vm.stats.get('total_num_projects')}}
@@ -25,14 +16,6 @@ section.profile-bar
         div.stat
             span.stat-number {{::vm.stats.get('total_num_contacts')}}
             span.stat-name(translate="USER.PROFILE.CONTACTS")
-    // TODO Hide until organizations come
-        // div.profile-organizations
-        //     h3 Organizations
-        //     div.profile-organizations-wrapper
-        //         div.organization
-        //         div.organization
-        //         div.organization
-        //         div.organization
 
     div.profile-quote(ng-if="::vm.user.get('bio')")
         span {{::vm.user.get("bio") | limitTo:210 }}{{vm.user.get("bio").length < 210 ? '' : '...'}}

app/modules/profile/profile-contacts/profile-contacts.jade

@@ -4,7 +4,8 @@ section.profile-contacts
             img(src="/#{v}/svg/spinner-circle.svg", alt="Loading...")
 
     div.empty-tab(ng-if="vm.contacts && !vm.contacts.size")
-        include ../../../svg/hide.svg
+        svg.icon.icon-unwatch
+            use(xlink:href="#icon-unwatch")
 
         div(ng-if="!vm.isCurrentUser")
             p(translate="USER.PROFILE.CONTACTS_EMPTY", translate-values="{username: vm.user.get('full_name_display')}")

app/modules/profile/profile-favs/items/project.jade

@@ -34,14 +34,14 @@
             ng-class="{'active': vm.item.get('is_fan')}"
             title="{{ 'PROJECT.LIKE_BUTTON.COUNTER_TITLE'|translate:{total:vm.item.get(\"total_fans\")||0}:'messageformat' }}"
          )
-            span.icon
+            svg.icon.icon-like
-                include ../../../../svg/like.svg
+                use(xlink:href="#icon-like")
             span {{ ::vm.item.get('total_fans') }}
 
         span.list-itemtype-track-watchers(
             ng-class="{'active': vm.item.get('is_watcher')}"
             title="{{ 'PROJECT.WATCH_BUTTON.COUNTER_TITLE'|translate:{total:vm.item.get(\"total_watchers\")||0}:'messageformat' }}"
         )
-            span.icon
+            svg.icon.icon-watch
-                include ../../../../svg/watch.svg
+                use(xlink:href="#icon-watch")
             span {{ ::vm.item.get('total_watchers') }}

app/modules/profile/profile-favs/items/ticket.jade

@@ -67,14 +67,14 @@ div.list-itemtype-ticket
             ng-class="{'active': vm.item.get('is_voter')}",
             title="{{ 'COMMON.VOTE_BUTTON.COUNTER_TITLE'|translate:{total:vm.item.get(\"total_voters\")||0}:'messageformat' }}"
         )
-            span.icon
+            svg.icon.icon-upvote
-                include ../../../../svg/upvote.svg
+                use(xlink:href="#icon-upvote")
             span {{ ::vm.item.get('total_voters') }}
 
         span.list-itemtype-track-watchers(
             ng-class="{'active': vm.item.get('is_watcher')}"
             title="{{ 'COMMON.WATCH_BUTTON.COUNTER_TITLE'|translate:{total:vm.item.get(\"total_watchers\")||0}:'messageformat' }}"
         )
-            span.icon
+            svg.icon.icon-watch
-                include ../../../../svg/watch.svg
+                use(xlink:href="#icon-watch")
             span {{ ::vm.item.get('total_watchers') }}

app/modules/profile/profile-favs/profile-favs.jade

@@ -1,7 +1,8 @@
 section.profile-favs
     div.profile-filter
         div.searchbox(ng-if="::vm.enableFilterByTextQuery")
-            span.icon-search
+            svg.icon.icon-search
+                use(xlink:href="#icon-search")
             input(
                 type="text"
                 ng-model="vm.q"

app/modules/profile/profile-favs/profile-favs.scss

@@ -14,7 +14,7 @@
         display: flex;
         flex: 1;
         .icon-search {
-            color: grayer;
+            fill: $gray;
             margin-right: .5rem;
         }
         input {

app/modules/profile/profile-hints/profile-hints.jade

@@ -1,5 +1,6 @@
 h4
-    span.icon.icon-help
+    svg.icon.icon-question
+        use(xlink:href="#icon-question")
     span(translate="HINTS.SECTION_NAME")
 
 p {{::vm.hint.title}}

app/modules/profile/profile-projects/profile-projects.jade

@@ -4,7 +4,8 @@ section.profile-projects
             img(src="/#{v}/svg/spinner-circle.svg", alt="Loading...")
 
     .empty-tab(ng-if="vm.projects && !vm.projects.size")
-        include ../../../svg/hide.svg
+        svg.icon.icon-unwatch
+            use(xlink:href="#icon-unwatch")
 
         p(
             translate="USER.PROFILE.PROJECTS_EMPTY"
@@ -46,16 +47,16 @@ section.profile-projects
                     ng-class="{'active': project.get('is_fan')}"
                     title="{{ 'PROJECT.LIKE_BUTTON.COUNTER_TITLE'|translate:{total:project.get(\"total_fans\")||0}:'messageformat' }}"
                 )
-                    span.icon
+                    svg.icon.icon-like
-                        include ../../../svg/like.svg
+                        use(xlink:href="#icon-like")
                     span {{ ::project.get('total_fans') }}
 
                 span.list-itemtype-track-watchers(
                     ng-class="{'active': project.get('is_watcher')}"
                     title="{{ 'PROJECT.WATCH_BUTTON.COUNTER_TITLE'|translate:{total:project.get(\"total_watchers\")||0}:'messageformat' }}"
                 )
-                    span.icon
+                    svg.icon.icon-watch
-                        include ../../../svg/watch.svg
+                        use(xlink:href="#icon-watch")
                     span {{ ::project.get('total_watchers') }}
 
             .list-itemtype-project-members

app/modules/profile/profile-tab/profile-tab.directive.coffee

@@ -28,6 +28,7 @@ ProfileTabDirective = () ->
             scope.tab.title = title
 
         scope.tab.icon = attrs.tabIcon
+        scope.tab.iconName = '#' + attrs.tabIcon
         scope.tab.active = !!attrs.tabActive
 
         if scope.$eval(attrs.tabDisabled) != true

app/modules/profile/profile-tabs/profile-tabs.jade

@@ -7,7 +7,8 @@ div
             ng-click="vm.toggleTab(tab)"
             ng-class="{active: tab.active}"
         )
-            span.icon(ng-class="::tab.icon")
+            svg.icon(ng-class="::tab.icon")
+                use(xlink:href="{{::tab.iconName}}")
             span {{::tab.name}}
 
     ng-transclude

app/modules/profile/profile.jade

@@ -21,21 +21,21 @@ div.profile.centered(ng-if="vm.user")
             div(
                 tg-profile-tab="{{'USER.PROFILE.TABS.LIKES_TAB' | translate}}"
                 tab-title="{{'USER.PROFILE.TABS.LIKES_TAB_TITLE' | translate}}"
-                tab-icon="icon-heart"
+                tab-icon="icon-like"
             )
                 div(tg-profile-liked, user="vm.user")
 
             div(
                 tg-profile-tab="{{'USER.PROFILE.TABS.VOTES_TAB' | translate}}"
                 tab-title="{{'USER.PROFILE.TABS.VOTES_TAB_TITLE' | translate}}"
-                tab-icon="icon-caret-up"
+                tab-icon="icon-upvote"
             )
                 div(tg-profile-voted, user="vm.user")
 
             div(
                 tg-profile-tab="{{'USER.PROFILE.TABS.WATCHED_TAB' | translate}}"
                 tab-title="{{'USER.PROFILE.TABS.WATCHED_TAB_TITLE' | translate}}"
-                tab-icon="icon-eye"
+                tab-icon="icon-watch"
             )
                 div(tg-profile-watched, user="vm.user")
 

app/modules/profile/profile.scss

@@ -50,12 +50,16 @@
         padding: 5vh;
         text-align: center;
         svg {
+            fill: $whitish;
+            height: 10rem;
             margin: 2rem auto;
-            max-width: 160px;
             text-align: center;
+            width: 10rem;
         }
         p {
+            color: $gray-light;
             font-size: .9rem;
+            margin: 0;
         }
     }
 }

app/modules/profile/styles/profile-content-tabs.scss

@@ -7,8 +7,11 @@
         padding: 1rem;
         &:hover,
         &.active {
-            color: $grayer;
+            color: $gray;
             transition: color .2s linear;
+            .icon {
+                fill: $primary-light;
+            }
         }
         &.active {
             background: $white;
@@ -19,11 +22,13 @@
             transition: color .2s linear;
             .icon {
                 color: $primary;
-                transition: color .2s linear;
             }
         }
     }
     .icon {
-        margin-right: .4rem;
+        fill: $gray-light;
+        height: .8rem;
+        margin-right: .5rem;
+        transition: fill .2s linear;
     }
 }

app/modules/profile/styles/profile-sidebar.scss

@@ -6,9 +6,10 @@
         margin-bottom: .5rem;
         padding: .5rem;
         .icon {
-            color: $gray-light;
+            fill: $gray-light;
             margin-right: .3rem;
-            vertical-align: text-bottom;
+            margin-top: -3px;
+            vertical-align: middle;
         }
     }
     p {

app/modules/projects/components/like-project-button/like-project-button.jade

@@ -8,7 +8,8 @@ a.track-button.like-button.like-container(
 )
     span.track-inner
         span.track-icon
-            include ../../../../svg/like.svg
+            svg.icon.icon-like
+                use(xlink:href="#icon-like")
         span(
             ng-if="!vm.project.get('is_fan')"
             translate="PROJECT.LIKE_BUTTON.LIKE"

app/modules/projects/components/watch-project-button/watch-project-button.jade

@@ -6,10 +6,12 @@ a.track-button.watch-button.watch-container(
 )
     span.track-inner
         span.track-icon
-            include ../../../../svg/watch.svg
+            svg.icon.icon-watch
+                use(xlink:href="#icon-watch")
         span(ng-if="!vm.project.get('is_watcher')", translate="PROJECT.WATCH_BUTTON.WATCH")
         span(ng-if="vm.project.get('is_watcher')", translate="PROJECT.WATCH_BUTTON.WATCHING")
-        span.icon.icon-arrow-up
+        svg.icon.icon-arrow-down
+            use(xlink:href="#icon-arrow-down")
 
     span.track-button-counter(
         title="{{ 'PROJECT.WATCH_BUTTON.COUNTER_TITLE'|translate:{total:vm.project.get(\"total_watchers\")||0}:'messageformat' }}",
@@ -35,7 +37,8 @@ ul.watch-options(
         )
             span(translate="PROJECT.WATCH_BUTTON.OPTIONS.NOTIFY_ALL")
             span.watch-check(ng-if="vm.project.get('is_watcher') && vm.project.get('notify_level') == 2")
-                include ../../../../svg/check.svg
+                svg.icon.icon-check-empty
+                    use(xlink:href="#icon-check-empty")
     li
         a(
             href="",
@@ -45,7 +48,8 @@ ul.watch-options(
         )
             span(translate="PROJECT.WATCH_BUTTON.OPTIONS.NOTIFY_INVOLVED")
             span.watch-check(ng-if="vm.project.get('is_watcher') && vm.project.get('notify_level') == 1")
-                include ../../../../svg/check.svg
+                svg.icon.icon-check-empty
+                    use(xlink:href="#icon-check-empty")
 
     li(ng-if="vm.project.get('is_watcher')")
         a(

app/modules/projects/listing/projects-listing.jade

@@ -13,7 +13,8 @@
                     href=""
                     title="{{'PROJECT.NAVIGATION.TITLE_IMPORT_PROJECT' | translate}}"
                 )
-                    span.icon.icon-upload
+                    svg.icon.icon-upload
+                        use(xlink:href="#icon-upload")
                 input.import-file.hidden(type="file")
 
     section.project-list-section
@@ -46,7 +47,8 @@
                                         ng-if="project.get('is_private')"
                                         title="{{'PROJECT.PRIVATE' | translate}}"
                                     )
-                                        include ../../../svg/lock.svg
+                                        svg.icon.icon-lock
+                                            use(xlink:href="#icon-lock")
                                 p {{ ::project.get('description') | limitTo:300 }}
                                     span(ng-if="::project.get('description').length > 300") ...
 
@@ -57,7 +59,8 @@
                             )
                                 span.tag-name {{::tag.get('name')}}
 
-                    span.drag.icon.icon-drag-v
+                    svg.drag.icon.icon-drag
+                        use(xlink:href="#icon-drag")
 
         aside.help-area
             p(translate="PROJECT.HELP")

app/modules/projects/listing/styles/project-list.scss

@@ -13,20 +13,21 @@
             margin: 0;
         }
     }
-    .create-options a {
+    .create-project-btn {
-        &.create-project-btn {
+        margin-right: .25rem;
-            margin-right: .25rem;
+        padding: .6rem 2.5rem;
-            padding: .6rem 2.5rem;
+    }
-        }
+    .import-project-button {
-        &.import-project-button {
+        padding: .53rem .8rem;
-            padding: .53rem .8rem;
+        &:hover {
-            &:hover {
-                background: $grayer;
-            }
             .icon-upload {
-                margin: 0;
+                fill: $primary-light;
             }
         }
+        .icon-upload {
+            fill: $white;
+        }
+
     }
     .project-list-section {
         display: flex;
@@ -63,10 +64,12 @@
         }
     }
     .drag {
-        @extend %large;
         align-self: center;
-        color: $gray-light;
+        fill: $gray-light;
+        height: 1.1rem;
+        margin-right: .5rem;
         opacity: 0;
         transition: opacity .2s;
+        width: 1.1rem;
     }
 }

app/modules/projects/project/project.jade

@@ -20,7 +20,8 @@ div.wrapper
                             ng-if="::vm.project.get('is_private')"
                             title="{{'PROJECT.PRIVATE' | translate}}"
                         )
-                            include ../../../svg/lock.svg
+                            svg.icon.icon-lock
+                                use(xlink:href="#icon-lock")
 
                     div.track-buttons-container(ng-if="vm.user")
                         tg-like-project-button(project="vm.project")
@@ -31,15 +32,15 @@ div.wrapper
                             span.list-itemtype-track-likers(
                                 title="{{ 'PROJECT.LIKE_BUTTON.COUNTER_TITLE'|translate:{total:vm.project.get(\"total_fans\")||0}:'messageformat' }}"
                             )
-                                span.icon
+                                svg.icon.icon-like
-                                    include ../../../svg/like.svg
+                                    use(xlink:href="#icon-like")
                                 span {{ ::vm.project.get('total_fans') }}
 
                             span.list-itemtype-track-watchers(
                                 title="{{ 'PROJECT.WATCH_BUTTON.COUNTER_TITLE'|translate:{total:vm.project.get(\"total_watchers\")||0}:'messageformat' }}"
                             )
-                                span.icon
+                                svg.icon.icon-watche
-                                    include ../../../svg/watch.svg
+                                    use(xlink:href="#icon-watch")
                                 span {{ ::vm.project.get('total_watchers') }}
 
                 p.description {{vm.project.get('description')}}

app/modules/services/app-meta.service.coffee

@@ -33,7 +33,7 @@ class AppMetaService
         return if not key
 
         if key == "title"
-            meta = $("title")
+            meta = $("head title")
 
             if meta.length == 0
                 meta = $("<title></title>")
@@ -41,7 +41,7 @@ class AppMetaService
 
             meta.text(value or "")
         else if key.indexOf("og:") == 0
-            meta = $("meta[property='#{key}']")
+            meta = $("head meta[property='#{key}']")
 
             if meta.length == 0
                 meta = $("<meta property='#{key}'/>")
@@ -49,7 +49,7 @@ class AppMetaService
 
             meta.attr("content", value or "")
         else
-            meta = $("meta[name='#{key}']")
+            meta = $("head meta[name='#{key}']")
 
             if meta.length == 0
                 meta = $("<meta name='#{key}'/>")
@@ -91,7 +91,7 @@ class AppMetaService
         )
 
     removeMobileViewport: () ->
-        $("meta[name=\"viewport\"]").remove()
+        $("head meta[name=\"viewport\"]").remove()
 
     setfn: (fn) ->
         @._listener() if @.listener

app/modules/user-timeline/user-timeline-attachment/user-timeline-attachment.jade

@@ -1,5 +1,6 @@
 div.single-attachment
     blockquote
         a(ng-href="{{ attachment.get('url') }}", title="Click to download {{ attachment.get('filename') }}", target="_blank")
-            span.icon.icon-document
+            svg.icon.icon-attachment
+                use(xlink:href="#icon-attachment")
             span {{attachment.get('filename')}}

app/modules/user-timeline/user-timeline/user-timeline.scss

@@ -86,11 +86,12 @@
             max-width: 95%;
             overflow: hidden;
             text-overflow: ellipsis;
-            vertical-align: middle;
+            vertical-align: sub;
             white-space: nowrap;
         }
         .icon {
-            margin-right: .3rem;
+            fill: $grayer;
+            margin-right: .5rem;
         }
     }
     .spin {

app/partials/admin/admin-project-export.jade

@@ -26,5 +26,6 @@ div.wrapper(ng-controller="ProjectProfileController as ctrl",
             p.result-message
 
         a.help-button(href="https://taiga.io/support/import-export-projects/", target="_blank")
-            span.icon.icon-help
+            svg.icon.icon-question
+                use(xlink:href="#icon-question")
             span(translate="ADMIN.HELP")

app/partials/admin/admin-project-modules.jade

@@ -15,7 +15,8 @@ div.wrapper(tg-project-modules, ng-controller="ProjectProfileController as ctrl"
 
         form
             div.functionality(ng-class="{true:'active', false:''}[project.is_backlog_activated]")
-                div.icon.icon-scrum
+                svg.icon.icon-scrum
+                    use(xlink:href="#icon-scrum")
                 div.desc
                     p
                         span.title(translate="ADMIN.MODULES.BACKLOG")
@@ -29,7 +30,8 @@ div.wrapper(tg-project-modules, ng-controller="ProjectProfileController as ctrl"
                             span(ng-switch-when="false", translate="ADMIN.MODULES.ENABLE")
 
             div.functionality(ng-class="{true:'active', false:''}[project.is_kanban_activated]")
-                div.icon.icon-kanban
+                svg.icon.icon-kanban
+                    use(xlink:href="#icon-kanban")
                 div.desc
                     p
                         span.title(translate="ADMIN.MODULES.KANBAN")
@@ -43,7 +45,8 @@ div.wrapper(tg-project-modules, ng-controller="ProjectProfileController as ctrl"
                             span(ng-switch-when="false", translate="ADMIN.MODULES.ENABLE")
 
             div.functionality(ng-class="{true:'active', false:''}[project.is_issues_activated]")
-                div.icon.icon-issues
+                svg.icon.icon-issues
+                    use(xlink:href="#icon-issues")
                 div.desc
                     p
                         span.title(translate="ADMIN.MODULES.ISSUES")
@@ -57,7 +60,8 @@ div.wrapper(tg-project-modules, ng-controller="ProjectProfileController as ctrl"
                             span(ng-switch-when="false", translate="ADMIN.MODULES.ENABLE")
 
             div.functionality(ng-class="{true:'active', false:''}[project.is_wiki_activated]")
-                div.icon.icon-wiki
+                svg.icon.icon-wiki
+                    use(xlink:href="#icon-wiki")
                 div.desc
                     p
                         span.title(translate="ADMIN.MODULES.WIKI")
@@ -71,7 +75,8 @@ div.wrapper(tg-project-modules, ng-controller="ProjectProfileController as ctrl"
                             span(ng-switch-when="false", translate="ADMIN.MODULES.ENABLE")
 
             div.functionality(ng-class="{true:'active', false:''}[isVideoconferenceActivated]")
-                div.icon.icon-video
+                svg.icon.icon-bubble-empty
+                    use(xlink:href="#icon-bubble-empty")
                 div.desc
                     p
                         span.title(translate="ADMIN.MODULES.MEETUP")

app/partials/admin/admin-project-profile.jade

@@ -105,10 +105,9 @@ div.wrapper(
                 fieldset.looking-for-people
                     .looking-for-people-selector
                         span {{ 'ADMIN.PROJECT_PROFILE.RECRUITING' | translate }}
-                        span(
+                        svg.icon.icon-recruit
-                            title="{{ 'ADMIN.PROJECT_PROFILE.RECRUITING_MESSAGE' | translate }}"
+                            use(xlink:href="#icon-recruit")
-                        )
+                                title {{ 'ADMIN.PROJECT_PROFILE.RECRUITING_MESSAGE' | translate }}"
-                            include ../../svg/recruit.svg
                         div.check
                             input(
                                 type="checkbox",
@@ -138,8 +137,6 @@ div.wrapper(
                                 ng-value="false"
                             )
                             label.trans-button(for="private-project") {{ 'ADMIN.PROJECT_PROFILE.PUBLIC_PROJECT' | translate }}
-                                span(title="{{ 'ADMIN.PROJECT_PROFILE.PUBLIC_PROJECT_DESC' | translate }}")
-                                    include ../../svg/help.svg
 
                         div.privacy-option
                             input.privacy-project(
@@ -150,15 +147,14 @@ div.wrapper(
                                 ng-value="true"
                             )
                             label.trans-button(for="public-project") {{'ADMIN.PROJECT_PROFILE.PRIVATE_PROJECT' | translate }}
-                                span(title="{{ 'ADMIN.PROJECT_PROFILE.PRIVATE_PROJECT_DESC' | translate }}")
-                                    include ../../svg/help.svg
 
                     a.private-or-public(
                         href="https://taiga.io/support/whats-the-difference-between-public-and-private-projects/"
                         target="_blank"
                     )
-                        span(title="{{ 'ADMIN.PROJECT_PROFILE.PRIVATE_OR_PUBLIC' | translate }}")
+                        svg.icon.icon-question
-                            include ../../svg/help.svg
+                            use(xlink:href="#icon-question")
+                                title {{ 'ADMIN.PROJECT_PROFILE.PRIVATE_OR_PUBLIC' | translate }}
                         span {{'ADMIN.PROJECT_PROFILE.PRIVATE_OR_PUBLIC' | translate }}
                 button.button-green.submit-button(
                     type="submit"

app/partials/admin/admin-project-reports.jade

@@ -22,5 +22,6 @@ div.wrapper(ng-controller="ProjectProfileController as ctrl",
 
         div
             a.help-button(href="https://taiga.io/support/csv-reports/", target="_blank")
-                span.icon.icon-help
+                svg.icon.icon-question
+                    use(xlink:href="#icon-question")
                 span(translate="ADMIN.REPORTS.HELP")

app/partials/admin/admin-roles.jade

@@ -18,25 +18,27 @@ div.wrapper.roles(ng-controller="RolesController as ctrl",
                     span(translate="COMMON.DELETE")
 
 
-        div(ng-if="!role.external_user")
+        tg-edit-role(ng-if="!role.external_user")
-            div(tg-edit-role)
+            .edit-role
-                .edit-role
+                input(type="text", value="{{ role.name }}")
-                    input(type="text", value="{{ role.name }}")
+                a.save(href="", title="{{'COMMON.SAVE' | translate}}")
-                    a.save.icon-floppy(href="", title="{{'COMMON.SAVE' | translate}}")
+                    svg.icon.icon-save
+                        use(xlink:href="#icon-save")
+            p.total
+                span.role-name(title="{{'ADMIN.ROLES.COUNT_MEMBERS' | translate}}") {{ role.name }}
+                a.edit-value
+                    svg.icon.icon-edit
+                        use(xlink:href="#icon-edit")
 
-                p.total
+        div.any-computable-role(ng-hide="anyComputableRole", translate="ADMIN.ROLES.WARNING_NO_ROLE")
-                    span.role-name(title="{{'ADMIN.ROLES.COUNT_MEMBERS' | translate}}") {{ role.name }}
-                    a.edit-value.icon.icon-edit
 
-            div.any-computable-role(ng-hide="anyComputableRole", translate="ADMIN.ROLES.WARNING_NO_ROLE")
+        div.general-category
-
+            span(translate="ADMIN.ROLES.HELP_ROLE_ENABLED")
-            div.general-category
+            div.check
-                span(translate="ADMIN.ROLES.HELP_ROLE_ENABLED")
+                input(type="checkbox", ng-model="role.computable", ng-change="ctrl.toggleComputable()")
-                div.check
+                div
-                    input(type="checkbox", ng-model="role.computable", ng-change="ctrl.toggleComputable()")
+                span.check-text.check-yes(translate="COMMON.YES")
-                    div
+                span.check-text.check-no(translate="COMMON.NO")
-                    span.check-text.check-yes(translate="COMMON.YES")
-                    span.check-text.check-no(translate="COMMON.NO")
 
         div(ng-if="role.external_user")
             p.total

app/partials/admin/admin-third-parties-bitbucket.jade

@@ -24,7 +24,8 @@ div.wrapper.roles(tg-bitbucket-webhooks, ng-controller="BitbucketController as c
                         .field-with-option
                             input(type="text", ng-model="bitbucket.webhooks_url", name="payload-url", readonly="readonly", placeholder="{{'ADMIN.THIRD_PARTIES.PAYLOAD_URL' | translate}}", id="payload-url")
                             .option-wrapper.select-input-content
-                                .icon.icon-copy
+                                svg.icon.icon-clipboard
+                                    use(xlink:href="#icon-clipboard")
                         .help-copy(translate="COMMON.COPY_TO_CLIPBOARD")
 
             fieldset
@@ -34,5 +35,6 @@ div.wrapper.roles(tg-bitbucket-webhooks, ng-controller="BitbucketController as c
             button.button-green.submit-button(type="submit", title="{{'COMMON.SAVE' | translate}}", translate="COMMON.SAVE")
 
         a.help-button(href="https://taiga.io/support/bitbucket-integration/", target="_blank")
-            span.icon.icon-help
+            svg.icon.icon-question
+                use(xlink:href="#icon-question")
             span(translate="ADMIN.HELP")

app/partials/admin/admin-third-parties-github.jade

@@ -23,11 +23,13 @@ div.wrapper.roles(tg-github-webhooks, ng-controller="GithubController as ctrl",
                         .field-with-option
                             input(type="text", ng-model="github.webhooks_url", name="payload-url", readonly="readonly", placeholder="{{'ADMIN.THIRD_PARTIES.PAYLOAD_URL' | translate}}", id="payload-url")
                             .option-wrapper.select-input-content
-                                .icon.icon-copy
+                                svg.icon.icon-clipboard
+                                    use(xlink:href="#icon-clipboard")
                         .help-copy(translate="COMMON.COPY_TO_CLIPBOARD")
 
             button.button-green.submit-button(type="submit", title="{{'COMMON.SAVE' | translate}}", translate="COMMON.SAVE")
 
         a.help-button(href="https://taiga.io/support/github-integration/", target="_blank")
-            span.icon.icon-help
+            svg.icon.icon-question
+                use(xlink:href="#icon-question")
             span(translate="ADMIN.HELP")

app/partials/admin/admin-third-parties-gitlab.jade

@@ -23,7 +23,8 @@ div.wrapper.roles(tg-gitlab-webhooks, ng-controller="GitlabController as ctrl",
                         .field-with-option
                             input(type="text", ng-model="gitlab.webhooks_url", name="payload-url", readonly="readonly", placeholder="{{'ADMIN.THIRD_PARTIES.PAYLOAD_URL' | translate}}", id="payload-url")
                             .option-wrapper.select-input-content
-                                .icon.icon-copy
+                                svg.icon.icon-clipboard
+                                    use(xlink:href="#icon-clipboard")
                         .help-copy(translate="COMMON.COPY_TO_CLIPBOARD")
 
             fieldset
@@ -33,5 +34,6 @@ div.wrapper.roles(tg-gitlab-webhooks, ng-controller="GitlabController as ctrl",
             button.button-green.submit-button(type="submit", title="{{'COMMON.SAVE' | translate}}", translate="COMMON.SAVE")
 
         a.help-button(href="https://taiga.io/support/gitlab-integration/", target="_blank")
-            span.icon.icon-help
+            svg.icon.icon-question
+                use(xlink:href="#icon-question")
             span(translate="ADMIN.HELP")

app/partials/admin/admin-third-parties-webhooks.jade

@@ -31,12 +31,29 @@ div.wrapper.roles(ng-controller="WebhooksController as ctrl",
                             div.webhook-url
                                 div.webhook-url-inputs
                                     fieldset
-                                        input(type="text", name="url", data-type="url", placeholder="{{'ADMIN.WEBHOOKS.TYPE_PAYLOAD_URL' | translate}}", data-required="true", ng-model="webhook.url")
+                                        input(
+                                            type="text"
+                                            name="url"
+                                            data-type="url"
+                                            placeholder="{{'ADMIN.WEBHOOKS.TYPE_PAYLOAD_URL' | translate}}"
+                                            data-required="true"
+                                            ng-model="webhook.url"
+                                        )
                                     fieldset
-                                        input(type="text", name="key", placeholder="{{'ADMIN.WEBHOOKS.TYPE_SERVICE_SECRET' | translate}}", data-required="true", ng-model="webhook.key")
+                                        input(
+                                            type="text"
+                                            name="key"
+                                            placeholder="{{'ADMIN.WEBHOOKS.TYPE_SERVICE_SECRET' | translate}}"
+                                            data-required="true"
+                                            ng-model="webhook.key"
+                                        )
                             div.webhook-options
-                                a.edit-existing.icon.icon-floppy(href="", title="{{'ADMIN.WEBHOOKS.SAVE' | translate}}")
+                                a.edit-existing(href="", title="{{'ADMIN.WEBHOOKS.SAVE' | translate}}")
-                                a.cancel-existing.icon.icon-delete(href="", title="{{'ADMIN.WEBHOOKS.CANCEL' | translate}}")
+                                    svg.icon.icon-save
+                                        use(xlink:href="#icon-save")
+                                a.cancel-existing(href="", title="{{'ADMIN.WEBHOOKS.CANCEL' | translate}}")
+                                    svg.icon.icon-close
+                                        use(xlink:href="#icon-close")
 
                     div.visualization-mode
                         div.row
@@ -48,9 +65,15 @@ div.wrapper.roles(ng-controller="WebhooksController as ctrl",
 
                             div.webhook-options
                                 div.webhook-options-wrapper
-                                    a.test-webhook.icon.icon-check-square(href="", title="{{'ADMIN.WEBHOOKS.TEST' | translate}}")
+                                    a.test-webhook(href="", title="{{'ADMIN.WEBHOOKS.TEST' | translate}}")
-                                    a.edit-webhook.icon.icon-edit(href="", title="{{'ADMIN.WEBHOOKS.EDIT' | translate}}")
+                                        svg.icon.icon-check-empty
-                                    a.delete-webhook.icon.icon-delete(href="", title="{{'ADMIN.WEBHOOKS.DELETE' | translate}}")
+                                            use(xlink:href="#icon-check-empty")
+                                    a.edit-webhook(href="", title="{{'ADMIN.WEBHOOKS.EDIT' | translate}}")
+                                        svg.icon.icon-edit
+                                            use(xlink:href="#icon-edit")
+                                    a.delete-webhook(href="", title="{{'ADMIN.WEBHOOKS.DELETE' | translate}}")
+                                        svg.icon.icon-trash
+                                            use(xlink:href="#icon-trash")
 
                         div.webhooks-history(ng-show="webhook.logs")
                             div.history-single-wrapper(ng-repeat="log in webhook.logs")
@@ -58,13 +81,15 @@ div.wrapper.roles(ng-controller="WebhooksController as ctrl",
                                     div
                                         span.history-response-icon(ng-class="log.validStatus ? 'history-success' : 'history-error'", title="{{log.status}}")
                                         span.history-date(ng-bind="log.prettyDate")
-                                    span.toggle-log.icon.icon-arrow-bottom
+                                    svg.toggle-log.icon.icon-arrow-down
+                                        use(xlink:href="#icon-arrow-down")
 
                                 div.history-single-response
                                     div.history-single-request-header
                                         span(translate="ADMIN.WEBHOOKS.REQUEST")
                                         a.resend-request(href="", title="{{'ADMIN.WEBHOOKS.RESEND_REQUEST' | translate}}", data-log="{{log.id}}")
-                                            span.icon.icon-reload
+                                            svg.icon.icon-reload
+                                                use(xlink:href="#icon-reload")
                                             span(translate="ADMIN.WEBHOOKS.RESEND_REQUEST")
                                     div.history-single-request-body
                                         div.response-container
@@ -91,9 +116,14 @@ div.wrapper.roles(ng-controller="WebhooksController as ctrl",
                             fieldset
                                 input(type="text", name="key", placeholder="{{'ADMIN.WEBHOOKS.TYPE_SERVICE_SECRET' | translate}}", data-required="true", ng-model="newValue.key")
                     div.webhook-options
-                        a.add-new.icon.icon-floppy(href="", title="{{'ADMIN.WEBHOOKS.SAVE' | translate}}")
+                        a.add-new(href="", title="{{'ADMIN.WEBHOOKS.SAVE' | translate}}")
-                        a.cancel-new.icon.icon-delete(href="", title="{{'ADMIN.WEBHOOKS.CANCEL' | translate}}")
+                            svg.icon.icon-save
+                                use(xlink:href="#icon-save")
+                        a.cancel-new(href="", title="{{'ADMIN.WEBHOOKS.CANCEL' | translate}}")
+                            svg.icon.icon-close
+                                use(xlink:href="#icon-close")
 
         a.help-button(href="https://taiga.io/support/webhooks/", target="_blank")
-            span.icon.icon-help
+            svg.icon.icon-question
+                use(xlink:href="#icon-question")
             span(translate="ADMIN.HELP")

app/partials/admin/project-csv.jade

@@ -10,11 +10,14 @@ section.project-csv(tg-select-input-text)
             input(type="text", placeholder="{{'ADMIN.CSV.URL_FIELD_PLACEHOLDER' | translate}}",
                   readonly, ng-model="csvUrl")
             div.option-wrapper.select-input-content
-                div.icon.icon-copy
+                svg.icon.icon-clipboard
+                    use(xlink:href="#icon-clipboard")
 
         a(href="", title="{{'ADMIN.CSV.TITLE_REGENERATE_URL' | translate}}", ng-click="ctrl.regenerateUuid()")
-           span.icon.icon-plus(ng-hide="csvUrl")
+           svg.icon.icon-add(ng-hide="csvUrl")
+               use(xlink:href="#icon-add")
            span(ng-hide="csvUrl", translate="ADMIN.CSV.ACTION_GENERATE_URL")
 
-           span.icon.icon-reload(ng-Show="csvUrl")
+           svg.icon.icon-reload(ng-Show="csvUrl")
+               use(xlink:href="#icon-reload")
            span(ng-Show="csvUrl", translate="ADMIN.CSV.ACTION_REGENERATE")

app/partials/backlog/backlog.jade

@@ -12,8 +12,8 @@ div.wrapper(tg-backlog, ng-controller="BacklogController as ctrl",
             include ../includes/components/summary
 
             div.empty-burndown(ng-if="showGraphPlaceholder")
-                div.graph-icon
+                svg.icon.icon-graph
-                    include ../../svg/graph.svg
+                    use(xlink:href="#icon-graph")
                 div.empty-text
                     p.title(translate="BACKLOG.CUSTOMIZE_GRAPH")
                     p {{'BACKLOG.CUSTOMIZE_GRAPH_TEXT' | translate}} #[a(href="", tg-nav="project-admin-project-profile-details:project=project.slug", title="{{'BACKLOG.CUSTOMIZE_GRAPH_TITLE' | translate}}") {{'BACKLOG.CUSTOMIZE_GRAPH_ADMIN' | translate}}]
@@ -30,7 +30,8 @@ div.wrapper(tg-backlog, ng-controller="BacklogController as ctrl",
                     title="{{'BACKLOG.MOVE_US_TO_CURRENT_SPRINT' | translate}}"
                     id="move-to-current-sprint"
                 )
-                    span.icon.icon-move
+                    svg.icon.icon-move
+                        use(xlink:href="#icon-move")
                     span.text(translate="BACKLOG.MOVE_US_TO_CURRENT_SPRINT")
                 a.trans-button.move-to-latest-sprint.move-to-sprint(
                     ng-if="!currentSprint"
@@ -38,7 +39,8 @@ div.wrapper(tg-backlog, ng-controller="BacklogController as ctrl",
                     title="{{'BACKLOG.MOVE_US_TO_LATEST_SPRINT' | translate}}"
                     id="move-to-latest-sprint"
                 )
-                    span.icon.icon-move
+                    svg.icon.icon-move
+                        use(xlink:href="#icon-move")
                     span.text(translate="BACKLOG.MOVE_US_TO_LATEST_SPRINT")
                 a.trans-button(
                     ng-if="userstories.length"

app/partials/backlog/filter-selected.jade

@@ -2,5 +2,6 @@
 a.single-filter.selected(data-type!="<%- f.type %>", data-id!="<%- f.id %>")
     span.name(style!="<%- f.style %>")
         | <%- f.name %>
-    span.icon.icon-delete
+    svg.icon.icon-close.remove-filter
+        use(xlink:href="#icon-close")
 <% }) %>

app/partials/backlog/sprint-header.jade

@@ -1,9 +1,12 @@
 .sprint-name
-    a.icon.icon-arrow-up(href="", title="{{'BACKLOG.COMPACT_SPRINT' | translate}}")
+    a.compact-sprint(href="", title="{{'BACKLOG.COMPACT_SPRINT' | translate}}")
+        svg.icon.icon-arrow-right
+            use(xlink:href="#icon-arrow-right")
     a(ng-if="::isVisible", href="{{::taskboardUrl}}", title="{{'BACKLOG.GO_TO_TASKBOARD' | translate}}")
         span {{::name}}
 
-    a.icon.icon-edit(ng-if="::isEditable", href="", title="{{'BACKLOG.EDIT_SPRINT' | translate}}")
+    svg.icon.icon-edit.edit-sprint(ng-if="::isEditable", href="", title="{{'BACKLOG.EDIT_SPRINT' | translate}}")
+        use(xlink:href="#icon-edit")
 
 .sprint-summary
     .sprint-date {{::estimatedDateRange}}

app/partials/common/components/add-button.jade

@@ -1,4 +1,5 @@
 a.add-button(
     href=""
 )
-    include ../../../svg/add.svg
+    svg.icon.icon-add
+        use(xlink:href="#icon-add")

app/partials/common/components/assigned-to.jade

@@ -2,7 +2,8 @@
     img(src!="<%- photo %>", alt!="<%- fullName %>")
     <% if (isIocaine) { %>
     .iocaine-symbol(title="{{ 'TASK.TITLE_ACTION_IOCAINE' | translate }}")
-        include ../../../svg/iocaine.svg
+        svg.icon.icon-iocaine
+            use(xlink:href="#icon-iocaine")
     <% }; %>
 
 .assigned-to
@@ -23,7 +24,8 @@
                 <%- fullName %>
                 <% }; %>
                 <% if (isEditable && !isUnassigned) { %>
-                span.icon.icon-arrow-bottom
+                svg.icon.icon-arrow-down
+                    use(xlink:href="#icon-arrow-down")
                 <% }; %>
 
         <% if (isEditable && isUnassigned) { %>
@@ -37,8 +39,9 @@
         <% }; %>
 
     <% if (isEditable && !isUnassigned) { %>
-    a.icon.icon-delete(
+    svg.icon.icon-close.remove-user(
         href=""
         title="{{'COMMON.ASSIGNED_TO.DELETE_ASSIGNMENT' | translate}}"
     )
+        use(xlink:href="#icon-close")
     <% } %>

app/partials/common/components/block-button.jade

@@ -2,9 +2,11 @@ a.button-gray.item-block(
     href=""
     title="{{ 'COMMON.BLOCK_TITLE' | translate }}"
 )
-    include ../../../svg/lock.svg
+    svg.icon.icon-lock
+        use(xlink:href="#icon-lock")
 a.button-red.item-unblock(
     href=""
     title="{{ 'COMMON.UNBLOCK_TITLE' | translate }}"
 )
-    include ../../../svg/unlock.svg
+    svg.icon.icon-lock
+        use(xlink:href="#icon-unlock")

app/partials/common/components/delete-button.jade

@@ -2,4 +2,5 @@ a.button-red.button-delete(
     href=""
     title="{{ 'COMMON.DELETE' | translate }}"
 )
-    include ../../../svg/trash.svg
+    svg.icon.icon-trash
+        use(xlink:href="#icon-trash")

app/partials/common/components/editable-description.jade

@@ -2,10 +2,12 @@ include wysiwyg.jade
 
 .view-description
     section.us-content.wysiwyg(tg-bind-html="item.description_html || noDescriptionMsg")
-    span.edit.icon.icon-edit
+    svg.icon.icon-edit.edit
+        use(xlink:href="#icon-edit")
 
 .edit-description
     textarea(ng-attr-placeholder="{{'COMMON.DESCRIPTION.EMPTY' | translate}}", ng-model="item.description", tg-markitup="tg-markitup")
     +wysihelp
     span.save-container
-        a.save.icon.icon-floppy(href="", title="{{'COMMON.SAVE' | translate}}")
+        svg.save.icon.icon-save(title="{{'COMMON.SAVE' | translate}}")
+            use(xlink:href="#icon-save")

app/partials/common/components/editable-subject.jade

@@ -1,7 +1,9 @@
 .view-subject
     | {{ item.subject }}
-    a.edit.icon.icon-edit(href="" title="{{'COMMON.EDIT' | translate}}")
+    svg.edit.icon.icon-edit(href="" title="{{'COMMON.EDIT' | translate}}")
+        use(xlink:href="#icon-edit")
 .edit-subject
     input(type="text", ng-model="item.subject", data-required="true", data-maxlength="500", ng-model-options="{ debounce: 200 }")
     span.save-container
-        a.save.icon.icon-floppy(href="", title="{{'COMMON.SAVE' | translate}}")
+        svg.save.icon.icon-save(href="", title="{{'COMMON.SAVE' | translate}}")
+            use(xlink:href="#icon-save")

app/partials/common/components/watchers.jade

@@ -10,11 +10,11 @@
         span <%- watcher.full_name_display %>
 
         <% if(isEditable){ %>
-        a.icon.icon-delete.js-delete-watcher(
+        svg.icon.icon-trash.js-delete-watcher.delete-watcher(
-            href=""
             data-watcher-id!="<%- watcher.id %>"
             title="{{'COMMON.WATCHERS.DELETE' | translate}}"
         )
+            use(xlink:href="#icon-trash")
         <% }; %>
 <% } %>
 <% }); %>

app/partials/common/components/wysiwyg.jade

@@ -2,5 +2,6 @@ mixin wysihelp
     div.wysiwyg-help
         span.drag-drop-help Attach files by dragging & dropping on the textarea above.
         a.help-markdown(href="https://taiga.io/support/taiga-markdown-syntax/", target="_blank", title="{{'COMMON.WYSIWYG.MARKDOWN_HELP' | translate}}")
-            span.icon.icon-help
+            svg.icon.icon-question
+                use(xlink:href="#icon-question")
             span(translate="COMMON.WYSIWYG.MARKDOWN_HELP")

app/partials/common/estimation/us-estimation-points-per-role.jade

@@ -3,7 +3,8 @@ ul.points-per-role
     li.ticket-role-points.total(class!="<% if(editable){ %>clickable<% } %>", data-role-id!="<%- role.id %>", title!="<%- role.name %>")
         span.points 
             <%- role.points %>
-            span.icon-arrow-bottom
+            svg.icon.icon-arrow-down
+                use(xlink:href="#icon-arrow-down")
         span.role 
             <%- role.name %>
     <% }); %>

app/partials/common/estimation/us-estimation-total.jade

@@ -1,5 +1,6 @@
 a.us-points(href="", title!="<%= title %>", class!="<% if (!editable) { %>not-clickable<% } %>")
     span.points-value <%= text %>
     <% if (editable) { %>
-    span.icon.icon-arrow-bottom(tg-check-permission="modify_us")
+    svg.icon.icon-arrow-down(tg-check-permission="modify_us")
+        use(xlink:href="#icon-arrow-down")
     <% } %>

app/partials/common/history/history-activity.jade

@@ -1,4 +1,4 @@
-div(class!="activity-single <%- mode %>")
+.activity-single(class!="<%- mode %>")
     .activity-user
         a.avatar(href!="<%- userProfileUrl %>", title!="<%- userFullName %>")
             img(src!="<%- avatar %>", alt!="<%- userFullName %>")
@@ -18,11 +18,11 @@ div(class!="activity-single <%- mode %>")
         .comment.wysiwyg(ng-non-bindable)
             | <%= comment %>
             <% if (!deleteCommentDate && mode !== "activity" && canDeleteComment) { %>
-            a.icon.icon-delete.comment-delete(
+            svg.icon.icon-trash.comment-delete(
-                href=""
                 data-activity-id!="<%- activityId %>"
                 title!="<%- deleteCommentActionTitle %>"
             )
+                use(xlink:href="#icon-trash")
             <% } %>
         <% } %>
 
@@ -31,7 +31,8 @@ div(class!="activity-single <%- mode %>")
             <% if (mode != "activity") { %>
             a.changes-title(href="", title="{{'ACTIVITY.SHOW_ACTIVITY' | translate}}")
                 span <%- changesText %>
-                span.icon.icon-arrow-up
+                svg.icon.icon-arrow-right
+                    use(xlink:href="#icon-arrow-right")
             <% } %>
             <% _.each(changes, function(change) { %>
             | <%= change %>

app/partials/common/history/history-base.jade

@@ -6,13 +6,15 @@ section.history
         <% if (commentsVisible) { %>
         li
             a(href="#", class="active", data-section-class="history-comments")
-                span.icon.icon-comment
+                svg.icon.icon-writer
+                    use(xlink:href="#icon-writer")
                 span.tab-title(translate="COMMENTS.TITLE")
         <% } %>
         <% if (historyVisible) { %>
         li
             a(href="#", data-section-class="history-activity")
-                span.icon.icon-issues
+                svg.icon.icon-timeline
+                    use(xlink:href="#icon-timeline")
                 span.tab-title(translate="ACTIVITY.TITLE")
         <% } %>
     <% } %>

app/partials/common/history/history-deleted-comment.jade

@@ -13,6 +13,7 @@
         data-activity-id!="<%- activityId %>"
         title="{{ 'COMMENTS.RESTORE' | translate }}"
     )
-        span.icon.icon-reload
+        svg.icon.icon-reload
+            use(xlink:href="#icon-reload")
         span(translate="COMMENTS.RESTORE")
     <% } %>

app/partials/common/lightbox-feedback.jade

@@ -1,5 +1,5 @@
-a.close(href="", title="{{'COMMON.CLOSE' | translate}}")
+svg.close.icon.icon-close(href="", title="{{'COMMON.CLOSE' | translate}}")
-    span.icon.icon-delete
+    use(xlink:href="#icon-close")
 form
     h2.title(translate="LIGHTBOX.FEEDBACK.TITLE")
     fieldset

app/partials/common/lightbox/lightbox-assigned-to-users.jade

@@ -11,10 +11,11 @@
         title!="<%- selected.full_name_display %>"
     )
         | <%-selected.full_name_display %>
-    a.icon-delete.remove-assigned-to(
+    svg.icon.icon-close.remove-assigned-to(
         href="" 
         title="{{'COMMON.ASSIGNED_TO.REMOVE_ASSIGNED' | translate}}"
     )
+        use(xlink:href="#icon-close")
 <% } %>
 
 <% _.each(users, function(user) { %>

app/partials/common/lightbox/lightbox-assigned-to.jade

@@ -1,5 +1,6 @@
-a.close(href="", title="close")
+svg.close.icon.icon-close(href="", title="{{'COMMON.CLOSE' | translate}}")
-    span.icon.icon-delete
+    use(xlink:href="#icon-close")
+    
 div.form
     h2.title(translate="LIGHTBOX.ASSIGNED_TO.SELECT")
     fieldset

app/partials/common/lightbox/lightbox-attachment-preview.jade

@@ -1,6 +1,6 @@
 .attachment-preview
-    a.close(href="", title="{{'COMMON.CLOSE' | translate}}")
+    svg.close.icon.icon-close(href="", title="{{'COMMON.CLOSE' | translate}}")
-        span.icon.icon-delete
+        use(xlink:href="#icon-close")
 
     a(href="{{::file.get('url')}}", title="{{::file.get('description')}}", target="_blank", download="{{::file.get('name')}}")
         img(src="{{::file.get('url')}}")

app/partials/common/lightbox/lightbox-block.jade

@@ -1,5 +1,5 @@
-a.close(href="", title="{{'COMMON.CLOSE' | translate}}")
+svg.close.icon.icon-close(href="", title="{{'COMMON.CLOSE' | translate}}")
-    span.icon.icon-delete
+    use(xlink:href="#icon-close")
 div.form
     h2.title
     fieldset