Powerful wrapper for almost all kind of icons. Now use icons with flexibility.
<span class="zust-icon">
<i class="fa fa-ice-cream"></i>
</span>
It has support for almost all kinds of icons.
Font Awesome 5
Material Icons
Material Design Icons
Ionicons
Unicons
Raw SVG
<p>Font Awesome 5</p>
<span class="zust-icon">
<i class="fa fa-ice-cream"></i>
</span>
<p>Material Icons</p>
<span class="zust-icon">
<i class="material-icons">android</i>
</span>
<p>Material Design Icons</p>
<span class="zust-icon">
<i class="mdi mdi-alpha-z-box"></i>
</span>
<p>Ionicons</p>
<span class="zust-icon">
<i class="icon ion-ios-happy"></i>
</span>
<p>Unicons</p>
<span class="zust-icon">
<i class="uil uil-code"></i>
</span>
<p>Raw SVG</p>
<span class="zust-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
<path fill="currentColor" d="M19.44,5.34l-.06-.07a10,10,0,0,0-14.76,0l-.06.07A10,10,0,1,0,22,12,9.93,9.93,0,0,0,19.44,5.34ZM12,4a7.87,7.87,0,0,1,3.86,1H8.14A7.87,7.87,0,0,1,12,4ZM5.76,7H18.24a8,8,0,0,1,1.69,4H4.07A8,8,0,0,1,5.76,7ZM12,20a8,8,0,0,1-7.93-7H19.93A8,8,0,0,1,12,20ZM8,8A1,1,0,1,0,9,9,1,1,0,0,0,8,8Zm6,0a1,1,0,1,0,1,1A1,1,0,0,0,14,8Zm-3,9.93a1,1,0,0,0,.49.13,1,1,0,0,0,.87-.51A3,3,0,0,1,15,16a1,1,0,0,0,0-2,5,5,0,0,0-4.37,2.57A1,1,0,0,0,11,17.93Z"></path>
</svg>
</span>
You can use any of text color helper to color icons.
<span class="zust-icon zust-text-pink">
<i class="fa fa-ice-cream"></i>
</span>
There are extra three predefined sizes. Use them by adding any of these classes - zust-small, zust-large and zust-xlarge.
<span class="zust-icon zust-small">
<i class="fab fa-font-awesome-flag"></i>
</span>
<span class="zust-icon">
<i class="fab fa-font-awesome-flag"></i>
</span>
<span class="zust-icon zust-large">
<i class="fab fa-font-awesome-flag"></i>
</span>
<span class="zust-icon zust-xlarge">
<i class="fab fa-font-awesome-flag"></i>
</span>
Icons are most important and most used element. There's no guarantee when you need custom size. So here comes the feature.
You can change icons size by using CSS variable, It's super easy. Use --icon-size to change the icon size. See the snippet below for better understanding.
Using inline style
Using CSS
<style>
.my-icon {
--icon-size: 30px;
}
</style>
<p>Using inline style</p>
<span class="zust-icon" style="--icon-size: 70px;">
<i class="fa fa-bicycle"></i>
</span>
<p>Using CSS</p>
<span class="zust-icon my-icon">
<i class="fa fa-book"></i>
</span>
You can wrap spinner inside icon. There are few more Spinners.
<span class="zust-icon">
<i class="zust-spinner"></i>
</span>
It includes few necessary icons, made with pure CSS. They can be used everywhere.
Caret
Angle
Menu & Close
<p>Caret</p>
<span class="zust-icon">
<i class="zust-caret-down"></i>
</span>
<span class="zust-icon">
<i class="zust-caret-up"></i>
</span>
<span class="zust-icon">
<i class="zust-caret-right"></i>
</span>
<span class="zust-icon">
<i class="zust-caret-left"></i>
</span>
<p>Angle</p>
<span class="zust-icon">
<i class="zust-angle-down"></i>
</span>
<span class="zust-icon">
<i class="zust-angle-up"></i>
</span>
<span class="zust-icon">
<i class="zust-angle-left"></i>
</span>
<span class="zust-icon">
<i class="zust-angle-right"></i>
</span>
<p>Menu & Close</p>
<span class="zust-icon">
<i class="zust-menu"></i>
</span>
<span class="zust-icon">
<i class="zust-close"></i>
</span>