Общее

Подключение и базовый стиль

Подключение на PHP странице

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

Базовый стиль

.ui-icon имеет по умолчанию свойство display: inline-block.

<!-- .ui-icon.ui-icon-service-bitrix24 > i -->
<div class="ui-icon ui-icon-service-bitrix24"><i></i></div>

Размеры

LG

Модификатор .ui-icon-lg.

<!-- .ui-icon.ui-icon-service-bitrix24.ui-icon-lg > i -->
<div class="ui-icon ui-icon-service-bitrix24 ui-icon-lg"><i></i></div>

MD

Модификатор .ui-icon-md. Размер по умолчанию.

<!-- .ui-icon.ui-icon-service-bitrix24.ui-icon-md > i -->
<div class="ui-icon ui-icon-service-bitrix24 ui-icon-md"><i></i></div>

SM

Модификатор .ui-icon-sm.

<!-- .ui-icon.ui-icon-service-bitrix24.ui-icon-sm > i -->
<div class="ui-icon ui-icon-service-bitrix24 ui-icon-sm"><i></i></div>

XS

Модификатор .ui-icon-xs.

<!-- .ui-icon.ui-icon-service-bitrix24.ui-icon-xs > i -->
<div class="ui-icon ui-icon-service-bitrix24 ui-icon-xs"><i></i></div>

Свой размер

.docs-icon-login — произвольный класс. Устанавливает необходимый размер иконки в стилях собственного модуля или компонента.

Достаточно указать только ширину (width).

<!-- .ui-icon.ui-icon-service-bitrix24.docs-icon-login > i -->
<style>.docs-icon-login { width: 128px; }</style>
<div class="ui-icon ui-icon-service-bitrix24 docs-icon-login"><i></i></div>

Второй способ установки собственного размера иконки, прописать ширину(width) непосредственно в атрибуте style в .ui-icon.

<!-- .ui-icon.ui-icon-service-bitrix24[style="width: 128px;"] > i -->
<div class="ui-icon ui-icon-service-bitrix24" style="width: 128px;"><i></i></div>

Иконка в роли кнопки

Модификатор .ui-icon-btn. Вместо класса можно использовать тег <button>. Эффект будет ровно такой же как при спользовании модификатора .ui-icon-btn.

<!-- a.ui-icon.ui-icon-service-bitrix24.ui-icon-btn > i -->
<a href="" class="ui-icon ui-icon-service-bitrix24 ui-icon-btn"><i></i></a>

<!-- button.ui-icon.ui-icon-service-bitrix24.ui-icon-btn > i -->
<button class="ui-icon ui-icon-service-bitrix24"><i></i></button>

Квадратные иконки

Модификатор .ui-icon-square.

<!-- .ui-icon.ui-icon-service-bitrix24.ui-icon-square > i -->
<div class="ui-icon ui-icon-service-bitrix24 ui-icon-square"><i></i></div>