Github

Icon

Icons provide visual meaning and improve recognition for actions and content.

Component variations

Size

Contains: Extra Small as xs, Small as sm, Medium as md, Large as lg, Extra large as xl. Medium is default

Color

Contains: Primary, Neutral, Success, Error, Info, Warning. Default inherits from parent.

Usage Guidelines

Import

Import the icon component in your module or component:

import-icon.ts

Copy code

Basic Implementation

Here is a basic example of using the icon component:

icon-example.html

Copy code

All Available APIs

Here is an example of using the icon component with all available APIs:

icon-example.html

Copy code

API Reference

Inputs

Property
Type
Default
Required
Description
name
string
-
Yes
CSS class for the icon (e.g., "vd-icon-save")
size
'xs' | 'sm' | 'md' | 'lg' | 'xl'
'md'
No
Size of the icon
color
'primary' | 'neutral' | 'success' | 'error' | 'info' | 'warning'
inherit
No
Color token for the icon. Defaults to inheriting from parent.
hiddenWhenLoading
boolean
false
No
Whether to hide the icon during loading states

Best Practices

When to Use

  • Use Icon when this pattern clearly supports the user task.
  • Use it to keep similar interactions consistent across the product.

When Not to Use

  • Avoid using Icon when a simpler component communicates the same intent.
  • Avoid using it when the pattern introduces unnecessary interaction steps.

Design Guidelines

  • Use semantic colors to convey meaning (error for warnings, success for confirmations)
  • Choose appropriate icon sizes to match surrounding text or UI elements
  • Keep icon usage consistent across the application
  • Use descriptive icon names that clearly represent their purpose
  • Pair icons with text labels for clarity, especially for critical actions
  • Consider accessibility by ensuring icons have proper context
  • Keep labels, helper text, and actions concise and easy to scan.
  • Use VD variants and states consistently for predictable behavior.
  • Ensure keyboard access and clear focus order for accessibility.

Component playground

Check all the variations in this section

example.html

Copy code