Vivid.js

Vivid JS is a free, open-source JavaScript library that provides developers with a collection of 90+ hand-crafted SVG icons. The library lets you easily add icons to web projects using simple HTML syntax with data attributes. Instead of dealing with individual SVG files or complex icon fonts, you can include icons with a single line of code: <i data-vi='icon-name'></i>, making icon implementation straightforward and consistent across projects.

What makes Vivid JS stand out is its customization capabilities and lightweight nature. Each icon can be customized for size and color directly through HTML data attributes—you can set primary, accent, and prop colors using hex codes, and adjust sizes numerically. The entire library is optimized to be lightweight, with the minified version taking up about half the space of the original SVG files. The icons are also available in Sketch and Photoshop formats for designers.

This tool benefits web developers and UI designers who need a reliable, customizable icon set without licensing fees or heavy dependencies. It's particularly useful for building consistent design systems, prototyping interfaces quickly, and maintaining visual consistency across web applications. The open-source MIT license means it can be used in personal, commercial, and enterprise projects without restrictions.