Rich Icon Library

All available rich icons in the icon library are shown below.

Use the correct size for each icon. Icons should be used at their original size.

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);
}

Click or tap on any icon to copy its filename.