Документация для разработчиков

Список иконок

Внимание! В новых версиях Библиотеки интерфейсов некоторые иконки могут отсутствовать.

  • Иконки КорпПортала
  • Иконки сервисов
  • Иконки диска

  • Иконки КорпПортала


    \Bitrix\Main\UI\Extension::load("ui.icons.b24");
    ИконкаКод
    <!-- .ui-icon.ui-icon-common-user > i -->
    <div class="ui-icon ui-icon-common-user"><i></i></div>
    
    <!-- .ui-icon.ui-icon-common-user-group > i -->
    <div class="ui-icon ui-icon-common-user-group"><i></i></div>
    
    <!-- .ui-icon.ui-icon-common-company > i -->
    <div class="ui-icon ui-icon-common-company"><i></i></div>
    
    <!-- .ui-icon.ui-icon-common-phone > i -->
    <div class="ui-icon ui-icon-common-phone"><i></i></div>
    
    <!-- .ui-icon.ui-icon-common-notification > i -->
    <div class="ui-icon ui-icon-common-notification"><i></i></div>
    
    <!-- .ui-icon.ui-icon-common-bitrix24 > i -->
    <div class="ui-icon ui-icon-common-bitrix24"><i></i></div>
    
    <!-- .ui-icon.ui-icon-common-cloud > i -->
    <div class="ui-icon ui-icon-common-cloud"><i></i></div>
    
    <!-- .ui-icon.ui-icon-common-folder > i -->
    <div class="ui-icon ui-icon-common-folder"><i></i></div>
    
    <!-- .ui-icon.ui-icon-common-info > i -->
    <div class="ui-icon ui-icon-common-info"><i></i></div>
    

    Иконки сервисов


    \Bitrix\Main\UI\Extension::load("ui.icons.service");
    ИконкаКодИконкаКодС версии
    <!-- .ui-icon.ui-icon-service-alice > i -->
    <div class="ui-icon ui-icon-service-alice"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-alice > i -->
    <div class="ui-icon ui-icon-service-light-alice"><i></i></div>
    
    19.0.0
    <!-- .ui-icon.ui-icon-service-fb-instagram > i -->
    <div class="ui-icon ui-icon-service-fb-instagram"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-fb-instagram > i -->
    <div class="ui-icon ui-icon-service-light-fb-instagram"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-instagram -fb> i -->
    <div class="ui-icon ui-icon-service-instagram-fb"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-instagram -fb> i -->
    <div class="ui-icon ui-icon-service-light-instagram-fb"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-instagram > i -->
    <div class="ui-icon ui-icon-service-instagram"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-instagram > i -->
    <div class="ui-icon ui-icon-service-light-instagram"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-twilio > i -->
    <div class="ui-icon ui-icon-service-twilio"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-twilio > i -->
    <div class="ui-icon ui-icon-service-light-twilio"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-callback > i -->
    <div class="ui-icon ui-icon-service-callback"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-callback > i -->
    <div class="ui-icon ui-icon-service-light-callback"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-livechat > i -->
    <div class="ui-icon ui-icon-service-livechat"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-livechat > i -->
    <div class="ui-icon ui-icon-service-light-livechat"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-liveid > i -->
    <div class="ui-icon ui-icon-service-liveid"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-liveid > i -->
    <div class="ui-icon ui-icon-service-light-liveid"><i></i></div>
    
    19.0.0
    <!-- .ui-icon.ui-icon-service-ya > i -->
    <div class="ui-icon ui-icon-service-ya"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-ya > i -->
    <div class="ui-icon ui-icon-service-light-ya"><i></i></div>
    
    19.0.0
    <!-- .ui-icon.ui-icon-service-ya-dialogs > i -->
    <div class="ui-icon ui-icon-service-ya-dialogs"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-ya-dialogs > i -->
    <div class="ui-icon ui-icon-service-light-ya-dialogs"><i></i></div>
    
    19.0.0
    <!-- .ui-icon.ui-icon-service-ya-direct > i -->
    <div class="ui-icon ui-icon-service-ya-direct"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-ya-direct > i -->
    <div class="ui-icon ui-icon-service-light-ya-direct"><i></i></div>
    
    19.0.0
    <!-- .ui-icon.ui-icon-service-1c > i -->
    <div class="ui-icon ui-icon-service-1c"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-1c > i -->
    <div class="ui-icon ui-icon-service-light-1c"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-google > i -->
    <div class="ui-icon ui-icon-service-google"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-google > i -->
    <div class="ui-icon ui-icon-service-light-google"><i></i></div>
    
    19.0.0
    <!-- .ui-icon.ui-icon-service-google-ads > i -->
    <div class="ui-icon ui-icon-service-google-ads"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-google-ads > i -->
    <div class="ui-icon ui-icon-service-light-google-ads"><i></i></div>
    
    19.0.0
    <!-- .ui-icon.ui-icon-service-twitter > i -->
    <div class="ui-icon ui-icon-service-twitter"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-twitter > i -->
    <div class="ui-icon ui-icon-service-light-twitter"><i></i></div>
    
    19.0.0
    <!-- .ui-icon.ui-icon-service-email > i -->
    <div class="ui-icon ui-icon-service-email"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-email > i -->
    <div class="ui-icon ui-icon-service-light-email"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-messenger > i -->
    <div class="ui-icon ui-icon-service-messenger"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-messenger > i -->
    <div class="ui-icon ui-icon-service-light-messenger"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-estore > i -->
    <div class="ui-icon ui-icon-service-estore"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-estore > i -->
    <div class="ui-icon ui-icon-service-light-estore"><i></i></div>
    
    19.0.0
    <!-- .ui-icon.ui-icon-service-imessage > i -->
    <div class="ui-icon ui-icon-service-imessage"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-imessage > i -->
    <div class="ui-icon ui-icon-service-light-imessage"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-webform > i -->
    <div class="ui-icon ui-icon-service-webform"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-webform > i -->
    <div class="ui-icon ui-icon-service-light-webform"><i>></i></div>
    
    <!-- .ui-icon.ui-icon-service-sms > i -->
    <div class="ui-icon ui-icon-service-sms"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-sms > i -->
    <div class="ui-icon ui-icon-service-light-sms"><i>></i></div>
    
    19.0.0
    <!-- .ui-icon.ui-icon-service-call > i -->
    <div class="ui-icon ui-icon-service-call"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-call > i -->
    <div class="ui-icon ui-icon-service-light-call"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-call-up > i -->
    <div class="ui-icon ui-icon-service-call-up"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-call-up > i -->
    <div class="ui-icon ui-icon-service-light-call-up"><i></i></div>
    
    19.0.0
    <!-- .ui-icon.ui-icon-service-infocall > i -->
    <div class="ui-icon ui-icon-service-infocall"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-infocall > i -->
    <div class="ui-icon ui-icon-service-light-infocall"><i></i></div>
    
    19.0.0
    <!-- .ui-icon.ui-icon-service-site-b24 > i -->
    <div class="ui-icon ui-icon-service-site-b24"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-site-b24 > i -->
    <div class="ui-icon ui-icon-service-light-site-b24"><i></i></div>
    
    19.0.0
    <!-- .ui-icon.ui-icon-service-site > i -->
    <div class="ui-icon ui-icon-service-site"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-site > i -->
    <div class="ui-icon ui-icon-service-light-site"><i></i></div>
    
    19.0.0
    <!-- .ui-icon.ui-icon-service-calltracking > i -->
    <div class="ui-icon ui-icon-service-calltracking"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-calltracking > i -->
    <div class="ui-icon ui-icon-service-light-calltracking"><i></i></div>
    
    19.0.0
    <!-- .ui-icon.ui-icon-service-telegram > i -->
    <div class="ui-icon ui-icon-service-telegram"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-telegram > i -->
    <div class="ui-icon ui-icon-service-light-telegram"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-bitrix24 > i -->
    <div class="ui-icon ui-icon-service-bitrix24"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-bitrix24 > i -->
    <div class="ui-icon ui-icon-service-light-bitrix24"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-groupme > i -->
    <div class="ui-icon ui-icon-service-groupme"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-groupme > i -->
    <div class="ui-icon ui-icon-service-light-groupme"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-crm > i -->
    <div class="ui-icon ui-icon-service-crm"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-crm > i -->
    <div class="ui-icon ui-icon-service-light-crm"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-lead > i -->
    <div class="ui-icon ui-icon-service-lead"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-lead > i -->
    <div class="ui-icon ui-icon-service-light-lead"><i></i></div>
    
    19.0.0
    <!-- .ui-icon.ui-icon-service-deal > i -->
    <div class="ui-icon ui-icon-service-deal"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-deal > i -->
    <div class="ui-icon ui-icon-service-light-deal"><i></i></div>
    
    19.0.0
    <!-- .ui-icon.ui-icon-service-campaign > i -->
    <div class="ui-icon ui-icon-service-campaign"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-campaign > i -->
    <div class="ui-icon ui-icon-service-light-campaign"><i></i></div>
    
    19.0.0
    <!-- .ui-icon.ui-icon-service-chatbot > i -->
    <div class="ui-icon ui-icon-service-chatbot"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-chatbot > i -->
    <div class="ui-icon ui-icon-service-light-chatbot"><i></i></div>
    
    19.0.0
    <!-- .ui-icon.ui-icon-service-common > i -->
    <div class="ui-icon ui-icon-service-common"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-common > i -->
    <div class="ui-icon ui-icon-service-light-common"><i></i></div>
    
    19.0.0
    <!-- .ui-icon.ui-icon-service-g-assistant > i -->
    <div class="ui-icon ui-icon-service-g-assistant"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-g-assistant > i -->
    <div class="ui-icon ui-icon-service-light-g-assistant"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-microsoft > i -->
    <div class="ui-icon ui-icon-service-microsoft"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-microsoft > i -->
    <div class="ui-icon ui-icon-service-light-microsoft"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-office365 > i -->
    <div class="ui-icon ui-icon-service-office365"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-office365 > i -->
    <div class="ui-icon ui-icon-service-light-office365"><i></i></div>
    
    19.0.0
    <!-- .ui-icon.ui-icon-service-skype > i -->
    <div class="ui-icon ui-icon-service-skype"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-skype > i -->
    <div class="ui-icon ui-icon-service-light-skype"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-webchat > i -->
    <div class="ui-icon ui-icon-service-webchat"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-webchat > i -->
    <div class="ui-icon ui-icon-service-light-webchat"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-directline > i -->
    <div class="ui-icon ui-icon-service-directline"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-directline > i -->
    <div class="ui-icon ui-icon-service-light-directline"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-envelope > i -->
    <div class="ui-icon ui-icon-service-envelope"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-envelope > i -->
    <div class="ui-icon ui-icon-service-light-envelope"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-fb-messenger > i -->
    <div class="ui-icon ui-icon-service-fb-messenger"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-fb-messenger > i -->
    <div class="ui-icon ui-icon-service-light-fb-messenger"><i></i></div>
    
    19.0.0
    <!-- .ui-icon.ui-icon-service-fb-adds > i -->
    <div class="ui-icon ui-icon-service-fb-adds"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-fb-adds > i -->
    <div class="ui-icon ui-icon-service-light-fb-adds"><i></i></div>
    
    19.0.0
    <!-- .ui-icon.ui-icon-service-outlook > i -->
    <div class="ui-icon ui-icon-service-outlook"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-outlook > i -->
    <div class="ui-icon ui-icon-service-light-outlook"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-vk > i -->
    <div class="ui-icon ui-icon-service-vk"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-vk > i -->
    <div class="ui-icon ui-icon-service-light-vk"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-vk-adds > i -->
    <div class="ui-icon ui-icon-service-vk-adds"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-vk-adds > i -->
    <div class="ui-icon ui-icon-service-light-vk-adds"><i></i></div>
    
    19.0.0
    <!-- .ui-icon.ui-icon-service-vk-order > i -->
    <div class="ui-icon ui-icon-service-vk-order"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-vk-order > i -->
    <div class="ui-icon ui-icon-service-light-vk-order"><i></i></div>
    
    19.0.0
    <!-- .ui-icon.ui-icon-service-fb > i -->
    <div class="ui-icon ui-icon-service-fb"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-fb > i -->
    <div class="ui-icon ui-icon-service-light-fb"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-fb-comments > i -->
    <div class="ui-icon ui-icon-service-fb-comments"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-fb-comments > i -->
    <div class="ui-icon ui-icon-service-light-fb-comments"><i></i></div>
    
    19.0.0
    <!-- .ui-icon.ui-icon-service-slack > i -->
    <div class="ui-icon ui-icon-service-slack"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-slack > i -->
    <div class="ui-icon ui-icon-service-light-slack"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-viber > i -->
    <div class="ui-icon ui-icon-service-viber"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-viber > i -->
    <div class="ui-icon ui-icon-service-light-viber"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-kik > i -->
    <div class="ui-icon ui-icon-service-kik"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-kik > i -->
    <div class="ui-icon ui-icon-service-light-kik"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-apple > i -->
    <div class="ui-icon ui-icon-service-apple"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-apple > i -->
    <div class="ui-icon ui-icon-service-light-apple"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-universal > i -->
    <div class="ui-icon ui-icon-service-universal"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-universal > i -->
    <div class="ui-icon ui-icon-service-light-universal"><i></i></div>
    
    19.0.0
    <!-- .ui-icon.ui-icon-service-organic > i -->
    <div class="ui-icon ui-icon-service-organic"><i></i></div>
    
    <!-- .ui-icon.ui-icon-service-light-organic > i -->
    <div class="ui-icon ui-icon-service-light-organic"><i></i></div>
    
    19.0.0

    Иконки диска


    \Bitrix\Main\UI\Extension::load("ui.icons.disk");

    Разметка


    Важно помнить, что иконки имеют соотношение сторон контейнера 1:1, а сами иконки выровнены по центру. Если вы указываете ширину иконки в 128px, то и высота иконки будет равна 128px.


    ИконкаКодС версии
    <!-- .ui-icon.ui-icon-file-empty > i -->
    <div class="ui-icon ui-icon-file-empty"><i></i></div>
    
    <!-- .ui-icon.ui-icon-file-txt > i -->
    <div class="ui-icon ui-icon-file-txt"><i></i></div>
    
    <!-- .ui-icon.ui-icon-file-doc > i -->
    <div class="ui-icon ui-icon-file-doc"><i></i></div>
    
    <!-- .ui-icon.ui-icon-file-xls > i -->
    <div class="ui-icon ui-icon-file-xls"><i></i></div>
    
    <!-- .ui-icon.ui-icon-file-php > i -->
    <div class="ui-icon ui-icon-file-php"><i></i></div>
    
    <!-- .ui-icon.ui-icon-file-pdf > i -->
    <div class="ui-icon ui-icon-file-pdf"><i></i></div>
    
    <!-- .ui-icon.ui-icon-file-ppt > i -->
    <div class="ui-icon ui-icon-file-ppt"><i></i></div>
    
    <!-- .ui-icon.ui-icon-file-rar > i -->
    <div class="ui-icon ui-icon-file-rar"><i></i></div>
    
    <!-- .ui-icon.ui-icon-file-zip > i -->
    <div class="ui-icon ui-icon-file-zip"><i></i></div>
    
    <!-- .ui-icon.ui-icon-file-set > i -->
    <div class="ui-icon ui-icon-file-set"><i></i></div>
    
    <!-- .ui-icon.ui-icon-file-img > i -->
    <div class="ui-icon ui-icon-file-img"><i></i></div>
    
    19.0.0
    <!-- .ui-icon.ui-icon-file-mov > i -->
    <div class="ui-icon ui-icon-file-mov"><i></i></div>
    
    <!-- .ui-icon.ui-icon-file-folder > i -->
    <div class="ui-icon ui-icon-file-folder"><i></i></div>
    
    <!-- .ui-icon.ui-icon-file-shared > i -->
    <div class="ui-icon ui-icon-file-shared"><i></i></div>
    
    <!-- .ui-icon.ui-icon-file-shared-2 > i -->
    <div class="ui-icon ui-icon-file-shared-2"><i></i></div>
    


    Пользовательские комментарии

    Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

    Для этого нужно всего лишь авторизоваться на сайте

    Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

    Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.
    © «Битрикс», 2001-2019, «1С-Битрикс», 2019
    Наверх