Rich Icon Library

All rich icons in the Workleap icon library are available in three predefined sizes. To ensure consistency and clarity, always use the icons at one of these sizes. Avoid resizing icons to dimensions other than the provided options.

To integrate a rich icon into your project, simply import it from @hopper-ui/svg-icons in a JavaScript file:

import ActionListRichIcon from "@hopper-ui/svg-icons/action-list-32.svg";

or in a CSS file:

.my-component {
    background-image: url("@hopper-ui/svg-icons/action-list-32.svg");
}

The color of the rich icons can be changed by using the right CSS Variables. The following variables are available for your styling needs: --hop-RichIcon-placeholder-fill, --hop-RichIcon-placeholder-background and --hop-RichIcon-placeholder-shadow. You should use the appropriate decorative semantic tokens or status semantic tokens. The available options for Rich Icons are option1 to option8, success, warning, danger, information and upsell.

.actionListRichIcon {
    --hop-RichIcon-placeholder-background: var(--hop-color-decorative-option1);
}

You can preview rich icons in your preferred size. Simply click on an icon to instantly copy its name!