icon-catalog

star 61

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.

Vonage By Vonage schedule Updated 4/16/2026

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>
...
Install via CLI
npx skills add https://github.com/Vonage/vivid-3 --skill icon-catalog
Repository Details
star Stars 61
call_split Forks 14
navigation Branch main
article Path SKILL.md
More from Creator