Preview
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'
<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.
<dt-icon-settings size="500" />
Changing Color
The icon's color inherits from the parent's foreground color.
<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:
- Match the icon color with the text color when pairing them.
- All icons are monochrome.
- 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.
<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-labelprop. 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:
Vue API
import { DtIcon } from '@dialpad/dialtone-vue';