You can create Vivid.JS bundle with your own set of custom SVG Icons. Want to know how?
Read Docs
Vivid.js have 90+ pixel perfect and hand crafted ready to use icons. *Request for new icons are also accepted.
An icon can easily be used and its size along with colors can be customized with data-vi attributes.
Vivid.js is super lightweight and minified version equals around just half size of the original SVG icons.
You can easily find all the available icons at Vivid.js Cheatsheet
View All IconsAn 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.
Check out the icon reference cheatsheet to find and use the needed icons.
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.
© Copyright 2018 Webkul Software. All rights reserved under MIT License.