Компонент Иконка

<ul class="as-social uk-grid-small uk-flex-middle" data-uk-grid>

    <li>
        <a class="as-icon-facebook uk-icon-button" href="https://www.facebook.com/#" data-uk-icon="icon: facebook" title="Facebook"></a>
    </li>
    <li>
        <a class="as-icon-youtube uk-icon-button" href="https://www.youtube.com/#" data-uk-icon="icon: youtube" title="YouTube"></a>
    </li>
    <li>
        <a class="as-icon-instagram uk-icon-button" href="https://www.instagram.com/#" data-uk-icon="icon: instagram" title="Instagram"></a>
    </li>
    <li>
        <a class="as-icon-twitter uk-icon-button" href="https://www.twitter.com/#" data-uk-icon="icon: x" title="X (Twitter)"></a>
    </li>
    <li>
        <a class="as-icon-vk uk-icon uk-icon-button" href="https://www.vk.com/#" 
           rel="noopener noreferrer" title="ВКонтакте">
            <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-svg="vk">
                <path d="M21.54736,7H18.25688a.74281.74281,0,0,0-.65452.39156s-1.31237,2.41693-1.73392,3.231C14.73438,12.8125,14,12.125,14,11.10863V7.60417A1.10417,1.10417,0,0,0,12.89583,6.5h-2.474a1.9818,1.9818,0,0,0-1.751.8125s1.25626-.20312,1.25626,1.48958c0,.41974.02162,1.62723.04132,2.64a.72943.72943,0,0,1-1.273.50431,21.54029,21.54029,0,0,1-2.4982-4.54359A.69314.69314,0,0,0,5.5668,7C4.8532,7,3.42522,7,2.57719,7a.508.508,0,0,0-.47969.68481C3.00529,10.17487,6.91576,18,11.37917,18h1.87865A.74219.74219,0,0,0,14,17.25781V16.12342a.7293.7293,0,0,1,1.22868-.5315l2.24861,2.1127A1.08911,1.08911,0,0,0,18.223,18h2.95281c1.42415,0,1.42415-.98824.64768-1.75294-.54645-.53817-2.51832-2.61663-2.51832-2.61663A1.01862,1.01862,0,0,1,19.2268,12.307c.63737-.83876,1.67988-2.21175,2.122-2.79993C21.95313,8.70313,23.04688,7,21.54736,7Z"></path>
            </svg>
        </a>
    </li>
    <li>
        <a class="as-icon-odnoklassniki uk-icon uk-icon-button" href="https://ok.ru/#" 
           rel="noopener noreferrer" title="Одноклассники">
            <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-svg="odnoklassniki">
                <path d="m12.030686,12.146098c2.617032,0 4.738255,-2.121548 4.738255,-4.738643c0,-2.61703 -2.121223,-4.738643 -4.738255,-4.738643c-2.61742,0 -4.738643,2.121613 -4.738643,4.738643c0,2.61703 2.121223,4.738643 4.738643,4.738643zm0,-7.069845c1.287235,0 2.331205,1.043574 2.331205,2.331202c0,1.287628 -1.04397,2.331203 -2.331205,2.331203c-1.287628,0 -2.331592,-1.043575 -2.331592,-2.331203c0,-1.287628 1.043964,-2.331202 2.331592,-2.331202z"></path>
                <path d="m15.49965,12.515539c-1.331227,1.048992 -3.468964,1.048992 -3.468964,1.048992c0,0 -2.138188,0 -3.469224,-1.048992c-0.984829,-0.775827 -1.725739,-0.328972 -1.993223,0.208807c-0.466369,0.936789 0.060443,1.389713 1.249836,2.153009c1.015895,0.652266 2.411484,0.895928 3.312705,0.986918l-0.752527,0.752394c-1.05976,1.05937 -2.082579,2.082449 -2.792156,2.792156c-0.424403,0.42414 -0.424403,1.112567 0,1.536642l0.128,0.127934c0.42453,0.424401 1.112435,0.424401 1.536572,0l2.79255,-2.792091c1.05976,1.059697 2.082579,2.082515 2.792156,2.792091c0.424403,0.424401 1.112308,0.424401 1.536839,0l0.128,-0.127934c0.424137,-0.424727 0.424137,-1.112502 0,-1.536642l-2.792746,-2.792548l-0.754611,-0.754614c0.902066,-0.092686 2.2829,-0.337458 3.289985,-0.984372c1.189202,-0.763295 1.716338,-1.21622 1.249836,-2.153009c-0.267351,-0.537648 -1.008718,-0.984569 -1.993026,-0.208741z"></path>
            </svg>
        </a>
    </li>
    <li>
        <a class="as-icon-whatsapp uk-icon-button" href="https://wa.me/0123456789" 
           target="_blank" rel="nofollow" data-uk-icon="icon: whatsapp" title="WhatsApp"></a>
    </li>
    <li>
        <a class="as-icon-viber uk-icon uk-icon-button" href="viber://chat?number=%2B90123456789" 
           target="_blank" rel="nofollow" title="Viber">
           <svg width="22" height="22" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" data-svg="viber">
           	   <path d="M15.198 0.005c-2.568 0.031-8.089 0.453-11.177 3.286-2.297 2.276-3.099 5.641-3.193 9.802-0.078 4.146-0.172 11.932 7.333 14.052v3.229c0 0-0.047 1.292 0.807 1.557 1.052 0.333 1.651-0.661 2.651-1.729l1.865-2.109c5.135 0.427 9.068-0.557 9.521-0.703 1.042-0.333 6.911-1.083 7.87-8.87 0.984-8.042-0.479-13.109-3.12-15.401h-0.016c-0.797-0.734-4-3.068-11.156-3.094 0 0-0.531-0.036-1.385-0.021zM15.286 2.266c0.729-0.005 1.172 0.026 1.172 0.026 6.057 0.016 8.948 1.839 9.63 2.453 2.224 1.906 3.37 6.474 2.531 13.188-0.797 6.51-5.557 6.922-6.438 7.203-0.375 0.12-3.839 0.974-8.203 0.693 0 0-3.25 3.922-4.266 4.932-0.161 0.177-0.349 0.229-0.469 0.203-0.172-0.042-0.224-0.255-0.214-0.547l0.031-5.359c-6.365-1.76-5.99-8.401-5.922-11.87 0.078-3.469 0.729-6.307 2.667-8.229 2.609-2.359 7.297-2.677 9.479-2.693zM15.766 5.734c-0.219-0.005-0.401 0.177-0.401 0.396 0 0.224 0.182 0.401 0.401 0.401 2.005-0.036 3.938 0.724 5.375 2.12 1.453 1.411 2.161 3.307 2.188 5.786 0 0.219 0.177 0.401 0.401 0.401v-0.016c0.219 0 0.401-0.177 0.401-0.396 0.099-2.359-0.776-4.651-2.417-6.349-1.583-1.547-3.589-2.344-5.948-2.344zM10.495 6.651c-0.281-0.042-0.573 0.016-0.818 0.161h-0.021c-0.542 0.318-1.047 0.719-1.526 1.255-0.365 0.422-0.563 0.849-0.615 1.26-0.031 0.245-0.010 0.49 0.063 0.724l0.026 0.016c0.411 1.208 0.948 2.37 1.604 3.464 0.844 1.536 1.885 2.958 3.094 4.229l0.036 0.052 0.057 0.042 0.036 0.042 0.042 0.036c1.276 1.214 2.698 2.255 4.24 3.109 1.76 0.958 2.828 1.411 3.469 1.599v0.010c0.188 0.057 0.359 0.083 0.531 0.083 0.547-0.042 1.063-0.26 1.469-0.63 0.521-0.469 0.932-0.984 1.24-1.531v-0.010c0.307-0.578 0.203-1.125-0.24-1.495-0.885-0.776-1.849-1.464-2.865-2.057-0.682-0.37-1.375-0.146-1.656 0.229l-0.599 0.755c-0.307 0.375-0.865 0.323-0.865 0.323l-0.016 0.010c-4.161-1.063-5.271-5.276-5.271-5.276s-0.052-0.573 0.333-0.865l0.75-0.604c0.359-0.292 0.609-0.984 0.224-1.667-0.589-1.021-1.276-1.979-2.052-2.865-0.167-0.208-0.406-0.349-0.672-0.401zM16.458 7.839c-0.531 0-0.531 0.802 0.005 0.802 1.333 0.021 2.604 0.573 3.531 1.531 0.844 0.932 1.281 2.172 1.198 3.427 0.005 0.219 0.182 0.396 0.401 0.396l0.016 0.021c0.219 0 0.401-0.182 0.401-0.401 0.036-1.589-0.458-2.922-1.427-3.99-0.974-1.068-2.333-1.667-4.068-1.786-0.021 0-0.036 0-0.057 0zM17.115 9.995c-0.547-0.016-0.568 0.802-0.026 0.818 1.318 0.068 1.958 0.734 2.042 2.104 0.005 0.219 0.182 0.391 0.396 0.391h0.016c0.224-0.010 0.401-0.203 0.385-0.427-0.094-1.786-1.068-2.792-2.797-2.885-0.005 0-0.010 0-0.016 0z"/>
           </svg>
       </a>
    </li>
    <li>
        <a class="as-icon-telegram uk-icon uk-icon-button" href="https://t.me/username" 
           target="_blank" rel="nofollow" title="Telegram">
           <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-svg="telegram">
               <path d="m21.005697,5.550602l-2.74611,12.950637c-0.207176,0.914021 -0.74748,1.141452 -1.515294,0.710964l-4.184146,-3.083356l-2.018885,1.941824c-0.223392,0.223392 -0.775524,0.536686 -0.751124,-0.033221l0.21082,-3.817906l7.754913,-7.007478c0.337166,-0.300579 -0.073103,-0.467156 -0.524051,-0.16655l-9.586957,6.036571l-4.127295,-1.291786c-0.897769,-0.280315 -0.913985,-0.897805 0.186841,-1.328373l16.143532,-6.219364c0.747399,-0.280279 1.401485,0.166506 1.157757,1.308038z"></path>
           </svg>
        </a>
    </li>
    <li>
        <a class="as-icon-telegram uk-icon uk-icon-button" href="https://t.me/username" data-uk-icon="icon: telegram" target="_blank" rel="nofollow" title="Telegram"></a>
    </li>
    <li>
        <a class="as-icon-skype uk-icon uk-icon-button" href="skype:username?chat" 
           target="_blank" rel="nofollow" title="Skype">
           <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-svg="skype">
               <path d="M10.113,2.699c0.033-0.006,0.067-0.013,0.1-0.02c0.033,0.017,0.066,0.033,0.098,0.051L10.113,2.699z M2.72,10.223 c-0.006,0.034-0.011,0.069-0.017,0.103c0.018,0.032,0.033,0.064,0.051,0.095L2.72,10.223z M21.275,13.771 c0.007-0.035,0.011-0.071,0.018-0.106c-0.018-0.031-0.033-0.064-0.052-0.095L21.275,13.771z M13.563,21.199 c0.032,0.019,0.065,0.035,0.096,0.053c0.036-0.006,0.071-0.011,0.105-0.017L13.563,21.199z M22,16.386 c0,1.494-0.581,2.898-1.637,3.953c-1.056,1.057-2.459,1.637-3.953,1.637c-0.967,0-1.914-0.251-2.75-0.725 c0.036-0.006,0.071-0.011,0.105-0.017l-0.202-0.035c0.032,0.019,0.065,0.035,0.096,0.053c-0.543,0.096-1.099,0.147-1.654,0.147 c-1.275,0-2.512-0.25-3.676-0.743c-1.125-0.474-2.135-1.156-3.002-2.023c-0.867-0.867-1.548-1.877-2.023-3.002 c-0.493-1.164-0.743-2.401-0.743-3.676c0-0.546,0.049-1.093,0.142-1.628c0.018,0.032,0.033,0.064,0.051,0.095L2.72,10.223 c-0.006,0.034-0.011,0.069-0.017,0.103C2.244,9.5,2,8.566,2,7.615c0-1.493,0.582-2.898,1.637-3.953 c1.056-1.056,2.46-1.638,3.953-1.638c0.915,0,1.818,0.228,2.622,0.655c-0.033,0.007-0.067,0.013-0.1,0.02l0.199,0.031 c-0.032-0.018-0.066-0.034-0.098-0.051c0.002,0,0.003-0.001,0.004-0.001c0.586-0.112,1.187-0.169,1.788-0.169 c1.275,0,2.512,0.249,3.676,0.742c1.124,0.476,2.135,1.156,3.002,2.024c0.868,0.867,1.548,1.877,2.024,3.002 c0.493,1.164,0.743,2.401,0.743,3.676c0,0.575-0.054,1.15-0.157,1.712c-0.018-0.031-0.033-0.064-0.052-0.095l0.034,0.201 c0.007-0.035,0.011-0.071,0.018-0.106C21.754,14.494,22,15.432,22,16.386z M16.817,14.138c0-1.331-0.613-2.743-3.033-3.282 l-2.209-0.49c-0.84-0.192-1.807-0.444-1.807-1.237c0-0.794,0.679-1.348,1.903-1.348c2.468,0,2.243,1.696,3.468,1.696 c0.645,0,1.209-0.379,1.209-1.031c0-1.521-2.435-2.663-4.5-2.663c-2.242,0-4.63,0.952-4.63,3.488c0,1.221,0.436,2.521,2.839,3.123 l2.984,0.745c0.903,0.223,1.129,0.731,1.129,1.189c0,0.762-0.758,1.507-2.129,1.507c-2.679,0-2.307-2.062-3.743-2.062 c-0.645,0-1.113,0.444-1.113,1.078c0,1.236,1.501,2.886,4.856,2.886C15.236,17.737,16.817,16.199,16.817,14.138z"></path>
           </svg>
        </a>
    </li>

</ul>
<style>
    .as-social [class*=as-icon-]{color:#fff;background-color:#1e87f0;border-radius:50%;transition-property:border-radius,background-color;}
    .as-icon-facebook:hover{background-color:#3B5999}
    .as-icon-youtube:hover{background-color:#FF0000}
    .as-icon-instagram:hover{background-color:#DB307F}
    .as-icon-twitter:hover{background-color:#3FACE2}
    .as-icon-vk:hover{background-color:#5181B8}
    .as-icon-odnoklassniki:hover{background-color:#F58220}
    .as-icon-whatsapp:hover{background-color:#3EE25B}
    .as-icon-viber:hover{background-color:#7B519D}
    .as-icon-telegram:hover{background-color:#24A1DE}
    .as-icon-telegram:hover{background-color:#0078CA}
    [class*=as-icon-]:hover{color:#fff;border-radius:6px}
</style>