Icons of the Project

In this project we insert most of the icons using inline svg:

                
                    <svg class="svg-icon" style="width:18px; height:18px;">
                        <use xlink:href="../images/spritemap/spritemap.svg#icon-phone"/>
                    </svg>

spritemap.svg - the file that contains all our icons. The icons are marked by ids which we use in references: '../../spritemap.svg#icon-phone'.

We can set the dimensions of an inline <svg> in the stylesheet or through 'style' attribute: style="width:20px; height:auto;".

Here is the example of a link with such an inline svg element:

+8 888 999

The markup for the example looks like this:

                    
                        <a href="#" class="btn-link">
                            <svg class="svg-icon" style="width:18px; height:18px;">
                                <use xlink:href="../images/spritemap/spritemap.svg#icon-phone"/>
                            </svg>
                            <span>+8 888 999</span>
                        </a>

And here is the example of a link with an inline svg element on the right side:

Learn More

The markup for the example looks like this:

                    
                        <a href="#" class="btn-link">
                            <span>Learn More</span>
                            <svg class="svg-icon" style="width:8px; height:12px;">
                                <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
                            </svg>
                        </a>

Table of Icons

This table shows how to add an icon to the markup.

Icon display Icon id in the svg sprite1 Code example2
icon-about-me <svg class="svg-icon" style="width: 32px; height: 22px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-about-me"/>
</svg>
icon-add <svg class="svg-icon" style="width: 14px; height: 14px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-add"/>
</svg>
icon-arrow-back <svg class="svg-icon" style="width: 16px; height: 16px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-arrow-back"/>
</svg>
icon-arrow-downward <svg class="svg-icon" style="width: 16px; height: 16px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-arrow-downward"/>
</svg>
icon-arrow-forward <svg class="svg-icon" style="width: 16px; height: 16px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-arrow-forward"/>
</svg>
icon-arrow-upward <svg class="svg-icon" style="width: 14px; height: 14px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-arrow-upward"/>
</svg>
icon-arrow-upward-top <svg class="svg-icon" style="width: 16px; height: 16px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-arrow-upward-top"/>
</svg>
icon-billing <svg class="svg-icon" style="width: 32px; height: 22px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-billing"/>
</svg>
icon-calendar <svg class="svg-icon" style="width: 21px; height: 22px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-calendar"/>
</svg>
icon-cancel <svg class="svg-icon" style="width: 21px; height: 20px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-cancel"/>
</svg>
icon-cancel <svg class="svg-icon" style="width: 21px; height: 20px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-cart"/>
</svg>
icon-check <svg class="svg-icon" style="width: 19px; height: 14px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-check"/>
</svg>
icon-check-box-checked <svg class="svg-icon" style="width: 18px; height: 18px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-check-box-checked"/>
</svg>
icon-check-box-unchecked <svg class="svg-icon" style="width: 18px; height: 18px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-check-box-unchecked"/>
</svg>
icon-check-circle <svg class="svg-icon" style="width: 21px; height: 20px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-check-circle"/>
</svg>
icon-chevron-collapse <svg class="svg-icon" style="width: 12px; height: 8px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-collapse"/>
</svg>
icon-chevron-expand <svg class="svg-icon" style="width: 12px; height: 8px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-expand"/>
</svg>
icon-chevron-left <svg class="svg-icon" style="width: 8px; height: 12px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-left"/>
</svg>
icon-chevron-right <svg class="svg-icon" style="width: 8px; height: 12px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
</svg>
icon-clear <svg class="svg-icon" style="width: 12px; height: 12px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-clear"/>
</svg>
icon-close <svg class="svg-icon" style="width: 10px; height: 10px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-close"/>
</svg>
icon-download <svg class="svg-icon" style="width: 14px; height: 17px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-download"/>
</svg>
icon-drop-down <svg class="svg-icon" style="width: 10px; height: 5px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-drop-down"/>
</svg>
icon-drop-up <svg class="svg-icon" style="width: 10px; height: 5px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-drop-down"/>
</svg>
icon-education <svg class="svg-icon" style="width: 32px; height: 22px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-education"/>
</svg>
icon-email <svg class="svg-icon" style="width: 20px; height: 16px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-email"/>
</svg>
icon-employment <svg class="svg-icon" style="width: 32px; height: 22px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-employment"/>
</svg>
icon-error <svg class="svg-icon" style="width: 20px; height: 20px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-error"/>
</svg>
icon-filter-list <svg class="svg-icon" style="width: 18px; height: 12px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-filter-list"/>
</svg>
icon-icon-placeholder <svg class="svg-icon" style="width: 18px; height: 18px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-icon-placeholder"/>
</svg>
icon-id-documents <svg class="svg-icon" style="width: 32px; height: 22px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-id-documents"/>
</svg>
icon-illustration <svg class="svg-icon" style="width: 18px; height: 18px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-illustration"/>
</svg>
icon-image <svg class="svg-icon" style="width: 18px; height: 18px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-image"/>
</svg>
icon-immigration <svg class="svg-icon" style="width: 24px; height: 28px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-immigration"/>
</svg>
icon-infographic <svg class="svg-icon" style="width: 14px; height: 14px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-infographic"/>
</svg>
icon-lifestyle <svg class="svg-icon" style="width: 20px; height: 18px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-lifestyle"/>
</svg>
icon-lifestyle-ui <svg class="svg-icon" style="width: 20px; height: 17px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-lifestyle-ui"/>
</svg>
icon-link <svg class="svg-icon" style="width: 20px; height: 10px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-link"/>
</svg>
icon-menu <svg class="svg-icon" style="width: 20px; height: 14px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-menu"/>
</svg>
icon-nom-add <svg class="svg-icon" style="width: 24px; height: 24px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-nom-add"/>
</svg>
icon-nom-quote <svg class="svg-icon" style="width: 18px; height: 12px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-nom-quote"/>
</svg>
icon-nom-remove <svg class="svg-icon" style="width: 24px; height: 24px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-nom-remove"/>
</svg>
icon-notification <svg class="svg-icon" style="width: 16px; height: 20px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-notification"/>
</svg>
icon-pdf <svg class="svg-icon" style="width: 20px; height: 20px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-pdf"/>
</svg>
icon-phone <svg class="svg-icon" style="width: 18px; height: 18px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-phone"/>
</svg>
icon-planet <svg class="svg-icon" style="width: 56px; height: 56px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-planet"/>
</svg>
icon-pause <svg class="svg-icon" style="width: 40px; height: 40px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-pause"/>
</svg>
icon-play <svg class="svg-icon" style="width: 17px; height: 20px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-play"/>
</svg>
icon-quote <svg class="svg-icon" style="width: 16px; height: 10px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-quote"/>
</svg>
icon-radio-button-checked <svg class="svg-icon" style="width: 20px; height: 20px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-radio-button-checked"/>
</svg>
icon-radio-button-unchecked <svg class="svg-icon" style="width: 20px; height: 20px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-radio-button-unchecked"/>
</svg>
icon-remove <svg class="svg-icon" style="width: 14px; height: 2px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-remove"/>
</svg>
icon-search <svg class="svg-icon" style="width: 18px; height: 18px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-search"/>
</svg>
icon-social-facebook <svg class="svg-icon" style="width: 18px; height: 18px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-social-facebook"/>
</svg>
icon-social-instagram <svg class="svg-icon" style="width: 20px; height: 20px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-social-instagram"/>
</svg>
icon-social-linkedin <svg class="svg-icon" style="width: 16px; height: 16px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-social-linkedin"/>
</svg>
icon-social-twitter <svg class="svg-icon" style="width: 20px; height: 16px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-social-twitter"/>
</svg>
icon-social-youtube <svg class="svg-icon" style="width: 22px; height: 16px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-social-youtube"/>
</svg>
icon-suitcase <svg class="svg-icon" style="width: 32px; height: 22px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-suitcase"/>
</svg>
icon-ui <svg class="svg-icon" style="width: 18px; height: 18px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-ui"/>
</svg>
icon-union-checked <svg class="svg-icon" style="width: 20px; height: 20px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-union-checked"/>
</svg>
icon-upload <svg class="svg-icon" style="width: 14px; height: 17px;">
    <use xlink:href="../images/spritemap/spritemap.svg#icon-upload"/>
</svg>

1Used after '#' in the reference xlink:href="../images/spritemap/spritemap.svg#icon-id"

2The path to spritemap.svg should be adjusted according to the actual images folder address on the server.

Check out our new mobile app!
Download on the App Store Get it on Google Play