vivid-icons
Version:
a JavaScript library which is built to easily customize and use the SVG Icons with a blaze.
1 lines • 12.2 kB
HTML
<head><title>Vivid.js Preview</title><script src="vivid-icons.min.js" async="true"></script><style>body{font-family:sans-serif;width:1116px;text-align:center;margin:0 auto;}.cheatsheet-brick{text-align: left;width:300px;padding:5px;margin:15px;border-radius:5px;max-width:100%;background:#F2F2F2;overflow:auto;display:inline-block}.cheatsheet-brick label,.cheatsheet-brick svg{display:inline-block;vertical-align:middle}.cheatsheet-brick label{font-size:16px;color:#220A41;font-weight:500;margin-left:10px;margin-top:2px}</style></head><body><div class="cheatsheet-brick"><i data-vi="activity"></i><label><i data-vi="activity"></i></label></div><div class="cheatsheet-brick"><i data-vi="angle-bottom"></i><label><i data-vi="angle-bottom"></i></label></div><div class="cheatsheet-brick"><i data-vi="angle-left"></i><label><i data-vi="angle-left"></i></label></div><div class="cheatsheet-brick"><i data-vi="angle-right"></i><label><i data-vi="angle-right"></i></label></div><div class="cheatsheet-brick"><i data-vi="angle-top"></i><label><i data-vi="angle-top"></i></label></div><div class="cheatsheet-brick"><i data-vi="arrow-bottom"></i><label><i data-vi="arrow-bottom"></i></label></div><div class="cheatsheet-brick"><i data-vi="arrow-left"></i><label><i data-vi="arrow-left"></i></label></div><div class="cheatsheet-brick"><i data-vi="arrow-right"></i><label><i data-vi="arrow-right"></i></label></div><div class="cheatsheet-brick"><i data-vi="arrow-top"></i><label><i data-vi="arrow-top"></i></label></div><div class="cheatsheet-brick"><i data-vi="badge"></i><label><i data-vi="badge"></i></label></div><div class="cheatsheet-brick"><i data-vi="bag"></i><label><i data-vi="bag"></i></label></div><div class="cheatsheet-brick"><i data-vi="battery"></i><label><i data-vi="battery"></i></label></div><div class="cheatsheet-brick"><i data-vi="bottle"></i><label><i data-vi="bottle"></i></label></div><div class="cheatsheet-brick"><i data-vi="box"></i><label><i data-vi="box"></i></label></div><div class="cheatsheet-brick"><i data-vi="briefcase"></i><label><i data-vi="briefcase"></i></label></div><div class="cheatsheet-brick"><i data-vi="building"></i><label><i data-vi="building"></i></label></div><div class="cheatsheet-brick"><i data-vi="bulb"></i><label><i data-vi="bulb"></i></label></div><div class="cheatsheet-brick"><i data-vi="bullhorn"></i><label><i data-vi="bullhorn"></i></label></div><div class="cheatsheet-brick"><i data-vi="calculator"></i><label><i data-vi="calculator"></i></label></div><div class="cheatsheet-brick"><i data-vi="calendar"></i><label><i data-vi="calendar"></i></label></div><div class="cheatsheet-brick"><i data-vi="camera"></i><label><i data-vi="camera"></i></label></div><div class="cheatsheet-brick"><i data-vi="card"></i><label><i data-vi="card"></i></label></div><div class="cheatsheet-brick"><i data-vi="cart"></i><label><i data-vi="cart"></i></label></div><div class="cheatsheet-brick"><i data-vi="chat"></i><label><i data-vi="chat"></i></label></div><div class="cheatsheet-brick"><i data-vi="check"></i><label><i data-vi="check"></i></label></div><div class="cheatsheet-brick"><i data-vi="clock"></i><label><i data-vi="clock"></i></label></div><div class="cheatsheet-brick"><i data-vi="close"></i><label><i data-vi="close"></i></label></div><div class="cheatsheet-brick"><i data-vi="cloud-tools"></i><label><i data-vi="cloud-tools"></i></label></div><div class="cheatsheet-brick"><i data-vi="cloud"></i><label><i data-vi="cloud"></i></label></div><div class="cheatsheet-brick"><i data-vi="cog"></i><label><i data-vi="cog"></i></label></div><div class="cheatsheet-brick"><i data-vi="controller"></i><label><i data-vi="controller"></i></label></div><div class="cheatsheet-brick"><i data-vi="cookie"></i><label><i data-vi="cookie"></i></label></div><div class="cheatsheet-brick"><i data-vi="cup"></i><label><i data-vi="cup"></i></label></div><div class="cheatsheet-brick"><i data-vi="desktop"></i><label><i data-vi="desktop"></i></label></div><div class="cheatsheet-brick"><i data-vi="doc"></i><label><i data-vi="doc"></i></label></div><div class="cheatsheet-brick"><i data-vi="envelope"></i><label><i data-vi="envelope"></i></label></div><div class="cheatsheet-brick"><i data-vi="equaliser"></i><label><i data-vi="equaliser"></i></label></div><div class="cheatsheet-brick"><i data-vi="export"></i><label><i data-vi="export"></i></label></div><div class="cheatsheet-brick"><i data-vi="eye"></i><label><i data-vi="eye"></i></label></div><div class="cheatsheet-brick"><i data-vi="fingerprint"></i><label><i data-vi="fingerprint"></i></label></div><div class="cheatsheet-brick"><i data-vi="flag"></i><label><i data-vi="flag"></i></label></div><div class="cheatsheet-brick"><i data-vi="flame"></i><label><i data-vi="flame"></i></label></div><div class="cheatsheet-brick"><i data-vi="flask"></i><label><i data-vi="flask"></i></label></div><div class="cheatsheet-brick"><i data-vi="gem"></i><label><i data-vi="gem"></i></label></div><div class="cheatsheet-brick"><i data-vi="gift"></i><label><i data-vi="gift"></i></label></div><div class="cheatsheet-brick"><i data-vi="graduation-cap"></i><label><i data-vi="graduation-cap"></i></label></div><div class="cheatsheet-brick"><i data-vi="graph-bar"></i><label><i data-vi="graph-bar"></i></label></div><div class="cheatsheet-brick"><i data-vi="graph-pie"></i><label><i data-vi="graph-pie"></i></label></div><div class="cheatsheet-brick"><i data-vi="graph-poly"></i><label><i data-vi="graph-poly"></i></label></div><div class="cheatsheet-brick"><i data-vi="headphone"></i><label><i data-vi="headphone"></i></label></div><div class="cheatsheet-brick"><i data-vi="heart"></i><label><i data-vi="heart"></i></label></div><div class="cheatsheet-brick"><i data-vi="home"></i><label><i data-vi="home"></i></label></div><div class="cheatsheet-brick"><i data-vi="hotel"></i><label><i data-vi="hotel"></i></label></div><div class="cheatsheet-brick"><i data-vi="hourglass"></i><label><i data-vi="hourglass"></i></label></div><div class="cheatsheet-brick"><i data-vi="image"></i><label><i data-vi="image"></i></label></div><div class="cheatsheet-brick"><i data-vi="import"></i><label><i data-vi="import"></i></label></div><div class="cheatsheet-brick"><i data-vi="industry"></i><label><i data-vi="industry"></i></label></div><div class="cheatsheet-brick"><i data-vi="infinity"></i><label><i data-vi="infinity"></i></label></div><div class="cheatsheet-brick"><i data-vi="jar"></i><label><i data-vi="jar"></i></label></div><div class="cheatsheet-brick"><i data-vi="laptop"></i><label><i data-vi="laptop"></i></label></div><div class="cheatsheet-brick"><i data-vi="layers"></i><label><i data-vi="layers"></i></label></div><div class="cheatsheet-brick"><i data-vi="lock"></i><label><i data-vi="lock"></i></label></div><div class="cheatsheet-brick"><i data-vi="map-marker"></i><label><i data-vi="map-marker"></i></label></div><div class="cheatsheet-brick"><i data-vi="menu"></i><label><i data-vi="menu"></i></label></div><div class="cheatsheet-brick"><i data-vi="message"></i><label><i data-vi="message"></i></label></div><div class="cheatsheet-brick"><i data-vi="mobile"></i><label><i data-vi="mobile"></i></label></div><div class="cheatsheet-brick"><i data-vi="moon"></i><label><i data-vi="moon"></i></label></div><div class="cheatsheet-brick"><i data-vi="move"></i><label><i data-vi="move"></i></label></div><div class="cheatsheet-brick"><i data-vi="music-note"></i><label><i data-vi="music-note"></i></label></div><div class="cheatsheet-brick"><i data-vi="mute"></i><label><i data-vi="mute"></i></label></div><div class="cheatsheet-brick"><i data-vi="newspaper"></i><label><i data-vi="newspaper"></i></label></div><div class="cheatsheet-brick"><i data-vi="pen"></i><label><i data-vi="pen"></i></label></div><div class="cheatsheet-brick"><i data-vi="pencil"></i><label><i data-vi="pencil"></i></label></div><div class="cheatsheet-brick"><i data-vi="processor"></i><label><i data-vi="processor"></i></label></div><div class="cheatsheet-brick"><i data-vi="radio"></i><label><i data-vi="radio"></i></label></div><div class="cheatsheet-brick"><i data-vi="refresh"></i><label><i data-vi="refresh"></i></label></div><div class="cheatsheet-brick"><i data-vi="rocket"></i><label><i data-vi="rocket"></i></label></div><div class="cheatsheet-brick"><i data-vi="search-disabled"></i><label><i data-vi="search-disabled"></i></label></div><div class="cheatsheet-brick"><i data-vi="search"></i><label><i data-vi="search"></i></label></div><div class="cheatsheet-brick"><i data-vi="server"></i><label><i data-vi="server"></i></label></div><div class="cheatsheet-brick"><i data-vi="share"></i><label><i data-vi="share"></i></label></div><div class="cheatsheet-brick"><i data-vi="shield"></i><label><i data-vi="shield"></i></label></div><div class="cheatsheet-brick"><i data-vi="shop"></i><label><i data-vi="shop"></i></label></div><div class="cheatsheet-brick"><i data-vi="star"></i><label><i data-vi="star"></i></label></div><div class="cheatsheet-brick"><i data-vi="sun"></i><label><i data-vi="sun"></i></label></div><div class="cheatsheet-brick"><i data-vi="switch-off"></i><label><i data-vi="switch-off"></i></label></div><div class="cheatsheet-brick"><i data-vi="switch-on"></i><label><i data-vi="switch-on"></i></label></div><div class="cheatsheet-brick"><i data-vi="tablet"></i><label><i data-vi="tablet"></i></label></div><div class="cheatsheet-brick"><i data-vi="tag"></i><label><i data-vi="tag"></i></label></div><div class="cheatsheet-brick"><i data-vi="tee"></i><label><i data-vi="tee"></i></label></div><div class="cheatsheet-brick"><i data-vi="thunder"></i><label><i data-vi="thunder"></i></label></div><div class="cheatsheet-brick"><i data-vi="ticket"></i><label><i data-vi="ticket"></i></label></div><div class="cheatsheet-brick"><i data-vi="trash"></i><label><i data-vi="trash"></i></label></div><div class="cheatsheet-brick"><i data-vi="user"></i><label><i data-vi="user"></i></label></div><div class="cheatsheet-brick"><i data-vi="van"></i><label><i data-vi="van"></i></label></div><div class="cheatsheet-brick"><i data-vi="video-recording"></i><label><i data-vi="video-recording"></i></label></div><div class="cheatsheet-brick"><i data-vi="volume-high"></i><label><i data-vi="volume-high"></i></label></div><div class="cheatsheet-brick"><i data-vi="volume-medium"></i><label><i data-vi="volume-medium"></i></label></div><div class="cheatsheet-brick"><i data-vi="volume-slow"></i><label><i data-vi="volume-slow"></i></label></div><div class="cheatsheet-brick"><i data-vi="vr"></i><label><i data-vi="vr"></i></label></div><div class="cheatsheet-brick"><i data-vi="website"></i><label><i data-vi="website"></i></label></div><div class="cheatsheet-brick"><i data-vi="wrench"></i><label><i data-vi="wrench"></i></label></div><div class="cheatsheet-brick"><i data-vi="zoom-in"></i><label><i data-vi="zoom-in"></i></label></div><div class="cheatsheet-brick"><i data-vi="zoom-out"></i><label><i data-vi="zoom-out"></i></label></div></body>