A free icon library "vivid.js" that you can easily customize colors for use

vivid.js isSVGA JavaScript library that makes it easy to customize and use format icons.

SVG Icons Library - Vivid.js
https://webkul.github.io/vivid/

It's pretty easy to use, and in the header part of the page you want to use the icon

[code]

[/ code]

Just complete and complete the preparation.

In addition to the method of pasting the code in the header for the installation, you can also use the package manager.

npmIf you are using

[code]npm install vivid-icons[/code]

BowerIf you are using

[code]bower install vivid-icons[/code]

You can install with.

If you want to use the icon, paste the code of the following format to the place where you actually want to place the icon is OK.

[code]
[/ code]

For example

[code]
[/ code]

When you paste the code saying, a T - shirt icon will be displayed as shown below.


You can also change the size by adding "data - vi - size =" ○ ○ "" to the data attribute of the i element. For example

[code]
[/ code]

If you set the size to 300 as shown in the figure, it will be displayed larger as below.


The icon added by vivid.js consists of up to three colors, and you can freely adjust each color. As with size customization, use data attributes like "data - vi - primary =" # FFFFFF "" "data - vi - accent =" # CCCCCC "" data - vi - prop = "# 888888" " Then adjust it. A character string in the form of # xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxHTML color chartYou can get the necessary code on the site such as ".

To adjust the color, write the code as follows.

[code]
[/ code]

The icon displayed by this code looks like this.


The number of icons themselves is 96 in all, but since it can be adjusted to various colors, it was easier to match the atmosphere of the site, making it a highly practical library. However, the same icon seems to be usable only once in the page. You can check the icon list from the following page.

Cheatsheet - SVG Icons Library - Vivid.js
https://webkul.github.io/vivid/cheatsheet.html