icons-react

@acronis-platform/icons-react ships React icon components, generated from @acronis-platform/design-assets. Each icon renders at the dimensions the design set defines (today 16 and 24, default 24), with the stroke width resolved from the design rules per size — see The size prop.

Packs and subpath exports

Icons are grouped into four packs, each available as its own subpath export so you only pull what you use:

Named imports

Each icon is a named export, so imports are tree-shakeable — bundlers drop everything you don't reference:

import { BanIcon, ChevronDownIcon } from '@acronis-platform/icons-react/stroke-mono';

export function Example() {
  return (
    <>
      <BanIcon />
      <ChevronDownIcon size={16} />
    </>
  );
}

Naming is PascalCase(asset) + "Icon" (e.g. chevron-down → ChevronDownIcon). Asset names that start with a digit take the Icon prefix instead so the identifier stays valid (365-sync → Icon365Sync).

The size prop

size is the dimension axis design-assets defines for the pack — today 16 | 24, defaulting to the canonical 24. It is a strict, generated union: only the dimensions design defines are allowed (no arbitrary sizes), and it tracks design-assets automatically. Each dimension carries its own design-resolved artwork + stroke width:

<ChevronDownIcon size={16} />
<ChevronDownIcon size={24} /> {/* default */}

Need a different box? Size it with CSS — the design set stays the source of truth.

currentColor theming

Monocolor packs (stroke-mono, solid-mono) render their fills and strokes as currentColor, so they inherit the surrounding text color — set color (or a Tailwind text utility) on a parent and the icon follows:

<span className="text-on-surface-primary">
  <BanIcon />
</span>

Multicolor packs (stroke-multi, solid-multi) keep their authored colors and gradients verbatim.

Dynamic lookup

Each pack also exports an icons registry and an IconName type for cases where the icon name is only known at runtime:

import { icons, type IconName } from '@acronis-platform/icons-react/stroke-mono';

function DynamicIcon({ name }: { name: IconName }) {
  const Icon = icons[name];
  return <Icon />;
}

Root export

The root . export ships the SvgIcon base component and the IconProps type for advanced or custom-icon use:

import { SvgIcon, type IconProps } from '@acronis-platform/icons-react';

Browse every available icon in the live icon catalog.