Icon
Displays icons from the Vivid Icons Library using predefined colors and sizes.
Vivid comes with a library of over 1000 icons. You can use these icons in your components by setting the name attribute to the icon's name.
Instead of an icon from the Vivid Icon Library, you can also use a custom SVG image. Place it inside the default slot as an img or svg element.
Use the size attribute to select the icon's size from a set of predefined values.
Icon size will be affected by the --vvd-size-density variable.
Use the connotation attribute to select the icon's color from a set of predefined values.