name: icon-catalog description: How to find Vivid icon names for use in code examples. Use when you need to reference an icon in example code, e.g. for icon attributes or slots on Vivid components.
Vivid comes with a library of over 1000 icons, which can be used like this:
<vwc-icon name="home-solid"></vwc-icon>
Regular icons are monochrome and come in a solid (filled) and line (outlined) variant. Examples: "home-solid" and "home-line".
Brand icons come in a color and mono variant. Examples: "android-color" and "android-mono".
Flags always come in color. Example: "flag-afghanistan".
To find icons suitable for your use case, use the ./find-icons.sh script to search the icon catalog.
It takes a regex and matches against the name, aliases, and keywords of icons, listing all matches.
Example queries: "home", "arrow.*down", "dot|circle"
$ <skill-path>/find-icons.sh <query>
<name> | aliases: <a>,<b> | keywords: <x>,<y>
...