React Project

Complete guide for installing and using Bitrix24 icons in React applications.

Installation

Adding to React Project

Install the Bitrix24 Icons package using your preferred package manager:

pnpm add @bitrix24/b24icons-react

yarn add @bitrix24/b24icons-react

npm install @bitrix24/b24icons-react

bun add @bitrix24/b24icons-react

Usage Examples

Basic Usage

Import icons as React-components.

Common-service::Bitrix24Icon

IconImportReactExample.jsx

import Bitrix24Icon from '@bitrix24/b24icons-react/common-service/Bitrix24Icon';

const App = () => {
  return (
    <div class="rounded-md border flex gap-4 p-4 shadow-md bg-inherit">
      <div class="flex flex-col flex-nowrap items-center justify-center">
        <span class="text-md text-base-500">
          Common-service::Bitrix24Icon
        </span>

        <Bitrix24Icon className="size-25 text-blue-500 dark:text-blue-900" />
      </div>
    </div>
  );
};

export default App;

Generic Icon Component

Use the B24Icon component for easy access to icons.

The component uses dynamic imports via React.lazy() to load icons as needed.

This does not break the tree-shaking principle because tree-shaking works with static imports, while dynamic imports are used for load optimization, loading only the necessary parts of the code when they are needed.

Specify the full icon name with the name prop, e.g., Main::CopilotAiIcon.

Button::TariffIcon

Main::CopilotAiIcon

Main::AiIcon

IconComponentReactExample.jsx

import { B24Icon } from '@bitrix24/b24icons-react';

const App = () => {
  return (
    <div class="rounded-md border flex gap-4 p-4 shadow-md bg-inherit">
      <div class="flex flex-col flex-nowrap items-center justify-center">
        <span class="text-md text-base-500">
          Button::TariffIcon
        </span>

        <B24Icon name="Button::TariffIcon" className="size-25 text-blue-500 dark:text-blue-900" />
      </div>
      <div class="flex flex-col flex-nowrap items-center justify-center">
        <span class="text-sm text-base-500">
          Main::CopilotAiIcon
        </span>

        <B24Icon name="Main::CopilotAiIcon" className="size-15 text-red-500 dark:text-red-900" />
      </div>
      <div class="flex flex-col flex-nowrap items-center justify-center">
        <span class="text-xs text-base-500">
          Main::AiIcon
        </span>

        <B24Icon name="Main::AiIcon" className="size-8 text-green-500 dark:text-green-900" />
      </div>
    </div>
  );
};

export default App;

Nuxt Project

Complete guide for installing and using Bitrix24 icons in Nuxt applications.