Icons

Icons have a size of 24x24 and a stroke width of 1.5px.

Installation

pnpm add jolty-icons

Usage

Icons use CSS masks, this means that you can change the color of icons through CSS properties color or background.

The set contains both base64 icons and svg.

To use base64, connect them to your main css file.

@import "jolty-icons/css/icon.css"; /* not necessary if jolty-ui is used */
@import "jolty-icons/css/icon-clipboard.css";

After connecting the styles, you can use icons in HTML through the class .ui-icon--{icon-name}

<div class="ui-icon ui-icon--clipboard"></div>

And also through CSS via variables. In this case, the --icon variable will be inherited by the .ui-icon class, so you can set it in the parent element.

<div class="my-component"><div class="ui-icon"></div></div>

.my-component {
  --ui-icon: var(--ui-icon-clipboard);
}

Custom icons

If you want to use your own set of icons, you can set the CSS variable --icon to the url of your icon.

.my-component {
  --ui-icon: url(/path/my-icon.svg);
}