Icons

Get vector icons and social logos on your website with Font Awesome, the web’s most popular icon set and toolkit. For this theme we used FontAwesome v5.6.3 and some custom icons

Font Awesome Icon Examples



                                        <i class="fab fa-dribbble"></i>
                                        <i class="fab fa-dribbble fa-2x"></i>
                                        <i class="fab fa-dribbble fa-3x"></i>
                                        <i class="fab fa-dribbble fa-4x"></i>
                                    

vAPP Icon Examples



                                        <span class="icon--2x">
                                            <i class="nc-icon nc-watch-circle"></i>
                                        </span>
                                        <span class="icon--3x">
                                            <i class="nc-icon nc-watch-circle"></i>
                                        </span>
                                        <span class="icon--4x">
                                            <i class="nc-icon nc-watch-circle"></i>
                                        </span>
                                    

Icon Options

Square Icons



                                        <span class="icon--lg bg-color--primary color-white rounded--8">
                                            <i class="nc-icon nc-touch-id"></i>
                                        </span>
                                        <span class="icon--md bg-color--primary color-white rounded--full">
                                            <i class="nc-icon nc-send"></i>
                                        </span>
                                    

Group Icons



                                        <ul class="icon-group icon-rounded">
                                            <li><a href="#" class="color-white"> <i class="fab fa-facebook-f"></i></a></li>
                                            <li><a href="#" class="color-white"><i class="fab fa-twitter"></i></a></li>
                                            <li><a href="#" class="color-white"><i class="fab fa-dribbble"></i></a></li>
                                        </ul>
                                    

Icon Sizes

Fill Icon Sizes



                                        <span class="icon--md bg-white rounded--full color--primary mx-10">
                                        <i class="fas fa-download color-primary"></i>
                                        </span>
                                        <!-- End of Medium Size Icon-->

                                        <span class="icon--lg bg-white rounded--full color--primary mx-10">
                                                <i class="fas fa-download color-primary"></i>
                                        </span>
                                        <!-- End of Large Size Icon-->

                                        <span class="icon--xl bg-white rounded--full color--primary mx-10">
                                                <i class="fas fa-download color-primary"></i>
                                        </span>
                                        <!-- End of Extra Large Size Icon-->
                                    

Transparent Icon Sizes



                                    <span class="color-white">
                                        <i class="nc-icon nc-touch-id"></i>
                                    </span>
                                    <!-- End of Icon 1x -->

                                    <span class="icon--2x color-white">
                                        <i class="nc-icon nc-touch-id"></i>
                                    </span>
                                    <!-- End of Icon 2x -->

                                    <span class="icon--3x color-white">
                                        <i class="nc-icon nc-touch-id"></i>
                                    </span>
                                    <!-- End of Icon 3x -->

                                    <span class="icon--4x color-white">
                                        <i class="nc-icon nc-touch-id"></i>
                                    </span>
                                    <!-- End of Icon 4x -->