Vivid Logo Vivid

Icon

Displays icons from the Vivid Icons Library using predefined colors and sizes.

When to Use

Use this component to display non-interactive icons to supplement content.

If the icon needs to be interacted with, use an icon-only Button instead.

Best Practices

The meaning of most icons will not be immediately clear to all users. Provide a label to clarify the icon's meaning.
<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-icon name="circle-line" size="0"></vwc-icon>