<!-- icon -->
        <i class="square-icon ti-search"></i>
        <i class="round-icon ti-search"></i>

        <!-- social icon -->
        <a class="social-icon-lg bg-facebook" href="#">
            <i class="ti-facebook"></i>
        </a>
        <a class="social-icon-lg bg-twitter" href="#">
            <i class="ti-twitter-alt"></i>
        </a>
        <a class="social-icon-lg bg-linkedin" href="#">
            <i class="ti-linkedin"></i>
        </a>
        <a class="social-icon-lg bg-google" href="#">
            <i class="ti-google"></i>
        </a>

        <!-- social icon outline -->
        <a class="social-icon-outline" href="#">
            <i class="ti-facebook"></i>
        </a>
        <a class="social-icon-outline" href="#">
            <i class="ti-twitter-alt"></i>
        </a>
        <a class="social-icon-outline" href="#">
            <i class="ti-vimeo-alt"></i>
        </a>
        <a class="social-icon-outline" href="#">
            <i class="ti-linkedin"></i>
        </a>

                                

How to Use

Use any icon (here uses Themefy icon) into an < i > element

Add .square-icon class for square icon

Add .round-icon class for round icon

For social icon add an .social-icon-lg class in < i > tag

For social icon outline add an .social-icon-outline class in < i > tag