Connecting at the PHP page

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

Basic style

.ui-icon has the default property value display: inline-block.

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

Size

LG

Modifier .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

Modifier .ui-icon-md. Default size.

<!-- .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

Modifier .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

Modifier .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>

Custom size

.docs-icon-login — arbitrary class. Sets the required icon size in you own module or component styles.

Only width is needed (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>

Second method of setting your own icon size, write the width (width) directly in the attribute style in .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>

Icon as a button

Modifier .ui-icon-btn. You can use the tag <button> instead of the class. The result is the same as then using the modifier .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>

Other

Square icons

Modifier .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>