Icon

Storybook Source

Customizable symbols for actions, objects, status, and navigation.

Check out our complete icon collection in the icon catalog.

Usage

Here is an example that demonstrates how you can use the icon component in your project:

With Tree Shaking (Preferred) 

import { DtIconUserPlus } from '@dialpad/dialtone-icons/vue';

<template>
  <dt-icon-user-plus size="500" />
</template>

Without Tree Shaking (Deprecated) 

import { DtIcon } from '@dialpad/dialtone/vue'

<template>
  <dt-icon name="user-plus" size="500" />
</template>

Changing Sizes

Adjust the size using the size prop. Note that sizes 600, 700, and 800 are exclusively for devices.

```vue demo-only
``` 
<dt-icon-settings size="500" />

Changing Color

The icon's color inherits from the parent's foreground color.

```vue demo-only
Settings
``` 
<dt-stack class="d-fc-positive" direction="row" gap="300">
  <dt-icon-settings size="300" />
  <dt-text>Settings</dt-text>
</dt-stack>

When setting the color of an icon take these into consideration:

Ai Contact Center
Available
  • Match the icon color with the text color when pairing them.
  • All icons are monochrome.
Ai Contact Center
Available
  • Don't use different colors for text and icons.
  • Don't use more than one color within an icon.

Icon and Text Alignment

We encourage utilizing the Stack component for aligning elements both horizontally and vertically.

```vue demo-only
Settings
``` 
<dt-stack direction="row" class="d-fl-center" gap="300">
  <dt-icon-settings size="300" />
  <dt-text>Settings</dt-text>
</dt-stack>

Accessibility

  • If the icon serves a purpose beyond its visual representation, provide a clear description in the aria-label prop. This ensures all users understand its function, regardless of how they interact with it, e.g: <dt-icon-settings aria-label="Edit your profile" />

  • Icons contrast guidelines are the same as Typography.

  • Avoid using icons as clickable elements; instead, use the Icon Button for interactive actions.

Sizes

Dialtone provides eight sizes for icons. Each of the sizes represents the width and a height the icon is going to have:

Size Dimensions Class
100 var(--dt-icon-size-100) (12px) .d-icon--size-100
200 var(--dt-icon-size-200) (14px) .d-icon--size-200
300 var(--dt-icon-size-300) (18px) .d-icon--size-300
400 var(--dt-icon-size-400) (20px) .d-icon--size-400
500 var(--dt-icon-size-500) (24px) .d-icon--size-500
600 var(--dt-icon-size-600) (32px) .d-icon--size-600
700 var(--dt-icon-size-700) (38px) .d-icon--size-700
800 var(--dt-icon-size-800) (48px) .d-icon--size-800

Vue API 

import { DtIcon } from '@dialpad/dialtone-vue';

Props

Name
Default
Type
name required
string

The icon name in kebab-case

ariaLabel
string

The label of the icon as read out by a screen-reader. Leave this unset if your icon is purely presentational

size
500
"100" | "200" | "300" | "400" | "500" | "600" | "700" | "800"

The size of the icon.

Icon documentation last updated Friday, September 4, 2026

fix/popover-modal-zindex-scope