Basic sizes, rules for building and using icons. Icons can be outlined or bold, it all depends on the specific case. But, in most cases, we use outline icons.

Figma mockups

https://www.figma.com/design/6nFlVmwDwvGloglQHxyElh/Tokens-test?node-id=206-385&m=dev

Usage

<script setup>
  import { AcvIcon } from '@acronis-platform/ui-component-library';
  // or
  import Icon from '@/components/icon/icon.vue';
</script>

<template>
  <AcvIcon
    name="info--16"
    color="brand-primary"
  />
  <Icon name="chevron-up--16" />
</template>

Basic usage

All icons in Acronis UI Component Library will, henceforth, be implemented as SVG icons.

TIP

The naming convention

• acv-icon - the base class for the icon
• acv-icon--size - the size of the icon
• acv-icon--color - the color of the icon
• acv-icon--bold - the bold icon

Ghost button

Secondary button

Primary button

Multicolor icon

Legacy

Source code

<script setup>
  import Button from '@/components/button/button.vue';
  import Icon from '@/components/icon/icon.vue';
</script>

<template>
  <PreviewGroup class="qa-icon-basic">
    <Preview
      name="Ghost button"
      span="6"
    >
      <Button variant="ghost">
        <Icon name="Workstation16" />
      </Button>
    </Preview>
    <Preview
      name="Secondary button"
      span="6"
    >
      <Button
        type="secondary"
        icon="Workstations32"
      >
        Button
      </Button>
    </Preview>
    <Preview
      name="Primary button"
      span="6"
    >
      <Button icon="Sync16">
        Button
      </Button>
    </Preview>
    <Preview
      name="Multicolor icon"
      span="6"
    >
      <Icon name="Sync16" />
    </Preview>
    <Preview
      name="Legacy"
      span="6"
    >
      <Icon
        name="workstations--32"
        color="brand-primary"
        legacy
      />
    </Preview>
  </PreviewGroup>
</template>

Monochrome icons

Default

Ghost button

Secondary button

Primary button

States

Toggle

Notification state

Toggle

Downloading state

Toggle

Play state

Toggle

Paused state

Disabled

Default

Ghost button

Secondary button

Primary button

Sizes

small / 16

medium / 24

xl / 48

xxxl / 96

Alignment

acv-text--display-large

acv-text--display-medium

acv-text--display-regular

acv-text--HEADING

acv-text--strong

acv-text--subheading

acv-text--body-24

acv-text--caption

acv-text--ACCENT

Multicolor icons

Default

Ghost button

Secondary button

Primary button

Multicolor icon

Legacy

Tree-shaking

The icons are tree-shakable, so only the icons that are used in the project will be included in the final bundle.

<script setup>
  // Tree-shaking import
  import { IconSettings16 } from '@acronis-platform/icons/settings';
</script>

<template>
  <IconSettings16 />
</template>