Collection of customizable symbols and sizes
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/vue3';
<dt-icon-user-plus size="500" />
Without Tree Shaking (Deprecated)
import { DtIcon } from '@dialpad/dialtone'
<dt-icon name="user-plus" size="500" />
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-success">
<dt-icon-settings size="300" />
<p>Settings</p>
</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" />
<p>Settings</p>
</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: