List of icons
Attention! Some icons can be unavailable in the Interface library new versions.
- Intranet portal icons
- Service icons
- Drive icons
Intranet portal icons
\Bitrix\Main\UI\Extension::load("ui.icons.b24");
| Icons | Code |
|---|---|
<!-- .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> |
Service icons
\Bitrix\Main\UI\Extension::load("ui.icons.service");
| Icon | Code | Icon | Code | Available from version |
|---|---|---|---|---|
<!-- .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> |
|||
<!-- .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> |
|||
<!-- .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> |
|||
<!-- .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> |
|||
<!-- .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> |
|||
<!-- .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> |
|||
<!-- .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> |
|||
<!-- .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> |
|||
<!-- .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> |
|||
<!-- .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> |
|||
<!-- .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> |
|||
<!-- .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> |
|||
<!-- .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> |
|||
<!-- .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> |
|||
<!-- .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> |
|||
<!-- .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> |
|||
<!-- .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> |
|||
<!-- .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> |
|||
<!-- .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> |
|||
<!-- .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> |
|||
<!-- .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> |
|||
<!-- .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> |
|||
<!-- .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> |
Drive icons
\Bitrix\Main\UI\Extension::load("ui.icons.disk");
layout
Important: icons have container size aspect ratio 1:1, and the icons themselves are aligned by center. When you specify icon width in 128px, the icon height is 128px.
| Icon | Code | Available from version |
|---|---|---|
<!-- .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> |
© «Bitrix24», 2001-2024