<iconquix>

Open Source SVG Icons

Completely hand-crafted SVG icons, 100% open-source and MIT licensed.

No need to fuss with SVG files — just use them as web components! Prefer downloads? You can grab the SVG files anytime, too.

iconquix

iconquix is a web component replacing icon-quix tag with the selected svg icon from the icon library.

No svg file needed to use as web component or you can just download the svg files from website.

All attributes added to icon-quix tag, will be transfered to the svg element like id or classes.

How to use?

To start to use, just place the iconquix.js file before closing the body tag in your html.

            
<script src="_YOURPATH_/iconquix.js"></script>

Or you can use the cdn links below.

            
<script src="https://cdn.jsdelivr.net/npm/iconquix@1.0.3/iconquix.min.js"></script>

Then use the icon-quix tag to call the icon with the icon name.

            
<icon-quix icon="_ICONNAME_"></icon-quix>
NPM

It is possible to install iconquix from NPM.

            
npm i iconquix
Using as Background Image

To use as background image, copy as svg code from our web site and use as css property like below.

            
background-image: url('data:image/svg+xml;utf8,_SVGCODE_');
Styling with CSS

Font color and size can be changed with color and font-size css property.

            
.iqdemo-hover {
    color: _COLORCODE_;
    font-size: 3em;
    transition: color 300ms ease;
}
.iqdemo-hover:hover {
    color: _COLORCODE_;
}
Animating with CSS

Animation can also be added by keyframe animations.

            
.iqdemo-rotate360 {
    font-size: 2em;
    animation: rotate360 2s infinite linear;
}
.iqdemo-rotate360-steps {
    font-size: 2em;
    animation: rotate360 2s infinite steps(8, end);
}
@keyframes rotate360 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}