<div class="mk-ip" id="mk-icon-picker">

        <div class="mk-ip-header">
            <div class="mk-ip-search">
                <span class="mk-ip-search-icon">
                    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="26px" height="26px" viewBox="0 0 26 26" style="enable-background:new 0 0 26 26;" xml:space="preserve"><g><path d="M10,3c3.9,0,7,3.1,7,7s-3.1,7-7,7s-7-3.1-7-7S6.1,3,10,3 M10,0C4.5,0,0,4.5,0,10c0,5.5,4.5,10,10,10c5.5,0,10-4.5,10-10C20,4.5,15.5,0,10,0L10,0z"/></g><g><rect x="18.5" y="13.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -8.3279 20.0097)" width="3" height="13.7"/></g></svg>
                </span>
                <input type="text" placeholder="Quick Search..." class="mk-ip-search-input"></input>
            </div>
            <a href="#" class="mk-ip-header-close-btn">
                <svg version="1.1" id="Layer_13" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="8 8 16 16" style="enable-background:new 8 8 16 16;" xml:space="preserve"><style type="text/css">.st0{fill:#bababa;}</style><g><path class="st0" d="M16,8c-4.4,0-8,3.6-8,8s3.6,8,8,8s8-3.6,8-8S20.4,8,16,8z M19.7,18.3c0.4,0.4,0.4,1,0,1.4C19.5,19.9,19.2,20,19,20s-0.5-0.1-0.7-0.3L16,17.4l-2.3,2.3C13.5,19.9,13.3,20,13,20s-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l2.3-2.3l-2.3-2.3c-0.4-0.4-0.4-1,0-1.4c0.4-0.4,1-0.4,1.4,0l2.3,2.3l2.3-2.3c0.4-0.4,1-0.4,1.4,0c0.4,0.4,0.4,1,0,1.4L17.4,16L19.7,18.3z"/></g></svg>
            </a>
        </div>
      
        <div class="mk-ip-main">
            <div class="mk-ip-bar mk-clearfix">
                <ul class="mk-ip-filter">
                    <li><a data-filter="all" class="mk-selected mk-ip-filter-all" href="#"><?php _e( 'All', 'mk_framework' ); ?></a></li>
                    <li><a data-filter="mk-moon" href="#"><?php _e( 'Icomoon', 'mk_framework' ); ?></a></li>
                    <li><a data-filter="mk-icon" href="#"><?php _e( 'Fontawesome', 'mk_framework' ); ?></a></li>
                    <li><a data-filter="mk-li" href="#"><?php _e( 'Line', 'mk_framework' ); ?></a></li>
                </ul>
                <div class="mk-ip-add-icon-wrap">
                    <a href="#" class="mk-ip-add-icon-btn">
                        <span class="mk-ip-add-icon-btn-txt">Add New Icon</span>
                        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="34px" height="34px" viewBox="0 0 34 34" style="enable-background:new 0 0 34 34;" xml:space="preserve"><style type="text/css">.st2{fill:#1ECD97;}.st3{fill:#FFFFFF;}</style><circle class="st2" cx="17" cy="17" r="17"/><path class="st3" d="M23,16h-5v-5c0-0.6-0.4-1-1-1s-1,0.4-1,1v5h-5c-0.6,0-1,0.4-1,1s0.4,1,1,1h5v5c0,0.6,0.4,1,1,1s1-0.4,1-1v-5h5c0.6,0,1-0.4,1-1S23.6,16,23,16z"/></svg>
                    </a>
                </div>
                <div class="mk-ip-lib-view">
                    <a class="mk-ip-lib-view-small" href="#">
                        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><style type="text/css">.st5{fill:#AAAAAA;}</style><g><rect class="st5" width="6" height="6"/></g><g><rect x="8" class="st5" width="6" height="6"/></g><g><rect x="16" class="st5" width="6" height="6"/></g><g><rect y="8" class="st5" width="6" height="6"/></g><g><rect x="8" y="8" class="st5" width="6" height="6"/></g><g><rect x="16" y="8" class="st5" width="6" height="6"/></g><g><rect y="16" class="st5" width="6" height="6"/></g><g><rect x="8" y="16" class="st5" width="6" height="6"/></g><g><rect x="16" y="16" class="st5" width="6" height="6"/></g></svg>
                    </a>
                    <a class="mk-selected mk-ip-lib-view-large" href="#">
                        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="22px" height="22px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve"><style type="text/css">.st4{fill:#AAAAAA;}</style><g><g><rect class="st4" width="10" height="10"/></g><g><rect x="12" class="st4" width="10" height="10"/></g><g><rect y="12" class="st4" width="10" height="10"/></g><g><rect x="12" y="12" class="st4" width="10" height="10"/></g></g></svg>
                    </a>
                </div>
            </div>
            <div class="mk-ip-lib-wrap">
                <ul class="mk-ip-lib mk-ip-lib-large mk-clearfix">
                
                </ul>
            </div>
        </div>

        <div class="mk-ip-footer mk-clearfix mka-wrap">
            <a class="mk-ip-cancel-btn mka-button mka-button--medium mka-button--gray" href="#">Cancel</a>
            <a class="mk-ip-save-btn mka-button mka-button--medium mka-button--green" href="#">Save</a>
            <span class="mk-ip-spinner"></span>
        </div>

    </div>