Icons

<div class="container">
    <div class="desc desc-line">Custom Icons</div>
    <div class="row">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="icon-tile ">
                <span class="sicon dark">
                    <svg version="1.1" id="icon-home" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 56 56" style="enable-background:new 0 0 56 56;" xml:space="preserve">
                        <g>
                            <path class="st2 st2-5" d="M46.4,23.3V8.8h-8.6v5.9L28,4.9l-26,26h7.6v20.2h36.8V30.9H54L46.4,23.3z" />
                        </g>
                    </svg>
                </span>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="icon-tile ">
                <span class="sicon dark">
                    <svg version="1.1" id="icon-products" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 56 65.6" style="enable-background:new 0 0 56 65.6;" xml:space="preserve">
                        <g>
                            <path class="st0" d="M34.3,62.8c-0.5,0-1-0.4-1.1-0.9c-0.1-0.8-0.7-6.4,0.6-10.6L30.4,53c-0.5,0.2-1,0.1-1.3-0.3
                                c-3.6-5-5.8-10.9-6.3-17.1c-3.2,4.2-9.1,14.1-4.2,25.6c0.2,0.5,0,1.2-0.6,1.4c-0.3,0.1-0.7,0.1-1.1-0.1
                                C16.7,62.5,2.4,51.8,6.4,36.9c1.8-6.5,5.1-12.2,8.1-17.2c3.6-6.1,6.6-11.3,5.6-15.7c-0.1-0.6,0.2-1.2,0.8-1.3
                                c0.3-0.1,0.6,0,0.8,0.1C21.9,3.1,42,16.5,35.8,38.6c3.3-4.5,7.3-11,5.9-15.7c-0.2-0.6,0.2-1.2,0.7-1.3c0.5-0.2,1.1,0.1,1.3,0.6
                                c0.1,0.2,9.8,24.8-8.8,40.3C34.8,62.7,34.6,62.8,34.3,62.8 M36.7,47.4c0.6,0,1.1,0.5,1.1,1.1c0,0.3-0.1,0.6-0.4,0.8
                                c-2.1,1.8-2.3,6.8-2.2,10.2c10.3-9.8,9.7-22.9,8.3-30.4c-2.3,7.7-9.8,15.6-10.2,16c-0.4,0.4-1.1,0.4-1.5,0
                                c-0.3-0.3-0.4-0.8-0.2-1.2c9.5-19.8-3.9-33.4-9.1-37.7c-0.1,4.5-2.9,9.3-6.1,14.7c-2.9,4.9-6.1,10.5-7.8,16.7
                                c-2.5,9.3,3,16.9,6.7,20.7c-3.6-14.7,7.7-26,7.8-26.2c0.4-0.4,1.1-0.4,1.5,0c0.2,0.2,0.3,0.5,0.3,0.8c-0.4,8.4,3.9,15.6,5.4,17.9
                                l6-3.2C36.3,47.5,36.5,47.4,36.7,47.4" />
                        </g>
                    </svg>
                </span>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="icon-tile ">
                <span class="sicon dark">
                    <svg version="1.1" id="icon-company" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 56 65.6" style="enable-background:new 0 0 56 65.6;" xml:space="preserve">
                        <g>
                            <path class="st0" d="M28,56.1h-6.8v-7.2c0-0.6-0.5-1-1.1-0.9c0,0,0,0,0,0H16c-0.5,0-0.9,0.3-0.9,0.8
                                c0,0,0,0.1,0,0.1v7.2H7.4V9.4H28V56.1z M19.2,56.1h-2V50h2V56.1z M48,56.1H30V8.4c0-0.6-0.4-1-1-1.1H6.4c-0.6,0-1.1,0.5-1.1,1.1
                                v47.7H1.9c-0.6,0-1,0.5-1,1s0.5,1,1,1h52.1c0.6,0,1-0.5,1-1s-0.5-1-1-1H50V20.8c0-0.5-0.5-1-1-0.9c0,0,0,0,0,0H33.5
                                c-0.6,0-1,0.5-1,1s0.5,1,1,1H48L48,56.1z" />
                            <rect x="17" y="19.8" class="st0" width="2.7" height="3.4" />
                            <rect x="23.1" y="19.8" class="st0" width="2.7" height="3.4" />
                            <rect x="10.7" y="19.8" class="st0" width="2.7" height="3.4" />
                            <rect x="17" y="13.9" class="st0" width="2.7" height="3.4" />
                            <rect x="23.1" y="13.9" class="st0" width="2.7" height="3.4" />
                            <rect x="10.7" y="13.9" class="st0" width="2.7" height="3.4" />
                            <rect x="17" y="25.6" class="st0" width="2.7" height="3.4" />
                            <rect x="23.1" y="25.6" class="st0" width="2.7" height="3.4" />
                            <rect x="10.7" y="25.6" class="st0" width="2.7" height="3.4" />
                            <rect x="40.8" y="27" class="st0" width="2.9" height="3.4" />
                            <rect x="34.7" y="27" class="st0" width="2.7" height="3.4" />
                            <rect x="40.8" y="38.6" class="st0" width="2.9" height="3.4" />
                            <rect x="34.7" y="38.6" class="st0" width="2.7" height="3.4" />
                            <rect x="40.8" y="32.7" class="st0" width="2.9" height="3.4" />
                            <rect x="34.7" y="32.7" class="st0" width="2.7" height="3.4" />
                            <rect x="40.8" y="44.2" class="st0" width="2.9" height="3.6" />
                            <rect x="34.7" y="44.2" class="st0" width="2.7" height="3.6" />
                            <rect x="17" y="31.3" class="st0" width="2.7" height="3.4" />
                            <rect x="23.1" y="31.3" class="st0" width="2.7" height="3.4" />
                            <rect x="10.7" y="31.3" class="st0" width="2.7" height="3.4" />
                            <rect x="17" y="42.9" class="st0" width="2.7" height="3.6" />
                            <rect x="23.1" y="42.9" class="st0" width="2.7" height="3.6" />
                            <rect x="10.7" y="42.9" class="st0" width="2.7" height="3.6" />
                            <rect x="17" y="37.2" class="st0" width="2.7" height="3.4" />
                            <rect x="23.1" y="37.2" class="st0" width="2.7" height="3.4" />
                            <rect x="10.7" y="37.2" class="st0" width="2.7" height="3.4" />
                        </g>
                    </svg>
                </span>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="icon-tile ">
                <span class="sicon dark">
                    <svg version="1.1" id="icon-service" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 56 65.6" style="enable-background:new 0 0 56 65.6;" xml:space="preserve">
                        <g>
                            <path class="st2" d="M22.7,58.7c0.7-0.9,1.4-1.8,2.1-2.6c0.7-1,1.4-1.9,2.1-2.6c1.3,0.1,2.6,0,3.8-0.1
                                c0.8,0.7,1.6,1.7,2.6,2.7c0.7,0.7,1.3,1.5,2.1,2.2c0.1,0.2,0.4,0.2,0.6,0.1c2.2-0.7,4.3-1.7,6.3-2.9c0.2-0.1,0.3-0.3,0.3-0.5
                                c-0.1-1.1-0.2-2.1-0.3-3c-0.2-1.3-0.3-2.6-0.3-3.7c1-0.9,1.8-1.8,2.6-2.8c1,0,2.1,0,3.3,0.1c1.1,0.1,2.2,0.1,3.4,0.2
                                c0.2,0,0.4-0.1,0.5-0.3c1.1-2.2,1.9-4.4,2.5-6.8c0-0.2,0-0.4-0.2-0.6c-0.9-0.7-1.8-1.4-2.6-2.1c-1-0.7-1.9-1.4-2.6-2.1
                                c0.1-1.3,0-2.6-0.1-3.8c0.7-0.8,1.7-1.7,2.7-2.6c0.7-0.7,1.5-1.3,2.2-2.1c0.2-0.1,0.2-0.4,0.1-0.6c-0.7-2.2-1.7-4.3-2.9-6.4
                                c-0.1-0.2-0.3-0.3-0.5-0.3c-1.1,0.1-2.1,0.2-3,0.3c-1.3,0.2-2.6,0.3-3.7,0.3c-0.9-1-1.8-1.8-2.8-2.6c0-1,0-2.1,0.1-3.4
                                c0.1-1.1,0.1-2.2,0.2-3.3c0-0.2-0.1-0.4-0.3-0.5c-2.2-1.1-4.4-1.9-6.8-2.5c-0.2,0-0.4,0-0.6,0.2c-0.7,0.9-1.4,1.8-2.1,2.6
                                c-0.7,1-1.4,1.9-2.1,2.6c-1.3-0.1-2.6,0-3.8,0.1c-0.8-0.7-1.6-1.7-2.5-2.7c-0.7-0.7-1.4-1.5-2.1-2.2c-0.1-0.2-0.4-0.2-0.6-0.1
                                c-2.2,0.7-4.3,1.7-6.4,2.9c-0.2,0.1-0.3,0.3-0.3,0.5c0.1,1,0.2,2,0.3,3c0.2,1.4,0.3,2.6,0.3,3.7c-1,0.9-1.8,1.8-2.6,2.8
                                c-1,0-2.1,0-3.4-0.1c-1.1-0.1-2.2-0.1-3.3-0.2c-0.2,0-0.4,0.1-0.5,0.3c-1.1,2.2-1.9,4.4-2.5,6.8c0,0.2,0,0.4,0.2,0.6
                                c0.9,0.8,1.8,1.4,2.7,2.1c1,0.7,1.9,1.4,2.6,2.1c-0.1,1.3,0,2.6,0.1,3.8c-0.7,0.8-1.7,1.6-2.7,2.5c-0.7,0.7-1.5,1.4-2.2,2.1
                                c-0.2,0.1-0.2,0.4-0.1,0.6C3.1,42.9,4.1,45,5.3,47c0.1,0.2,0.3,0.3,0.5,0.3c1-0.1,2-0.2,3-0.3c1.4-0.2,2.6-0.3,3.7-0.3
                                c0.9,1,1.8,1.8,2.8,2.6c0,1,0,2.1-0.1,3.4c-0.1,1.1-0.1,2.2-0.2,3.3c0,0.2,0.1,0.4,0.3,0.5c2.2,1.1,4.4,1.9,6.8,2.5
                                C22.3,59,22.5,58.9,22.7,58.7z M33.4,44.6c-6.5,3-14.2,0.1-17.2-6.4c-3-6.5-0.1-14.2,6.4-17.2s14.2-0.1,17.2,6.4c0,0,0,0,0,0
                                C42.7,33.9,39.9,41.6,33.4,44.6z" />
                        </g>
                    </svg>
                </span>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="icon-tile ">
                <span class="sicon dark">
                    <svg version="1.1" id="icon-contact" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 57.9 44.7" style="enable-background:new 0 0 57.9 44.7;" xml:space="preserve">
                        <g>
                            <path class="st0" d="M53.7,8.7H38.8v2.2h14.9c1.1,0,2.1,0.9,2.1,2.1v19.5c0,1.1-0.9,2.1-2.1,2.1h-6.3v7.1L39,34.4
                                H26.5c-1.1,0-2.1-0.9-2.1-2.1V30h-2.2v2.4c0,2.3,1.9,4.2,4.2,4.2h11.7l9.3,7.8c0.6,0.5,1.4,0.4,1.8-0.2c0.2-0.2,0.3-0.5,0.3-0.8
                                v-6.8h4.1c2.3,0,4.2-1.9,4.2-4.2V12.9C57.9,10.6,56,8.7,53.7,8.7" />
                            <path class="st0" d="M9.1,36c-0.7,0-1.3-0.6-1.3-1.3v-6.8H4.2C1.9,27.9,0,26,0,23.7V4.2C0,1.9,1.9,0,4.2,0h28.3
                                c2.3,0,4.2,1.9,4.2,4.2v19.5c0,2.3-1.9,4.2-4.2,4.2H19.2L10,35.7C9.7,35.9,9.4,36,9.1,36 M4.2,2.2c-1.1,0-2.1,0.9-2.1,2.1v19.5
                                c0,1.1,0.9,2.1,2.1,2.1H10v7.1l8.5-7.1h14c1.1,0,2.1-0.9,2.1-2.1V4.2c0-1.1-0.9-2.1-2.1-2.1L4.2,2.2z" />
                            <path class="st0" d="M18.4,18.9c-0.5,0-0.9-0.2-1.3-0.5L4,6.2C3.6,5.8,3.5,5.1,4,4.7C4.4,4.3,5,4.2,5.5,4.6l12.9,12
                                l12.9-12c0.4-0.4,1.1-0.4,1.5,0.1c0.4,0.4,0.4,1.1-0.1,1.5l0,0l-13,12.2C19.3,18.7,18.8,18.9,18.4,18.9" />
                        </g>
                    </svg>
                </span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="icon-tile">
                <span class="sicon social">
                    <svg version="1.1" id="icon-facebook" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 56 56" style="enable-background:new 0 0 56 56;" xml:space="preserve">
                        <path class="st1 st1-5" d="M24.9,42.7c0-0.1,0-0.1,0-0.2V29.3h-4.3c-0.2,0-0.2,0-0.2-0.2v-4.9c0-0.1,0-0.2,0.2-0.2
                        c1.4,0,2.8,0,4.1,0h0.2v-0.2c0-1.3,0-2.7,0-4c0-1.1,0.2-2.1,0.7-3.1c0.6-1.3,1.7-2.3,3-2.9c0.9-0.4,1.9-0.6,2.9-0.5
                        c1.1,0,2.3,0.1,3.4,0.1c0.2,0,0.4,0,0.6,0.1c0.1,0,0.2,0,0.2,0.2v4.4c0,0.1,0,0.2-0.2,0.2c-0.9,0-1.7,0-2.6,0
                        c-0.4,0-0.8,0.1-1.2,0.1c-0.7,0.1-1.2,0.7-1.3,1.4c-0.1,0.3-0.1,0.6-0.1,0.9c0,1.1,0,2.2,0,3.3c0,0,0,0.1,0,0.1h4.9
                        c0.2,0,0.2,0,0.2,0.2c-0.1,0.9-0.2,1.7-0.3,2.6c-0.1,0.7-0.2,1.4-0.3,2.2c0,0.3,0,0.3-0.3,0.3h-4.2v13.4H24.9z" />
                    </svg>
                </span>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="icon-tile">
                <span class="sicon social">
                    <svg version="1.1" id="icon-instagram" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 56 56" style="enable-background:new 0 0 56 56;" xml:space="preserve">
                        <g>
                            <path class="st0" d="M33.4,41.4H22.6c-4.2,0-7.6-3.4-7.6-7.6V22.2c0-4.2,3.4-7.6,7.6-7.6h10.9c4.2,0,7.6,3.4,7.6,7.6
                                v11.6C41,38,37.6,41.4,33.4,41.4 M33.4,40c3.4,0.1,6.3-2.7,6.3-6.1c0,0,0,0,0,0V22.2c0-2.7-2.6-6.4-6.3-6.4H22.6
                                c-3.5,0.1-6.3,2.9-6.3,6.4v11.6c0,3.4,2.7,6.1,6.1,6.2c0.1,0,0.2,0,0.2,0L33.4,40z" />
                            <path class="st0" d="M35.2,27.9c0,4-3.2,7.2-7.2,7.2s-7.2-3.2-7.2-7.2c0-4,3.2-7.2,7.2-7.2
                                C32,20.7,35.2,23.9,35.2,27.9 M28,21.9c-3.3,0.1-5.9,2.7-5.9,6c-0.1,3.2,2.4,5.9,5.6,6c0.1,0,0.2,0,0.3,0c3.2,0.1,5.9-2.3,6-5.5
                                c0-0.2,0-0.3,0-0.5c0.1-3.2-2.5-5.9-5.7-6C28.2,21.9,28.1,21.9,28,21.9L28,21.9L28,21.9z" />
                            <path class="st3" d="M35.3,18.9c0.9,0,1.7,0.8,1.7,1.7s-0.8,1.7-1.7,1.7s-1.7-0.8-1.7-1.7S34.4,18.9,35.3,18.9
                                C35.3,18.9,35.3,18.9,35.3,18.9z" />
                        </g>
                    </svg>
                </span>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="icon-tile">
                <span class="sicon social">
                    <svg version="1.1" id="icon-houzz" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 56 56" style="enable-background:new 0 0 56 56;" xml:space="preserve">
                        <path class="st1 st1-3" d="M18.9,18.1h4.9v5.4l13.3,3.3v11.2h-6.3v-6.3h-5.4v6.3h-6.5V18.1z" />
                    </svg>
                </span>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="icon-tile">
                <span class="sicon social">
                    <svg version="1.1" id="icon-youtube" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 56 56" style="enable-background:new 0 0 56 56;" xml:space="preserve">
                        <path class="st1" d="M27.7,39.4c-3.6,0-7.2,0.1-10.8,0c-3.7-0.1-5.4-1.7-5.5-5.3c-0.2-4.1-0.2-8.3,0-12.4
                            c0.2-3.5,1.7-5.2,5.2-5.3c7-0.2,14.1-0.1,21.1,0c4.9,0.1,6.3,1.7,6.5,6.7c0.1,3.4,0.2,6.9,0,10.3c-0.2,4.4-1.9,5.9-6.3,6.1
                            c-1,0-1.9,0-2.9,0C32.4,39.4,30.1,39.4,27.7,39.4L27.7,39.4z M24.3,23.5v8.8l8.6-4.6C30.1,26.2,24.7,23.6,24.3,23.5z" />
                    </svg>
                </span>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="desc desc-line">Font-Awesome Icons</div>
    <div class="row">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="icon-tile ">
                <i class="fal fa-bars fa-2x"></i><br>
                <code>fal fa-bars</code><br>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="icon-tile ">
                <i class="fal fa-search fa-2x"></i><br>
                <code>fal fa-search</code><br>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="icon-tile ">
                <i class="fal fa-comment fa-2x"></i><br>
                <code>fal fa-comment</code><br>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="icon-tile ">
                <i class="fal fa-globe-stand fa-2x"></i><br>
                <code>fal fa-globe-stand</code><br>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="icon-tile ">
                <i class="far fa-long-arrow-left fa-2x"></i><br>
                <code>far fa-long-arrow-left</code><br>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="icon-tile ">
                <i class="far fa-long-arrow-right fa-2x"></i><br>
                <code>far fa-long-arrow-right</code><br>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="icon-tile ">
                <i class="far fa-long-arrow-up fa-2x"></i><br>
                <code>far fa-long-arrow-up</code><br>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="icon-tile ">
                <i class="far fa-long-arrow-down fa-2x"></i><br>
                <code>far fa-long-arrow-down</code><br>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="icon-tile ">
                <i class="fal fa-times fa-2x"></i><br>
                <code>fal fa-times</code><br>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="icon-tile ">
                <i class="far fa-check fa-2x"></i><br>
                <code>far fa-check</code><br>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="icon-tile ">
                <i class="fal fa-clock fa-2x"></i><br>
                <code>fal fa-clock</code><br>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="icon-tile ">
                <i class="fal fa-phone-rotary fa-2x"></i><br>
                <code>fal fa-phone-rotary</code><br>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="icon-tile ">
                <i class="fal fa-eye-slash fa-2x"></i><br>
                <code>fal fa-eye-slash</code><br>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="icon-tile ">
                <i class="fal fa-eye fa-2x"></i><br>
                <code>fal fa-eye</code><br>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="icon-tile ">
                <i class="fal fa-envelope fa-2x"></i><br>
                <code>fal fa-envelope</code><br>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="icon-tile ">
                <i class="fal fa-envelope-open-text fa-2x"></i><br>
                <code>fal fa-envelope-open-text</code><br>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="icon-tile ">
                <i class="fal fa-inbox-in fa-2x"></i><br>
                <code>fal fa-inbox-in</code><br>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="icon-tile ">
                <i class="fal fa-mail-bulk fa-2x"></i><br>
                <code>fal fa-mail-bulk</code><br>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="icon-tile ">
                <i class="fal fa-location fa-2x"></i><br>
                <code>fal fa-location</code><br>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="icon-tile ">
                <i class="fal fa-map-marker-alt fa-2x"></i><br>
                <code>fal fa-map-marker-alt</code><br>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="icon-tile ">
                <i class="fal fa-toggle-on fa-2x"></i><br>
                <code>fal fa-toggle-on</code><br>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="icon-tile ">
                <i class="fal fa-toggle-off fa-2x"></i><br>
                <code>fal fa-toggle-off</code><br>
            </div>
        </div>
    </div>
</div>

<style>
    .icon-tile {
        background-color: #f2f2f2;
        margin-bottom: 1em;
        padding: 1em;
        text-align: center;
    }

    .dark .icon-tile {
        background-color: #2a3a42;
        color: #fff;
    }

    code {
        font-size: 11px;
        line-height: 1;
    }
</style>