Icons

Prompt comes with two icon libraries: Feather Icons and premium svg based two tones icons.

@@include("@@webRoot/assets/images/icons/duotone-icons/code/Compiling.svg")
@@include("@@webRoot/assets/images/icons/duotone-icons/code/Git#4.svg")
@@include("@@webRoot/assets/images/icons/duotone-icons/code/Github.svg")
@@include("@@webRoot/assets/images/icons/duotone-icons/code/Plus.svg")
@@include("@@webRoot/assets/images/icons/duotone-icons/code/Settings#4.svg")
@@include("@@webRoot/assets/images/icons/duotone-icons/code/Terminal.svg")
@@include("@@webRoot/assets/images/icons/duotone-icons/communication/Address-card.svg")
@@include("@@webRoot/assets/images/icons/duotone-icons/communication/Call#1.svg")
@@include("@@webRoot/assets/images/icons/duotone-icons/communication/Chat#1.svg")
@@include("@@webRoot/assets/images/icons/duotone-icons/communication/Clipboard-list.svg")
@@include("@@webRoot/assets/images/icons/duotone-icons/communication/Group-chat.svg")
@@include("@@webRoot/assets/images/icons/duotone-icons/communication/Mail-heart.svg")

You can check out all the available icons in folder /src/assets/images/icons/duotone-icons folder.

Example
                        @@include("@@webRoot/assets/images/icons/duotone-icons/communication/Mail-heart.svg")
Colors

Use text modifier class .text-* to style the icon. E.g. text-{primary|secondary|success|danger|info|warning}.

@@include("@@webRoot/assets/images/icons/duotone-icons/communication/Mail-heart.svg")
@@include("@@webRoot/assets/images/icons/duotone-icons/communication/Call#1.svg")
@@include("@@webRoot/assets/images/icons/duotone-icons/communication/Chat#1.svg")
@@include("@@webRoot/assets/images/icons/duotone-icons/communication/Clipboard-list.svg")
@@include("@@webRoot/assets/images/icons/duotone-icons/communication/Group-chat.svg")
Example
                        @@include("@@webRoot/assets/images/icons/duotone-icons/communication/Mail-heart.svg")
Sizes

Use size modifier class .icon-{xxs|xs|sm|md|lg|xl|xxl} to change the size.

@@include("@@webRoot/assets/images/icons/duotone-icons/general/Half-heart.svg")
@@include("@@webRoot/assets/images/icons/duotone-icons/general/Half-heart.svg")
@@include("@@webRoot/assets/images/icons/duotone-icons/general/Half-heart.svg")
@@include("@@webRoot/assets/images/icons/duotone-icons/general/Half-heart.svg")
@@include("@@webRoot/assets/images/icons/duotone-icons/general/Half-heart.svg")
@@include("@@webRoot/assets/images/icons/duotone-icons/general/Half-heart.svg")
@@include("@@webRoot/assets/images/icons/duotone-icons/general/Half-heart.svg")
Example
                        @@include("@@webRoot/assets/images/icons/duotone-icons/communication/Mail-heart.svg")
Feather Icons

Feather is a collection of simply beautiful svg based open source icons. Each icon is designed with an emphasis on simplicity, consistency, and flexibility. To use an icon on your page, add a data-feather attribute with the icon name to an element.

For a complete list of icons, check here.

Example

Use modifier class .icon-dual to convert it into two-tone. All the color variations are available as well. E.g. icon-dual-{primary|secondary|success|danger|info|warning}.

Use size modifier class .icon-{xxs|xs|sm|md|lg|xl|xxl} to change the size.