You can create Vivid.JS bundle with your own set of custom SVG Icons. Want to know how?

Read Docs

Ready to use Free and Open Source SVG Icons Pack JavaScript Library.

View on GitHub

Why Vivid.js?

90+ Icons

Vivid.js have 90+ pixel perfect and hand crafted ready to use icons. *Request for new icons are also accepted.

Easy to Use

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.

Vivid.js Icon Style

You can easily find all the available icons at Vivid.js Cheatsheet

View All Icons

Add Icon

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.

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

View Cheatsheet

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

© Copyright 2018 Webkul Software. All rights reserved under MIT License.

Sketch Icons Photoshop Icons