<!-- 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