Exclusive SVG Set

Guidance and suggestions for using our exclusive SVG set of icon libraries.


Front icons are designed exclusively designed on top of premium icon set to make Front pages unique, which means that these icons are only available in the Front Template. This set of icons include more than 60 customized icons and counting.

Icons can be found in assets/svg/icons/

How to use?

Copy-paste the following <script>s near the end of your pages under JS Implementing Plugins to enable them.

                  <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

Copy-paste the following <script> near the end of your pages under JS Front to enable it.

                  <script src="../../assets/js/components/hs.svg-injector.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

                    $(document).on('ready', function () {
                      // initialization of svg injector module

There are two ways to use SVG icons in Front:

1. Traditional way

Pros - Fast loading

Cons - Colors must be modified with Illustrator tools

                  <img src="../../assets/svg/icons/icon-1.svg" alt="SVG">

2. Through Embedded JavaScript

Pros - Colors can be controlled via variables

Cons - Uses JavaScript

                  <figure id="embedIcon" class="svg-preloader">
                    <img class="js-svg-injector" src="../../assets/svg/icons/icon-1.svg" alt="SVG" data-parent="#embedIcon">

Front follows the second method as it gives more flexibility when modifying the colors.

Contact Us