Check out the icon reference cheatsheet to find and use the needed icons.

An SVG Icon from Vivid.js icons library can be easily included using the syntax <i data-vi="icon-name"></i> , where icon-name is replaced by the unique name of the respective icon.

Customize Icon

Each Icon can be customized in terms of size and colors.

Add data-vi-size="number" data attribute to i element to customize size of the icon.

Add data-vi-primary="#hexcode" data attribute to i element to customize the primary color of the icon.

Add data-vi-accent="#hexcode" data attribute to i element to customize the accent color of the icon.

Add data-vi-prop="#hexcode" data attribute to i element to customize the prop color of the icon.

The colors and size of the entire Vivid.js Icons library can also be changed globally via src/config.js file and compiling again.

Read Docs